frontend-design

Commit to a strong, specific aesthetic direction before writing code, such as brutalist, editorial, or refined minimalism. Avoid overused fonts like Inter and Roboto, skip purple-blue gradients and uniform card grids, and vary spacing rhythm instead of using identical padding everywhere.

Three inputs are mandatory: the target audience, the use cases they need to accomplish, and the brand personality or tone. This context cannot be inferred from existing code, so it must come from project instructions, a .impeccable.md file, or direct user input.

OKLCH is perceptually uniform, meaning equal lightness steps look equal across hues, unlike HSL where 50% lightness yellow appears far brighter than 50% blue. It also makes it easier to build consistent tinted neutrals and dark mode surface scales.

Only animate transform and opacity, since other properties trigger layout recalculation. For height animations like accordions, transition grid-template-rows from 0fr to 1fr instead of animating the height property directly.

Yes. The references cover WCAG contrast ratios, focus-visible rings, prefers-reduced-motion alternatives, 44px touch targets, keyboard navigation patterns like roving tabindex, and accessible UX writing for links and alt text.

Modals should be a last resort when no better pattern exists. Prefer inline editing, popovers, or undo-based flows for destructive actions, since users typically dismiss confirmation dialogs without reading them.