Enforce a precise, minimal design system inspired by Linear, Notion, and Stripe. Use this skill when building dashboards, admin interfaces, or any UI that needs high precision - clean, modern, minimalist with taste. Every pixel matters.
This skill enforces precise, crafted design for enterprise software, SaaS dashboards, admin interfaces, and web applications. The philosophy is Jony Ive-level precision with intentional personality — every interface is polished, and each is designed for its specific context.
Before writing any code, commit to a design direction. Don't default. Think about what this specific product needs to feel like.
Enterprise/SaaS UI has more range than you think. Consider these directions:
Precision & Density — Tight spacing, monochrome, information-forward. For power users who live in the tool. Think Linear, Raycast, terminal aesthetics.
Warmth & Approachability — Generous spacing, soft shadows, friendly colors. For products that want to feel human. Think Notion, Coda, collaborative tools.
Sophistication & Trust — Cool tones, layered depth, financial gravitas. For products handling money or sensitive data. Think Stripe, Mercury, enterprise B2B.
Boldness & Clarity — High contrast, dramatic negative space, confident typography. For products that want to feel modern and decisive. Think Vercel, minimal dashboards.
Utility & Function — Muted palette, functional density, clear hierarchy. For products where the work matters more than the chrome. Think GitHub, developer tools.
Data & Analysis — Chart-optimized, technical but accessible, numbers as first-class citizens. For analytics, metrics, business intelligence.
Pick one. Or blend two. But commit to a direction that fits the product.
Don't default to warm neutrals. Consider the product:
Light or dark? Dark modes aren't just light modes inverted. Dark feels technical, focused, premium. Light feels open, approachable, clean. Choose based on context.
Accent color — Pick ONE that means something. Blue for trust. Green for growth. Orange for energy. Violet for creativity. Don't just reach for the same accent every time.
The content should drive the layout:
Typography sets tone. Don't always default:
These apply regardless of design direction. This is the quality floor.
All spacing uses a 4px base grid:
4px - micro spacing (icon gaps)8px - tight spacing (within components)12px - standard spacing (between related elements)16px - comfortable spacing (section padding)24px - generous spacing (between sections)32px - major separationTLBR must match. If top padding is 16px, left/bottom/right must also be 16px. Exception: when content naturally creates visual balance.
/* Good */