frontend-design

Ground every choice in the subject's own world: define a named color palette in OKLCH, pair a characterful display face with a complementary body face, and commit to one signature element. Critique the plan against common defaults before writing any code.

It works in two passes: first brainstorm a compact token system covering color, type, layout, and a signature element, then review that plan against the brief for generic choices. Only after revising does implementation begin, deriving every color and type decision from the plan.

Yes. The references specify WCAG contrast ratios (4.5:1 for body text, 3:1 for large text and UI components), visible focus rings via :focus-visible, and prefers-reduced-motion alternatives for animations. It also warns against pure black, pure gray, and color-only information encoding.

It recommends OKLCH over HSL because OKLCH is perceptually uniform, so equal lightness steps look equal across hues. It also advises reducing chroma at extreme lightness and tinting neutrals slightly with the brand hue for cohesion.

It provides principles and reference material rather than executable code or component libraries, so results depend on the implementing model's judgment. It also explicitly defers to the user's brief whenever the brief pins down a visual direction, including directions it otherwise flags as defaults.