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

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

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