Design System Overview

Warm, rund, ein wenig verspielt.

Organic kombiniert einen cremig-sandigen Hintergrund mit Terrakotta- und Salbei-Akzenten, Caprasimo-Überschriften über Figtree-Fließtext und großzügig gerundete Formen. Diese Seite fasst die Bausteine des Systems zusammen.

Farbe

Ein Ground, zwei Akzente

Jede Rolle trägt eine 100–900 Tonalrampe in OKLCH auf gemeinsamer Helligkeitsskala. Helle Stufen (100–300) für Flächen und Hover, 500 als Basis, dunkle Stufen (700–900) für Text auf getönten Flächen.

Neutral 100900
Accent 100900
Accent 2 · 100900
Typografie

Caprasimo über Figtree

H1 · Caprasimo 42px

Everything inherits

H3 · Caprasimo 25px

Pick a direction

Body · Figtree 15px

Ordinary HTML styled only by styles.css — change the tokens and the whole system follows, from headings down to captions.

Komponenten

Buttons, Tags & Formulare

Accent · tinted Accent · outlined Accent 2 Neutral

Cards & Elevation

Getting started
Pick a direction

Three variants of the current theme, one axis at a time.

Typography
Tune the pair

Swap either family and the whole scale re-renders with it.

Export
Ship the tokens

Emit the variables and the guide into the project.

Tabelle

NameRolleStatus
Mira SundDesignAktiv
Theo RankEngineeringEingeladen
Bildsprache

Washed — zurückhaltend eingebettet

Jede Fotografie läuft durch den .washed-Wrapper: entsättigt, kontrastärmer und angehoben, damit sie sich in die warme Seite einfügt statt darauf zu liegen.

foto-platzhalter · washed