---
version: alpha
name: "Chalk"
description: "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."
colors:
  primary: "#1F5FD6"
  on-primary: "#FFFFFF"
  secondary: "#F59E0B"
  tertiary: "#16A34A"
  neutral: "#5A6070"
  surface: "#FFF8EC"
  on-surface: "#1C2333"
typography:
  display-lg:
    fontFamily: "Nunito"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Nunito"
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-md:
    fontFamily: "Nunito"
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Nunito"
    fontSize: 21px
    fontWeight: 800
    lineHeight: 1.3
  body-md:
    fontFamily: "Nunito"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.6
  body-sm:
    fontFamily: "Nunito"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.45
rounded:
  sm: 12px
  md: 14px
  lg: 16px
  xl: 20px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

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.

## Colors

- **primary (#1F5FD6):** Leuchtendes Blau für Anmelde-Buttons, Links und die aktuelle Lektion.
- **on-primary (#FFFFFF)**
- **secondary (#F59E0B):** Bernstein für Hervorhebungen, Tipps und die zweite Diagrammreihe.
- **tertiary (#16A34A):** Grün für abgeschlossene Lektionen, richtige Antworten und eine dritte Reihe.
- **neutral (#5A6070):** Schiefergrau für Lektionsdetails, Dauer und Hinweise.
- **surface (#FFF8EC):** Warmes Creme, wie eine Notizbuchseite; Karten sind weiß. Der Dunkelmodus ist ein tiefes Tintenblau.
- **on-surface (#1C2333)**

## Typography

Durchgehend Nunito: Extra Bold 800 für Überschriften von 64px Display bis 21px, Fließtext im Schnitt 500 in großzügigen 18px mit Zeilenhöhe 1.6. Kleiner Text bleibt bei 15px, damit er noch gut lesbar ist.

## Layout

Ein 12-Spalten-Raster mit 1200px, 24px Spaltenabstand und Abständen in Vielfachen von 4px. Kursseiten kombinieren eine Lehrplan-Seitenleiste mit einer Lektionsspalte von 66 Zeichen; Landingpages nutzen freundliche dreispaltige Feature-Karten.

## Shapes

16px-Ecken an Karten, Buttons und Eingabefeldern. 1px-Rahmen in warmem Sand; weiche, niedrige Schatten auf Karten und Quizfragen.

## Components

Kurskarten mit Niveau, Dauer und Fortschritt, eine Lektionsübersicht mit Häkchen, Quiz-Optionen als große, tippbare Karten, Tipp-Hinweise in blassem Gelb und Badges für abgeschlossene Module.

## Do's 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.