Foundations

Der Boden, auf dem alles wächst.

Tokens, Farben, Typografie, Spacing — die Primitives, auf denen alle Amaryllis-Interfaces stehen. Alles unten ist live aus src/styles/global.css bezogen.

Neutrale Palette

Fünf Grautöne — kein Pure-Black, kein Pure-White.

Ink trägt Text, Paper trägt alles. Die drei Zwischentöne geben Rhythmus ohne Material-Tiefe.

Ink #242424 Text & Struktur --color-ink

Paper #FFFFFF Basis-Hintergrund --color-paper

Mist #FAFAFA Zweites Band --color-mist

Bone #F3F3F3 Inline-Fläche, Code --color-bone

Rule #E5E5E5 Borders, Trenner --color-rule

Akzent — offene Familie

Eine Farbe pro Seite. Alle Rollen. Immer.

Die hier aufgeführten Werte sind Presets aus der Live-Site. Weitere Farben im gleichen Charakter (hell, saturiert, fluoreszierend) sind ausdrücklich erlaubt — siehe Eignungscheck darunter.

Highlighter #FAFA00 Default --color-highlighter

Cyan #40C5FC data-accent="cyan" --color-cyan

Mint #19F5BE data-accent="mint" --color-mint

Grass #14FA3C data-accent="grass" --color-grass

Eignungscheck für eine neue Akzentfarbe

Ink-Text #242424 muss auf ihr klar lesbar sein (WCAG AA, ~16 px).
Als Marker-Gradient unter Glyphen darf der Kontrast nicht kippen — kräftige Mitteltöne funktionieren besser als Pastelle.
Keine Pure-Primaries (#FF0000, #0000FF). Der Look ist fluoreszierend, nicht CMYK-Basic.
Nicht zu dunkel — der Ink-Text müsste sonst zu Paper kippen und das System unruhig machen.

Typografie

Neue DIN Variable — ein Font, alle Tonhöhen.

Zwei Achsen: wght (100–900) und wdth (25–150). Display kondensiert und mittel-schwer, Body normal-breit.

H1 wght 550 · wdth 78 clamp(2.8rem, 7vw, 6rem)

Plakat-Schlagzeile

H2 wght 500 · wdth 82 clamp(2rem, 4vw, 3.25rem)

Sektions-Headline

H3 wght 550 · wdth 90 1.25rem

Karten-Titel oder Zwischentitel

Lead wght 400 · wdth 100 clamp(1.15rem, 1.8vw, 1.5rem)

Intro-Absatz nach der H1, max 58ch.

Body wght 400 · wdth 100 1rem

Fließtext bei 16px, line-height 1.55, max-width 66ch.

Marker-Technik

Der Textmarker, der mitgeht.

<mark> rendert als linear-gradient in var(--accent) — nur zwischen cap-height und baseline. Kein Line-Box-Balken. Kondensierte Headline bleibt kondensiert auch im Marker, weil font: inherit.

H1 · line-height 0.95 stops: 22% / 82%

H2 · line-height 1.0 stops: 24% / 84%

Body · line-height 1.55 stops: 26% / 86%

Spacing & Band-Rhythmus

Ruhig atmen, dann Punch setzen.

Container

max-width: 80rem (1280px)
Seiten-Padding clamp(1.25rem, 4vw, 4rem)

Rhythmus

Vertikale Abstände:
sm: 1.5rem
md: clamp(2rem, 4vw, 3.25rem)
lg: clamp(3rem, 7vw, 6rem)

Content-Breiten

Body 66ch · Lead 58ch
H1 20ch · H2 22ch

Bänder

Alle <Band>-Sections laufen edge-to-edge über die Viewport-Breite. Der Container darin begrenzt den Content.