Bevel
Marquee Hero
Loading
Alma
Mossy sage minimalism, soft rounded corners floating on warm cream paper
Click any value to copy. Roles are suggestions, not gospel.
- #c3d638oklch(83.5% 0.174 116)Dominant
- #f3b34foklch(80.8% 0.137 76)Surface
- #146c84oklch(49.4% 0.085 222)Ink
- #61929aoklch(62.8% 0.054 209)Accent
- #cecca1oklch(83.6% 0.057 105)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 | 500 | 1 | 0 | Aa Bb Cc |
| h2 | GT Alpina Condensed | 56px | 300 | 0.96 | 0 | Aa Bb Cc |
| h3 | HAL Four Grotesk | 12px | 500 | 1.4 | 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 |
Max content width 720px
:root {
--color-dominant: #c3d638;
--color-surface: #f3b34f;
--color-ink: #146c84;
--color-accent: #61929a;
--color-detail: #cecca1;
}
/* CSS variables exposed by source */
:root {
--alma-button-shadow-hover: 0 10px 18px -10px #0000003d, inset 0 0 0 1px #0003;
--content-padding-mobile: 40px;
--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;
--alma-font-body: "HAL Four Grotesk", sans-serif;
--alma-button-shadow: 0 15px 14px -10px #00000026, inset 0 0 0 1px #0003;
--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.
Reference design system (extracted from the live site):
- Palette: #c3d638, #f3b34f, #146c84, #61929a, #cecca1
- 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
