Color & Typography

In 2016, Instagram changed a single color — and 400 million people lost their minds.

Instagram's original logo was a retro brown camera icon that looked like it belonged in a 1970s thrift shop. In May 2016, they replaced it with a gradient of sunset purples, pinks, and oranges — a flat, modern glyph that barely resembled a camera anymore.

Twitter exploded with fury. "Bring back the old logo" trended for days. Design blogs declared it a disaster. Memes mocked the gradient as "a child's crayon experiment."

Six months later, nobody was complaining. The new gradient had become one of the most instantly recognizable color schemes on the planet. Instagram's head of design, Ian Spalter, later explained the thinking: the old brown felt nostalgic but dated. The sunset gradient captured the warmth, creativity, and energy the app had evolved into — and the vibrant colors performed significantly better on mobile screens where icons compete for tap-attention at just 60x60 pixels.

Color isn't decoration. It's the first thing people notice, the last thing they forget, and the fastest way to communicate emotion without saying a word.

The color wheel: your visual cheat sheet

Every color relationship starts with the color wheel — a circular arrangement of 12 colors based on how they mix.

Color relationships that always work

The psychology of color: what colors make people feel

Color psychology isn't exact science — culture, context, and personal experience all matter. But broad patterns are well-documented and widely used in branding:

There Are No Dumb Questions

"Does color psychology actually work, or is it just marketing nonsense?"

The truth is somewhere in between. Studies consistently show that color affects mood and perception, but the effects are contextual. Blue doesn't automatically create trust — it creates trust when combined with clean design, professional typography, and credible content. Color amplifies the message; it can't replace it. Think of color as an accent to your brand's personality, not the entire personality.

"My brand color is already chosen. Does it matter?"

Yes — because you still need to build a full palette around it. One brand color isn't enough. You need supporting colors for backgrounds, text, accents, success states, error states, and more. The color wheel relationships above are how you expand one color into a complete system.

Building a color palette from scratch

Here's the practical workflow professionals use:

Free palette tools:

Color accessibility: designs that everyone can see

Roughly 300 million people worldwide have color vision deficiency (commonly called "color blindness"). Another large population browses on low-contrast screens, in bright sunlight, or with aging eyes. Accessible color isn't optional — it's professional.

WCAG contrast requirements:

Typography: the design element hiding in plain sight

Typography is the art and technique of arranging type to make text readable, legible, and visually appealing. It accounts for roughly 95% of web design — because most of the web is text.

Serif vs. sans-serif: the eternal debate

The truth: both work everywhere if used well. The "serifs are for print, sans-serifs are for screens" rule was based on low-resolution displays from the 1990s. Modern screens render serifs beautifully. Choose based on personality, not medium.

Font pairing: the art of combining typefaces

The rules are simple:

Proven font pairings that always work:

There Are No Dumb Questions

"Can I just use one font for everything?"

Absolutely. Inter, Source Sans Pro, or any well-designed font family with multiple weights (Regular, Medium, Semibold, Bold) gives you all the hierarchy you need. One font with varied weights is better than three fonts that don't harmonize. Apple's entire interface uses San Francisco. Google uses Roboto. Both look great.

"Are free Google Fonts actually good enough for professional work?"

Yes. Inter, Lato, Open Sans, Merriweather, Playfair Display, and Montserrat are used by companies worth billions. The quality of free fonts has skyrocketed. The premium fonts from Fontshare and Type Network are also free and excellent.

Typographic hierarchy: making text scannable

Typographic hierarchy uses size, weight, color, and spacing to signal importance:

The golden rules of readable text:

The color-typography connection

Color and typography aren't separate systems — they reinforce each other:

• Heading color should be darker / bolder than body text color. This reinforces the size hierarchy with a color hierarchy.
• Link colors need to be distinct from body text AND pass contrast requirements. Blue (#0066CC or similar) remains the safest default because 30 years of web convention have trained people to expect it.
• Background tints can separate sections without borders. A subtle warm gray (#f7f5f2) behind a testimonial section separates it from the white body without adding visual clutter.

Key takeaways

• The 60-30-10 rule creates balanced color compositions: 60% dominant, 30% secondary, 10% accent.
• Color psychology is directional, not absolute — blue tends toward trust, red toward urgency, but context and design quality matter more than color alone.
• Accessibility is non-negotiable: 4.5:1 contrast ratio for body text, 3:1 for large text. Never use color alone to convey meaning.
• Two fonts maximum for most designs. One for headings, one for body. Contrast their styles (serif + sans) or use one font family with varied weights.
• Typographic hierarchy is built with size, weight, and color. H1 should be 2-3x the body text size with a heavier weight.
• Line length (50-75 characters) and line height (1.5-1.75x) are the most impactful readability settings most people ignore.