Verbindlich für alle Seiten

Delicious Berlin Design-System

Alle Festlegungen zu Schrift, Größe, Farbe und Abstand. Die Werte sind an den gebauten Seiten gemessen, nicht aus einer Vorlage übernommen.

Schriftfamilien: 1
Größen: 8
Textfarben: 2
Raster: 8px

Eine Familie für alles

Die Schrift

Lokal eingebunden · keine Verbindung zu Google

Brandon
Grotesque

Eine geometrische Grotesk: Die Buchstaben sind aus Kreis und Gerade konstruiert, die Ecken minimal gerundet. Das O ist ein fast perfekter Kreis, die x-Höhe niedrig. Dadurch wirkt sie in großen Größen ruhig und in gesperrten Versalien edel, statt technisch.

Gattung: Geometrische Grotesk, serifenlos
Entworfen von: Hannes von Döhren, HVD Fonts
Erschienen: 2010
Im Einsatz: Light 300 und Medium 400
Format: WOFF2, zusammen 92 KB
Herkunft: Aus dem Bestand der bisherigen Seite
Ersatzkette: system-ui, dann sans-serif

ABCDEFGHIJKLM
NOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890 äöüß & € % , . ·

Light 300

brandon-light.woff2 · 40 KB

Gin, Whisky & Rum

Verkostungen

Trägt die gesamte Seite: Überschriften, Fließtext, Navigation, Preise und Knöpfe.

Medium 400

brandon-medium.woff2 · 52 KB

Gin, Whisky & Rum

Verkostungen

Deklariert, aber ungenutzt. Der Browser holt die Datei erst bei Bedarf, sie kostet also nichts. Reserve für spätere Betonungen.

Warum durchgehend Light

Gesperrte Versalien bringen von sich aus Gewicht mit. Ein mittlerer Schnitt kippt darin sofort ins Schwere und wirkt wie fett gesetzt. Deshalb läuft auch die Navigation im Light-Schnitt. Gemessen an sieben Seiten: 1417 Textelemente in 300, fünf in 400 – und das sind die Einträge eines Aufklappmenüs, die das Betriebssystem selbst zeichnet.

Was wegfällt

Die heutige Seite lädt neben Brandon noch Lora als Serifenschrift und setzt an einzelnen Stellen Georgia. Beide sind im Relaunch raus. Lora kam von Google und hat bei jedem Seitenaufruf eine externe Verbindung geöffnet.

Brandon Grotesque · bleibt Lora Georgia

Acht Stufen, alle gerade

Größenskala

Alles in rem · nichts unter 14 px

3.75rem

60 px

text-6xl

Gin

Seitentitel H1 auf großen Schirmen, VERSAL

2.25rem

36 px

text-4xl

Gin

H1 auf Mobil, große Sektions-H2, VERSAL

1.875rem

30 px

text-3xl

Gin

Sektions-H2, Kennzahlen, Schrittnummern

1.5rem

24 px

text-2xl

Gin Tonic

Titel H3, Aufklapper-Kopf, gemischt

1.25rem

20 px

text-xl

49,90 €

Preis, Produkttitel auf Karten

1.125rem

18 px

text-lg

Fließtext

Fließtext, Intro, Zutatenzeilen

1rem

16 px

text-base

4 Zutaten · 7 Minuten

Meta, Breadcrumb, Grundpreis

0.875rem

14 px

text-sm

Zum Warenkorb

Label, Overline, Knöpfe, Navigation, VERSAL

Sperrung

Immer in em, nie in px, damit sie mit der Schriftgröße mitwächst. Gemessen kommen zwölf Werte vor, die häufigsten sind 0.20em an Knöpfen, 0.18em an Labels sowie 0.16em in der Ankündigungsleiste.

Versalien

Nur bei Seitentitel, Sektions-H2, Produkttitel, Label und Navigation. Alles andere läuft in Gemischtschrift, weil durchgehende Versalien den Lesefluss bremsen.

Zwei für Text, der Rest für Flächen

Farben

Neun Werte insgesamt

Text

ink

1A1714

Jeder Text auf hellem Grund. Vom Seitentitel bis zur Fußzeile dieselbe Farbe, ohne Abstufung.

paper

FDFCFA

Grundfläche der Seiten und zugleich die Textfarbe auf dunklem Grund.

Gold

gold-tief

836A27

Jeder Text in Gold und jede Knopffläche mit hellem Text. Erreicht die Barrierefreiheit.

gold

A88832

Nur noch Linien, Rahmen und Icons. Für reine Grafik gilt keine Kontrastvorgabe.

gold-dark

8F7329

Nur noch als Zwischenton in Verläufen. Als Textfarbe abgelöst.

gold-soft

C2A65B

