# Visual Directions — Complete Token Sets

## 1. Editorial Serif

**For:** Consultancies, media, publications. Intellectual authority.

```
--color-primary:    #111111
--color-secondary:  #4A4A4A
--color-background: #F9F9F7
--color-text:       #111111
--color-accent:     #8B0000
--font-heading:     'Playfair Display', serif
--font-body:        'Lora', serif
--font-size-base:   18px
--border-radius:    0px
--spacing-unit:     8px
--shadow:           none
```

**Ideal components:** Text Reveal (MagicUI), large typographic blocks, wide margins.

---

## 2. Swiss Minimal

**For:** SaaS, DevTools, dashboards. Functional clarity without distractions.

```
--color-primary:    #000000
--color-secondary:  #888888
--color-background: #FFFFFF
--color-text:       #000000
--color-accent:     #0055FF
--font-heading:     'Inter', sans-serif
--font-body:        'Inter', sans-serif
--font-size-base:   16px
--border-radius:    4px
--spacing-unit:     8px
--shadow:           0 1px 3px rgba(0,0,0,0.1)
```

**Ideal components:** Bento Grid (MagicUI), Border Beam, Number Ticker.

---

## 3. Luxury Dark Warm

**For:** Premium brands, jewelry, fashion, hospitality. Intimate warmth.

```
--color-primary:    #D4AF37
--color-secondary:  #8C7B50
--color-background: #12100E
--color-text:       #F5F5DC
--color-accent:     #C5A059
--font-heading:     'Cinzel', serif
--font-body:        'Montserrat', sans-serif
--font-size-base:   16px
--border-radius:    2px
--spacing-unit:     12px
--shadow:           0 4px 20px rgba(0,0,0,0.5)
```

**Ideal components:** Magic Card, Shine Border, Animated Beam (MagicUI).

---

## 4. Corporate Bold

**For:** Enterprise, B2B, fintech. Structured trust.

```
--color-primary:    #0A2540
--color-secondary:  #425466
--color-background: #F6F9FC
--color-text:       #0A2540
--color-accent:     #635BFF
--font-heading:     'Roboto', sans-serif
--font-body:        'Open Sans', sans-serif
--font-size-base:   16px
--border-radius:    6px
--spacing-unit:     8px
--shadow:           0 2px 4px rgba(0,0,0,0.05)
```

**Ideal components:** Orbiting Circles, Icon Cloud, Globe (MagicUI).

---

## 5. Understated Elegance

**For:** Creative agencies, wellness, portfolios. Editorial calm.

```
--color-primary:    #4A5D4E
--color-secondary:  #8B9D8F
--color-background: #F4F1EB
--color-text:       #2C352D
--color-accent:     #D4A373
--font-heading:     'Cormorant Garamond', serif
--font-body:        'Lato', sans-serif
--font-size-base:   17px
--border-radius:    8px
--spacing-unit:     12px
--shadow:           0 10px 30px rgba(0,0,0,0.03)
```

**Ideal components:** Blur Fade, Progressive Blur, Lens (MagicUI).

---

## 6. Neo-Brutalist

**For:** Disruptive startups, art, communities. Raw irreverence.

```
--color-primary:    #000000
--color-secondary:  #FFFFFF
--color-background: #FFE500
--color-text:       #000000
--color-accent:     #FF00FF
--font-heading:     'Space Grotesk', sans-serif
--font-body:        'Space Grotesk', sans-serif
--font-size-base:   16px
--border-radius:    0px
--spacing-unit:     16px
--shadow:           4px 4px 0px 0px #000000
```

**Ideal components:** SplitText (ReactBits), Ballpit, Tilted Card (ReactBits).

---

## 7. Playful Gradient

**For:** Modern web apps, consumer products, creative tools.

```
--color-primary:    #7B2CBF
--color-secondary:  #9D4EDD
--color-background: #FAFAFA
--color-text:       #10002B
--color-accent:     #FF9E00
--font-heading:     'Poppins', sans-serif
--font-body:        'Nunito', sans-serif
--font-size-base:   16px
--border-radius:    16px
--spacing-unit:     8px
--shadow:           0 8px 32px rgba(123,44,191,0.15)
```

**Ideal components:** Aurora Text, Animated Gradient Text, Particles, Confetti (MagicUI).

---

## 8. Retro Terminal

**For:** DevTools, CLIs, developer tools, technical documentation.

```
--color-primary:    #00FF41
--color-secondary:  #008F11
--color-background: #0D0208
--color-text:       #00FF41
--color-accent:     #FE019A
--font-heading:     'Fira Code', monospace
--font-body:        'Fira Code', monospace
--font-size-base:   15px
--border-radius:    0px
--spacing-unit:     8px
--shadow:           0 0 10px rgba(0,255,65,0.2)
```

**Ideal components:** Terminal (MagicUI), Typing Animation, Hyper Text, Code Comparison.