# milkinside.com — Design System

## 1. Visual Theme & Atmosphere

Milkinside operates in the space between editorial photography and product design — a clean, white-dominant canvas where **Aktiv Grotesk at featherweight (300)** does the expressive heavy lifting. The design philosophy is reduction: almost no custom CSS tokens, no elaborate shadow system, no color system beyond two or three surfaces. What remains is typographic authority and considered whitespace. The occasional muted lavender-gray (#63667a) provides the only non-neutral tone, acting less like an accent and more like a sophisticated secondary voice.

## 2. Color Palette & Roles

| Role | Value | Usage |
|------|-------|-------|
| Page Background | transparent / white | Canvas |
| Primary Text | `#000000` | Headings, body copy |
| Footer | dark inverted | Inverted section |
| Secondary Text | `#63667a` | Subheadings, captions |
| Overlay | `rgba(99, 102, 122, 0.5)` | Frosted UI elements |
| Glass Panel | `rgba(255, 255, 255, 0.2)` | Translucent cards |

No brand color. The palette is deliberately colorless — photography and work provide all chromatic interest.

## 3. Typography Rules

- **Font family**: Aktiv Grotesk (custom) — humanist sans-serif with Swiss precision and approachable warmth
- **Primary weight**: 300 (light) — used for headings and body, creating visual continuity
- **Scale**: Fluid — h2/h3 at ~41px, hero at ~67px
- **Line height**: Tight 1.1x ratio — editorial compression
- **Letter spacing**: Subtle positive tracking (~0.4px) — prevents light weight from collapsing at display sizes

| Level | Size | Weight | Line Height |
|-------|------|--------|-------------|
| Hero | ~67px | 300 | ~73px |
| H2 / H3 | ~41px | 300 | ~45px |

## 4. Component Stylings

- **Buttons**: Minimal, likely inheriting body type; no aggressive styling tokens
- **Cards**: Glass morphism with `rgba(255,255,255,0.2)` — light frosting on light
- **Navigation**: Transparent; no distinct nav background color
- **Overlays**: Semi-transparent lavender-gray — softens depth while maintaining legibility
- **Border radius**: 76px (pill) and 50px (large rounded) — organic, rounded shapes

## 5. Layout Principles

- **Breakpoints**: 340 → 600 → 768 → 1024 → 1728px
- **Grid**: Full-bleed sections with centered constrained content columns
- **Density**: Low — images and whitespace dominate over content density
- **Spacing**: Emerges from type rhythm rather than explicit token scales

## 6. Depth & Elevation

- Single soft shadow: `rgba(93, 82, 75, 0.3) 0px 4px 80px 0px` — warm-toned, wide-spread
- Glass surface: `rgba(255,255,255,0.2)` — depth through translucency, not shadow stacking
- Flat by philosophy — no multi-layer elevation system

## 7. Do's and Don'ts

**Do:**
- Use Aktiv Grotesk at weight 300 for all major type roles
- Let photography carry all chromatic expression
- Keep UI neutral — blacks, whites, and the single lavender-gray only
- Use large border-radii (50–76px) for interactive elements

**Don't:**
- Introduce typographic weights above 400
- Add colorful UI chrome — the work must remain the visual focus
- Use tight border-radii — the rounded language is foundational

## 8. Responsive Behavior

- Five breakpoints mirroring wide-format design
- Photography-led layouts collapse to single column on mobile
- Glass panels may flatten to opaque surfaces at small sizes

## 9. Agent Prompt Guide

> "Design in the style of Milkinside: pure white background, Aktiv Grotesk light (weight 300), near-colorless palette with `#63667a` lavender-gray as the only accent, large rounded corners (50–76px), single wide-spread warm shadow, photography-led layout with generous whitespace."

**Quick reference:**
- Background: `#ffffff`
- Body text: `#000000`
- Secondary: `#63667a`
- Font: Aktiv Grotesk, weight 300
- Border radius: 50–76px

*Generated by Sparkbites — extracted from live CSS analysis*