UI Principles

A restrained product UI system. The aesthetic is calm confidence — good UI lasts and stays out of the way. If a piece feels like it's trying to impress, it has failed. Full source text and the "why" behind each rule: PRINCIPLES.md. Worked before/after patterns: EXAMPLES.md.

This skill enforces rules, not numbers. It does not ship a type scale, palette, spacing scale, or radius. Each project defines its own values — the skill makes sure those values are used with discipline. Where a project already has tokens (CSS variables, a Tailwind theme, a design system), bind to those; never hardcode a one-off.

Order of attention

Fix in this sequence — earlier wins beat later polish. Alignment → padding → hierarchy → color → motion. Most "off" layouts are a spine break or padding asymmetry, not a missing color.

The rules

Layout

• One column width. Every section shares the same max-width container and the same vertical axis; edges line up top to bottom.
• Symmetric padding: top equals bottom, left equals right. Treat each spacing value as a decision.
• Content fills its parent. To narrow something, narrow its container — never cap an individual element with its own width.
• Rhythm from repetition: pick one section gap, one heading gap, one radius, one hover behavior, and reuse them everywhere. Same calm at 320px as at a wide viewport — reflow content, hold the discipline.