le-19-stvn Frontend Design
Build interfaces that look decided, not defaulted.
Before writing UI
- Read
TASTE.mdand, if it exists,BRAND.md. Their palette, type, and anti-references override every generic default below. (Check for and open these with your Read/Glob tools, not shell commands — OS portability.) - Confirm the stack (React + Tailwind assumed unless told otherwise).
- Name the register from
TASTE.md(playful / editorial / technical…) and commit to it.
Rules
- Typography carries the design. Deliberate display/body pairing, real scale. Never leave everything at default 16px.
- Spacing is rhythm. Consistent 4/8px scale. Whitespace reads as intent.
- One accent, used sparingly — the one from
BRAND.md. - The one distinctive move. Every screen needs at least one considered, non-default decision (a border treatment, an asymmetric layout, a motion) that ties to
TASTE.md. This is where the human signature lives. - Accessibility is quality: contrast ≥ 4.5:1, visible focus states, hit areas ≥ 44px.
Anti-patterns to reject
The default three-equal-cards row as the only layout idea, centered-everything, unstyled component-library defaults shipped as final, "modern gradient" standing in for direction, lorem ipsum as final copy.
Before calling it done
Hand to the design-critic agent against TASTE.md. If it can't point to a visible human decision, redo it.