Color Before Content
Starting a layout from a palette instead of a wireframe, and when that approach works best.
Jonas Verdin
Date
Category
Creative
Reading Time
2 min read
It sounds backwards, but I choose color before I write a single line of final copy. Not the full palette, only the mood. It keeps the content honest, and it stops the design from becoming whatever the words happen to be.
Why color goes first
Color sets the temperature of a page before anyone reads a word. If the temperature is wrong, even excellent copy feels off. If it is right, a plain sentence can carry real weight.
Starting with color also gives me a decision I can defend. “This is calm and a bit serious” is easier to check against than “it should feel nice”.
My process
Pick one anchor
I look for a single color that already belongs to the project: a material, a photograph, a logo the client has used for years. That is the anchor, and everything else is chosen in relation to it.
Build outward, slowly
Next I add only what I need.
A surface color for the background.
A text color that stays comfortably readable on it.
One accent, used sparingly.
Three colors are enough to begin. Most palettes that feel confident are small ones, and extra colors can always be added later when a real need appears.
Test it against real content
I paste in the longest headline and the most awkward paragraph, not the tidy sample text. A palette that survives ugly content will survive the finished site.
Contrast is not optional
Readable color is the minimum, not a bonus. I check every text and surface pair for contrast before I fall in love with it, because falling in love first makes me defend bad choices.
Pair | Use it for | Watch out for |
|---|---|---|
Dark text on light surface | Body copy and long reading | Pure black can feel harsh |
Light text on dark surface | Headlines and short blocks | Thin weights lose clarity |
Accent on surface | Links and highlights | Low contrast on small text |
If the palette only works at the size of a swatch, it doesn’t work.
Name colors by role
I never name a color after its shade. “Blue” becomes wrong the moment the client changes their mind. Names like Text Primary or Surface Inverse say what a color does, so it can be changed without anyone being confused.
Leave room for the content
Once the colors feel settled, the writing can begin, and it often becomes shorter. A page with a clear mood needs fewer words to make its point. If you are still shaping the first ideas, From Brief to First Sketch shows where this step sits in the process.