Design-System · intern

Ein Akzent, zwei Grundflächen, drei Zustandsfarben

Diese Seite zeigt die Werte, die in tokens.css und global.css stehen — sie ist keine Nachzeichnung, sondern nutzt dieselben Klassen wie die Website. Ändert sich ein Token, ändert sich diese Seite mit.

Farben

--ink#0b0b0dDunkle Flächen, Kopfleiste, Fußzeile, Booth-Screens

--ink-soft#17171cZweite dunkle Fläche, Überschriften auf Hell

--amber#F2B23EEinziger Akzent — CTA, aktive Zustände, Kennzeichnungen

--amber-ink#141008Text auf Amber

--paper#f6f4f1Seitenhintergrund hell

--weiss#ffffffKarten

--deep#8e2b26Akzentfläche, Vergleichs-Kontrast

--ok#17B187Zustand „läuft"

--warn#E0483CZustand „Eingriff nötig"

--link#a8412fTextlinks, Hover #7d2f21

Regel: Zustandsfarben nie dekorativ. Anlass-Landingpages haben je eine eigene Farbwelt, der Handlungsaufruf bleibt trotzdem amber — Ausnahme Hochzeit, die durchgehend auf Bordeaux steht.

Typografie

Überschrift 1

Archivo 800 · clamp(38px, 5vw, 72px) · −0.025em · Versalien

Überschrift 2

Archivo 800 · clamp(30px, 3.6vw, 46px) · Zeilenhöhe 0.96

Display-Zeile ohne RangKlasse .display · Archivo 800 · gemischte Schreibweise

Fließtext: Archivo 400, 15 bis 17 px, Zeilenhöhe 1.6 bis 1.65, Textspalte höchstens 720 px breit. Das ist die Schrift, in der die Seite spricht.

Mono für Daten, Status und KennungenIBM Plex Mono 500 · 10 bis 15 px · 0.1em bis 0.24em

Bausteine

Knöpfe

HandlungsaufrufDunkelRahmenGroß

Karten

KennungKarte hellWeiß, 1 px Rahmen, Radius 14, Schatten in Ruhe.

KennungKarte dunkelFür Abschnitte, die Aufmerksamkeit brauchen.

KennungKarte großRadius 18, Innenabstand 32.

Listen

Punktliste mit Aufzählungszeichen
Auf dunklem Grund wird der Punkt amber

Nummerierte Schritte in Mono
Zweiter Schritt

Maße

Abstandsraster

48121620263244567296

Seitenrand clamp(20px, 4vw, 56px) · Inhalt max. 1240 px

Radien

--r-pille: 9px — Pillen, Navigationslinks
--r-knopf: 10px — Knöpfe
--r-chip: 12px — Chips, kleine Karten
--r-karte: 14px — Karten
--r-karte-gross: 18px — Große Karten
--r-flaeche: 22px — Hero-Flächen
--r-kreis: 999px — Kreise, Punkte

Schatten und Umbrüche

--schatten-karteKarte in Ruhe--schatten-hochAngehoben--schatten-ctaHandlungsaufruf

1160 px: Kopfleiste klappt zum Burger-Menü
1020 px: Vierspaltige Raster werden zweispaltig
900 px: Seitenrand 20 px, Spalten volle Breite
640 px: Alles einspaltig, Wortmarke 22 px

Icons

26 Strich-Icons · currentColor · inline

boomerangboxchatdruckeffekteinstellungenfernbedienungfotogaestebuchgaleriegesichtgifkalendermailqrslideshowsmsstatistikstreifenteilenticketuploadvideovorlagewandwolke

Marke

Logo hell

Logo dunkel

Signetyoubooth.meWortmarke · Archivo 900 · −0.04em