Minimalist Skill — Premium Editorial Minimalism

Use this skill when the task calls for a refined, typographic-first, Notion/Linear-inspired interface. Produces clean, data-dense UIs with strong visual hierarchy through typography and whitespace alone.

Use when

• Building productivity tools, documentation sites, or admin dashboards.
• The design needs to feel premium without heavy decoration.
• Notion, Linear, or editorial publication aesthetic is the goal.
• Reducing visual noise while maintaining clarity and hierarchy.

Typography Framework

• Sans-serif UI: SF Pro Display, Geist Sans, or Helvetica Neue.
• Editorial headline serif: Lyon Text, Newsreader, or Playfair Display with tight tracking.
• Monospace: Geist Mono or SF Mono.
• Body text: charcoal (#111111) — never pure black. Generous line-height.
• Forbidden fonts: Inter, Roboto, Open Sans.

Color Strategy

• Warm monochrome base with ultra-desaturated accent pastels.
• Accent pastels: pale red, blue, green, or yellow — below 30% saturation.
• Borders: 1px solid #EAEAEA consistently.
• No large colored backgrounds.
• No gradients, neon, or heavy shadows.

Layout Rules

• Generous padding (40–80px vertical rhythm).
• Cards: 8–12px border-radius, 24–40px padding.
• No pill-shaped containers for large elements.
• Restrict color use to 1 accent per view.
• Typographic contrast IS the primary design tool.

Component Patterns

• Primary buttons: solid #111111, minimal hover (opacity shift or subtle border).
• Accordions: no container boxes; bottom-border separators only.
• Tables: borderless rows with alternating subtle backgrounds.
• Forms: label above, full-width input, 1px border, generous padding.

Animation

• Subtle only: fade + translate on scroll entry, 600ms, cubic-bezier easing.
• Animate only transform and opacity.
• No auto-playing, looping, or decorative animations.

Forbidden

• Lucide, Feather, or generic Heroicons.
• Gradients, heavy shadows, neon colors.
• Pill-shaped buttons on large elements.
• Symmetrical hero sections.

Deliverable

• Complete editorial-quality component code.
• Strong typographic hierarchy throughout.
• Mobile-first with logical breakdown of columns.