Logo blau
Für weiße und helle Flächen, zum Beispiel Website-Header, Briefbogen und Dokumente.
Ceha Design-System
Styleguide für Website und Dokumente
Logo, Farben, Schriften und Gestaltungsbausteine der Ceha Deutschland GmbH. Die Referenz für neue Dokumente und Präsentationen, für Agenturen und für KI-Werkzeuge.
Für Chat-Assistenten und Coding-Agenten genügt der Prompt: Er verlinkt die JSON, statt sie einzufügen. So lesen die Werkzeuge immer den aktuellen Stand.
Überblick
Alle Bausteine auf einen Blick
Der Styleguide zeigt die Gestaltungsregeln, nach denen die Ceha-Website gebaut ist. Dieselben Farben, Schriften und Abstände gelten für Dokumente, Präsentationen und Arbeiten von Agenturen.
Für wen
Das Ceha-Team, Agenturen und Dienstleister, die Dokumente, Präsentationen oder Webinhalte für Ceha gestalten.
Immer aktuell
Alle Werte stammen direkt aus dem Code der Website und werden automatisch geprüft. Downloads entstehen bei jeder Veröffentlichung neu.
Typografie
Überschriften H1 bis H4, Einleitungen, Fließtext und Modifier für helle und dunkle Flächen.
ceha-h1ceha-h2ceha-h3ceha-hero-leadceha-body
Aktionen
Primäre und sekundäre Buttons, Varianten für dunkle Flächen, Icon-Buttons und Textlinks.
ceha-buttonceha-button-primaryceha-button-ghost-darkceha-text-link
Flächen
Karten, Produktmedien, Icon-Kacheln, Badges und Hinweisboxen.
ceha-cardceha-card-interactiveceha-product-mediaceha-badge-dark
Formulare
Labels, Eingabefelder, Textbereiche, Checkboxen, Fehler und Hilfetexte.
ceha-form-labelceha-inputceha-textareaceha-form-error
Layout
Container, Abstände der Sektionen und Hintergrundvarianten.
containerceha-sectionceha-section-mutedceha-section-dark
Logo
Zwei Varianten für helle und dunkle Flächen
Das Logo erscheint blau auf hellen und weiß auf dunklen Flächen. Beide Varianten gibt es als PNG in zwei Größen mit transparentem Hintergrund und als SVG für Druck und große Formate.
Logo weiß
Für Brand Dark, Footer und dunkle Bildflächen.
- Nur die bereitgestellten Logodateien verwenden, für Druck und große Formate die SVG-Datei.
- Das blaue Logo auf hellen Flächen, das weiße Logo auf dunklen Flächen einsetzen.
- Das Logo nicht verzerren, umfärben, beschneiden oder mit Effekten versehen.
Farben
Brand-Palette und funktionale Farben
Wenige feste Markenfarben, neutrale Flächen und klare Statusfarben. Blau führt und setzt Akzente, es ist keine Flächenfarbe für alles.
Brand Blue
#0b477e
--color-brand
Primäre Buttons, Links, Icons und Akzente
Brand Light
#12599c
--color-brandLight
Hover- und aktive Zustände, helle Akzente auf dunklen Flächen
Brand Dark
#08365f
--color-brandDark
Dunkle Sektionen, Hero-Überlagerungen und CTA-Flächen
Text
#2e2e2e
--color-customText
Fließtext und Überschriften auf hellen Flächen
Off White
#f9f9f9
--color-offWhite
Ruhige Abschnitte, Tabellenzeilen und dezente Hintergründe
Black
#0a0a0a
--color-footer
Footer und sehr dunkle Abschlussflächen
Neutrale Flächen
Weiß
#ffffff
Grundfläche für Inhalte, Karten und Formulare
Gray 100
#f3f4f6
Hintergrund von Produktbildern
Gray 200
#e5e7eb
Ränder von Karten, Tabellen und Trennlinien
Gray 300
#d1d5dc
Ränder von Eingabefeldern und sekundären Buttons
Gray 500
#6a7282
Formular-Labels und Hilfetexte
Gray 600
#4a5565
Einleitungen und Beschreibungstexte
Statusfarben
Erfolg
#00a63e
Bestätigungen und gültige Eingaben
Hinweis
#00a6f4
Neutrale Informationen
Warnung
#e17100
Prüfpflichtige oder unvollständige Angaben
Fehler
#e7000b
Formularfehler und kritische Meldungen
- Brand Blue ist Aktionsfarbe für Buttons, Links und Akzente, keine großflächige Hintergrundfarbe.
- Brand Dark gibt Gewicht. Dunkle Sektionen gezielt einsetzen, nicht jede zweite.
- Off White trennt Abschnitte ruhig. Harte Linien nur dort, wo Struktur sie braucht.
- Keine dekorativen Verläufe als Standardhintergrund.
Schriften
Raleway für Überschriften, Inter für Lesbarkeit
Überschriften nutzen Raleway mit kontrolliertem Gewicht. Fließtext, Labels, Tabellen und Formulare laufen über Inter.
Überschriften, Kartentitel und Kennzahlen
Raleway
ABCDEFGHIJKLMNOPQRSTUVWXYZ ÄÖÜ
abcdefghijklmnopqrstuvwxyz äöüß 0123456789
800 Extra Bold für H1 im Hero
700 Bold für Kompakte H1, Kennzahlen und Footer-Gruppen
600 Semibold für H2, H3, H4 und Kartentitel
- Schriftstapel
- "Raleway", system-ui, sans-serif
- Utility
- font-heading
- Geladene Schnitte
- 400–800
Fließtext, Buttons, Formulare, Navigation und Tabellen
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ ÄÖÜ
abcdefghijklmnopqrstuvwxyz äöüß 0123456789
700 Bold für Buttons und Textlinks
600 Semibold für Labels, Navigation und Eyebrows
500 Medium für Hero-Einleitung und Kennzahl-Beschriftung
400 Regular für Fließtext
- Schriftstapel
- "Inter", system-ui, sans-serif
- Utility
- font-sans
- Geladene Schnitte
- 300–700
Raleway und Inter stehen unter der SIL Open Font License und sind kostenlos über Google Fonts erhältlich.
Überschriften
H1 bis H4 im Einsatz
Eine H1 pro Seite oder Dokument, danach H2 für Abschnitte, H3 für Module und H4 für Details. Überschriften brechen ausbalanciert um und nutzen automatische Silbentrennung. Größen sind Breakpoint-Werte: Mobil ist der Standard, danach folgen md, lg und xl.
H1
Seitentitel und große Hero-Aussagen auf Landing-, Kategorie-, Produkt- und Editorial-Seiten
ceha-h1
Industriequalität, die bleibt
- Schrift
- Raleway
- Größe
- Mobil 36px | md 48px | lg 60px | xl 72px
- Gewicht
- 800 Extra Bold
- Zeilenhöhe
- 1.05
- Farbe
- customText
H1 kompakt
Referenzen, Fehlerseiten und kompakte Hero-Bereiche
ceha-h1-compact
Projektbericht Feuerwehr
- Schrift
- Raleway
- Größe
- Mobil 30px | md 36px | lg 48px
- Gewicht
- 700 Bold
- Zeilenhöhe
- 1.1
- Farbe
- customText
H2
Standardüberschrift einer Sektion
ceha-h2
Robuste Stahlmöbel für jeden Einsatz
- Schrift
- Raleway
- Größe
- Mobil 30px | md 36px | lg 48px
- Gewicht
- 600 Semibold
- Zeilenhöhe
- 1.1
- Farbe
- customText
H2 kompakt
Kompakte Panels, Detailbereiche und kleine Layouts
ceha-h2-compact
Produktdaten
- Schrift
- Raleway
- Größe
- Mobil 24px | md 30px | lg 40px
- Gewicht
- 600 Semibold
- Zeilenhöhe
- 1.25
- Farbe
- customText
H3
Module, Spalten und Unterbereiche
ceha-h3
Pulverbeschichteter Stahl
- Schrift
- Raleway
- Größe
- Mobil 24px | md 30px
- Gewicht
- 600 Semibold
- Zeilenhöhe
- 1.15
- Farbe
- customText
H3 Karte
Kartenüberschriften und kompakte Module
ceha-h3-card / ceha-card-title
Feature-Karte
- Schrift
- Raleway
- Größe
- Mobil 20px | md 24px
- Gewicht
- 600 Semibold
- Zeilenhöhe
- 1.25
- Farbe
- customText
H4 Detail
Kompakte Module und Listenbereiche
ceha-h4-detail
Technische Details
- Schrift
- Raleway
- Größe
- Mobil 16px | md 18px
- Gewicht
- 600 Semibold
- Zeilenhöhe
- 1.375
- Farbe
- customText
Modifier
Dunkle Schrift
ceha-heading-dark
Erzwingt die Textfarbe auf hellen Flächen.
- Farbe
- customText
Modifier
Helle Schrift
ceha-heading-light
Setzt Überschriften auf dunklen Flächen in Weiß.
- Farbe
- white
Text
Fließtext, Listen, Zitate und Hinweise
Texte sind technisch klar und gut lesbar. Tonalität und Formulierungen folgen der Ceha-Content-Sprache.
Stahlmöbel für Arbeitsbereiche mit echten Anforderungen
Ceha Spinde, Schließfächer und Stahlschränke sind für die dauerhafte Nutzung in Industrie, Bildung, Feuerwehr und Verwaltung ausgelegt. Die Sprache bleibt direkt, sachlich und konkret.
Nutzen, Material, Varianten und Beratung stehen im Vordergrund. Superlative werden sparsam eingesetzt, weil belastbare Angaben mehr Vertrauen schaffen als laute Versprechen.
Ceha schreibt wie ein erfahrener Projektpartner: ruhig, konkret und fachlich belastbar, mit Blick auf die tatsächliche Nutzung statt auf Werbeeffekte.
Ceha-Content-Sprache
Hinweisboxen
Hinweis
Allgemeine Hinweise, sachlich und ohne Alarm.
ceha-callout
- Rand
- 1px gray-200
- Text
- gray-600
- Innenabstand
- 24px
Planungshinweis
Wichtige Planungsinformationen mit Ceha-Akzent.
ceha-callout-brand
- Linie links
- 4px brand
- Fläche
- brand/5
- Text
- customText
Bitte prüfen
Prüfpflichtige Angaben, fehlende Daten oder klare Vorsicht.
ceha-callout-warning
- Linie links
- 4px amber-600
- Fläche
- amber-50
- Text
- amber-950
Textstile
Stile für dunkle Flächen stehen im Beispiel auf Brand Dark.
Eyebrow
ceha-eyebrow
Spinde und Garderoben
Kurzes Label über einer Überschrift
- Schrift
- Inter
- Größe
- Mobil 12px | md 14px
- Gewicht
- 600 Semibold
- Zeilenhöhe
- geerbt
- Farbe
- brand
Lead
ceha-lead
Einleitungstext für Sektionen mit klarer Aussage und guter Lesbarkeit.
Einleitung einer Sektion
- Schrift
- Inter
- Größe
- Mobil 18px | md 20px
- Gewicht
- 400 Regular
- Zeilenhöhe
- 1.625
- Farbe
- gray-600
Lead dunkel
ceha-lead-light
Einleitungstext auf dunklen Flächen mit reduzierter Deckkraft.
Einleitung in dunklen Sektionen
- Schrift
- Inter
- Größe
- Mobil 18px | md 20px
- Gewicht
- 400 Regular
- Zeilenhöhe
- 1.625
- Farbe
- white/72
Hero-Lead
ceha-hero-lead
Präzise Einleitung auf dunklen Hero- und Bildflächen.
Einleitung im Hero
- Schrift
- Inter
- Größe
- Mobil 18px | md 20px
- Gewicht
- 500 Medium
- Zeilenhöhe
- 1.625
- Farbe
- white/80
Body
ceha-body
Standard-Fließtext für Inhaltsbereiche und erklärende Abschnitte.
Fließtext
- Schrift
- Inter
- Größe
- 16px
- Gewicht
- 400 Regular
- Zeilenhöhe
- 1.625
- Farbe
- customText
Body gedämpft
ceha-body-muted
Sekundärer Text für Beschreibungen, Karten und Detailinformationen.
Beschreibungen
- Schrift
- Inter
- Größe
- 16px
- Gewicht
- 400 Regular
- Zeilenhöhe
- 1.625
- Farbe
- gray-600
Body klein
ceha-body-sm
Kompakter Beschreibungstext für Karten, Tabellen und Hinweise.
Meta-Angaben, Hilfen und Karten
- Schrift
- Inter
- Größe
- 14px
- Gewicht
- 400 Regular
- Zeilenhöhe
- 1.625
- Farbe
- gray-600
Body dunkel
ceha-body-light
Fließtext auf dunklem Hintergrund mit angenehmem Kontrast.
Fließtext in dunklen Sektionen
- Schrift
- Inter
- Größe
- 16px
- Gewicht
- 400 Regular
- Zeilenhöhe
- 1.625
- Farbe
- white/72
Body klein dunkel
ceha-body-sm-light
Kompakter Beschreibungstext auf dunklen Flächen.
Meta-Angaben, Schritte und Karten auf dunklen Flächen
- Schrift
- Inter
- Größe
- 14px
- Gewicht
- 400 Regular
- Zeilenhöhe
- 1.625
- Farbe
- white/72
Kennzahl
ceha-stat-value
25
Kennzahlen
- Schrift
- Raleway
- Größe
- Mobil 36px | md 48px
- Gewicht
- 700 Bold
- Zeilenhöhe
- geerbt
- Farbe
- geerbt
Kennzahl-Beschriftung
ceha-stat-label
Jahre Erfahrung
Beschriftung unter einer Kennzahl
- Schrift
- Inter
- Größe
- 14px
- Gewicht
- 500 Medium
- Zeilenhöhe
- 1.625
- Farbe
- geerbt
Footer-Gruppe
ceha-footer-heading
Gruppenüberschrift im Footer
- Schrift
- Raleway
- Größe
- 12px
- Gewicht
- 700 Bold
- Zeilenhöhe
- geerbt
- Farbe
- white/65
Footer-Text
ceha-footer-copy
Links und Text im Footer
- Schrift
- Inter
- Größe
- 15px
- Gewicht
- 400 Regular
- Zeilenhöhe
- 1.625
- Farbe
- white/72
Formulare
Eingaben, Auswahlfelder und Hinweise
Formularfelder sind groß genug, klar beschriftet und haben sichtbare Fokus- und Fehlerzustände.
Label
Nameceha-form-label
- Schrift
- Inter 14px / 600
- Farbe
- gray-500
- Abstand unten
- 8px
Eingabefeld
ceha-input
- Innenabstand
- 16px × 12px
- Radius
- 8px
- Rand
- 1px gray-300
- Text
- customText
- Fokus
- Rand brand, Ring 2px brand/15
Textbereich
ceha-textarea
- Innenabstand
- 16px × 12px
- Zeilenhöhe
- 1.625
- Rand
- 1px gray-300
- Fokus
- Rand brand, Ring 2px brand/15
Checkbox
ceha-checkbox
- Größe
- 20px × 20px
- Akzent
- brand
- Rand
- gray-300
Fehler
Bitte geben Sie eine gültige E-Mail-Adresse ein.ceha-form-error
- Fläche
- red-50
- Text
- red-700, 14px / 500
- Rand
- 1px red-200
- Innenabstand
- 12px × 8px
Hilfetext
Wir antworten in der Regel innerhalb eines Werktags.
ceha-form-help
- Schrift
- Inter 14px
- Farbe
- gray-500
- Abstand oben
- 8px
Karten und Flächen
Wiederverwendbare Oberflächen
Karten sind sachlich und nutzen Schatten sparsam. Das Produkt bleibt wichtiger als die Dekoration.
Produktkarte
Doppelspinde
Klassischer Stahlspind für Umkleiden, Betriebe und Bildungseinrichtungen.
ceha-product-media + ceha-card-title
- Fläche
- gray-100
- Radius
- 8px
- Titel
- Raleway Mobil 20px | md 24px
Feature-Karte
Icon über einem kurzen Titel mit konkretem Nutzen. Karten bleiben kurz.
ceha-icon-tile + ceha-h3-card
- Größe
- 48px × 48px
- Fläche
- brand/8
- Icon
- brand
- Radius
- 8px
Dunkle Karte
Planung mit Varianten
Dunkle Fläche für CTAs, Prozessschritte und Zusammenfassungen.
Kontakt aufnehmenceha-card-dark + ceha-text-link
- Fläche
- brandDark
- Rand
- 1px white/14
- Text
- white
- Radius
- 8px
Karte
Ruhige Standardfläche für Tabellen, Module und neutrale Inhalte.
ceha-card
- Fläche
- white
- Rand
- 1px gray-200
- Radius
- 8px
- Schatten
- klein
Kompakte Karte
Karte mit festem Innenabstand für Listen und Kacheln.
ceha-card-compact
- Innenabstand
- 20px
- Rand
- 1px gray-200
- Radius
- 8px
Interaktive Karte
Klickbare Karte mit Hover-Rand und zurückhaltendem Schatten.
ceha-card-interactive
- Rand
- 1px gray-200
- Hover
- Rand brand/40, Schatten mittel
- Radius
- 8px
Dunkle Karte
Dunkle Fläche für CTAs, Prozessschritte und Zusammenfassungen.
ceha-card-dark
- Fläche
- brandDark
- Rand
- 1px white/14
- Text
- white
- Radius
- 8px
Icons
Die Website nutzt Icons aus dem freien Lucide-Set in Brand Blue.
Farben
Maße
Schließung
Lieferung
Konfiguration
Layout und Rhythmus
Container, Abstände und Raster
Das Layout ist großzügig und funktional: volle Sektionen statt verschachtelter Kartenstapel.
Mobil
< 640pxEinspaltige Layouts, gestapelte CTAs, kompakte Innenabstände
Tablet
640–1023pxZweier-Raster, reduzierte Navigation, mittlere Kompositionen
Laptop
1024–1399pxVolle Section-Raster und Standard-Hero-Kompositionen
Desktop
ab 1400pxContainer begrenzt auf 1400px, großzügige Ränder
Container
max. 1400px
Zentrale Inhaltsbreite aller Seiten.
- Max. Breite
- 1400px
- Seitenabstand
- Mobil 16px | lg 32px
Sektion
96px / 128px
Standardabstand für große Inhaltsblöcke.
- Abstand vertikal
- Mobil 96px | lg 128px
Rasterabstand
32px bis 48px
Abstand in Produkt- und Content-Rastern.
- Standard
- 32px
- Groß
- 48px
Radius
8px
Karten, Buttons und Eingabefelder bleiben sachlich.
- Wert
- 8px
Helle Sektion
Standard
Helle Inhaltsbereiche ohne zusätzliche Dekoration.
ceha-section
- Abstand vertikal
- Mobil 96px | lg 128px
- Fläche
- white
Ruhige Sektion
Ruhiger Hintergrund
Für Wechsel im Seitenrhythmus und Kartenbereiche.
ceha-section-muted
- Fläche
- offWhite
Dunkle Sektion
Kontrastbereich
Für Prozesse, CTAs und deutliche Strukturwechsel.
ceha-section-dark
- Fläche
- brandDark
- Text
- white
12 Spalten, volle Breite
8 Spalten
4 Spalten
6 Spalten
6 Spalten