№ alma-food--about

Alma · About

Mossy sage minimalism, soft rounded corners floating on warm cream paper

Marquee Heroeditorial playful health ailight

A soft, organic layout featuring a grid of colorful food illustrations above a centered, serif-driven narrative. The use of a floating dark green navigation bar provides a sharp contrast to the cream-toned background. · nutrition app about page, editorial health layout, soft earthy color palette, serif typography narrative, food illustration grid

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: earthy · pastel · muted

SwatchHexOKLCHSuggested roleCopy

Hex#f7a430
OKLCHoklch(78.3% 0.155 70)
RoleDominant
find sites →
Hex#fcb4b4
OKLCHoklch(83.7% 0.084 19)
RoleSurface
find sites →
Hex#8f3e18
OKLCHoklch(46.6% 0.121 43)
RoleInk
find sites →
Hex#659499
OKLCHoklch(63.5% 0.051 204)
RoleAccent
find sites →
Hex#d2b0a5
OKLCHoklch(78.4% 0.043 39)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	GT Alpina Condensed	56px	300	1.07	Aa Bb Cc
h2	GT Alpina Condensed	32px	300	1.13	Aa Bb Cc
h3	HAL Four Grotesk	18px	400	1.4	Aa Bb Cc
body	HAL Four Grotesk	18px	400	1.4	Aa Bb Cc
button	HAL Four Grotesk	16px	500	1.4	Aa Bb Cc

Spacing scale

10px

40px

80px

100px

Radius scale

0px

15px

16px

20px

24px

40px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #f7a430;
  --color-surface: #fcb4b4;
  --color-ink: #8f3e18;
  --color-accent: #659499;
  --color-detail: #d2b0a5;
}

/* CSS variables exposed by source */
:root {
  --alma-button-shadow-hover: 0 10px 18px -10px #0000003d, inset 0 0 0 1px #0003;
  --alma-color-kiwi: #aadf49;
  --alma-font-display: "GT Alpina Condensed", serif;
  --alma-color-collard: #3c5627;
  --alma-button-gradient-hover: linear-gradient(to bottom, #4b6b31, #30451f);
  --alma-color-aioli: #f7f5ed;
  --alma-button-gradient: linear-gradient(to bottom, #45632d, #2b3d1c);
  --content-max-width: 1200px;
  --content-padding: 80px;
  --content-padding-mobile: 40px;
  --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;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Alma · About.
Reference design system (extracted from the live site):
- Palette: #f7a430, #fcb4b4, #8f3e18, #659499, #d2b0a5
- 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--about

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

GT Alpina Condensed

56px

300

1.07

Aa Bb Cc

GT Alpina Condensed

32px

300

1.13

Aa Bb Cc

HAL Four Grotesk

18px

400

1.4

Aa Bb Cc

body

HAL Four Grotesk

18px

400

1.4

Aa Bb Cc

button

HAL Four Grotesk

16px

500

1.4

Aa Bb Cc

:root { --color-dominant: #f7a430; --color-surface: #fcb4b4; --color-ink: #8f3e18; --color-accent: #659499; --color-detail: #d2b0a5; } /* CSS variables exposed by source */ :root { --alma-button-shadow-hover: 0 10px 18px -10px #0000003d, inset 0 0 0 1px #0003; --alma-color-kiwi: #aadf49; --alma-font-display: "GT Alpina Condensed", serif; --alma-color-collard: #3c5627; --alma-button-gradient-hover: linear-gradient(to bottom, #4b6b31, #30451f); --alma-color-aioli: #f7f5ed; --alma-button-gradient: linear-gradient(to bottom, #45632d, #2b3d1c); --content-max-width: 1200px; --content-padding: 80px; --content-padding-mobile: 40px; --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; }

Build a landing page in the visual style of Alma · About. Reference design system (extracted from the live site): - Palette: #f7a430, #fcb4b4, #8f3e18, #659499, #d2b0a5 - 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--about