Das System

Ein System.
Viel Geschmack.

Marken, Bausteine und wiederverwendbare Bauteile, die vom lauten Auftritt der Kampagne bis zur ruhigen Bestellstrecke reichen. Aufgeschrieben, damit die Haltung bleibt und die Oberfläche wartbar wird.

System durchgehen

Das System in Zahlenv1.0

28 benannte Bauteile

3 Schriftfamilien

5 benannte Flächen

AA+ geprüfter Kontrast

PlakatBangers

Oberfläche / Text Barlow Condensed

Kapitel 01 · Fundamente

01 — Haltung

Ein modulares System.

Keine Sammlung von Seiten.

01

Der Appetit zuerst

Kampagnenflächen sind laut, groß und vom Produkt geführt. Alles, was der Gast bedienen muss, bleibt ruhig und erfüllt seinen Zweck ohne Zierrat.

02

Klare Bestellstrecke

Karte, Warenkorb, Standort und Bezahlung nutzen helle Flächen, schmale Typografie und zurückhaltende Textur, damit der Blick den Weg findet.

03

Eine Sprache

Rot, Senf, Creme, Bangers, schmale Grotesk, gerissene Kanten und Akzente aus dem Druck verbinden alle Teile der Seite miteinander.

02 — Aufbau des Stylesheets

Drei Schichten, eine Reihenfolge.

Schicht	Enthält	Beispiel
1. Fundamente	Schriften, Merkmale, Grundstile	`:root`, `body`, `.kr-plakat`
2. Komposition	Container, Raster, Abschnitte, Flächen	`.kr-breite`, `.kr-abschnitt`, `.kr-flaeche-rot`
3. Bauteile	Bauteile mit allen Zuständen	`.kr-knopf`, `.kr-produkt`, `.kr-korb`
4. Hilfen	Einzelzwecke, ganz zum Schluss	`.kr-nur-leser`, `.kr-mitte`

Namensregel: Bauteile der Seite tragen das Präfix kr-. Klassen, die es nur in dieser Dokumentation gibt, tragen ds-. Innerhalb eines Bauteils gilt __element und --variante.

Umkehrregel: Jede dunkle Fläche trägt zusätzlich kr-auf-rot, jede orange Fläche kr-auf-orange. Alle Farbumkehrungen hängen an diesen zwei Klassen — eine neue farbige Sektion wird dort eingetragen, nicht mit eigenen Regeln versehen.

03 — Farbe

Eine kompakte Palette.

Gebaut, um Appetit zu machen.

Marke

#6E120E

Rot tiefvar(--rot-tief)Kampagnenflächen, Kopfbereich, Fuß

#A82814

Rotvar(--rot)Logo, Preise, Überschriften auf Hell

#82190D

Rot dunkelvar(--rot-dunkel)Nur große Schrift auf Orange

#EE8B33

Orangevar(--orange)Aktion und Akzent — trägt dunkle Schrift

#F9DFB2

Senfvar(--senf)Promo-Bänder, Produktgrund

Fläche

#FAF4EA

Papiervar(--papier)Grundfläche der Seite

#F3E7D4

Papier warmvar(--papier-warm)Zweite Ebene, Beweisreihe

#FFFCF6

Cremevar(--creme)Karten auf Papier

#241408

Tintevar(--tinte)Text und dunkle Knöpfe

#6B5340

Tinte weichvar(--tinte-weich)Nebentext, Etiketten

Signal und Linie

#2F7A46

Grünvar(--gruen)Geöffnet, bestätigt

#B4530E

Warnungvar(--warn)Formularfehler

#9C8163

Linie aktivvar(--linie-aktiv)Rand von Bedienelementen, 3,4:1

#E2D3BC

Linievar(--linie)Zierlinie, nie an Bedienelementen

Geprüfte Paare

Paar	Verhältnis	Stufe
Tinte auf Papier	`16,3 : 1`	AAA
Rot auf Papier	`6,4 : 1`	AA
Cremeweiß auf Rot tief	`11,3 : 1`	AAA
Tinte auf Orange	`7,1 : 1`	AAA
Senf auf Tinte	`13,8 : 1`	AAA
Tinte weich auf Papier	`6,5 : 1`	AA
Grün auf Creme	`5,1 : 1`	AA
Weiß auf Orange	`2,5 : 1`	verboten

