Audocph
Photographic
Loading
Click any value to copy. Roles are suggestions, not gospel.
- #f7b53boklch(81.5% 0.151 78)Dominant
- #f4e2b4oklch(91.6% 0.063 89)Surface
- #1e140coklch(20.2% 0.022 60)Ink
- #579aa7oklch(64.7% 0.071 212)Accent
- #c2b1aeoklch(77.4% 0.020 30)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | arizona-flare | 26px | 400 | 1.2 | -1px | Aa Bb Cc |
| h3 | arizona-flare | 26px | 400 | 1.2 | -1px | Aa Bb Cc |
| body | oracle | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | oracle | 16px | 400 | 1.88 | 0 | Aa Bb Cc |
Max content width 1418px
:root {
--color-dominant: #f7b53b;
--color-surface: #f4e2b4;
--color-ink: #1e140c;
--color-accent: #579aa7;
--color-detail: #c2b1ae;
}
/* CSS variables exposed by source */
:root {
--trade-banner-height: 0px;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-skew-x: 0;
--swiper-navigation-size: 44px;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--lb-spc-border-radius: 6px;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--tw-border-spacing-x: 0;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--lb-prod-prev-border-radius: 8px;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-translate-y: 0;
--swiper-theme-color: #95A3B7;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Velora Home.
Reference design system (extracted from the live site):
- Palette: #f7b53b, #f4e2b4, #1e140c, #579aa7, #c2b1ae
- Typefaces: arizona-flare, oracle
- Macrostructure: Photographic
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/velorahome-com
