DESIGN SYSTEM
Dreiraum Styleguide
Das visuelle Fundament von Dreiraum Coworking. Farben, Typografie, Komponenten und Patterns auf einen Blick.
Farben
Die Farbpalette basiert auf den Markenfarben von Dreiraum Coworking: Forest Green als Primaerfarbe, Gelb als Akzent, Creme und helle Toene fuer Hintergruende.
Primaerfarben
#113F2C
Primaerfarbe, Text, Buttons, Header
#1a5a3e
Hover-States
#f0eba0
CTA-Buttons, Akzente, Highlights
#f5f0e8
Hintergruende, Cards, Preis-Boxen
#d4e4bc
Dekorative Elemente, Akzente
#fdf9e0
Helle Hintergruende, Featured-Cards
Neutrale Farben
#1a1a1a
Text auf hellen Hintergruenden
#5c5e62
Sekundaertext, Beschreibungen
#f2f0eb
Sektions-Hintergruende
#e5e5e5
Card-Rahmen, Trennlinien
#ffffff
Cards, Content-Hintergrund
#e8b730
Bewertungs-Sterne
Typografie
Systemschrift fuer optimale Ladezeiten und native Darstellung auf allen Geraeten.
Logo
Ueberschriften
Inspire. Create. Grow.
Unsere Angebote
Meeting- & Coachingraum
Body & Labels
Bei unseren vollstaendig ausgestatteten Coworking-Bereichen ist alles geregelt. Du kannst einfach reinkommen und dich an die Arbeit machen.
Buttons
Alle Buttons verwenden die Pill-Form (border-radius: 999px). Die Primaerfarbe ist Forest Green, Akzent-CTAs nutzen Gelb.
Standard-Buttons
Hero-Buttons (auf dunklem Hintergrund)
Hero-Buttons (auf hellem Hintergrund)
Header CTA
Spezifikationen
| Eigenschaft | Wert |
|---|---|
| Border-Radius | 999px (Pill-Form) |
| Font-Size | 0.85rem |
| Font-Weight | 600 |
| Letter-Spacing | 0.02em |
| Padding (Standard) | 0.75rem 1.5rem |
| Padding (Hero) | 0.85rem 2rem |
| Min-Width (Hero) | 220px |
| Hover-Effekt | translateY(-1px) |
| Transition | all 0.3s ease |
Cards
Cards verwenden einheitlich border-radius: 16px, einen feinen Rahmen und einen Lift-Effekt beim Hover.
Offer Card
Meeting- & Coachingraum
Professionelle Raeume fuer Meetings und Coachings.
Spezifikationen
| Eigenschaft | Wert |
|---|---|
| Border-Radius | 16px |
| Border | 1px solid #e5e5e5 |
| Background | #ffffff |
| Bild-Hoehe | 240px (object-fit: cover) |
| Content-Padding | 1.5rem |
| Hover | translateY(-4px) + box-shadow: 0 12px 40px rgba(0,0,0,0.1) |
| Bild-Zoom | scale(1.05) on hover |
Grid-System
CSS Grid mit max-width 1200px Container. Responsive Breakpoints bei 1024px und 768px.
3-Spalten Grid (Standard)
2-Spalten Grid
Breakpoints
| Breakpoint | Spalten | Beschreibung |
|---|---|---|
> 1024px | 3 Spalten | Desktop-Standard |
<= 1024px | 2 Spalten | Tablet |
<= 768px | 1 Spalte | Mobile |
Container
| Eigenschaft | Wert |
|---|---|
| Max-Width | 1200px |
| Padding | 0 2rem |
| Margin | 0 auto |
Spacing
Konsistente Abstaende fuer einheitliches Layout.
0.5rem
XS - Icon-Gaps, Dots
1rem
S - Button-Gaps, kleine Abstaende
1.5rem
M - Card-Padding, Grid-Gaps
2rem
L - Sektions-Gaps, Grid-Gaps
3rem
XL - Grosse Grid-Gaps
5rem
XXL - Sektions-Padding vertikal
Icons
Inline-SVGs mit stroke-basiertem Design. Einheitlich 20-24px, stroke-width: 2, currentColor.
Spezifikationen
| Eigenschaft | Wert |
|---|---|
| Groesse | 20px (Standard) / 24px (Navigation) |
| Stroke | currentColor |
| Stroke-Width | 2 |
| Fill | none |
Animationen & Transitions
Subtile, performante Animationen fuer ein hochwertiges Nutzererlebnis.
| Element | Eigenschaft | Dauer | Easing |
|---|---|---|---|
| Buttons | background, color, transform | 0.3s | ease |
| Cards | transform, box-shadow | 0.3s | ease |
| Card-Bilder | transform (scale) | 0.5s | ease |
| Header | background, backdrop-filter | 0.4s | ease |
| Carousel-Slides | opacity | 1.2s | ease |
| Links | color, opacity | 0.3s | ease |
Hover-Effekte
| Element | Effekt |
|---|---|
| Buttons | translateY(-1px) |
| Cards | translateY(-4px) + Shadow |
| Card-Bilder | scale(1.05) |
| Carousel-Dot (aktiv) | scale(1.3) |
Border-Radius
4px
Nav-Items
12px
Kleine Cards
16px
Cards (Standard)
999px
Buttons (Pill)
50%
Kreise, Dots