Reden wir über das,
worüber sonst keiner spricht.

Familienvorsorge aus Stolberg-Breinig. Seit 1973.

Reden wir. Mehr erfahren

CI-Tokens (Demo)

Vorschau aller Marken-Tokens. Wird später durch die echte Startseite ersetzt — die ersten echten Komponenten (Header, Hero, Footer) sind oben/unten bereits zu sehen.

Container — Inhaltsbreiten

Drei Container-Stufen für unterschiedliche Inhaltstypen. Die gestreiften Bühnen unten nutzen die volle Bildschirmbreite — so siehst du, wo der jeweilige Container die maximale Breite erreicht.

container-narrow — max 720 px
container (default) — max 1200 px
container-wide — max 1440 px

Spacing-Skala

Tailwind-Stil, rem-basiert. Wächst mit dem User-Browser-Setting mit.

space-1 ~ 5 px
space-2 ~ 9 px
space-4 18 px
space-8 36 px
space-16 72 px
space-24 ~ 108 px
space-32 144 px

Primärfarben & Tonabstufungen

CG-Tiefblau100 %
80 %
60 %
40 %
20 %
CG-Meergrün100 %
80 %
60 %
40 %
20 %
CG-Limettengrün100 %
80 %
60 %
40 %
20 %

Markenverlauf

100 % Deckkraft
50 % Deckkraft
8 % Deckkraft

Brand-Element

chantraine ganser.

Eckradien aus der Logo-Form abgeleitet (cg-logo.svg). Pillen-Bogen oben-links und unten-rechts, andere Ecken eckig.

Brand-Element-Anwendungen

Das Brand-Element als wiederverwendbares SVG (cg-brand-element.svg). Drehen, anteilig einsetzen, mit Bildern füllen — alles möglich.

Pur (SVG mit Verlauf) Brand-Element
180° gedreht Brand-Element gedreht
Container mit Border-Radius (gefüllt mit Foto-Stand-In)

Typografie-Hierarchie

PT Sans, fluid skaliert mit clamp(). Zieh das Browserfenster schmaler oder breiter — Headlines wachsen kontinuierlich mit.

H1 — clamp 41–72 px

Reden wir.

H2 — clamp 32–55 px

Was, wenn das Einkommen wegbricht?

H3 — clamp 27–44 px

Berufsunfähigkeit, Krankentagegeld

H4 — 35 px

Das S/M/L-Konzept

H5 — 28 px
Mehr erfahren
H6 — 22 px
Kurzer Hinweis

Body, Lead, Small

Lead (22 px). Familienvorsorge aus Stolberg-Breinig. Seit 1973.

Body (18 px). Vor zwei Wochen hat sich ein Kunde von uns einen Bandscheibenvorfall zugezogen. Drei Tage später war klar: das wird länger dauern.

Small (16 px). Echter Fall aus unserer Beratung. Name und Details anonymisiert.

PT Sans — vier Schnitte

Regular 400. Reden wir über das, worüber sonst keiner spricht.

Italic 400. „Vor zwei Wochen hat sich ein Kunde von uns einen Bandscheibenvorfall zugezogen."

Bold 700. Familienvorsorge mit Du-Ansprache.

Bold Italic 700. Reden wir.