Chalk: Freundliches Bildungs-Designsystem

Web · Hell · Verspielt · Kräftig · Bildung

Chalk

Hell, rund und ermutigend, wie ein gutes Klassenzimmer.

Chalk macht Lernen zugänglich: warme cremefarbene Seiten, ein selbstbewusstes Blau für Aktionen, fröhliches Bernstein und Grün für Fortschritt und eine runde Nunito, groß genug für junge wie müde Augen. Lektionen sind in kleine, klar beschriftete Schritte unterteilt.

Vorschau

Live aus den Tokens unten gerendert, in den Schriften des Systems.

Neu in 2026Planen, ausliefern und messen an einem Ort

Ein ruhiger Workspace für kleine Teams. Jede Zahl, die du brauchst, und nichts, was du nicht brauchst.

Kostenlos startenDemo buchen

Aktive Nutzer12,480

Umsatz$48.2k

Bindungsrate86%

Lade dein Team einGeschäftliche E-Maildu@firma.deRolleBearbeiter ▾Einladung senden

Letzte BestellungenKundeStatusBetragAda ParkBezahlt$1,240Lukas WeberAusstehend$380Mei ChenErstattet$96

In deinem Projekt verwenden

Füge das in Codex oder Claude Code ein. Der Agent speichert die Spezifikation als DESIGN.md und hält sich ab dann daran.

Dieses Projekt verwendet das Designsystem Chalk. Die Spezifikation liegt unter https://codexdesign.io/de/design-systems/chalk.md. Speichere sie als DESIGN.md im Projektstamm und halte dich ab jetzt bei jedem Screen daran.

Tokens

Farben

Helles Theme

background#FFF8ECoklch(0.981 0.018 81.333)
foreground#1C2333oklch(0.257 0.032 265.974)
card#FFFFFFoklch(1 0 0)
card-foreground#1C2333oklch(0.257 0.032 265.974)
popover#FFFFFFoklch(1 0 0)
popover-foreground#1C2333oklch(0.257 0.032 265.974)
primary#1F5FD6oklch(0.52 0.194 261.461)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#FFE7B8oklch(0.936 0.066 84.017)
secondary-foreground#5A3B00oklch(0.379 0.08 75.782)
muted#F6EEDFoklch(0.951 0.022 83.264)
muted-foreground#5A6070oklch(0.49 0.027 269.134)
accent#FFEFD0oklch(0.957 0.044 83.913)
accent-foreground#1C2333oklch(0.257 0.032 265.974)
destructive#C22F2Foklch(0.538 0.184 25.962)
border#EADFCBoklch(0.907 0.029 82.593)
input#DDCFB6oklch(0.859 0.037 82.163)
ring#1F5FD6oklch(0.52 0.194 261.461)
chart-1#1F5FD6oklch(0.52 0.194 261.461)
chart-2#F59E0Boklch(0.769 0.165 70.08)
chart-3#16A34Aoklch(0.627 0.17 149.214)
chart-4#E0457Boklch(0.625 0.195 3.518)
chart-5#0EA5B7oklch(0.661 0.112 208.672)

Dunkles Theme

background#141A26oklch(0.218 0.025 263.828)
foreground#F3EEE4oklch(0.95 0.014 84.584)
card#1B2232oklch(0.253 0.032 265.946)
card-foreground#F3EEE4oklch(0.95 0.014 84.584)
popover#1B2232oklch(0.253 0.032 265.946)
popover-foreground#F3EEE4oklch(0.95 0.014 84.584)
primary#7BA4FFoklch(0.728 0.14 264.763)
primary-foreground#141A26oklch(0.218 0.025 263.828)
secondary#2A2F3Boklch(0.305 0.023 267.284)
secondary-foreground#F3EEE4oklch(0.95 0.014 84.584)
muted#1F2635oklch(0.269 0.03 265.06)
muted-foreground#A2A9B8oklch(0.734 0.023 265.71)
accent#262E40oklch(0.302 0.035 265.827)
accent-foreground#F3EEE4oklch(0.95 0.014 84.584)
destructive#FF7A7Aoklch(0.735 0.163 21.864)
border#2C3446oklch(0.326 0.034 265.934)
input#364056oklch(0.372 0.04 265.526)
ring#7BA4FFoklch(0.728 0.14 264.763)
chart-1#7BA4FFoklch(0.728 0.14 264.763)
chart-2#FBBF4Aoklch(0.839 0.146 80.739)
chart-3#4ADE80oklch(0.8 0.182 151.711)
chart-4#F582A7oklch(0.744 0.145 0.747)
chart-5#4FD1E0oklch(0.796 0.114 205.941)

Schriften

Überschriften: Nunito · 800
Fließtext: Nunito · 500
Monospace: JetBrains Mono

Schriftgrößen

display · 64/1.05 · -0.02emZwölf Boxkämpfer jagen Viktor
h1 · 44/1.1 · -0.015emZwölf Boxkämpfer jagen Viktor
h2 · 30/1.2 · -0.01emZwölf Boxkämpfer jagen Viktor
h3 · 21/1.3Zwölf Boxkämpfer jagen Viktor
body · 18/1.6Zwölf Boxkämpfer jagen Viktor
small · 15/1.45Zwölf Boxkämpfer jagen Viktor

Radius, Abstände und Schatten

Eckenradiussm 12pxmd 14pxlg 16pxxl 20px

Abständexs 4pxsm 8pxmd 16pxlg 24pxxl 48px

SchattenWeich, flach und breit, nur auf Karten und Sheets.

Layout

Maximale Breite: 1200px
Textbreite: 66ch
Spalten: 12
Spaltenabstand: 24px

Ideal für

Online-Kurse und Bootcamps
Schulen, Nachhilfe und Lernangebote für Kinder
EdTech-Produktseiten
Workshops und Lernleitfäden

Dos and Don’ts

Zeige bei jedem Kurs und jeder Lektion den Fortschritt.
Halte den Fließtext bei 18px, auch in dichten Lektionen.
Markiere falsche Antworten nicht in Rot ohne eine kurze Erklärung.
Staple nicht mehr als drei Farben in einer Karte.