Tokens

Every value of the Mampfio design system, from design/tokens.json. Pages that load the Component Library get them as CSS custom properties: color: var(--ink), padding: var(--space-4), font: var(--text-body). Colours switch with data-theme; everything else is the same in both themes.

Colour

Token	Light	Dark	Use
`--surface`	#fff4e8	#22101c	Page background (cream). Default ground for everything.
`--surface-raised`	#ffffff	#3a1530	Cards, sheets and dialogs above surface.
`--surface-sunken`	#f6e3d3	#2d1525	Set-apart areas: filter bars, footer, icon backgrounds.
`--ink`	#3a1530	#fff4e8	Body text and headings on surface, surface-raised and surface-sunken (≥ 12:1).
`--ink-muted`	#6e4a62	#d9bfcb	Secondary text: delivery time, metadata, help text. ≥ 5.9:1 on every surface token.
`--line`	#ead3c3	#4a2340	Decorative dividers. Not for form field borders (too little contrast).
`--control-border`	#6e4a62	#b795a8	Borders of input fields, checkboxes and secondary buttons (≥ 3:1).
`--action`	#c2255f	#f06a98	Primary buttons, active tabs, count badges such as the basket count. Exactly one primary action per screen.
`--on-action`	#fff4e8	#3a1530	Text and icons on action (5.2:1 light, 5.4:1 dark).
`--link`	#b0245a	#f06a98	Text links on surface and surface-raised (≥ 5.4:1).
`--focus`	#b0245a	#f06a98	Focus ring, 3 px wide with a 2 px offset from the element.
`--cheese`	#ffcb45	#ffcb45	Highlight: offer badges, new markers, stars. Text on it is always on-cheese.
`--on-cheese`	#3a1530	#3a1530	Text on cheese, in both themes (10:1).
`--error`	#c0392b	#ff8a7a	Error text and error borders, always with an icon and text, never colour alone.
`--success`	#2e7d4f	#6fd49a	Confirmations: order accepted, rider on the way.

Type

Sample	Class and variable	Size / line, weight	Use
Hunger? Mampfio.	`.mf-display-xl` `--text-display-xl`	64px / 64px, 800, -0.02em `display`	Landing page hero, at most one line per screen.
Pizza in deiner Nähe	`.mf-display-l` `--text-display-l`	44px / 48px, 800, -0.015em `display`	Page titles.
Beliebt in Köln-Ehrenfeld	`.mf-heading` `--text-heading`	28px / 34px, 800 `display`	Section headings.
Trattoria Bella	`.mf-heading-s` `--text-heading-s`	20px / 26px, 800 `display`	Restaurant names on cards, dialog titles.
Wir bringen dir dein Lieblingsessen – heiß und pünktlich.	`.mf-body-l` `--text-body-l`	18px / 28px, 400 `sans`	Introductions, marketing copy.
Margherita mit Büffelmozzarella und Basilikum	`.mf-body` `--text-body`	16px / 24px, 400 `sans`	Default body text, dish descriptions.
12,50 €	`.mf-body-strong` `--text-body-strong`	16px / 24px, 700 `sans`	Prices, emphasis in body text.
In den Warenkorb	`.mf-label` `--text-label`	14px / 20px, 700 `sans`	Buttons, tabs, form labels.
25–35 Min · 1,99 € Lieferung	`.mf-caption` `--text-caption`	13px / 18px, 600 `sans`	Metadata in ink-muted. Never smaller than 13 px.

Families

Family	Variable	Stack
`display`	`--font-display`	`"Baloo 2", "Nunito Sans", system-ui, sans-serif`
`sans`	`--font-sans`	`"Nunito Sans", system-ui, sans-serif`

Spacing

Token	Value	Use
`--space-1`	`4px`	Gap between icon and label.
`--space-2`	`8px`	Gap between badges, tight lists.
`--space-3`	`12px`	Padding of chips and small buttons.
`--space-4`	`16px`	Card padding, mobile page margin.
`--space-6`	`24px`	Gap between cards.
`--space-8`	`32px`	Desktop page margin.
`--space-12`	`48px`	Gap between sections.
`--space-16`	`64px`	Hero padding.

Radius

Token	Value	Use
`--radius-s`	`8px`	Input fields, badges.
`--radius-m`	`14px`	Buttons, chips.
`--radius-l`	`24px`	Cards, images, sheets, app icon (24 on 100).
`--radius-pill`	`999px`	Filter pills, quantity stepper.

Shadow

Token	Light	Dark	Use
`--shadow-card`	`0 1px 0 rgba(58,21,48,0.06), 0 8px 24px rgba(58,21,48,0.08)`	`0 1px 0 rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35)`	Cards above surface. The only shadow level.

Brand and illustration only

These come from the logo. They are not for interfaces: no text, backgrounds, borders or shapes in a UI.

Token	Value	Use
`--brand-berry`	#d6336c	Logo face and illustrations. NEVER a text colour or a background for small text: cream on it is only 4.3:1.
`--crust`	#e09a3a	Illustration only (pizza crust, crumbs). No UI use.
`--pepperoni`	#c0392b	Illustration only (pepperoni). Use error for errors.
`--radius-mark`	`32%`	Logo face only (rx 30 on 92). Not for UI.