Design System
Brandbook
Die visuellen Grundlagen von clever fit — Logo, Farben und Typografie.
Logo
Das Logo ist die primäre Marken-Signatur. Immer mit ausreichend Schutzraum platzieren und niemals verzerren.
Farben
Schwarz und Weiß tragen das Layout. Rot wird sparsam als Akzent für CTAs und Highlights eingesetzt.
Primary
#EB0000
Akzent, CTAs, Highlights
Text
#000000
Headlines, Fließtext
Background
#FFFFFF
Seitenhintergrund
Surface
#F5F5F5
Karten, Sektionen
03
#555555
Sekundärtext
02
#8F8F8F
Meta, Platzhalter, Linien
Typografie
PODIUM Soft trägt alle Headlines und sorgt für den sportlichen Charakter. Poppins übernimmt Fließtext und UI.
Display
Aa
PODIUM Soft
Body & UI
Aa
Poppins
Heading 1
PODIUM Soft · 54px · 1em · Uppercase
STARK. EINFACH. CLEVER.
Heading 2
PODIUM Soft · 42px · 1.2em
Dein Training, dein Tempo
Paragraph
Poppins Regular · 16px · 1.6em
Über 500 Studios in Europa — trainiere flexibel, wann und wo du willst.
Paragraph 2
Poppins Medium · 15px · 1.4em
Kompakter Textstil für Karten und dichte Layouts.
Button
Poppins SemiBold · 16px · 0.03em · Uppercase
Jetzt Mitglied werden
Button 2
Poppins Bold · 14px · 0.04em · Uppercase
Mehr erfahren
Abstände
Alle Abstände basieren auf einem 4px-Raster. Werte außerhalb dieser Skala sollten nicht neu eingeführt werden.
4px
Icon + Text, dichte Paare
8px
Inline-Elemente, Badges
12px
Standard-Gap in Karten
16px
Textblöcke, Listen
20px
Karten-Padding
24px
Gruppen innerhalb einer Sektion
32px
Innenabstand großer Karten
40px
Getrennte Inhaltsgruppen
48px
Kleiner Sektionsabstand
64px
Sektionsabstand
80px
Großer Sektionsabstand
96px
Hero, Seitenränder
Hinweis — Werte außerhalb der Skala
Im Projekt sind aktuell auch 10px, 14px, 18px, 6px, 22px und 26px im Einsatz. Diese Werte gehören nicht zur Skala und sollten bei Überarbeitungen auf den nächstliegenden 4px-Wert angeglichen werden.
Radien
Radien bleiben konzentrisch: verschachtelte Elemente nutzen immer einen kleineren Radius als ihr Container.
4px
Tags, kleine Inputs
8px
Buttons, Inputs
12px
Karten (Standard)
16px
Große Karten, Sektionen
100px
Pills, Badges, Chips
100%
Avatare, Icon-Buttons
Schatten
Drei Stufen genügen. Schatten sparsam einsetzen — Flächen und Ränder tragen die Hierarchie.
Shadow S
Karten, leichte Erhebung
Shadow M
Hover, aktive Karten
Shadow L
Overlays, Modals
Buttons
Der Main Button ist die primäre Aktion. Pro Sektion nur ein primärer Button — alles Weitere bleibt sekundär.
Primary · Variant 2
Hauptaktion: Mitglied werden, Checkout. Nur einmal pro Sektion.
Secondary · Variant 1
Nebenaktion neben einem primären Button, auf dunklen Flächen.
Tertiary · Variant 3
Leise Aktion: Filter, „Mehr erfahren“, dichte Layouts.
Anatomie — Main Button
Padding
14px 23px
Radius
8px
Gap (Icon–Text)
10px
Border
1px solid rgba(9, 9, 11, 0.1)
Label
Inter Medium · 14px
Hinweis — Main Button nutzt das Design System noch nicht
Das Label läuft auf Inter Medium statt auf dem Textstil „Button“ (Poppins), und die Farben zeigen auf Tokens aus dem ursprünglichen Template — nicht auf Primary, Text oder Background. Auch die Ebenennamen tragen noch den Template-Titel. Beim nächsten Refactor: Textstil „Button“ zuweisen und Fills auf die Projekt-Tokens umstellen.