brand-design

brand-design

Design that reads as intentional comes from a small set of decisions applied consistently, not from many one-off choices. Define a handful of tokens — colors, type sizes, spacing steps — up front, then reference them everywhere. If the user gave you brand colors/fonts, use those; otherwise pick a restrained set and commit to it. tokens.json is a ready-to-edit starting set.

Color: few roles, enough contrast

• A small palette beats a rainbow. Two or three neutrals (background, surface, text), one brand/accent, plus semantic red/amber/green for states. More colors read as noise, not richness.
• Think in roles, not hex. Name tokens by job — --color-bg, --color-text, --color-accent — so the same design works in light and dark by swapping values, not rewriting components.
• Contrast is non-negotiable. Body text must hit WCAG AA ≥ 4.5:1 against its background (≥ 3:1 for large/heading text and UI borders). Light-gray text on white fails — check it. Never rely on color alone to carry meaning (add an icon, label, or shape) for colorblind users.
• Accent sparingly. The accent marks the one thing you want clicked or read first. If everything is accented, nothing is.

Typography: one or two families, a real scale

• One typeface does most jobs. A single good sans (or a sans-for-UI + serif-for-body pair) is plenty. Pairing three fonts usually looks worse, not richer. System stacks (system-ui, sans-serif) are free, fast, and safe.
• Use a modular scale, not arbitrary px. Step by a ratio (~1.25) so sizes relate: e.g. 12 · 14 · 16 · 20 · 25 · 31 · 39. Body around 16px; don't go below 14px for anything meant to be read.
• Weight and size make hierarchy — heading vs body should be obvious at a glance. Two or three weights (e.g. 400/600/700) is enough.
• Line length and height. Aim for ~60–75 characters per line (max-width: ~65ch) and line-height ~1.5 for body, tighter (~1.2) for large headings. Long full-width lines are the most common readability killer.