TABLE ROC – Styleguide (intern)

Corporate Identity · TABLE ROC Deutschland GmbH

Schriftfamilien

Rolle	Font	Variable
Display / H1	Jost Bold	`@ci-font-display`
Body / Fließtext	Jost Regular	`@ci-font-body`
Überschriften H2–H4	Playfair Display	`@ci-font-heading`
Tabellen / Meta	Jost Light	`@ci-font-condensed`
Akzent	Gloria Hallelujah	`@ci-font-accent`

Typografie-Skala

Ebene	Größe	Gewicht	Farbe	Variable
H1	3.5 rem	700	#262626	`@ci-h1-size`
H2	2.5 rem	600	#262626	`@ci-h2-size`
H3	1.75 rem	600	#262626	`@ci-h3-size`
H4	1.25 rem	—	#262626	`@ci-h4-size`
Body	1.0 rem	—	#333333	`@global-font-size`
Akzent	1.25 rem	—	#ab1410	`@ci-accent-size`

Farb-Palette

CI Rot · Primärfarbe #ab1410 CMYK 10 · 100 · 100 · 25 · RGB 171 · 20 · 16 Buttons · CTA · Navbar · Highlights @ci-primary

CI Rot · Links #8b0b05 Links · Hover-Zustände · Kontrast 5.2:1 ✓ AA @global-link-color

CI Rot · Labels #6b0905 Section-Labels · Akzent-Text · Kontrast 5.8:1 ✓ AA @ci-label

Dark (Anthrazit) #262626 Überschriften · dunkle Sektionen · Kontrast 15.1:1 ✓ AAA @ci-dark

Text #333333 Haupt-Fließtext · Kontrast 12.6:1 ✓ AAA @global-color

Text Muted #555555 Meta-Infos · Sekundärtext · Kontrast 7.7:1 ✓ AAA @ci-gray

Hintergrund Muted #f8f7f5 Abgesetzte Hintergrundflächen @ci-muted-bg

Border #e8e4df Trennlinien · Rahmen @ci-border

Hinweis: Die ursprüngliche Sekundärfarbe #9d9d9c (CMYK 0·0·0·50) ist für Fließtext nicht verwendbar — Kontrast 2.1:1 unterschreitet WCAG 2.1 AA. Ersetzt durch #555555 (@ci-gray).

Barrierefreiheit — WCAG 2.1 Level AA

Normaltext (< 18 pt / < 14 pt bold): mind. 4.5:1
Großer Text (≥ 18 pt / ≥ 14 pt bold): mind. 3:1

Alle CI-Textfarben erfüllen oder übertreffen diese Anforderungen.

Typographie

Display H1 · Jost Bold · 3.5 rem · #262626

Tischkultur für Profis.

Heading H2 · Playfair Display · SemiBold · 2.5 rem · #262626

Gläser, Geschirr & Besteck

Heading H3 · Playfair Display · SemiBold · 1.75 rem · #262626

Kategorie-Überschrift

Fließtext · Jost Regular · 1 rem / 1.6 · #333333

Ihr Großhandel für Gläser, Geschirr, Besteck und Tischzubehör – für Gastronomie, Hotellerie und Fachhandel. Über 3.000 Artikel, 20 führende Marken, schnell und zuverlässig geliefert. Das ist ein regulärer Link.

Buttons

Primär-Button Standard-Button Text-Button →

Akzent · Gloria Hallelujah · 1.25 rem · CI Rot #ab1410

Qualität mit Charakter.

Schriftfamilien

Aa

Jost Bold Display · H1 · Headline-Elemente

Aa

Jost Regular Body · UI-Text · Topbar · Footer

Aa

Playfair Display H2–H4 · Schmuck-Überschriften · Serif

Aa

Jost Light Tabellen · Technische Meta-Infos

Aa

Gloria Hallelujah Akzent · Handschrift-Highlights (sparsam)

Schriftgrößen-Skala

2xs	0.7 rem — Badges · Avatar · Bilder-Platzhalter
xs	0.8 rem — Filter-Chips · Status · Footer-Bottom
sm	0.875 rem — Topbar · Footer-Nav · Body-Klein
nav	0.95 rem — Navigation · Accordion-Titel
base	1.0 rem — Standard-Fließtext · Karten-Titel
md	1.125 rem — Karten-Überschriften H3/H4
stat	1.5 rem — Hero-Statistiken

Farben

CI Rot #ab1410 Primärfarbe · Buttons · CTA

CI Rot Link #8b0b05 Links · Hover (AA-konform)

CI Rot Label #6b0905 Section-Labels · Akzent-Text

Text #333333 Haupt-Fließtext · Überschriften

Text Muted #555555 Meta-Infos · Platzhalter

Dark #262626 Dunkle Sektionen · Dark BG

Muted BG #f8f7f5 Abgesetzte Sektionen

Border #e8e4df Trennlinien · Rahmen

Weiß #ffffff Weiße Flächen · Cards