frontend-design

Ground every choice in the subject's own world: derive palette, typography, and layout from the brief's materials and vernacular rather than default patterns. Plan a token system first, then critique it against the brief and revise anything that reads as a templated default before coding.

Pair a characterful display face used with restraint against a complementary body face, plus a utility face for captions or data if needed. Set a clear type scale with intentional weights, widths, and spacing so the type treatment itself becomes a memorable part of the design.

Yes, the Skill covers both building new UI and reshaping an existing one. The same process applies: pin down the subject and the page's job, plan a token system, critique it for generic defaults, then implement the revised plan.

They cluster around a few defaults: cream backgrounds with serif display type and terracotta accents, near-black backgrounds with a single acid accent, or broadsheet layouts with hairline rules. These appear regardless of subject because they are defaults rather than choices made for the specific brief.

Avoid scattered effects when they do not serve the subject, since excess animation contributes to an AI-generated feel. Prefer one orchestrated moment such as a page-load sequence or scroll-triggered reveal, and always respect reduced-motion preferences.