The Complete Guide to Color & Typography in Design

Everything you need to know about choosing colors, pairing fonts, and building design systems that look professional and work for everyone.

1. Color Fundamentals

Every color you see on a screen is defined by numbers. Understanding how these numbers work is the foundation for making intentional color choices rather than guessing until something "looks right."

Color Models: HEX, RGB, and HSL

HEX is the most common format in web design. A six-character code like #3B82F6 encodes the red, green, and blue channels as pairs of hexadecimal digits. The first two characters control red, the middle two control green, and the last two control blue. HEX is compact and widely supported, but it's not intuitive — you can't look at #3B82F6 and immediately know it's a medium blue.

RGB spells out the same information in decimal form: rgb(59, 130, 246). Each channel ranges from 0 to 255. The RGB model maps directly to how screens produce color — by mixing red, green, and blue light. When all three channels are at 255, you get white. When they're all at 0, you get black. RGB is easy to read but difficult to manipulate mentally. If you want a slightly warmer version of a color, which channel do you adjust?

HSL stands for Hue, Saturation, and Lightness, and it's the most human-friendly model. Hue is a degree on the color wheel (0° is red, 120° is green, 240° is blue). Saturation is a percentage — 100% is vivid, 0% is gray. Lightness is also a percentage — 50% is the "pure" color, 0% is black, 100% is white. With HSL, adjusting a color is intuitive: want it warmer? Shift the hue. Want it more muted? Lower saturation. Want a lighter variant for a background? Increase lightness.

The Color Wheel

The color wheel arranges hues in a circle, with primary colors (red, blue, yellow in traditional theory; red, green, blue in digital) spaced evenly. Between the primaries sit secondaries (created by mixing two primaries) and tertiaries (mixing a primary with its adjacent secondary). The wheel is the backbone of every palette strategy — it tells you which colors harmonize, which ones contrast, and which ones clash.

Understanding color temperature is essential. Colors on the red-orange-yellow side of the wheel are "warm" and tend to advance visually — they feel closer and more energetic. Colors on the blue-green-violet side are "cool" and tend to recede — they feel calmer and more spacious. Most effective designs use a dominant temperature with accents from the opposite side.

2. Building Color Palettes

A color palette isn't just a random collection of nice colors. It's a system with roles: primary, secondary, accent, neutral, and semantic colors each serve a distinct purpose in your interface or brand.

Harmony Methods

Monochromatic palettes use a single hue with varying saturation and lightness. They're the safest choice — nearly impossible to get wrong. A monochromatic blue palette might include a deep navy for headings, a medium blue for buttons, a light blue for backgrounds, and a very light blue for hover states. The consistency creates a calm, professional feel.

Complementary palettes use two colors from opposite sides of the color wheel — like blue and orange, or purple and yellow. The high contrast creates energy and draws attention. The key is balance: use one color as the dominant (roughly 70% of the design) and its complement as the accent (roughly 10%), with neutrals filling the remaining 20%.

Analogous palettes use colors that sit next to each other on the wheel — like blue, blue-green, and green. They feel natural and harmonious because these combinations occur frequently in nature (think ocean water, sky, and foliage). The lack of strong contrast makes them soothing but can also feel flat if you don't vary lightness enough.

Triadic palettes use three colors evenly spaced around the wheel — like red, blue, and yellow. They offer strong visual contrast while maintaining color balance. Triadic palettes feel vibrant and playful, which makes them popular for creative brands and children's products, but harder to use in corporate or minimalist design.

Split-complementary palettes are a safer version of complementary: instead of the direct opposite, you use the two colors adjacent to the complement. This gives you contrast without the intensity of a true complementary scheme.

Building a Practical Palette

For most projects, you need five groups of colors. Start with your primary color — this is your brand color, used for key actions and important UI elements. Then choose a secondary color that supports the primary without competing with it. Add a neutral scale from near-white to near-black (7-10 shades) for text, backgrounds, borders, and surfaces. Include semantic colors for success (green), warning (amber), error (red), and info (blue). Finally, pick one accent color for highlights and decorative elements.

3. Color Accessibility & Contrast

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Beyond that, context matters: screens viewed in bright sunlight, low-quality displays, and aging eyes all reduce the effective contrast of your design. Accessibility isn't an edge case — it's a core design requirement.

WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background. Contrast ratio is measured on a scale from 1:1 (no contrast, like white on white) to 21:1 (maximum contrast, black on white).

Level AA (the standard most projects should meet) requires a minimum contrast ratio of 4.5:1 for normal text (under 18px regular or 14px bold) and 3:1 for large text (18px+ regular or 14px+ bold). Level AAA (enhanced accessibility) raises these to 7:1 for normal text and 4.5:1 for large text.

These aren't just guidelines — they represent the threshold at which text becomes difficult to read for significant portions of your audience. Failing contrast requirements doesn't just mean your site is less accessible; it means people will leave because they literally can't read your content.

