Brand-System · Baden AG
Pizza aus dem Holzofen und hausgemachte Pasta — an der Bahnhofstrasse in Baden. Dieses Dokument zeigt das Farb-, Schrift- und Komponentensystem der Richtung «Ofenrand, Feuerschein».
01 — Farbe
Jeder Wert stammt aus brand-measurements.json.
Die Arbeit am Farbsystem ist Benennen und Regeln — nicht Werte wählen.
#b55e3fFläche, nicht Akzent: CTA-Füllung, Glutkante, aktive Chips. Als Text nur ab 24px.
on_primary/primary = 4.53 · AA#493129Hero-Band und Reservieren-Band. Text darauf immer #ffffff. Max. 2 pro Seite.
#261e1bFooter-Fläche und jeder Fliesstext auf hellem Grund. Genau ein Footer pro Seite.
ink/surface = 15.31 · AAA#fdf6f3Der Seitengrund. Nie reines Weiss — die warme Temperatur der Fläche ist tragend.
ink_soft/surface = 6.56 · AA#fbeeeaZweite helle Stufe: Karten-Bänder, Hover-Flächen, Zeilen-Hover. Text darauf immer Ink.
ink/surface_alt = 14.42 · AAA#8b916cNur Olivenzweig-Glyphe, Trenn-Hairline und Ruhetag-Punkt. Nie Fläche, nie Text unter 24px.
secondary/surface = 3.09 · nur AA-Large#a65132Ausschliesslich :active von Buttons und Chips. Nie Fläche, nie Text, nie Hover.
#9b4627Nur 2px-Border und 16px-Icon. Fehlertext immer in Ink — farbiger Fehlertext ist verboten.
nie als Textfarbe#fcb69eNur Fokusring und Link-Unterstreichung auf den dunklen Bändern — ein Terrakotta-Ring wäre dort unsichtbar.
Ringfarbe, kein FliesstextDie 12er-Skalen (Auszug in Gebrauch)
02 — Schrift
Fraunces' SOFT- und opsz-Achse liefert im
grossen Grad die Kruste, die das Logo als dünne Linie nur andeutet.
Weight 500 existiert in diesem System nicht.
Der Teig ruht zwei Tage, bevor er das Feuer sieht.
Wir backen bei 430 Grad im Holzofen — knapp 90 Sekunden pro Pizza. Die Pasta rollen wir am Morgen; was übrig bleibt, bleibt nicht übrig.
Ein voller Gastraum um halb acht.
03 — Komponenten
Fahre mit der Maus über die Buttons, drücke sie, tabbe hindurch —
Hover hebt an, :active färbt auf #a65132. Nichts dazwischen.
Primary 52px · Radius 12px · #b55e3f/#ffffff = 4.53 AA ·
Hover = translateY(-1px) + shadow-lift · Active = #a65132,
scale(.985), 0.10s · Focus = 3px Ring rgb(181 94 63 / .32).
Radius 16px · Fläche #ffffff · Ebene «Karte» ·
Hover → Ebene «Schwebend» + translateY(-2px). Das eine 3-Spalten-Grid der Site.
04 — Das Ziel
Das Formular ist die zweite Kernkomponente. Fehler werden nie allein durch Farbe angezeigt: Border, Icon und Text zusammen — der Fehlertext steht immer in Ink, weil dessen Kontrast gemessen ist.
Die eine Idee: ein Stapel Vollton-Bänder, der nach unten dunkler wird — und genau eine leuchtende Stelle darin.
Max. 2 Ofenkammern pro Seite · genau 1 Ofengrund · zwischen zwei dunklen Bändern immer mindestens ein helles · Glutkante genau 1×.
Auf #493129 bekommt
die Terrakotta-Fläche einen Trennring 0 0 0 1px rgb(255 255 255 / .22),
damit sie nicht versackt; der Fokusring wechselt auf #fcb69e.
05 — Bildwelt & Tiefe
0 0 0 1px rgb(212 205 202 / .9) · Inputs im Ruhezustand0 1px 2px rgb(38 30 27 / .06), 0 6px 16px -8px rgb(38 30 27 / .18)0 2px 4px rgb(38 30 27 / .08), 0 12px 28px -10px rgb(38 30 27 / .28)0 0 28px -6px rgb(181 94 63 / .38). Es gibt keine Ebene 5.