Weiß auf Orange fällt durch und ist im System gesperrt. Orange Flächen tragen immer Tinte. Große Plakatschrift auf Orange darf Rot dunkel nutzen.

04 — Typografie

Eine Stimme, drei Schnitte.

Plakat · Bangers Hunger

Kurze, laute Zeilen. Ein bis drei Wörter. Nie im Fließtext, nie in Formularetiketten, nie unter 24 px.

Oberfläche · Barlow Condensed Krustenpommes

Alles Bedienbare: Karte, Warenkorb, Formulare, Standorte. 400 bis 700, Zeilenhöhe 1,55 im Fließtext.

Marke · Lobster Two Kruste.

Ausschließlich der Namenszug. Nie für Überschriften, nie für Fließtext, nie ohne den Punkt am Ende.

Größen

Klasse	Größe	Einsatz
`.kr-t-xxl`	`clamp(3.2rem, 8.4vw, 7.2rem)`	Kopfbereich der Startseite, ein Mal pro Seite
`.kr-t-xl`	`clamp(2.6rem, 6.2vw, 5rem)`	Abschnittsüberschriften der Kampagne
`.kr-t-lg`	`clamp(2rem, 4.2vw, 3.4rem)`	Zweite Ebene, Fußzeile
`.kr-etikett`	13 px · Sperrung 0,16 em	Kleines Etikett über der Überschrift

05 — Raum, Radien, Schatten

Eine Skala im 4-px-Takt.

Mit weitem Atem für die Kampagne.

Raumskala

--raum-14 px

--raum-28 px

--raum-312 px

--raum-416 px

--raum-624 px

--raum-832 px

--raum-1248 px

--raum-1664 px

--raum-2496 px

Abstand zwischen Abschnitten

`--raum-4` bis `--raum-6`	Innerhalb eines Bauteils
`--raum-8` bis `--raum-12`	Zwischen Bauteilen einer Gruppe
`--raum-16` bis `--raum-24`	Zwischen Inhalt und Kampagne
`clamp(56px, 8vw, 104px)`	Innenabstand eines Abschnitts

Radien und Erhebung

SM · 4 px

Aktion · 12 px

MD · 16 px

LG · 20 px

Schatten SM

Schatten MD

Schatten LB

06 — Komposition

Container ordnen.

Damit die Kampagne atmen kann.

Containerbreiten

`.kr-breite--sm`	48 rem	Formulare, enge Textblöcke
`.kr-breite--md`	72 rem	Redaktionelle Seiten, Konto
`.kr-breite`	90 rem	Karte, Kampagne, Seitenaufbau

Umbruchpunkte

Name	Breite	Hauptänderung
SM	36 rem	Kartengruppen einspaltig
MD	52 rem	Fuß und Formulare brechen um
LG	72 rem	Navigation wird zur Schublade
XL	80 rem	Weite Kampagnenkomposition

Zwölfspaltiges Grundraster

4 Spalten

8 Spalten

Kapitel 02 · Bauteile

07 — Oberflächen

Textur ist Oberfläche.

Nie Dekoration.

Papier Bestellstrecke

Karte, Formulare, Bezahlung, redaktionelle Seiten.

Rot tief Kampagne

Kopfbereich, Treueprogramm, Fuß und laute Angebote.

Orange Aktion

Knöpfe, Promo-Bänder und Momente der Treue.

Textur wird nicht als Bild in Karten gelegt. Karten erben die Oberfläche ihres Abschnitts und verwenden eine der drei benannten Flächen. Das Papierkorn liegt als ::after über jeder Fläche und schluckt keine Klicks.

08 — Knöpfe

Vier Rollen, ein Bauteil.

Auf hellem Grund

Erste Handlung Marke Aktion Nebenweg Gesperrt

Auf dunklem Grund

Erste Handlung Zweite Handlung Umrandet

09 — Formulare

Schnell, vertraut und greifbar.

Filiale suchen

