Brand Kit
Design-System und Markenrichtlinien — Single Source of Truth für die CodeQuadrat-Website.
Design-Richtlinien als Text für KI-Tools oder Briefings in die Zwischenablage.
Logo
Logo-Varianten für Web und Print — Primär, Einfarbig und Icon.
Farben
HSL ist die Quelle der Wahrheit. HEX wird exakt berechnet.
Salbei
Kobalt
Graphit
Semantic
Typografie
Display — Space Grotesk
Websites, die Kunden gewinnen
Body — Inter
Moderne Websites für KMU — klar, schnell und auf Anfragen optimiert.
Mono — JetBrains Mono
hsl(147 24% 62%) → #86B49Btext-5xl — 3rem / 48px
Display Heading
text-4xl — 2.25rem / 36px
Page Title
text-3xl — 1.875rem / 30px
Section Title
text-2xl — 1.5rem / 24px
Subheading
text-xl — 1.25rem / 20px
Lead text
text-lg — 1.125rem / 18px
Large body
text-base — 1rem / 16px
Body text for paragraphs and UI.
text-sm — 0.875rem / 14px
Small text, captions
text-xs — 0.75rem / 12px
Labels, metadata
Design Tokens
Spacing
| Token | Value |
|---|---|
--space-1 | 4px / 0.25rem |
--space-2 | 8px / 0.5rem |
--space-3 | 12px / 0.75rem |
--space-4 | 16px / 1rem |
--space-6 | 24px / 1.5rem |
--space-8 | 32px / 2rem |
--space-12 | 48px / 3rem |
--space-16 | 64px / 4rem |
--space-24 | 96px / 6rem |
Radien
| Token | Value |
|---|---|
--radius-sm | 6px |
--radius-md | 8px |
--radius-lg | 12px |
--radius-xl | 16px |
--radius-full | 9999px |
Schatten
| Token | Value |
|---|---|
--shadow-sm | Subtle elevation |
--shadow-md | Cards, dropdowns |
--shadow-lg | Modals, mobile menu |
UI-Elemente
Voice & Tone
Klar statt clever
Do: Wir bauen Websites, die Anfragen bringen.
Don't: Wir disruptieren Ihre digitale Customer Journey.
Auf Augenhöhe
Do: Sie kennen Ihr Geschäft — wir kennen die Technik.
Don't: Als Nicht-Techniker verstehen Sie das sowieso nicht.
Ergebnisse statt Buzzwords
Do: Mehr Anfragen über Ihre Website in 3 Monaten.
Don't: Synergien durch ganzheitliche Digitalisierung.