Ausgewogen, modern, portalstark.
Route 2 is the petrol-led variant of the Rechtecheck palette — Rechtecheck Blau anchors, Digital Petrol carries trust, Aktiv Orange marks the conversion moment, and Digitalgrau provides the calm canvas. Pastel tints are derived from the four base colors at 85 % white mix.
Route 2 — Color system
Four base tokens — three brand colors plus one neutral surface. Every UI surface, chip, and CTA derives from these. Pastels below are the same hues at low saturation, used for backgrounds, badges, and quiet states.
Brand palette
Pastel derivatives
Derived by mixing each base color with 85 % white. Use for chip backgrounds, soft section bands, badge fills, info banners, and hover-rest states where the saturated brand color would shout too loud.
In context — the Route 2 mood
Vertrauen ankert in Blau
Petrol bestätigt Status
Orange ruft
Component tokens
A few primitives rendered against the Route 2 palette so the relationship between base, pastel, and surface is visible.
Kündigung erhalten?
Prüfen Sie jetzt Ihre Ansprüche. Kostenlose Ersteinschätzung in unter zwei Minuten.
Ersteinschätzung
- ✓ Frist noch offen
- ✓ Dokumente vollständig
- ✓ Anwaltliche Prüfung empfohlen
Tonale Reihen
Each base color shown as a manual scale — base → pastel → ultra-light — to illustrate how it tones down for layered surfaces.
Type system
Headlines: Plus Jakarta Sans SemiBold (600). Body: Inter with Helvetica Neue / Helvetica / Arial fallback. Type tokens are identical to the default route — only the chromatic foundation differs.
Type scale
Font weights
Exactly three weight tokens ship: --weight-thin (300), --weight-regular (400) and --weight-bold (700).
Thin 300 · var(--weight-thin)
Regular 400 · var(--weight-regular)
Bold 700 · var(--weight-bold)
Thin 300 · var(--weight-thin)
Regular 400 · var(--weight-regular)
Bold 700 · var(--weight-bold)
Semantic headings
Make a statement
Section title
Subsection
Block label
Smaller block label
Smallest heading
Text utilities
.text-lead
Leading text introduces a section in a slightly larger size, lighter weight and softer color. Use it once at the top of a block, never twice in a row.
default body
Default body inherits --color-primary on --color-bg. Inter, regular weight, 16 px — the workhorse for paragraphs, lists and form copy.
.text-secondary
Softer than default body. Reach for it when copy supports the main message — hints under inputs, sub-labels in cards, the second line of a description block.
.text-tertiary
The quietest of the three text colors. Use for meta information that should never compete: timestamps, breadcrumbs, captions under figures, footer fine print.
.text-accent
Digital Petrol for inline emphasis. A sentence rendered in accent color carries weight — keep these short and rare so they keep functioning as visual punctuation.
.text-thin
Thin weight — use sparingly for stylistic, editorial moments at large sizes; thin tends to disappear at body size on bright backgrounds, so test contrast first.
.text-bold
Heavy weight (700) for strong inline emphasis or compact labels. Heavier than the default headline weight, so reserve it for moments that should outweigh nearby titles.
.text-sm
14 px — slightly tighter copy for dense areas like tables, dropdowns, badges, and field hints. Keep line length short; small text grows tiring across long measures.
.text-xs
12 px — micro copy for legal lines, tag rows, table footnotes. Always pair with adequate color contrast; never use on long-form content under any circumstance.
.font-serif
.font-serif switches to Plus Jakarta Sans, the headline family. Apply to a paragraph when you want display feel inside body context — quotes, callouts, lede lines.
Fließtext — paragraphs in different alignment states
Left aligned · default
Im Arbeitsrecht entscheidet die richtige Reihenfolge: erst Tatsachen klären, dann Fristen prüfen, schließlich die strategisch beste Reaktion wählen. Wer eine Kündigung in der Hand hält, hat nicht nur drei Wochen für die Klage, sondern auch eine Chance auf eine geordnete Trennung mit Abfindung.
Centered
Eine zentrierte Zeile wirkt ruhig und feierlich, deshalb passt sie zu Marketing-Hero-Texten und kurzen Zitaten — aber nicht zu längeren Erklärblöcken.
Right aligned
Rechtsbündige Absätze erzeugen eine klare rechte Kante. Im Deutschen wirken sie ungewöhnlich und werden meist nur für kurze Belange wie Adressblöcke, Datumsangaben oder Bildunterschriften eingesetzt.
Justified · Blocksatz
Der Blocksatz richtet sowohl die linke als auch die rechte Kante eines Absatzes bündig aus, indem die Wortabstände variabel werden. Klassisch in Zeitungen und juristischen Schriftsätzen verwendet.
Spacing scale
Base-4 scale from --space-1 (4 px) to --space-9 (96 px). Spacing tokens don't change with the route — only the chromatic foundation does.
Raw scale
Radius
Icon set — lexaid-icons
Drop-in icon font, FontAwesome-style. Use <i class="li li-NAME" aria-hidden="true"></i> — colour inherits from the parent (defaults to Rechtecheck Blau under Route 2), size scales with font-size (1em = the surrounding text size). Modifier classes: .li-xs .li-sm .li-lg .li-xl .li-2x .li-3x .li-spin. Built from assets/fonts/lexaid-icons/build/ (run build_font.py to regenerate). 29 glyphs at PUA codepoints U+E001–U+E01D.
Elevation
Five shadow tokens — under Route 2 they're tinted with Rechtecheck Blau (#162D61) at low alpha so cards and sheets feel anchored to the navy foundation. Use them via box-shadow: var(--shadow-md);.
Resting cards, list rows, inputs on hover. Barely lifts off the surface.
var(--shadow-sm)
Default elevation for content cards, dropdowns, sticky headers.
var(--shadow-md)
Hover state on featured cards, popovers, floating CTAs.
var(--shadow-lg)
Modals, drawers, dialogs — anything that breaks the layer above the page.
var(--shadow-xl)
Focus / active state on primary CTAs and "most popular" pricing tiers.
var(--shadow-glow)