Styleguide
Design-System Granitbox – THE GYM. Farben, Schriften, Abstände und Bausteine wie im Entwurf.
Farben
Kalk · Hintergrund
#EDEDED
Seitenfläche
Band
#E0E0E0
abgesetzte Abschnitte
Karte
#CECECE
Tarifkarten
Navigation
#E2E2E2
Pill im Kopfbereich
Granit · Tinte
#464646
Überschriften, Linien
Moos · Lime
#DADE89
Akzent 1, CTA-Flächen
Nebel · Periwinkle
#B5C3DE
Akzent 2, Abos & Shop
Text
#000000
Fließtext
Schriften
Tanker
Display-Schrift. Alle Überschriften, Preise, Karten-Titel. Immer in Versalien.
ABCDEFG
0123456789
General Sans
Fließtext, Lead-Absätze, Listen. Farbe #000000.
Aa Bb Cc Dd Ee Ff Gg
0123456789
RX100
Mono. Navigation, Buttons, Labels, Tabellen, Bildunterschriften.
Aa Bb Cc Dd Ee Ff Gg
0123456789
Typografie-Skala
Hero · 110 / 0.95
Dein Fitness Zentrum
H1 · 48 / 1.1
Es gibt keine blöden Fragen
H2 · 40 / 1.12
Unsere Vision ist klar
H3 · 32 / 1.15
Milon Q+
Lead · 18 / 1.45
Finde die Mitgliedschaft, die zu deinem Trainingsalltag passt.
Fließtext · 16 / 1.5
Krafttraining soll für noch mehr Menschen zugänglich werden.
Klein · 14 / 1.5
Zugang täglich von 05:00–23:00 Uhr
Buttons
Standard
Lime gefüllt
Hell auf dunkel
Sprungmarke
Flächen & Radien
Hairline-Karte
1px #464646 · 28px
Lime-Karte
#DADE89 · 28px
Periwinkle-Karte
#B5C3DE · 28px
Tarifkarte
#CECECE · 28px, Chip 20px
Formularfelder
Rahmen 1px #464646, Radius 16px, RX100 15px, Höhe 52px. Labels sind ausgeblendet, der Feldname steht im Platzhalter.