LernTestAnmelden

Markenrichtlinien

Die visuelle Sprache von LernTest

Eine lebende Referenz – kein PDF – für die Bausteine der Marke. Logo, Schrift und Animation sind die echten Komponenten aus dem Code, kein Mockup; die Farbwerte spiegeln die Tokens aus app/globals.css.

Los geht's

Übersicht

LernTest ist ein Lernbegleiter für junge Schülerinnen und Schüler. Die Marke wirkt warm, ruhig und selbstbewusst – nie klinisch. Das entsteht durch eine cremefarbene Lernfläche, einen Akzent aus der Welt der Textmarker und Haftnotizen und eine freundliche, geometrische Display-Schrift.

Warm, nicht weiß

Die Fläche ist creme wie Papier, die Schrift fast schwarz. Selbst erhöhte Flächen bleiben ein warmes Off-White, nie hartes Reinweiß.

Markieren, nicht schreien

Highlighter-Gelb trägt jede Handlungsaufforderung – immer als Strich hinter dunkler Schrift, nie als bunter Text. Sparsam heißt es: „hier entlang“.

Freundliche Geometrie

Bricolage Grotesque für Überschriften, DM Sans für alles andere. Rund, zugänglich, gut lesbar.

Palette

Farben

Die Farbwelt kommt aus dem Lernalltag: Textmarker und Haftnotizen. Was zählt, wird markiert – Gelb trägt die Marke, eine kleine Markerfamilie ordnet Fächer und Hinweise. So fühlt sich die Oberfläche an wie ein gut geführtes Heft, nicht wie ein Formular.

Die Palette wird einmalig als CSS-Custom-Properties definiert und Tailwind v4 als Theme-Tokens bereitgestellt (bg-brand, text-muted, …). Jedes Farbfeld zeigt seinen Hell-Wert (links) und Dunkel-Wert (rechts).

Basis

Marke

--brand

H #ffe100D #ffe100

Die Signatur: Highlighter-Gelb. Immer als Fläche mit dunkler Schrift – ein Textmarker-Strich, nie farbiger Text. In Hell und Dunkel gleich.

Markentext

--brand-fg

H #0e0e0cD #0e0e0c

Die Tinte auf der Markenfläche – fast schwarz, in beiden Modi.

Markentinte

--brand-ink

H #8a6000D #ffe100

Die lesbare „Tinte“ der Marke – für Akzenttext, Links und feine Statuslinien, wo Gelb keinen Kontrast hätte. Im Dunkelmodus leuchtet sie selbst gelb.

Hintergrund

--background

H #f4f0e6D #0e0e0c

Die Lernfläche – das „Papier“. Warmes Creme, nie reines Weiß.

Vordergrund

--foreground

H #0e0e0cD #f0ece2

Primärtext und kontrastreiche Elemente.

Oberfläche

--surface

H #fbf8f1D #1a1a17

Karten, Kopfzeilen, erhöhte Flächen. Warmes Off-White – heller als die Lernfläche, aber nie hartes Reinweiß.

Rahmen

--border

H #dbd4c4D #2e2d28

Trennlinien und Abgrenzungen.

Gedämpft

--muted

H #7a7770D #706e68

Sekundärtext, Beschriftungen, Bildunterschriften.

Lernakzente · Marker & Haftnotiz

Fünf Marker für Fächer, Tags und Markierungen. Jeder hat einen leuchtenden Strich (--marker-*) – in beiden Themes gleich, immer mit dunkler Schrift drauf – und ein weiches Notiz-Papier (--note-*), auf dem dunkle Schrift ruhen kann. Regel: ein Akzent pro Kontext – nie der ganze Stiftkasten auf einmal.

Gelb

Gelb

--marker-yellow · #ffe100

--note-yellow · #fff6bf / #e7cf82

Die Signatur – zugleich das Logo.

Orange

Orange

--marker-orange · #ff9e2c

--note-orange · #ffe6c7 / #e8bd8d

Wärme und Energie.

Pink

Pink

--marker-pink · #ff5d9e

--note-pink · #ffd9e6 / #e6acc6

Das Wichtigste, sofort sichtbar.

Grün

Grün

--marker-green · #5fcf6a

--note-green · #d8f3d2 / #b2d9a6

Verwandt mit „richtig“.

Blau

Blau

--marker-blue · #3fbfe6

--note-blue · #d2eef8 / #a9d3e4

