Tokens

Alle Werte leben in src/styles/tokens.css. Die Palette folgt dem verbindlichen 3defacto Farbsystem (assets/brand/colors-3defacto.txt), Rollen referenzieren die Palette. Regeln: kein reines Schwarz, kein neutrales Grau, Silber und Nebel nie als Text, auf Anthrazit Schrift nur in Weiß oder Silber.

Farben

Buttons tragen immer 3df Rot. Links, Text und Funktionsicons bleiben neutral. Bereichsfarbe nur auf Band, aktivem Navigationszustand, Sektionsmarker, Trennlinien, Teaser-Kacheln und illustrativen Icons.

Palette (3defacto Farbsystem)

--color-red

3df Rot. Nur als Fläche (Buttons) und Linie, nie als Schrift auf dunklem Grund.
--color-red-dark

Dunkelrot. Hover, aktiv, Fehlertext auf hell.
--color-anthracite

3df Anthrazit. Logo, dunkle Sektionen, Hero-Grund.
--color-anthracite-deep

Tiefanthrazit. Text, Footer. Ersetzt Schwarz.
--color-steel

Stahl. Sekundärtext, Legenden.
--color-silver

Silber. Linien, Rahmen, Gitter. Nie Text. Auf Anthrazit auch Schrift.
--color-mist

Nebel. Infoflächen, Tabellenzebra. Nie Text.
--color-paper

Papier. Wechselfläche, nur Flächen.
--color-white

Weiß. Grundfläche, Luft.

Rollen

--color-primary

Buttons, primäre CTA, Fokusring
--color-primary-ink

Hover, aktiv
--color-ink

Text, Überschriften, Navigation
--color-ink-muted

Nebentext, Meta, Leads (AA auf Weiß und Papier)
--color-line

Hairlines, Rahmen, Trennlinien
--color-line-strong

Rahmen sekundärer Button
--color-surface

Grundfläche
--color-surface-alt

Wechselfläche im Sektionsrhythmus
--color-surface-info

Infoflächen, Tabellenzebra
--color-surface-dark

Dunkle Sektionen, Hero-Grund
--color-surface-darker

Footer

Dachmarke und Geschäftsbereiche

Je Bereich fünf Töne. Zur Laufzeit gesetzt über <html data-site="…"> als --site, --site-soft, --site-ink, --site-on, --site-bright. An einzelnen Elementen über data-division="…" als --division-*. Die Grundtöne Kobalt, Petrol und Ocker erreichen als Text auf Weiß kein AA: Text in Bereichsfarbe läuft immer über -ink; dieselbe Stufe ist die Bandfläche mit weißer Schrift. -on nur für große Schrift auf dem Grundton.

Bereich	Grundton (Marker, Balken)	-soft (Kachelfläche hell)	-ink (Band, Text auf hell)	-bright (Balken auf dunkel)
Dachmarke (neutral) --color-group
Engineering Design Services (Kobalt) --color-eds
Industrial Plant Solutions (Petrol) --color-ips
Wheel Assembly Machines (Ocker) --color-wam

Live-Prüfung: Band, Marker, Trennlinie und Karte folgen dem Umschalter oben rechts.

Bereichsfarbe

Sektionsmarker in Bereichsfarbe

Teaser-Karte

Ohne Kasten. Die Bereichsfarbe steckt im Motiv, das illustrative Icon trägt sie direkt.

Fläche -ink, Schrift Weiß

Wie im Band. Kontrast AA geprüft.

Auf Anthrazit

Bereichsfarbe nur als Fläche, Balken oder Linie; Schrift Weiß oder Silber.

Typografie

Eine Familie: TheSans SCd (CD-Schrift, selbst gehostet, woff2). Drei Gewichte – 400 Fließtext, 500 Labels und Navigation, 700 Überschriften –, dazu Kursiv in 400 und 700 für Rich Text. Welcher Schnitt der Familie hinter welchem Gewicht steht, zeigt die Schrift-Seite. Hierarchie über Größe und Gewicht, keine zweite Schrift. Rollen als Utilities type-*, komponierbar mit @apply. Zeilenlänge Fließtext maximal 68 Zeichen (measure).

type-display · Hero-Headline (Video, Bild). Bold 700

Von der Idee zur laufenden Anlage. Einfach. Sicher.

type-h1 · Seitentitel, Elevator Pitch. Bold 700

Konstruktion mit eigener Werkhalle dahinter.

type-h2 · Sektionstitel. Bold 700

Vier Spezialgebiete, eine Fertigungs- und Softwarebasis

type-h3 · Kacheltitel, Zitate. Bold 700

Wheel Assembly Machines

type-h4 · Kartentitel, Listen. Bold 700

Neue Radmontagelinie in Betrieb

type-lead · Leads, Sektionsuntertitel. Regular 400

Anlagen, die getestet ankommen und vernetzt laufen.

type-body · Fließtext. Regular 400

Vom 3D-Modell bis zum Schaltschrank entsteht alles im eigenen Haus: Konstruktion, CNC-Fertigung, Schweißbau, Elektro und SPS, Hydraulik, Messraum und Technikum.

type-small · Kartentexte, Footer, Formulare

SolidWorks-zertifizierte Konstrukteure mit direktem Zugang zu Fertigung, Technikum und CE-Prozess.

type-meta · Meta, Band, Badges, Breadcrumb. Medium 500

20. August 2026 · Projekt

type-stat · Kennzahlen. Bold 700, Tabellenziffern

85+

Abstände und Layout

Fluide Werte über clamp(). Der Sektionsrhythmus entsteht durch Flächenwechsel plus --spacing-section, nicht durch Trennlinien.

--spacing-section
Sektionsabstand oben/unten

--spacing-section-sm
kompakte Sektionen (Vertrauensbalken, Logos)

--spacing-section-lg
betonte Sektionen

--spacing-gutter
Seitenrand des Containers

--spacing-grid
Rasterabstand

--spacing-header
Header-Höhe, scroll-padding

--spacing-band
Bandhöhe

Container

.container	max. 80rem (1280px)	Standard
.container--wide	max. 104rem (1664px)	Raster, Bildstrecken. Im Media-Fluss als Bildbreite „Layout“. Nicht für das Bild im Seitenkopf, das steht in Inhaltsbreite (Eintrag 108)
.container--reading	max. 52rem + Rand	Lesespalte: Text-Block der Inhaltsseite und Meldung im Detail (Kopf und Text), Durchschuss 1,7. .container--prose (33rem) ist am 2026-09-22 entfallen
.container-box	wie .container, ohne Innenabstand	Fläche, die die Textspalte um einen Seitenrand überragt – Reihe des Bereichsrouters

Form

--radius-sm 2px	Badges, Fokusring
--radius-md 4px	Buttons, Felder, Flyout-Links
--radius-lg 8px	Flyout
--shadow-overlay	nur Overlays (Flyout). Ebenen sonst über Flächenwechsel.
--ease-out, --duration-fast 150ms, --duration-base 260ms	Bewegung nur als Antwort auf Interaktion. Unter prefers-reduced-motion aus.