Color and typography are not aesthetic choices — they are functional ones. They affect trust, readability, and comprehension before a single word is consciously read. A design that uses color and type poorly feels unprofessional even when the layout is correct. A design that uses them well earns attention and credibility before the user has processed a single sentence. Understanding both is non-negotiable for anyone serious about UX.
The 3 color roles every product needs
Good product color systems are built on three roles, not a mood board. Primary is your brand color — used for calls to action, interactive elements, and anything that says "do something here." It should appear sparingly so that when it does appear, the user's eye goes there immediately. Neutral is your grays — used for text, backgrounds, dividers, and containers. This is where most of your interface lives. Semantic colors are green, red, yellow, and blue — reserved exclusively for status communication (success, error, warning, information). Mixing these roles — for example, using your brand green for both CTAs and success states — creates confusion that users feel even if they cannot name it.
The accessibility rule you cannot break
The WCAG 2.2 AA standard requires a 4.5:1 contrast ratio between body text and its background. This is not a guideline you can soften for aesthetic reasons — it is the minimum for legal compliance in many jurisdictions and the minimum for readability in real conditions (bright sunlight, aging eyes, low-quality screens). Test every color combination before calling it final. There are free tools — Contrast Checker by WebAIM is the standard. If your light gray text on a white card fails the check, you need a darker gray, not an exception.
The type scale secret
Most junior designers choose font sizes by feel — picking whatever looks right in the moment. The result is inconsistent hierarchy that makes interfaces feel unpredictable. The professional approach is a mathematical type scale: choose a base size (16px is the standard) and a ratio (1.25 is a common starting point), then generate your scale algorithmically. Every heading size, every label size, every caption size comes from the same ratio. The result is hierarchy that feels natural because it is — it mirrors the harmonic proportions that human perception finds pleasing.
The 3 most important typography rules
Minimum 16px for body text — anything smaller degrades readability on mobile and for users over 40. Maximum 75 characters per line — lines that are too long cause the eye to lose its place when tracking back to the start of the next line. Minimum 1.5x line height for body text — cramped lines make paragraphs feel like walls of text that users skip rather than read.
What junior designers get wrong
The most common mistake is adding new colors to solve visual problems rather than adjusting the existing palette. If a section feels flat, the answer is usually better use of existing neutrals and primary colors — not a new accent color. The second mistake is using more than two typefaces. One for headings, one for body, and you are done. The third mistake is choosing typography that looks beautiful in a design tool but becomes unreadable in real conditions — thin weights, low contrast combinations, and decorative fonts that break down at small sizes. Always test in the browser, on a real device, in real lighting before finalizing your type choices.