Loewe
Photographic
Loading
Chloe
Pale sand and bone-white lace, airy serif whispers in a vast, sun-drenched stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #b86a46oklch(60.4% 0.112 45)Dominant
- #341e14oklch(26.1% 0.039 45)Surface
- #dab19foklch(79.2% 0.054 45)Ink
- #6e3f2aoklch(42.0% 0.074 44)Accent
- #6e3f2aoklch(42.0% 0.074 44)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | futura-book | 25px | 400 | 1.2 | 0 | Aa Bb Cc |
| h3 | futura-book | 25px | 400 | 1.2 | 0.496px | Aa Bb Cc |
| body | futura-book | 15px | 400 | 1.34 | 0 | Aa Bb Cc |
| button | futura-book | 12px | 400 | 1 | 3px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #b86a46;
--color-surface: #341e14;
--color-ink: #dab19f;
--color-accent: #6e3f2a;
--color-detail: #6e3f2a;
}
/* CSS variables exposed by source */
:root {
--color-grey3: #d9d9d9;
--color-grey6: #404040;
--color-menu-link: #404040;
--text-transform-h5: uppercase;
--color-link-color: #404040;
--color-grey2: #e6e6e6;
--color-slightly-darker-gray: #a9a9a9;
--color-grey-transparent-2: rgba(0,0,0,.25);
--color-dark-gray: #404040;
--color-white: #fff;
--color-horizontal-rule-grey: #d9d9d9;
--color-close-menu-bg: #e6e6e6;
--color-grey7: #272727;
--color-grey1: #f2f2f2;
--color-horizontal-border-grey: #a9a9a9;
--color-red: #eb0000;
--color-green: #10b981;
--color-blue: #00629b;
--color-light-gray: #f2f2f2;
--color-danger: #eb0000;
--color-product-number-grey: #d9d9d9;
--color-grey5: #737578;
--color-grey8: #a5a5a5;
--color-hr-border-color: #d9d9d9;
--font-family-sans-serif: futura-book,helvetica,arial,sans-serif;
--color-success: #10b981;
--color-grey-transparent-1: rgba(0,0,0,.65);
--color-light-blue: #e5eff5;
--color-darker-gray: #272727;
--color-primary: #272727;
--color-black: #000;
--font-family-monospace: futura-book,helvetica,arial,sans-serif;
--color-grey4: #a9a9a9;
--primary: #272727;
--secondary: #6c757d;
--pswp-background-color: #fff;
--gold: #8f7144;
--tw-ring-shadow: 0 0 transparent;
--rcc-colors-danger: #840b15;
--pink: #e83e8c;
--breakpoint-xxl: 1441px;
--rcc-colors-gray-very-light: #e6e6e6;
--breakpoint-xs: 0;
--lh-h5: 1.063rem;
--rcc-colors-white: #fff;
--success: #10b981;
--off-white: #f9f9f9;
--red: #eb0000;
--skin-selectbox-background-color-1: #fff;
--mid-grey: #6f6f6f;
--neutral-pale-grey: #e6e6e6;
--breakpoint-xl: 1200px;
--tw-border-spacing-x: 0;
--rcc-colors-text: #222;
--skin-primary-color-invert-1: #fff;
--tw-ring-color: rgba(59,130,246,.5);
--warning: #ffc107;
--breakpoint-xlarge: 1920px;
--lh-base-font: 1.25rem;
--rcc-colors-gray-light: #ccc;
}Drop-in prompt
Build a landing page in the visual style of Chloe.
Reference design system (extracted from the live site):
- Palette: #b86a46, #341e14, #dab19f, #6e3f2a, #6e3f2a
- Typefaces: futura-book
- 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/chloe-com--en-us-c-jewelry
