Loewe
Photographic
Loading
DUA™
Muted sage editorial, ethereal serif type floating in a vast airy void
Click any value to copy. Roles are suggestions, not gospel.
- #7d8876oklch(61.2% 0.030 133)Dominant
- #bbc1b7oklch(80.3% 0.015 133)Surface
- #41473doklch(38.9% 0.018 133)Ink
- #9f836foklch(63.1% 0.045 57)Accent
- #c7ccc4oklch(83.9% 0.012 133)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | PPEditorialNew-Ultralight | 48px | 400 | 1.1 | 0 | Aa Bb Cc |
| h2 | PPEditorialNew-Ultralight | 48px | 400 | 1.1 | 0 | Aa Bb Cc |
| h3 | Beausite Classic Clear | 16px | 700 | 1.4 | 0 | Aa Bb Cc |
| body | Times New Roman | 16px | 400 | 1.15 | 0 | Aa Bb Cc |
| button | Beausite Classic Clear | 16px | 400 | 1.4 | 0.4px | Aa Bb Cc |
Max content width 1512px
:root {
--color-dominant: #7d8876;
--color-surface: #bbc1b7;
--color-ink: #41473d;
--color-accent: #9f836f;
--color-detail: #c7ccc4;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--header-height: -69px;
--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;
--tw-scroll-snap-strictness: proximity;
--tw-border-spacing-x: 0;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--tw-scale-y: 1;
--tw-skew-y: 0;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-translate-y: 0;
--swiper-theme-color: #007aff;
--tw-rotate: 0;
--tvg_accordion_carousel_single_media_YKFOVq_transition-duration: 0s;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of DUA™.
Reference design system (extracted from the live site):
- Palette: #7d8876, #bbc1b7, #41473d, #9f836f, #c7ccc4
- Typefaces: PPEditorialNew-Ultralight, Times New Roman, Beausite Classic Clear
- 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/duabyab-com
