Design Notes

What makes
it good?

Pulling apart exceptional design to understand
the principles underneath.

01

Scale is hierarchy

The best typographic sites don't need borders, cards, or dividers. They use scale contrast alone — tiny uppercase labels next to massive headings — to create structure.

Klim Type Foundry sets "Klim" and "Fonts" at 14px in the nav, then lets a single typeface specimen fill the entire viewport. Craig Mod does the same: his navigation is whisper-small, his essays command the page.

Scale contrast in action
CATEGORY LABEL The Headline Body text sits here at a comfortable reading size, creating a clear third level in the hierarchy without any decoration.

Three sizes. Three weights. No borders. The hierarchy is self-evident.

02

Warm restraint

Great design picks one accent color and uses it like punctuation — sparingly, intentionally, never for decoration. The background isn't white-white; it's warm. Off-white. Paper-like.

Paper #FAFAF7
Ink #1A1A1A
Ember #D4580A
Dust #7A6E5E

This isn't a Tailwind palette. These are colors you'd find in a print shop — paper stock, fresh ink, a burnt sienna stamp. Colors with temperature.

03

Space is material

Pentagram's homepage is 60% whitespace. Craig Mod's essays have 140px of breathing room above the content. This isn't waste — whitespace is a design material. It creates tension, rhythm, and focus.

The impulse to fill empty space is the impulse to add noise. Every pixel of padding is a decision to let the content speak louder.

Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.

— Antoine de Saint-Exupery
04

Say less

Klim's navigation is two words: "Klim" and "Fonts." Pentagram has a wordmark and a hamburger. No tagline, no call-to-action, no "learn more" — just quiet confidence.

Generic design hedges. It adds explanatory labels, helper text, subtle hints. Good design trusts the viewer. It presents, and gets out of the way.

Generic
MyBrand Home About Us Our Services Portfolio Testimonials Blog Contact Us
Considered
Studio Work About
05

Earn your colors

Default Tailwind blue is the Comic Sans of color. It says nothing, means nothing, looks like everything else. Custom color palettes — even simple ones — signal that someone thought about this.

Stock
Considered

The first row could be any SaaS dashboard. The second has an opinion — warm, earthy, grounded. It feels like it belongs to something specific.