# MC Uhlenbrock Design System

**Version:** 2.0 (Final)  
**Source:** Gemini-Entwurf  
**Fonts:** Gloock (Display) + Inter (Body)  
**Colors:** Olive Green / Lime Palette

---

## Overview

This design system is based on the **Gemini-Entwurf** — the final web design for MC Uhlenbrock. It features a nature-inspired aesthetic with warm earth tones and sophisticated typography.

### Key Characteristics

- **Naturnahe Gestaltung** — Warme, erdige Farbtöne
- **Premium Typography** — Gloock (serif) für Eleganz, Inter (sans) für Lesbarkeit
- **Light/Dark Support** — Vollständige Dark-Mode-Unterstützung via CSS Custom Properties
- **Section Coding** — Farbliche Kennzeichnung verschiedener Sektionen

---

## Colors

### Primary Palette

| Name | Light | Dark | Usage |
|------|-------|------|-------|
| **Olive Green** | `#6D7647` | `#B1C553` | Primary accent, CTAs, Links |
| **Olive Deep** | `#4A5230` | `#cdd98a` | Hover state |
| **Lime** | `#B1C553` | `#B1C553` | Secondary accent, Highlights |

### Neutral Palette

| Name | Light | Dark | Usage |
|------|-------|------|-------|
| **Off-White** | `#EDEDE9` | `#2D2926` | Background |
| **Surface** | `#F4F3EF` | `#34302b` | Cards, Panels |
| **Charcoal** | `#2D2926` | `#EDEDE9` | Text (NOT pure black!) |
| **Text Soft** | `#5a564f` | `rgba(237,237,233,0.74)` | Secondary text |
| **Text Faint** | `#8f8b82` | `rgba(237,237,233,0.46)` | Meta, Labels |

### Section Colors

| Section | Color | Hex |
|---------|-------|-----|
| Robert | Petrol | `#59A8C1` |
| Therapie | Amber | `#E5AB4A` |
| Preise | Koralle | `#E6826B` |
| FAQ | Flieder | `#BD7CB3` |
| Kontakt | Olive | `#6D7647` |

---

## Typography

### Font Stack

```css
--font-heading: 'Gloock', serif;
--font-body: 'Inter', 'Helvetica Neue', sans-serif;
--font-mono: 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', monospace;
```

### Scale

| Element | Size | Weight | Letter Spacing |
|---------|------|--------|----------------|
| H1 | `clamp(2.6rem, 6.5vw, 5.4rem)` | 700 | -0.015em |
| H2 | `clamp(1.9rem, 4vw, 3.2rem)` | 700 | -0.01em |
| H3 | `clamp(1.25rem, 2vw, 1.6rem)` | 700 | 0 |
| Body | `clamp(1rem, 1.05vw, 1.08rem)` | 400 | 0 |
| Small | `0.85rem` | 400 | 0 |
| Mono | `0.75rem` | 500 | 0.04em |

### Line Heights

- **Tight (1.1):** Headlines
- **Normal (1.6):** Body text
- **Relaxed (1.7):** Long paragraphs

---

## Spacing & Shapes

### Border Radius

```css
--radius: 6px;      /* Buttons, Inputs */
--radius-lg: 12px;  /* Cards, Panels */
--radius-full: 99px; /* Pills, Badges */
```

### Shadows

```css
--shadow: 0 10px 36px rgba(45, 41, 38, 0.06);      /* Standard (warm) */
--shadow-soft: 0 12px 36px rgba(0,0,0,0.06);         /* Hover */
```

---

## Components

### Buttons

Three variants:
1. **`.btn-accent`** — Filled, primary CTA
2. **`.btn-outline`** — Bordered, secondary
3. **`.btn-ghost`** — Minimal, tertiary

### Cards

```css
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
```

### Tags

```css
.tag {
  background: rgba(109, 118, 71, 0.15);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  border-radius: 99px;
}
```

---

## AI Agent Instructions

When using this design system:

1. **Upload `design-tokens.json`** as context for structured data
2. **Reference `design-system.css`** for ready-to-use variables
3. **Follow these rules:**
   - Primary color: `#6D7647` (Olive Green)
   - Text color: `#2D2926` (Charcoal, NOT pure black!)
   - Background: `#EDEDE9` (Off-White, NOT pure white!)
   - Headlines: Gloock (serif) — elegant, nature-inspired
   - Body: Inter (sans-serif) — modern, readable
   - Border-Radius: `6px` (buttons), `12px` (cards)
   - Shadows: subtle, warm tones

---

## Files

| File | Description |
|------|-------------|
| `design-tokens.json` | Machine-readable tokens (W3C DTCG format) |
| `design-system.css` | CSS Custom Properties, ready to use |
| `design-system-preview.html` | Visual showcase with live demos |
| `images/` | Downloadable assets from Gemini-Entwurf |

---

## Version History

- **v2.0 (2026-07-09):** Final version based on Gemini-Entwurf. Updated fonts (Gloock + Inter), refined color system, added downloadable images.
- **v1.0:** Initial design system with Outfit + Roboto.