ICL
Benefits · Design System
v1.0 · Edition 2026
Zur Website
Design System

Ein System. Ein Auftritt.

Alle Farben, Fonts, Layouts und Komponenten der ICL-Benefits-Plattform – dokumentiert, versioniert und bindend für jede neue Seite.

§ 01

Brand

Das ICL-Logo ist der einzige zulässige Bildmarker im Header und Footer. Kein Ersatz-Icon.

ICL
Nutzung
Header · Footer · E-Mail-Header
Mindesthöhe
28 px (mobile) · 32 px (desktop)
Schutzraum
= halbe Logohöhe
§ 02

Farbe

Vier Kernfarben aus der ICL-Bildmarke, ergänzt durch Fog & Paper als neutrale Bühnen. Niemals andere Farben hardcoden.

#002846
Ink / Navy
--primary
#00B5D3
Cyan
--accent
#8FE6E5
Aqua
--aqua
#FFFFFF
Paper
--background
#F4F8FA
Fog
--surface
#5A6570
Muted Ink
--muted-foreground
Semantik
  • • Primary (Ink) – Buttons, Headings, Nav-Hover.
  • • Accent (Cyan) – Links, Eyebrows, Highlights, Focus-Ring.
  • • Aqua – Soft-Backgrounds, Illustration, Hero-Glow.
  • • Fog – Alternierende Section-Bänder.
§ 03

Typografie

Instrument Serif für Emotion & Headline-Ruhe, Inter für alles Funktionale, JetBrains Mono für Zahlen & Metadaten.

DISPLAY · Instrument Serif · 96 / 100%
Vorsorge, die zählt.
H2 · Instrument Serif · 48 / 105%
Vier Bausteine.
H3 · Inter Semibold · 20 / 130%
Grundbetrag & Tarifförderung I
BODY · Inter Regular · 16 / 155%
Ihr Arbeitgeber zahlt jedes Jahr einen festen Grundbetrag zzgl. Tarifförderung I in Ihre betriebliche Altersvorsorge.
META · JetBrains Mono · 11 · 0.18em tracking
§ 03 · Für alle deutschen ICL-Gesellschaften
Skala
Display XL96 / 100
Display L80 / 100
H248 / 105
H320 / 130
Body L18 / 155
Body M16 / 155
Body S14 / 150
Meta11 / 130 · 0.18em
§ 04

Spacing & Layout

12-Spalten-Grid ab lg. Container max-w-7xl. Sektionen atmen mit py-24 md:py-32.

12 cols · gutter 8pxcontainer: max-w-7xl · px-6
Radius
4px
8px
12px
18px
24px
Shadow
softliftcyan
§ 05

Buttons & Links

Radius immer full (pill). Höhe 40 / 48. Primary = Ink. Sekundär = Border. CTA-Label immer verbal (»Hier zum Angebot«).

§ 06

Komponenten

Wiederkehrende Bausteine. Karten immer bg-card + border-border + rounded-2xl. Bei Hover: border-primary/30 + shadow-lift.

§ Baustein 1
Grundbetrag + TF I
613,55 €
Jährlich vom Arbeitgeber – ohne Zuzahlung.
Ohne Gesundheitsprüfung
Aufnahme in die bKV für alle berechtigten ICL-Mitarbeitenden.
Badges
arbeitgeberfinanziertsteuerfreichemietarifvertraggarantiert
§ 07

Ton & Sprache

Ruhig, präzise, ohne Vertriebsdruck. Sie-Anrede. Zahlen immer mit €-Symbol und deutschem Format.

Ja
  • • »Hier zum Angebot«
  • • »Wir rechnen für Sie.«
  • • »613,55 € p. a.«
  • • »Nach Chemietarifvertrag«
Nein
  • × »Jetzt in 60 Sekunden abschließen!«
  • × Emojis in Copy
  • × Konkurrenz- oder Anbieternennungen
  • × Ausrufezeichen im Fließtext