Kristin Diana

Academy

Diese Seite ist das Fundament, nicht das Produkt. Sie zeigt, dass Schrift, Farbe, Abstand, Rundung und Schatten aus dem Design-System kommen — und aus nichts sonst.

Rosé-VerlaufRosé-Kontur

Farbwelt

Zehn Werte, eine Quelle.

  • Weiß

    Hauptfarbe

    --kd-white

  • Creme

    Sectionfarbe

    --kd-cream

  • Champagner

    Zweitfarbe

    --kd-champagne

  • Rosé

    Highlight

    --kd-rose

  • Rosé tief

    Verlauf oben

    --kd-rose-deep

  • Mocha

    gedämpfter Knopf

    --kd-mocha

  • Tiefgrün

    CI-Farbe, Fußbereich

    --kd-green

  • Überschrift

    Schrift dunkel

    --kd-ink-strong

  • Fließtext

    Schriftfarbe

    --kd-ink

  • Gedämpft

    Nebentext

    --kd-ink-muted

Typografie

NATS für die Marke, Inter Tight für alles andere.

Hero · 56Prüfungsvorbereitung
H1 · 44Prüfungsvorbereitung
H2 · 34Prüfungsvorbereitung
H3 · 24Prüfungsvorbereitung
Lead · 19Prüfungsvorbereitung
Fließtext · 16Prüfungsvorbereitung
Klein · 14Prüfungsvorbereitung

Rundung und Tiefe

Weich, warm, nie schwarz.

card

Karten

raised

angehoben

media

Fotografie

accent

Rosé-Knopf

xs

sm

md

lg

xl

round

Beweis

Ändere einen Token, ändere die Seite.

Öffne packages/design-system/tokens/colors.css, ändere den Wert von --kd-rose und lade neu. Jeder rosé Akzent auf dieser Seite wechselt mit. An Tailwind wird dabei nichts angefasst — die Werte werden zur Laufzeit aus dem Design-System gelesen.

Die Komponenten des Design-Systems fehlen in diesem Export noch. Sobald der vollständige Export vorliegt, tritt er an die Stelle dieser Musterseite.