Foundations
Three card colours, each in three steps. The light and dark steps are derived from your base colour in OkLCH at constant hue, so the same step means the same thing in all three — and every dark step lands on exactly 7:1 against white.
Off-white is a warm neutral, not a green tint — it gives the cool greens something to sit against and reads as paper rather than as a weak green.
The rule
Green shades appear only with white and off-white. Pink and blue are card and illustration colours only — they never appear as site chrome, buttons, links, headings or section bands. The card the customer is designing must be the most colourful thing on the screen.
The base row is the colour behind the logo on the printed card. The dark step exists so a pink or blue card can still carry a legible outline or label on the card itself.
Ink, muted and line each carry a trace of the green hue rather than being pure grey, so the neutrals read as part of the family instead of borrowed.
Foundations
Which text colour is allowed on which surface. Every combination marked AA passes WCAG at body-text size; lg passes only at 24px or 19px bold and above.
| Text | on White | on Off-white | on Green light | on Green dark |
|---|---|---|---|---|
Ink #1C211C | 16.36:1 AA | 14.88:1 AA | 14.69:1 AA | 2.34:1 no |
Muted #677067 | 5.13:1 AA | 4.67:1 AA | 4.61:1 AA | 1.42:1 no |
Green dark #3D623B | 6.98:1 AA | 6.35:1 AA | 6.27:1 AA | — |
White #FFFFFF | — | — | — | 6.98:1 AA |
Alert #E32226 | 4.64:1 AA | 4.22:1 lg | 4.17:1 lg | 1.50:1 no |
Green #80A57D | 2.76:1 fills only | 2.51:1 fills only | 2.48:1 fills only | 2.53:1 fills only |
Two things this table decides for you
Base green #80A57D never carries text at any size — it is a fill colour. And alert red belongs on white; on the tinted surfaces keep it for icons and large text, never a sentence.
Ink on white
Zeige beim Bestellen deinen Kitchen Guide vor und gib ihn mit in die Küche.
Green dark on off-white
Gut und sicher essen.
Ink and muted on green light
Deine Allergene
Wähle die Lebensmittelallergene aus.
White on green dark
Jetzt bestellen — in zwei Minuten konfiguriert.
Typography
Archivo does the work of a whole family. It is one variable file carrying weight 100–900 and width 62–125 %, so text can be compressed to fit a fixed box on the card without changing typeface — the thing Acumin Variable Concept was being used for, under a licence that costs nothing and can be handed to a printer.
Same file, same size, same weight. On the card this is how a long name is made to fit its box — dial the width down rather than shrinking the type or switching to a condensed family.
Four weights are enough for the whole system. Umlauts and ß are covered — Archivo carries 641 glyphs across 200+ languages, so German needs no fallback.
Caveat replaces the Adobe-hosted dolce. It is a variable handwriting face (weight 400–700) with full German coverage, legible at card size, and free to embed in a print file. It is used for the customer's name on the card only — never for web copy, never for headings.
The name is always #322F82, on all three card colours. It is the one element that does not take its colour from the card — holding it constant is what makes a green, a blue and a pink card read as the same document rather than three different products.
Typography
Most sizes are fluid — they scale continuously with the window between a minimum and a maximum, so a single number would be wrong more often than right. Both ends are given. Where desktop and phone use different scales, both are listed.
Components
Every interactive element in its resting, selected, focused and unavailable state. Focus is shown as a permanent state here; in use it appears on keyboard navigation only. Hover is the only state that changes colour: primary darkens to ink, secondary lifts into the green tint, pills and chips take a green edge. Focus never moves the fill — it adds a soft green halo hugging the edge, and it is the only state that does, so a focused pill can never be mistaken for a selected one. The quiet button is the single exception: it focuses by filling with light green rather than by halo.
Button — primary
Button — secondary
Button — quiet
Pill — package choice
Chip — allergen, unselected + selected
Field — default, focus, error
Click a card to select it
Selected takes a thicker border in its own dark step — never a green ring around a blue card. These are live — click one and it takes its own dark step: green #3D623B, blue #2A5E7E, pink #913C5B, never a green ring around a blue card. Unselected takes the same soft line the allergen chips rest on, so the two controls read as one system. Selecting thickens that same line rather than adding a second one, which is why the swatch never changes size between states. Each dark step sits at 7:1 against the white behind it, which is what makes the selection read from across the row; against its own fill the green is the weakest of the three at 2.52:1, so it leans on that outer edge more than blue or pink do.
Die Karte passt in jede Brieftasche und ist sofort zur Hand.
Achtung, der Verzehr hier aufgeführter Allergene kann auch in kleinsten Mengen lebensbedrohlich für mich sein.
Red is reserved for allergy meaning under EU 1169/2011. It is never used for a delete button, a sale badge or an accent.
Handover
Drop-in for the website today, and the same names carry over to the app. Nothing here is platform-specific.
/* Kitchen Guide — design tokens v1.0 */ :root { /* Surfaces — website chrome */ --kg-white: #FFFFFF; --kg-offwhite: #F7F4EC; --kg-green-light: #EAF6E9; --kg-green: #80A57D; /* fills only, never text */ --kg-green-dark: #3D623B; /* text, buttons, borders */ /* Card + illustration only — never site chrome */ --kg-pink-light: #FFECF1; --kg-pink: #ED93B0; --kg-pink-dark: #913C5B; --kg-blue-light: #E5F4FF; --kg-blue: #94C7EA; --kg-blue-dark: #2A5E7E; --kg-name-blue: #322F82; /* printed name, all 3 cards */ /* Neutrals + semantic */ --kg-ink: #1C211C; --kg-muted: #677067; --kg-line: #DAE0D9; --kg-alert: #E32226; /* allergy meaning only */ /* Type */ --kg-font: 'Archivo', Helvetica, Arial, sans-serif; --kg-font-hand: 'Caveat', cursive; --kg-text-claim-d: clamp(26px, 4.6vw, 82px); --kg-text-claim-m: clamp(26px, 8vw, 44px); --kg-text-hero-sub-d:clamp(17px, 2.3vw, 30px); --kg-text-hero-sub-m:clamp(15px, 4.4vw, 22px); --kg-text-h2: clamp(28px, 4vw, 36px); --kg-text-h3: clamp(20px, 2.2vw, 26px); --kg-text-step-num: clamp(22px, 2.4vw, 28px); --kg-text-step-ttl: clamp(15px, 1.6vw, 18px); --kg-text-lead: clamp(17px, 2vw, 20px); --kg-text-body: 16px; --kg-text-btn: 15px; --kg-text-ui: 14px; --kg-text-label: 12px; --kg-text-micro: 10px; /* Width axis — the display/body split is a width, not a family */ --kg-wdth-display: 80; --kg-wdth-title: 90; --kg-wdth-body: 100; --kg-radius-btn: 8px; --kg-radius-card: 10px; --kg-radius-pill: 100px; }
Loading the fonts
Both faces are on Google Fonts under the SIL Open Font License — free for the website, the print files, the app, and to hand to a printer or to anyone else. Request Archivo with both axes so the width axis is actually available: family=Archivo:wdth,wght@62..125,100..900. Asking for the weight alone silently gives you a fixed-width font.