minimal

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

1. Monochrome First: Build the entire layout in black, white, and gray. Add color last, and only for specific semantic emphasis.
2. Typographic Contrast: Use a high-end Serif for display headings and a clean Sans for body copy. Use scale, not color, to establish hierarchy.
3. Flat Materiality: No shadows deeper than 2px. No gradients. Borders should be ultra-light (rgba(0,0,0,0.06)).
4. Editorial Spacing: Use "macro-whitespace" — large gaps between sections (py-32) to signal the end of a thought or context shift.
5. Micro-UIs: Use <kbd> tags for shortcuts and small, uppercase labels with wide tracking (letter-spacing: 0.1em) for metadata.
6. 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.