Greyd Theme
Style Guide_de
Erstelle und teile dein Design und betrachte alle betroffenen Elemente.
Farben
Primärfarbe
Sekundärfarbe
Tertiärfarbe
Sehr dunkel
Dunkel
Mittel dunkel
Mittel hell
Hell
Sehr hell
Empfohlene Farbkombinationen
Blue-20-BG
| Token | blue-20-bg |
| Hex | #E5EFFB |
| Funktion | heller Hintergrund + schwarzer Text |
| Kontrast | 18,07:1 |
Blue-40-BG
| Token | blue-40-bg |
| Hex | # |
| Funktion | heller Hintergrund + schwarzer Text |
| Kontrast | 14,67:1 |
Blue-60-BG
| Token | blue-60-bg |
| Hex | # |
| Funktion | heller Hintergrund + schwarzer Text |
| Kontrast | 10,48:1 |
Blue-80-BG
| Token | blue-80-bg |
| Hex | # |
| Funktion | heller Hintergrund + schwarzer Text |
| Kontrast | 7,20:1 |
Blue-100-TXT
| Token | blue-100-txt |
| Hex | # |
| Funktion | Text auf Weiß |
| Kontrast | 4,75:1 |
Blue-120-TXT/BG
| Token | |
| Hex | # |
| Funktion | Text auf Weiß / Hintergrund + Weiß |
| Kontrast | 6,29:1 |
Blue-140-TXT/BG
| Token | |
| Hex | # |
| Funktion | Text auf Weiß / Hintergrund + Weiß |
| Kontrast | 9,24:1 |
Blue-160-TXT/BG
| Token | |
| Hex | # |
| Funktion | Text auf Weiß / Hintergrund + Weiß |
| Kontrast | 12,19:1 |
Typografie
Überschrift-Schriftart & -Größen
--sak-text-display
36 → 56 px
Hero-H1
Deutschkurse für internationale Lernende
--sak-text-huge
30 → 42 px
Überschrift 1
Dein Deutschkurs in internationaler Umgebung
--sak-text-extra-large
24 → 32 px
Überschrift 2
Dein Deutschkurs in internationaler Umgebung
--sak-text-large
20 → 24 px
Überschrift 3
Auf welchem Niveau möchtest du starten?
--sak-text-medium
17 → 19 px
Überschrift 4 · Lead
Passende Lösungen für jede sprachliche Herausforderung, maßgeschneidert für Ihre Branche.
--sak-text-base
16 → 17 px
Body-base
Deutschlernen zur Vorbereitung auf dein Hochschulstudium oder deinen Job in Deutschland: Wir bieten das ganze Jahr über Kurse auf den Niveaustufen A1 bis C1 an – online und in Präsenz.
Schriftart und Standardgröße des Texts
abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
100 – Dünn
200 – Extraleicht
300 – Leicht
400 – Normal
500 – Medium
600 – Halbfett
700 – Fett
800 – Extrafett
900 – Schwarz
--sak-text-small
14 px fix
Body-small
Wir schicken die Buchungsbestätigung an diese Adresse.
--sak-text-tiny
12 px fix
Badge · Eyebrow
Alle Zeiten in mitteleuropäischer Zeit (CET/CEST).
Buttons & Links
Abstandsgrößen
Riesig
Groß
Mittel
Klein
Winzig