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

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

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