Wir zeigen die Filiale, die dir am nächsten liegt.

Lieferzeit

Filiale und Art merken

Art der Übergabe

Menge 1

Telefon

Bitte eine vollständige Rufnummer eingeben.

Kapitel 03 · Bestellstrecke

10 — Inhalt

Wiederverwendbare Muster.

Für die Erzählung und für die Karte.

Beweisreihe

Blend aus drei Teilen

Rib Eye, Hüfte, Brust.

Du baust ihn

Fleisch, Käse, Sauce, Extras.

Jede Bestellung zählt

Punkte in Web und App.

Beweisreihe auf Aktionsfläche

Würze vom Haus

Chili, Knoblauch, Zitrone.

Echter Biss

Knuspert ab dem ersten.

Reiter der Blend-Formel

Rib EyeTeil 01

HüfteTeil 02

BrustTeil 03

Produktkarte

Meistbestellt

Klassisch

Einfach · klassisch

Eine Frikadelle, Schmelzkäse, Salat, Tomate, Gurke, Zwiebel.

9,90 €

Speck

Doppelt · Speck

Zwei Frikadellen, Schmelzkäse, knuspriger Speck, Zwiebeln.

10,90 €

Scharf

Scharf

Doppelt · scharf

Zwei Frikadellen, Jalapeños, Chipotle-Sauce, rote Zwiebel.

10,40 €

11 — Warenkorb und Standort

Die ruhige Hälfte des Systems.

Deine Bestellung

Klassisch

Einfach · klassisch 1

9,90 €

Krustenpommes

Groß 1

4,90 €

Zwischensumme14,80 €

Lieferung3,90 €

Noch 10,20 € bis zur kostenlosen Lieferung.

Summe: 18,70 €

Filialwahl

Krustenpunkte 605 P

Noch 295 Punkte bis zur nächsten Prämie.

Kapitel 04 · Marke in Aktion

12 — Kampagne

Kompakte Aktionen.

Ohne den Ablauf zu unterbrechen.

Mach's zum Menü.

Krustenpommes und Getränk für 4,90 €.

Menü dazu

13 — Bildsprache

Fotos, die Appetit machen.

Ausschnitt

Kamera auf Produkthöhe, frontal oder leicht von oben.

Nicht: erzwungene Perspektiven, Weitwinkel.

Licht

Warm, geführt, mit weichen Schatten.

Nicht: kaltes Licht, ausgefressene Lichter.

Struktur

Kruste, Knusper und Frische bleiben sichtbar.

Nicht: weiche, künstlich wirkende Texturen.

Nachbearbeitung

Farbe und Kontrast korrigieren, nicht plastifizieren.

Nicht: unwirkliche Farben, Neonrot.

Kruste.

Smash Burger. Viel Geschmack. Keine Ausreden.

Ein System.Viel Geschmack.

Ein modulares System.

01

02

03

Drei Schichten, eine Reihenfolge.

Eine kompakte Palette.

Marke

Fläche

Signal und Linie

Geprüfte Paare

Eine Stimme, drei Schnitte.

Größen

Eine Skala im 4-px-Takt.

Raumskala

Abstand zwischen Abschnitten

Radien und Erhebung

Container ordnen.

Containerbreiten

Umbruchpunkte

Zwölfspaltiges Grundraster

Textur ist Oberfläche.

Vier Rollen, ein Bauteil.

Auf hellem Grund

Auf dunklem Grund

Schnell, vertraut und greifbar.

Wiederverwendbare Muster.

Beweisreihe

Blend aus drei Teilen

Du baust ihn

Jede Bestellung zählt

Beweisreihe auf Aktionsfläche

Würze vom Haus

Echter Biss

Reiter der Blend-Formel

Produktkarte

Klassisch

Speck

Scharf

Die ruhige Hälfte des Systems.

Deine Bestellung

Klassisch

Krustenpommes

Filialwahl

Linden

Mitte

Kompakte Aktionen.

Mach's zum Menü.

Fotos, die Appetit machen.

Ausschnitt

Licht

Struktur

Nachbearbeitung

Gestaltungssystem

Ein System.
Viel Geschmack.