Beyond Contrast Ratios

Contrast ratios are the baseline, but true accessibility goes further. Never use color alone to convey information — if a form field turns red on error, also add an icon or text label. Test your designs with a color blindness simulator to see how they appear to people with protanopia (red-weak), deuteranopia (green-weak), and tritanopia (blue-weak). Ensure interactive elements are distinguishable from static elements through more than just color — use underlines for links, borders for buttons, and clear visual hierarchy for clickable areas.

4. Color Psychology in Design

Color influences emotion, perception, and behavior. While the effects aren't universal — they vary across cultures, personal associations, and context — understanding common associations helps you make intentional choices.

Blue is the most universally liked color and the most common in corporate design. It signals trust, stability, and professionalism. Banks, tech companies, and healthcare brands lean heavily on blue because it feels safe and reliable. The risk is blandness — when everyone uses blue, nobody stands out.

Red creates urgency and energy. It's effective for calls to action, sale badges, and error states. Red raises heart rate and draws the eye faster than any other color. In Eastern cultures, red signifies luck and prosperity, making it the dominant color for celebrations. Use red sparingly — too much creates visual stress.

Green signals growth, health, and nature. It's the easiest color for the human eye to process, making it a natural choice for success indicators and positive actions. Finance apps use green for positive returns, and health brands use it to signal wellness. Dark greens feel wealthy and established; bright greens feel fresh and modern.

Yellow and orange communicate warmth, optimism, and creativity. They're attention-grabbing without the intensity of red. Food brands favor these colors because they stimulate appetite. Warning states use amber/yellow because it reads as "caution" without the alarm of red.

Purple sits between the warmth of red and the calm of blue. It traditionally signals luxury, creativity, and wisdom. Lighter purples (lavender) feel gentle and youthful; darker purples feel premium and mysterious. Tech startups increasingly use purple to signal innovation without the corporate weight of blue.

Black and white are the foundation of most design systems. Black conveys sophistication and authority; white creates space and clarity. The contrast between them provides the highest readability. Luxury brands often build entire identities on black and white, relying on typography and spacing rather than color for personality.

5. Typography Basics

Typography is how text communicates beyond the literal meaning of words. The right typeface makes content feel professional, readable, and emotionally appropriate. The wrong one creates a subtle — or not so subtle — sense that something is off.

Serif vs. Sans-Serif

Serif typefaces have small decorative strokes (serifs) at the ends of letter forms. Think Times New Roman, Georgia, or Merriweather. Serifs originated in stone carving and have centuries of use in print. They convey tradition, authority, and editorial quality. In digital design, serifs work well for long-form reading (articles, books, editorial content) because the serifs guide the eye along lines of text.

Sans-serif typefaces lack those decorative strokes. Think Helvetica, Inter, or Roboto. Sans-serifs feel modern, clean, and direct. They dominate interface design because they render crisply at small sizes on screens. For UI elements like buttons, labels, navigation, and data — sans-serif is almost always the right choice.

Monospace typefaces give every character the same width. Think Fira Code, JetBrains Mono, or IBM Plex Mono. Their primary use is displaying code, but they also create a distinctive editorial or technical feel when used for headings or decorative text.

Understanding Type Hierarchy

Type hierarchy is how you guide readers through content by varying size, weight, and spacing. A well-structured page has three to four distinct levels: a heading that draws attention, subheadings that organize sections, body text that carries the content, and captions or metadata that provide supporting details.

The relationship between these levels matters more than their absolute sizes. A common approach is a modular scale — multiplying your base text size by a consistent ratio. A ratio of 1.25 (the "major third") applied to a 16px base gives you 16px, 20px, 25px, 31px, and 39px. This mathematical relationship creates visual consistency even though the sizes vary.

Line height (leading) is the vertical space between lines of text. Body text typically needs 1.5 to 1.75 times the font size. Headings can use tighter line heights (1.1 to 1.3) because they're usually short and benefit from a compact, impactful feel. Too little line height makes text feel cramped; too much makes paragraphs lose cohesion.

Line length affects readability more than most designers realize. The ideal line length for body text is 50 to 75 characters per line. Longer lines cause eye fatigue because readers lose their place returning to the left margin. Shorter lines create too many line breaks, disrupting the reading rhythm. This is why content columns are typically 600-760px wide.

6. The Art of Font Pairing

Font pairing is one of the most asked-about design skills, and one of the hardest to teach through rules alone. The goal is finding two typefaces that create contrast without conflict — different enough to establish hierarchy, but similar enough to feel like they belong together.

Proven Pairing Strategies

Serif heading + Sans-serif body is the classic approach and the hardest to get wrong. The serif provides character and authority for headings while the sans-serif ensures clean readability for body text. This combination has been the foundation of editorial design for decades because it works for almost any content type.

