Components

Kapselung statt Kopie.

Jede Komponente lebt an einer Stelle im Repo. Seiten importieren sie, konfigurieren sie über Props, und erben automatisch alle Design-Entscheidungen des Systems.

Buttons

Primary, Secondary, Ghost × sm, md, lg.

Primary = Akzent. Secondary = Paper auf Ink. Ghost = flächenlos mit Unterstrich.

Primary

Secondary

Ghost

Tags & Status

Kleine Etiketten, präzise Aussage.

Default Status · v0.3 Outline #designsystem Neue DIN Live

Cards

Flach, keine Radien, keine Shadows.

Default

Statische Karte

Rahmen auf Paper, kein Hover. Einfach ein Content-Block mit Border.

Interactive

Klickbare Karte

Hover wechselt Border auf Ink und Hintergrund auf Mist. Wird zum <a>, wenn href gesetzt ist.

Öffnen →

Filled

Gefüllte Karte

Mist als Hintergrund. Für Callouts innerhalb Paper-Bänder.

Alle Komponenten im Überblick

Was im Baukasten liegt.

Dateipfade relativ zu amaryllis/. Props in der jeweiligen Astro-Datei dokumentiert.

Topbar src/components/layout/Topbar.astro

Zwei-zeilige Navigation mit Alert-Strip, Primary-Nav, Icon-Actions, Telefon, Sub-Nav, Utility.
AlertStrip src/components/layout/AlertStrip.astro

Schmale Leiste über der Topbar. Varianten accent/ink, optional CTA, dismissable.
Footer src/components/layout/Footer.astro

Drei Spalten (Zugang, Karriere, Rechtliches) auf Ink-Hintergrund, Akzent-Strip oben, Wordmark unten.
Band src/components/layout/Band.astro

Full-width Section mit Varianten paper/mist/ink/accent. Rhythm-Spacing (sm/md/lg).
Container src/components/layout/Container.astro

Zentriert Content in 80rem Max-Breite, seitliches Padding clamp(1.25rem, 4vw, 4rem).
Button src/components/ui/Button.astro

Drei Varianten (primary/secondary/ghost) × drei Größen. Automatisch <a> bei href.
Tag src/components/ui/Tag.astro

Default, Status (Akzent), Outline. Klein, 12 px, monospace-lastig.
Card src/components/ui/Card.astro

Flach, kein radius, kein shadow. Optional interaktiv, optional as link.
Logo src/components/brand/Logo.astro

Wordmark-Logo mit Akzent-Highlight-Hintergrund. Drei Größen (sm/md/lg).
SectionLabel src/components/typography/SectionLabel.astro

Eyebrow-Label mit Bindestrich davor. Uppercase, letter-spaced.

Ink-Band

Auch dunkel trägt das System.

Headlines werden automatisch Paper, Borders werden auf 20 % Paper-Transparenz gedimmt, Buttons drehen die Farbkombination. Kein manuelles Umstylen pro Seite nötig.