Brand Kit
Design system and brand guidelines — single source of truth for the CodeQuadrat website.
Copy design guidelines as text for AI tools or briefings.
Logo
Logo variants for web and print — primary, monochrome and icon.
Colors
HSL is the source of truth. HEX is computed exactly.
Salbei
Kobalt
Graphit
Semantic
Typography
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 |
Radii
| Token | Value |
|---|---|
--radius-sm | 6px |
--radius-md | 8px |
--radius-lg | 12px |
--radius-xl | 16px |
--radius-full | 9999px |
Shadows
| Token | Value |
|---|---|
--shadow-sm | Subtle elevation |
--shadow-md | Cards, dropdowns |
--shadow-lg | Modals, mobile menu |
UI elements
Voice & tone
Clear over clever
Do: "We build websites that generate inquiries."
Don't: "We disrupt your digital customer journey."
On equal footing
Do: "You know your business — we know the tech."
Don't: "As a non-technical person, you wouldn't understand anyway."
Results over buzzwords
Do: "More inquiries through your website in 3 months."
Don't: "Synergies through holistic digitalization."