Bevel
Marquee Hero
Loading
Alma · Pricing
Mossy sage minimalism, soft rounded corners floating on warm cream paper
Click any value to copy. Roles are suggestions, not gospel.
- #f95f30oklch(68.0% 0.198 37)Dominant
- #f1d471oklch(87.4% 0.123 93)Surface
- #84240coklch(41.1% 0.135 34)Ink
- #958b57oklch(63.3% 0.072 99)Accent
- #a9d4ceoklch(83.8% 0.046 186)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | GT Alpina Condensed | 56px | 300 | 1.07 | 0 | Aa Bb Cc |
| h2 | GT Alpina Condensed | 36px | 300 | 1.17 | 0 | Aa Bb Cc |
| h3 | GT Alpina Condensed | 22px | 400 | 1.18 | 0 | Aa Bb Cc |
| body | HAL Four Grotesk | 18px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | HAL Four Grotesk | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
:root {
--color-dominant: #f95f30;
--color-surface: #f1d471;
--color-ink: #84240c;
--color-accent: #958b57;
--color-detail: #a9d4ce;
}
/* CSS variables exposed by source */
:root {
--alma-button-shadow-hover: 0 10px 18px -10px #0000003d, inset 0 0 0 1px #0003;
--alma-font-display: "GT Alpina Condensed", serif;
--alma-color-kiwi: #aadf49;
--alma-color-collard: #3c5627;
--alma-color-aioli: #f7f5ed;
--alma-button-gradient-hover: linear-gradient(to bottom, #4b6b31, #30451f);
--alma-button-gradient: linear-gradient(to bottom, #45632d, #2b3d1c);
--content-padding: 80px;
--content-max-width: 1200px;
--content-padding-mobile: 40px;
--alma-button-shadow: 0 15px 14px -10px #00000026, inset 0 0 0 1px #0003;
--alma-font-body: "HAL Four Grotesk", sans-serif;
--alma-focus-ring: 0 0 0 3px #aadf49a6;
--alma-color-teriyaki: #33140c;
--alma-color-yogurt: #fffdf5;
--alma-color-surface: #fffefc;
--alma-color-muted: #a1a1a1;
}Drop-in prompt
Build a landing page in the visual style of Alma · Pricing.
Reference design system (extracted from the live site):
- Palette: #f95f30, #f1d471, #84240c, #958b57, #a9d4ce
- Typefaces: GT Alpina Condensed, HAL Four Grotesk
- 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/alma-food--premium
