# minimum.studio — Design System

## 1. Visual Theme & Atmosphere

Minimum Studio's identity is exactly what the name implies: **radical reduction to essentials**. The palette collapses to a single electric indigo-blue (#434EDF) against pure white, delivered through two typefaces — Aeonik for modern display, Aktiv Grotesk for operational text. The blue is not used sparingly; it saturates backgrounds, buttons, and inline elements with confidence. The effect is a design system that communicates bold creative conviction without visual complexity.

## 2. Color Palette & Roles

| Role | Value | Usage |
|------|-------|-------|
| Brand Blue | `#434EDF` | Backgrounds, buttons, links, active states |
| White | `#ffffff` | Text on blue, page background |
| Border / Divider | `#e5e7eb` | Structural lines |

Three-color palette. Indigo-blue does all expressive work. White provides relief. Gray-200 handles structure.

## 3. Typography Rules

- **Display font**: Aeonik (weight 500) — geometric, contemporary, slightly warm
- **Body**: Aktiv Grotesk (weight 400) — humanist precision for readable text
- **H1**: 35.2px / 40px — tight 1.14x ratio for confident editorial headings
- **Body baseline**: 16px / 24px — comfortable reading rhythm
- **No letter-spacing overrides** — fonts at their optical defaults

| Level | Font | Size | Weight | Line Height |
|-------|------|------|--------|-------------|
| H1 | Aeonik | 35.2px | 500 | 40px |
| Body | Aktiv Grotesk | 16px | 400 | 24px |
| Blockquote | Aktiv Grotesk | 16px | 400 | 24px |

## 4. Component Stylings

- **Buttons**: Solid `#434EDF` fill, white text — no gradient, no shadow, no ambiguity
- **Links**: Blue fill background — `a { background: #434EDF; color: #fff }`
- **Cards**: White surface with `#e5e7eb` border — clean, no default elevation
- **Shadows**: `rgba(0,0,0,0.1) 0px 10px 15px -3px` — Tailwind shadow-lg equivalent

## 5. Layout Principles

- **Full-screen blue panels**: `div.w-screen` at `#434EDF` — sections of pure brand color
- **White canvas base**: Default page white with blue UI elements
- **Tailwind-based grid**: Spacing from Tailwind default scale
- **Density**: Clean with deliberate whitespace — studio/agency pacing

## 6. Depth & Elevation

- Single shadow: `rgba(0,0,0,0.1) 0px 10px 15px -3px` — Tailwind shadow-lg
- No elevation hierarchy beyond surface vs. raised
- Depth via color block contrast (blue section / white section)

## 7. Do's and Don'ts

**Do:**
- Use `#434EDF` at full saturation — diluting reduces impact
- Switch entirely between blue and white — no mid-tones
- Keep typography weights at 400 and 500 only
- Use full-bleed blue sections as structural rhythm markers

**Don't:**
- Tint the blue at reduced opacity for decoration
- Add a secondary accent color — the system is deliberately monochromatic
- Use heavy font weights that conflict with Aeonik's geometric nature

## 8. Responsive Behavior

- Tailwind-based responsive system
- Full-width blue blocks collapse to stacked sections on mobile
- Single Tailwind shadow tier scales across breakpoints

## 9. Agent Prompt Guide

> "Design in the style of Minimum Studio: pure white background, electric indigo-blue `#434EDF` used boldly for backgrounds and CTAs, Aeonik Medium display type, Aktiv Grotesk body, Tailwind utility-first layout, no complex shadows."

**Quick reference:**
- Background: `#ffffff`
- Brand: `#434EDF`
- Border: `#e5e7eb`
- Display font: Aeonik, 500
- Body font: Aktiv Grotesk, 400

*Generated by Sparkbites — extracted from live CSS analysis*