Design system

Warm Local Editorial — paprika on cream.

One token set, three surfaces. Everything on this page is built by the same code the screens use, so if it looks right here it looks right everywhere. Contrast figures are measured by scripts/contrast.py.

Brand

The mark is a plate seen from above with a folded napkin: a laid table — Tafel. It sits in the paprika circle on the app icon and as ink on cream in the website header.

Mark + word
On ink
Voice

Order direct.
Restaurants keep 100%.

Direct, local, warm. German first, English fluent.

Colour

Warmth lives in the ground, not the type. Saffron is a fill, never text. Paprika text uses --paprika-ink.

Ink on cream

Brand and semantic

Dish tints

Status vocabulary

Six order states, one shape on every surface. Icon + text + colour, always.

Restaurant and subscription states

OnlinePausedPending approvalTrial · 12 months freeActivePast dueFlagged · 5d 12hPublishedAuto-translatedReviewed

Typography

Fraunces for display (variable, optical size and SOFT axes), Figtree for UI, DM Mono for identifiers. Self-hosted, latin subset, zero external requests.

Fraunces · d-xlGuten Appetit
Fraunces · d-mdBurger Bruder, Kreuzberg
Fraunces · t-24 · 600Smash Cheeseburger — 9,90 €
Figtree · t-28 · 600

Deine Bestellung ist unterwegs

Figtree · t-16 body

Zwei dünne Rinderpatties, doppelt Cheddar, karamellisierte Zwiebeln, Brioche-Bun. Two thin beef patties, double cheddar, caramelised onions, brioche bun.

Figtree · t-13 mutedLieferung 1,90 € · Min. 12,00 € · 20–30 Min. · 0,8 km
DM Mono · identifiersTF-4821 · WELCOME5 · DE89 •••• 3000 · pi_3Nq8Xf2eZ
Money · tabular1.234,50 €  /  €1,234.50

Space, radius, elevation

4px base. Controls are 44px; the kitchen uses 56–60px for the decisions that matter.

Space

Radius & elevation

xs 6sm 8md 12lg 16xl 242xl 32
e-1 card
e-2 float
e-3 modal

Controls

Every button is at least 44px tall. Primary is paprika with white; ink is for the brand surface; basil confirms money and completion; danger is soft until hovered.

Buttons
Inputs
Toggles, segments, steppers
Accept orders
Participate in OKTOBER15
Quantity2
Delivery radius · 4 km
Chips & tabs
DefaultPaprikaBasilSaffronPlumInfoDangerInkSolidM3
1Plan2Code3Store4Menu

Surfaces & data

Cards, panels, KPI tiles, tables. Numbers are tabular. Tables scroll inside their own wrapper, never the page.

Pending payouts · KW 367 restaurants
Derived from the same orders the restaurant wallet reads.
Pickup only · 2.3 kmSultan Döner delivers within 2 km. You can still order for pickup.
Code FREE12 appliedAnnual plan, €0 today. First invoice on 1 Jun 2027.
Auto-publishes in 5d 12hIf nobody acts, the flagged review goes live.
Why this matchedSimilar to “Cheeseburger” · In German: “Käseburger”
No live mapThe client did not ask for GPS tracking; status and chat keep the customer informed.

Food & restaurants

Line-drawn dish glyphs on warm tints stand in for photography and remain the loading and fallback state in production. The restaurant card derives its “Pickup only” badge live from radius and distance.

Dish rows and the modifier sheet

Größe Pflicht

Extras Optional

1

Orders

The same six states as a timeline on the phone and as a board on the iPad.

Timeline · TF-4821
Board cards
Chat
Alles klar, notiert. Ohne Zwiebeln!14:06
Danke! Bitte an der Tür klingeln.14:07
Der Chat wurde geschlossen, weil die Bestellung abgeschlossen ist.
Chat closed · order completed 14:32

Feedback

Toasts for the presenter, iOS-style push banners inside the phone for the story, sheets on the phone, modals and drawers on the console.

No active orders
New orders appear here with a sound.
Loading…

Kitchen surface

The restaurant iPad re-declares the tokens on [data-surface="kitchen"]: dark ground, brighter status colours, the same components.

New order · TF-4822 · 2× Bacon BBQ Burger
TF-4822New
Lukas M. · Delivery
2× Bacon BBQ Burger, 1× Truffle Fries
Paid · Card0:48
TF-4820Preparing
Sophie W. · Delivery
1× Crispy Chicken, 1× Rote-Bete, 2× Sweet Potato Fries
Paid · Klarna21:10
TF-4819Ready for pickup
David K. · Pickup · 4819
2× Smash Cheeseburger, 1× Limonade
Paid · Google Pay3:02
OnlineOn its way · Mehmet
Payout pending
1.941,30 €
Cash collected
412,50 €
Orders today
27
Commission
0 %

Iconography

One stroke set (Lucide-style, 24 viewBox, 1.8 stroke) and fifteen dish glyphs. No emoji are used as icons anywhere.

Dish glyphs

Bans, actively enforced

  • No emoji as icons. The SVG set only.
  • No external requests. scripts/check.py fails on one; the prototype opens from file:// with no wifi.
  • No saffron text and no paprika body text — both fail the contrast floor.
  • No colour-only status. Icon + text + colour, so a state survives greyscale and a bright kitchen.
  • No clamp() on product type. Fluid sizes belong to the brand surface.
  • No controls under 44px, no page-level horizontal scroll, no content behind fixed bars.