| name | minimal |
| description | Design clean, editorial-style interfaces focused on typography, whitespace, and structural clarity. |
Minimal
Create high-end, document-style interfaces that prioritize content over decoration. Inspired by the editorial design of premium publications and minimalist software like Linear, Notion, and Stripe Docs.
What This Skill Does
This skill prevents "over-designing" by enforcing a monochrome-first philosophy, strict typographic scales, and the intentional use of whitespace as a functional element. It replaces visual noise with structural elegance.
Rules
- Monochrome First: Build the entire layout in black, white, and gray. Add color last, and only for specific semantic emphasis.
- Typographic Contrast: Use a high-end Serif for display headings and a clean Sans for body copy. Use scale, not color, to establish hierarchy.
- Flat Materiality: No shadows deeper than
2px. No gradients. Borders should be ultra-light (rgba(0,0,0,0.06)).
- Editorial Spacing: Use "macro-whitespace" — large gaps between sections (
py-32) to signal the end of a thought or context shift.
- Micro-UIs: Use
<kbd> tags for shortcuts and small, uppercase labels with wide tracking (letter-spacing: 0.1em) for metadata.
- Constraint of Icons: Use only one icon family with a consistent, light stroke weight. Remove icons that don't serve a functional purpose.
What to Always Do
- Use "Paper" Backgrounds: Use off-white or very light gray (
#F7F6F3) backgrounds to reduce eye strain and feel more like physical media.
- Center the Content: Constrain the main text column to a readable width (max
65ch or 720px).
- Subtle Hover States: Use slight background shifts or scale transforms (
scale(0.98)) rather than dramatic color changes.
- Focus on the Grid: Use a 4-column or 8-column grid with generous gutters.
What to Never Do
- Never use more than one accent color: If you use blue for links, don't use green for buttons.
- Never use generic "Inter" or "Roboto": Use
Geist, SF Pro, or Switzer.
- Never use "Pill" shapes for large elements: Reserve fully rounded corners for small tags and status badges only.
- Never use emojis: Replace with clean SVG icons or typographic symbols.
Settings
- EDITORIAL_AIR (Default: 8): 1 = Compact/Dense, 10 = Airy/Spacious.
- CONTRAST_STRICTNESS (Default: 9): 1 = Colorful/Soft, 10 = High-Contrast Monochrome.
Examples
Before (Generic Minimal)
- White background, Inter font, standard
p-4 cards.
- Lucide icons with default stroke.
- Light blue accent on all buttons and links.
After (Minimal Applied)
- Warm off-white canvas, Geist Sans body, Instrument Serif display.
- Border-bottom dividers instead of cards.
- Monochrome palette with a single muted slate accent.
py-24 section spacing.