Sans-serif heading + Sans-serif body using two different typefaces creates a modern, tech-forward feel. The key is using fonts with distinctly different proportions or characteristics — a geometric heading font (like Poppins or Montserrat) paired with a humanist body font (like Source Sans or Nunito). Avoid pairing two fonts from the same category, like two geometric sans-serifs, which often look like a mistake rather than a choice.

One superfamily is the simplest approach: choose a typeface family that includes both serif and sans-serif variants designed to work together. IBM Plex (Sans, Serif, and Mono), Noto (Sans and Serif), and Source (Sans and Serif) are excellent examples. This guarantees harmony because the fonts share underlying proportions and metrics.

Pairing Pitfalls

The most common mistake is using fonts that are too similar. Two serif fonts with comparable x-heights and stroke widths look like an accident, not a design decision. Each font in your pair should serve a distinct role — if you squint and can't tell which one is which, they're too close.

Another pitfall is using too many fonts. Two is ideal, three is the maximum for most projects. Each additional font adds visual noise and increases page weight. If you need more variation, use different weights and sizes of your existing fonts rather than adding new ones.

Watch out for fonts that fight for attention. If both your heading and body fonts are highly decorative or have strong personalities, they'll compete instead of complementing. Let one font be the "star" (usually the heading) and the other the "supporting actor" (the body).

7. Design Tokens & Export Formats

Design tokens are the bridge between design and development. A token is a named value — like --color-primary: #2563EB or --font-heading: "Inter" — that encodes a design decision in a format code can consume. Tokens make your design system maintainable: change a value in one place, and it updates everywhere.

CSS Custom Properties

CSS custom properties (CSS variables) are the native way to implement design tokens on the web. They're supported in all modern browsers and cascade through the DOM, making them ideal for theming.

:root {
  --color-primary: #2563EB;
  --color-primary-light: #60A5FA;
  --color-primary-dark: #1D4ED8;
  --color-neutral-50: #F8FAFC;
  --color-neutral-900: #0F172A;
  --font-heading: "Inter", sans-serif;
  --font-body: "Source Sans 3", sans-serif;
  --radius-md: 8px;
}

The power of CSS variables is dynamic theming. You can override them in a media query for dark mode, in a class for a theme variant, or in a component scope for local customization — all without changing any component code.

Tailwind CSS Configuration

Tailwind CSS is a utility-first framework that generates CSS classes from a configuration file. Exporting your palette as Tailwind config means developers can use classes like bg-primary and text-neutral-900 directly in HTML.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#2563EB',
          light: '#60A5FA',
          dark: '#1D4ED8',
        }
      },
      fontFamily: {
        heading: ['"Inter"', 'sans-serif'],
        body: ['"Source Sans 3"', 'sans-serif'],
      }
    }
  }
}

SCSS Variables

For projects using Sass/SCSS, token export as SCSS variables allows compile-time usage in mixins, functions, and calculations.

$color-primary: #2563EB;
$color-primary-light: #60A5FA;
$color-primary-dark: #1D4ED8;
$font-heading: "Inter", sans-serif;
$font-body: "Source Sans 3", sans-serif;

The format you choose depends on your project's tech stack, but the underlying design decisions are the same regardless of the output format. That's the beauty of design tokens — separate the decision from the implementation.

8. Putting It All Together

Here's a practical workflow for starting a new project's visual design:

Step 1: Define your constraints. Who is your audience? What emotion should the design evoke? Is there an existing brand to work within? Is this a content-heavy editorial site or a data-dense dashboard? The answers narrow your palette and type choices before you pick a single color.

Step 2: Choose your primary color. This single color carries the most weight. Use the psychology principles above to choose a hue that matches your project's personality. Then explore variations in saturation and lightness to find the exact shade.

Step 3: Build your palette. Using one of the harmony methods (monochromatic, complementary, analogous, etc.), expand from your primary to a full palette. Generate a neutral scale. Add semantic colors. Test every combination for contrast compliance.

Step 4: Select your type pair. Choose a heading font that has personality appropriate to your project and a body font optimized for readability. Test them at real content sizes with real content — not "Lorem ipsum" but actual paragraphs. Adjust sizes, weights, and line heights until the hierarchy feels natural.

Step 5: Test at the extremes. Check your palette in both light and dark contexts. View your type at mobile sizes. Run contrast checks. Simulate color blindness. Load your fonts and measure performance. The best design decisions survive edge cases.

Step 6: Export and implement. Lock in your tokens — colors, fonts, spacing, border radii — and export them in your project's format. Use consistent naming conventions. Document the rationale behind key choices so future team members (or future you) understand why specific values were chosen.

Color and typography are skills that improve with practice and intentionality. Every project is a chance to refine your eye, learn what works, and develop your instinct for combinations that communicate effectively. Use the principles in this guide as a starting point, then experiment, test, and iterate until the design feels right.