fromanother
Marquee Hero
Loading
Vasa
Dusty rose editorial air, oversized soft serifs floating on warm parchment
Click any value to copy. Roles are suggestions, not gospel.
- #9f6f5foklch(58.7% 0.066 39)Dominant
- #cdb4acoklch(78.9% 0.031 39)Surface
- #523931oklch(37.1% 0.038 38)Ink
- #8e7c74oklch(60.0% 0.025 45)Accent
- #cdb4acoklch(78.9% 0.031 39)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Switzer Variable | 96px | 400 | 1.25 | -5.76px | Aa Bb Cc |
| h2 | Switzer Variable | 96px | 400 | 1 | -3.84px | Aa Bb Cc |
| h3 | Switzer Variable | 72px | 400 | 1.15 | -2.88px | Aa Bb Cc |
| body | Switzer Variable | 18px | 400 | 1.2 | 0 | Aa Bb Cc |
| button | Switzer Variable | 16px | 400 | 1.35 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #9f6f5f;
--color-surface: #cdb4ac;
--color-ink: #523931;
--color-accent: #8e7c74;
--color-detail: #cdb4ac;
}
/* CSS variables exposed by source */
:root {
--size: 0px;
--background-color--darker-a33<deleted|variable-2f5c6e21-5584-86f8-e63b-f18bd4ac4386>: #bf9a9154;
--400: #946862;
--0-a50: #ffffff80;
--circle-mask-top: 50%;
--transparent: transparent;
--100: #f4f2ee;
--300-a50: #bf9a9180;
--nav-radius: 99rem;
--nav-text: #9c6e67;
--strike: -4rem;
--circle-mask-left: 50%;
--300: #bf9a91;
--black: black;
--circle-mask-left-2: 50%;
--circle-mask-top-2: 50%;
--white: white;
--300-a20: #bf9a9133;
--nav-menu-radius: 99rem;
--200: #e3d5d1;
--500: #261917;
--pill-width: 4rem;
}Drop-in prompt
Build a landing page in the visual style of Vasa.
Reference design system (extracted from the live site):
- Palette: #9f6f5f, #cdb4ac, #523931, #8e7c74, #cdb4ac
- Typefaces: Switzer Variable
- Macrostructure: Marquee Hero
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/vasa-works
