Belmond — About
Marquee Hero
Loading
Firsty
Electric lime punch, heavy Swiss blocks floating on stark optic white
Click any value to copy. Roles are suggestions, not gospel.
- #d9f837oklch(92.5% 0.203 119)Dominant
- #e0f478oklch(92.7% 0.151 117)Surface
- #6c8004oklch(56.4% 0.133 120)Ink
- #9da353oklch(69.3% 0.104 113)Accent
- #bebdc1oklch(80.0% 0.006 298)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | avantt | 120px | 900 | 0.85 | -2.4px | Aa Bb Cc |
| h2 | ppRightSlab | 40px | 400 | 1 | -0.32px | Aa Bb Cc |
| h3 | avantt | 48px | 900 | 0.95 | -0.48px | Aa Bb Cc |
| body | Inter Tight | 18px | 500 | 1.5 | 0.198px | Aa Bb Cc |
| caption | Inter Tight | 14px | 500 | 1.5 | 0.14px | Aa Bb Cc |
| button | Inter Tight | 16px | 500 | 1 | 0.16px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d9f837;
--color-surface: #e0f478;
--color-ink: #6c8004;
--color-accent: #9da353;
--color-detail: #bebdc1;
}
/* CSS variables exposed by source */
:root {
--font-pp-right-slab: "ppRightSlab","ppRightSlab Fallback";
--font-inter-tight: "interTight","interTight Fallback";
--font-avantt: "avantt","avantt Fallback";
--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;
--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;
--tw-ring-color: rgb(59 130 246/0.5);
--tw-translate-y: 0;
--swiper-theme-color: #007aff;
--tw-rotate: 0;
--tw-ring-offset-color: #fff;
}Drop-in prompt
Build a landing page in the visual style of Firsty.
Reference design system (extracted from the live site):
- Palette: #d9f837, #e0f478, #6c8004, #9da353, #bebdc1
- Typefaces: avantt, ppRightSlab, Inter Tight
- 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/firsty-app