Ruhe und Konzentration.

Markieren im Fließtext · --marker-hl-1…3

Drei Marker zum Hervorheben im laufenden Text. Der Strich liegt hinter der Schrift, deshalb hat jeder Marker pro Theme eine eigene Farbe, nach Kontrast gewählt: im Light-Theme ein heller Ton hinter dunkler Schrift, im Dark-Themeein tiefer Ton hinter heller Schrift. Die Hue darf dabei wechseln – ein dunkles Gelb würde matschig, also leuchtet Marker 1 im Dark-Theme z. B. grün. Jedes Feld zeigt links den Hell-, rechts den Dunkel-Wert.

Marker 1 · Gelb → Grün

--marker-hl-1

H #ffe100D #1d6330

Highlighter hinter laufendem Text · links Light, rechts Dark.

Marker 2 · Pink → Beere

--marker-hl-2

H #ff5d9eD #6d2150

Highlighter hinter laufendem Text · links Light, rechts Dark.

Marker 3 · Blau → Petrol

--marker-hl-3

H #3fbfe6D #145a78

Highlighter hinter laufendem Text · links Light, rechts Dark.

Drei Marker: markiert, betont und geprüft.

Light-Theme · dunkle Schrift

Drei Marker: markiert, betont und geprüft.

Dark-Theme · helle Schrift

Tokens: --marker-hl-1, --marker-hl-2, --marker-hl-3 – jeweils light-dark(hell, tief). Die fünf Akzent-Marker oben bleiben dagegen in beiden Themes gleich – sie liegen immer auf hellem Notiz-Papier mit dunkler Schrift.

Rückmeldung

Richtig

--correct

H #43b15cD #5fce78

Richtig-Fläche

--correct-bg

H #e4f5ddD #16301d

Richtig-Text

--correct-fg

H #1c4527D #b5f3c5

Falsch

--wrong

H #e1473fD #ff6a5e

Falsch-Fläche

--wrong-bg

H #ffe1daD #311714

Falsch-Text

--wrong-fg

H #4a1714D #ffc7c0

Schrift

Typografie

Bricolage Grotesque

Display – Überschriften, Wortmarke, wichtige Zahlen. Schnitte 700 / 800.

font-display

DM Sans

Fließtext & UI – Absätze, Beschriftungen, Bedienelemente. Schnitte 400 / 500 / 600.

font-sans

Display / HeroLernen macht Spaß
Überschrift 1Übersicht
Überschrift 2Deine Fortschritte
FließtextWähle ein Fach und beginne mit dem Üben.
Fließtext betontDu hast 8 von 10 richtig!
BeschriftungAnmelden

Schriftmuster · in Anwendung

Die Skala oben zeigt die Schnitte einzeln – hier dieselben Stile im Zusammenspiel, so wie sie auf einer echten Seite auftreten: von der Überschrift über den Fließtext bis zum Zitat und zur Handlungs­auf­forderung. Links steht jeweils die Spezifikation, rechts das gesetzte Beispiel.

H1 · Display

Bricolage 800

text-4xl → 5xl

tracking-tight · 1.05

Bereit für den nächsten Test?

H2 · Abschnitt

Bricolage 700

text-2xl

tracking-tight

Üben, das sich nicht wie Üben anfühlt

H3 · Zwischentitel

Bricolage 700

text-lg

tracking-tight

So funktioniert’s, Schritt für Schritt

Fließtext

DM Sans 400

text-[15px] · 1.7

zweispaltig

Jede Übung beginnt mit einer kleinen Frage und endet mit einem klaren Ergebnis. Was sitzt, wird grün markiert; was noch wackelt, kommt später einfach noch einmal. So wird aus vielen kleinen Schritten ein spürbarer Fortschritt – Woche für Woche, ohne Druck und ohne Noten. Kinder sehen selbst, was sie schon können, und behalten die Lust am Weitermachen.

Pull Quote

Bricolage 700

text-2xl · 1.25

Marke: text-6xl

Ich wusste sofort, was ich kann – und woran ich noch üben muss.
Lina, 8 Jahre · Nutzerin

Hero & CTA

Hero: DM Sans 500 · text-lg

CTA: DM Sans 600

uppercase · tracking-wide

Starte mit einem Fach, das dir Spaß macht – der Rest kommt von allein.

Schriften werden über next/font/google in app/layout.js geladen.