Brand-System · Baden AG

Ein Herz,
zwei Herkünfte.

Die Design-Spezifikation für Bella Vita — Terracotta und Basilico, gemessen aus dem Logo, geteilt durch die Naht. Alles auf dieser Seite ist im System selbst gesetzt.

Tisch reservieren Palette ansehen

Di–So 11:30–14:0017:30–22:30Mo Ruhetag

Primär-Lockup, Zuschnitt 241 · 296 · 547 × 383. Die dritte Zeile der Datei wird nie ausgeliefert (Setzfehler).

02 — Palette

Zwei Farben aus dem Logo, jede mit einer Aufgabe.

Terracotta zeichnet, Basilico strukturiert, das dunklere Ofenrot handelt. Kontraste sind gegen Crema (#FDF8F0) bzw. Weiss geprüft.

#CD6540

Terracotta

--brand-primary

Gemessen: linke Herzhälfte, B, Wortmarke. Naht oben, Logo, Ränder. Nie Fläche unter weisser Schrift.

3.59 · nur ≥24px/600

#A34A28

Ofenrot

--brand-accent

Handlungsfarbe: gefüllte Buttons, Links, Eyebrows, Fokusring. Max. 15 % Fläche pro Viewport.

5.89 auf Weiss · AA

#2F6C52

Basilico

--brand-secondary

Gemessen: rechte Herzhälfte, Kreuz, Ortszeile. Naht unten, Sekundärbutton, Badges, Icons.

5.86 auf Crema · AA

#1E2B24

Nero Verde

--brand-ink

Alle Überschriften, Fliesstext, dunkle Bänder, Footer. Kein Neutralschwarz.

13.93 auf Crema · AAA

#4A5852

Salbeigrau

--brand-ink-soft

Sekundärtext, Lead, Formular-Labels, Icons in Ruhe.

7.07 auf Crema · AAA

#7C6A58

Die Naht.

Im Logo treffen die beiden Herzhälften auf einer senkrechten Kante aufeinander. Diese Kante wird zum Bauteil — auf fünf Grössenstufen, immer senkrecht, immer hart bei 50 % geteilt, nie als weicher Verlauf.

Naht XL — 6pxHero-Fuge zwischen Text- und Bildspalte, volle Sektionshöhe. Max. 1× pro Seite, entfällt unter 900px.

Naht L — 4 × 72pxÜber jedem Eyebrow, linksbündig. Genau 1× pro Sektion, nie zentriert.

Naht M — 3pxLinke Kante von Faktenkarten, volle Kartenhöhe. Nie auf Bildkarten.

11:3014:00

Naht S — 2 × 16pxInline-Trenner in Meta-Zeilen. Ersetzt den Mittepunkt. Max. 3 pro Zeile.

Pizza aus dem Holzofen
Hausgemachte Pasta

Naht-Punkt — 8 × 8pxListenmarker in Leistungslisten. Nie als Icon-Ersatz.

03 — Typografie

Fraunces über Source Sans 3.

Fraunces trifft den Strichkontrast der Wortmarke, rundet die Endungen über die SOFT-Achse zur Formsprache des Herzens (SOFT 40, WONK 1). Source Sans 3 trägt die Schweizer Fakten — mit echten Tabellenziffern.

D1 · Fraunces 600 · 80/42px · LH 1.03 · LS −0.02em Buonasera, Baden.

D2 · Fraunces 600 · 56/34px · LH 1.08 · LS −0.015em

Aus dem Holzofen

H3 · Fraunces 600 · 32/26px · LH 1.18

Hausgemachte Pasta

H4 · Fraunces 600 · 22/20px · LH 1.25

Öffnungszeiten

Zitat · Fraunces 400 italic · 28/22px · LH 1.4

Wir machen den Teig am Morgen und heizen den Ofen am Mittag.

Eyebrow · Source Sans 3 600 · 13/12px · LS 0.14em · UPPERCASE

Reservation

Lead · Source Sans 3 400 · 21/18px · LH 1.55 · max 52ch

Ein kleines Lokal an der Bahnhofstrasse, seit Jahren am gleichen Ofen. Reservieren lohnt sich, besonders am Wochenende.

Body · Source Sans 3 400 · 17/16px · LH 1.65 · max 68ch

Der Teig ruht 24 Stunden, die Pasta wird jeden Morgen von Hand gemacht. Was auf den Teller kommt, hängt vom Markt ab — deshalb steht die aktuelle Karte nicht online, sondern an der Tür.

Meta / Zeiten · Source Sans 3 600 · 15/14px · tabular-nums

Bahnhofstrasse 12, 5400 Baden+41 77 000 09 00

Preis · Fraunces 600 · 20/18px · tabular-nums

18.50

Formular-Label · Source Sans 3 600 · 13px · LS 0.10em · UPPERCASE

Anzahl Personen

Micro / Legal · Source Sans 3 400 · 13px

Wir bestätigen jede Reservation telefonisch innert einem Werktag.

04 — Komponenten

Buttons, mit echten Zuständen.

Fahre mit der Maus darüber, drücke, oder tabbe hindurch — Hover, Active und Fokus sind hier live, nicht beschrieben.

Anfahrt & Parken

Primär #A34A28 → hover #8E3F21 + Glühen → active #7A3619 + scale(.985). Sekundär: Umriss Basilico, Hover-Fläche #E4EBE5. Fokus überall identisch: 2px solid #A34A28, Offset 3px.

04 — Karten & Formular

Fakten in der Karte, Reservation im Formular.

Öffnungszeiten

Heute · Freitag11:30–14:00 · 17:30–22:30
Dienstag – Sonntag11:30–14:00
17:30–22:30
MontagRuhetag

Bahnhofstrasse 12, 5400 Baden

Auf der Karte ansehen

Warm ausgeleuchtetes Stillleben: Teig, Grieß und Basilikum auf Holz

Holzofenhausgemacht

Pizza aus dem Holzofen

24 Stunden geführter Teig, im Holzofen in 90 Sekunden gebacken. Bildkarte — kein Rahmen, keine Naht, Bild zoomt beim Hover auf 1.03.

Zwei Herkünfte, ein Herz — italienische Küche, Badener Zuhause.

Haltung der Marke, abgeleitet aus dem Logo

06 — Tiefe

Zwei bis drei weiche Schichten, nie ein harter Schatten.

Alle Schatten sind in Nero Verde rgb(30,43,36) eingefärbt statt in Neutralschwarz — so bleibt der Cremeton warm statt grau zu kippen. Auf dunklen Bändern gibt es keine Schatten: hier trennt Farbe, nicht Höhe. Die Naht wechselt hier unten auf Salbei #8FB39C.

09 — Bildstimmung

Warmes Seitenlicht, echte Hände, kein Text im Bild.

COLOR: Terracotta, gebranntes Holz, Crema — ein einziger kühler Akzent in Basilikumgrün. LIGHT: weiches Fensterlicht von der Seite, ~3200–4000 K, milde Schattenkanten. MOOD: ruhig, handgemacht, bewohnt — nie steril, nie Stockfoto.

Moodboard: rustikaler Holztisch mit Terracotta-Teller, Grieß, Teig und Basilikum im weichen Seitenlicht

Generiertes Stimmungsbild. Vor dem Livegang durch echte Aufnahmen des Lokals ersetzen.

07 — Leitplanken

Was diese Marke tut — und was nie.

Do

✓Crema als Seitengrund, Weiss nur für Karten.
✓Öffnungszeiten und Reservation im ersten Bildschirm.
✓Über jeder H2 ein Eyebrow mit Naht L.
✓Ofenrot handelt, Basilico strukturiert.
✓Zahlen mit tabular-nums, Zeiten mit Halbgeviertstrich.
✓96px zwischen Sektionen — Weissraum trennt, nicht Linien.

Don’t

✕Kein zentrierter Gradient-Hero, kein Karussell.
✕Keine Icon-Grids, keine drei gleichen Sektionen in Folge.
✕#CD6540 nie als Fläche unter weisser Schrift.
✕Weight 500 existiert nicht. Keine Pill-Buttons.
✕Das grüne Kreuz nie isoliert — es liest als Apotheke.
✕Keine Trikolore, keine karierten Tischtücher, kein Text auf Bildern.