Overlines und Preise auf dunklem Grund, etwa im Footer.

Flächen

espresso

1C130A

Footer, Ankündigungsleiste, dunkle Bühnen.

soft

F7F5F1

Abgesetzte Flächen, Panel-Fußleisten, Bildplatzhalter.

sand

F8F2E8

Ganze Sektionen, die sich vom Grund abheben sollen.

weiß

FFFFFF

Ausschließlich hinter Produktfreistellern.

Grundregel

Wenn etwas leiser wirken soll, wird es kleiner oder rückt nach unten. Es wird nicht blasser. Deshalb gibt es keine Deckkraft-Abstufungen auf Text und keine dritte, hellere Textfarbe.

Gemessen, nicht geschätzt

Kontraste

WCAG 2.1 · AA verlangt 4,5:1 bis 24 px Schriftgröße

Kombination	Probe	Verhältnis	Stufe
ink auf paper	Fließtext	17,41	AAA
ink auf sand	Fließtext	16,03	AAA
ink auf weiß	Produktname	17,85	AAA
paper auf espresso	Footer	17,86	AAA
gold-soft auf espresso	Overline	7,76	AAA
gold-tief auf paper	Overline	5,05	AA
gold-tief auf sand	Overline	4,65	AA
paper auf gold-tief	Knopf	5,05	AA

Umgesetzt am 1. August 2026

Gold auf hellem Grund wurde abgedunkelt

Der ursprüngliche Wert A88832 kam auf hellem Grund nur auf 3,29:1. Für die Overlines und Knopfbeschriftungen in 14 px verlangt WCAG AA aber 4,5:1. Der neue Wert 836A27 erreicht 5,05:1 auf paper und 4,65:1 auf sand. Nebeneinander:

Vorher · 3,29:1 Jetzt · 5,05:1

Geändert wurde nur Text in Gold und die Fläche unter hellem Text, also Knöpfe und aktive Filterchips. Linien, Rahmen und Icons behalten das Markengold A88832 – für reine Grafik gilt die Textregel nicht. Geprüft über neun Seiten mit 1907 Textelementen: keines mehr unter der Schwelle.

Achter-Basis mit Vierer-Halbschritt

Abstände

Jeder Wert ist durch vier teilbar

Sektionen und Container

48 · 56 · 64 · 80 · 96

Trennt ganze Themenblöcke. Auf Mobil die kleineren Werte, ab 1024 px die größeren.

Komponenten und Raster

16 · 24 · 32 · 40

Abstand zwischen Karten und Spalten sowie zwischen den Blöcken einer Sektion.

Innerhalb einer Komponente

4 · 8 · 12 · 20 · 28

Der Vierer-Schritt ist bewusst erlaubt: Kategorie und Produkttitel gehören zusammen und dürfen nicht acht Pixel auseinanderstehen.

Nicht benutzen

Halbschritt-Klassen wie mt-1.5, py-3.5 oder p-2.5 ergeben 6, 14 und 10 px und fallen aus dem Raster. Ebenso Pixel-Hardcodes bei Schriftgrößen.

Aus dem Feedback entstanden

Feste Regeln

Kein grauer Text

Zwei Textfarben, keine Deckkraft-Abstufung. Hierarchie entsteht über Größe und Position.

Keine fetten Schnitte

Alles läuft in Light. Gesperrte Versalien wirken sonst wie fett gesetzt.

Freisteller auf Weiß

Produktfotos sind weiß ausgestanzt. Auf Creme zeichnet sich sonst ein Kasten ab.

Keine Wertungen

Keine Label wie Empfehlung oder Bestseller. Wir sagen, was es ist, die Auswahl trifft der Kunde.

Filter von oben

Mechanik wie das Mega-Menü, alle Gruppen offen. Keine Kategorieleiste auf der Kategorieseite.

Nichts unter 14 px

Gilt auch in Fußzeile, Bildunterschrift und Rechtstexten.

Vor jeder Abgabe

Prüfliste

Neun Punkte, die vor dem Zeigen durchgegangen werden. Die ersten sechs prüft ein Skript beim Speichern automatisch mit.

01Nur Brandon Grotesque, kein zweiter Schriftabruf
02Alle Gewichte auf 300
03Keine Größe außerhalb der acht Stufen, nichts unter 14 px
04Kein Abstand außerhalb des Vierer-Rasters, keine Halbschritt-Klassen
05Kein Grau, keine Deckkraft auf Text, Preise in ink statt Gold
06Produktfreisteller auf weißer Fläche
07Kein waagerechter Überlauf bei 375, 768, 1024 und 1440 px
08Kein Text läuft aus seinem Rahmen, auch nicht bei langen Markennamen
09Abstand zum Footer vorhanden oder eigene Fläche, die die Grenze setzt