In Practice · Design Research
Design Principles
Robin Williams' four principles — contrast, repetition, alignment, proximity — explained, sourced, and rebuilt piece by piece with the Proper Sky brand system. Ends with a working redesign of our three LinkedIn banners.
Why a design book for non-designers
Robin Williams (the writer and teacher, not the actor) published The Non-Designer's Design Book in 1994 for one audience: people who have to produce pages — flyers, reports, cards, ads — without any design training. It became one of the best-selling design books ever written, and the fourth edition (Peachpit Press, 2015) added a full section on typography. Three decades later it is still the standard recommendation for exactly the people who make most of a company's day-to-day artifacts: marketers, founders, account managers, engineers.
The book opens with a story. Williams got a tree-identification guide as a gift, learned to recognize the Joshua tree — and then saw Joshua trees everywhere, including in front of houses on her own street. They had been there all along; she could only see them once she could name them. Her claim is that design works the same way: once you can name what is wrong with a page, you can fix it.
She names four things. Every page that looks "off" is usually breaking at least one of them, and every clean page is quietly obeying all four. Williams teaches them in the order proximity → alignment → repetition → contrast, then points out — deliberately — that the memorable acronym reads the other way: C.R.A.P.
A note on how to read the examples: every "after" on this page is built exclusively from the Proper Sky system — the six-token palette, Plus Jakarta Sans, the 8 / 15 / 44 / 60 radii, blue-tinted shadows, and the swell motif. The point is not that the brand guide and the book agree by accident. Good brand systems are the four principles, pre-decided and written down.
Proximity
Items that belong together should sit together. Distance between things is a statement about their relationship.
Williams' rule is blunt: "Group related items together." When every line on a page gets the same spacing, the reader has to work out the structure themselves — the page reads as a list of disconnected facts. Group the related lines and the structure becomes visible before anyone reads a word. Her test is to squint at the page and count the visual units: if you count more than three to five, the page needs grouping.
This is not just taste. It is the Gestalt principle of proximity, documented by perception researchers for a century and treated as foundational by usability researchers today: elements near each other are perceived as related, and whitespace — not boxes or rules — is the cleanest way to create those groups (Nielsen Norman Group, ref. 3). Proximity is strong enough to overpower competing cues like color or shape.
The working ratio: make the gap between groups at least twice the gap inside a group — 3× on a dense page. Below 2× the grouping stops reading. And take space away from inside groups before adding space anywhere.
IN THE PROPER SKY SYSTEM
- The spacing scale is the grouping tool: 8 / 12 / 16 / 18 px inside a group, 30 / 36 / 40 px between groups, 63 / 64 px between sections. Related things get small numbers, separate things get big ones.
- The eyebrow → headline → body cluster is a proximity pattern: the eyebrow sits tight above the heading it introduces, never floating.
- Cards exist to make groups physical — one topic per 15px-radius card, generous padding inside, real space between.
Watch for: equal spacing everywhere, hitting return twice between every line out of habit, spreading content to fill the page, and headings floating equidistant between two paragraphs — a heading that isn't visibly closer to what it introduces belongs to neither.
Alignment
Every element should share an invisible line with something else on the page. One strong edge beats three weak ones.
The book's statement of the rule: "Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page." Alignment is what makes a page feel deliberate. Readers never notice a clean alignment, but they instantly feel a broken one — the page reads as sloppy without their being able to say why.
Williams singles out the beginner's default — centering everything — as the main offender. Centered layouts produce a soft, ragged edge on both sides and no line for the eye to travel down. Her advice is to find one strong line and commit: a flush-left edge is the workhorse. Mixing alignments (a centered title over left-aligned text over a right-aligned footer) is the real crime; each element ignores the others.
IN THE PROPER SKY SYSTEM
- Flush-left is the house alignment: headings, body, and CTAs share one rail. Centered type is reserved for symmetric moments (a stat row, a section divider), never body copy.
- The 12-column grid and the 1460px container exist so every surface inherits its lines instead of inventing them.
- Logo placement is a rule, not a whim: standard lockup, clear space equal to the height of the "P", snapped to the layout edge — the same corner every time.
Watch for: centering as a default rather than a decision, more than one alignment per surface, and elements "almost" on a shared edge — a few pixels off reads as a mistake, not a choice.
Repetition
Repeat some aspect of the design through the whole piece. Consistency is what makes many pages read as one brand.
Williams frames it as turning consistency into a deliberate device: "Repeat some aspect of the design throughout the entire piece." The repeated element can be anything — a weight, a rule, a color, a bullet shape, a spatial relationship. Repetition is what binds a multi-page document into one object, and across artifacts it is simply another word for brand: seeing the same kit applied the same way until it becomes recognition.
Her caution runs the other way too: repeat with intent, not monotony. The repeated element should be strong enough to notice, and varied enough (in size, in placement) to stay alive. A brand guide is repetition institutionalized — which is why artifacts that ignore the guide feel like a different company even when the logo is right there.
THE PROPER SKY REPETITION KIT
Every artifact that uses this kit is "doing repetition" automatically — across pages and across months. That is the entire job of a brand system.
Watch for: one-off styling invented for a single slide or post, mixed corner radii, neutral gray shadows, and a second typeface sneaking in through a template.
Contrast
If two items are not exactly the same, make them very different. Contrast is what pulls the eye to the page — and tells it where to start.
This is the principle Williams says makes a page worth looking at, and her phrasing is the most quoted line in the book: "If two items are not exactly the same, then make them different. Really different." Two headlines at 40px and 46px look like a mistake; 17px body under a 46px headline looks like a decision. The failure mode has a name in the book too: "Don't be a wimp."
Contrast is also the hierarchy engine: the eye lands on the strongest contrast first, so whatever contrasts most is, functionally, your message. If everything is bold, nothing is. If everything is brand blue, the blue stops meaning anything — which is exactly why the Proper Sky guide caps the teal accent at one spike per fold.
Color contrast, measured against the brand palette
| Combination | Ratio | Verdict |
|---|---|---|
| Navy on White | 18.9 : 1 | AAA — the default body pairing |
| Navy on Cloud Gray | 17.4 : 1 | AAA — soft section bands |
| White on Trust Blue | 4.7 : 1 | AA — buttons, links, 18px+ headings |
| Tertiary Dark on Teal | 8.4 : 1 | AAA — the canonical teal pairing |
| White on Teal | 2.0 : 1 | Fails — never for text |
WCAG ratios computed from the brand hex values. "Don't be a wimp" has a measurable floor: 4.5 : 1 for body text, 7 : 1 for AAA. Full pairing matrix on the Color page.
Watch for: two sizes within ~20% of each other, gray type on gray grounds, accent color used so often it stops being an accent, and emphasis stacking (bold + italic + color on the same word).
The book's second half applies the same logic to type pairing and color jobs — those chapters live where the rules do: Typography → Concord, conflict, contrast and Color → One accent, one job.
Case study: the LinkedIn banners, rebuilt
Three existing banners (1584×396, the personal-profile format), rebuilt with the four principles and nothing else — the copy is untouched. One decision drives all three: a single flush-left rail carries logo → tagline-eyebrow → headline → action on every banner, and the right half belongs to imagery. That one skeleton, repeated, is what makes three different banners read as one brand.
Banner 01 — type only
Three alignments compete — logo top-left, CTA floating top-center, headline centered — and the CTA comes before the message it belongs to. The two headline lines are the same size: similar, not different. The dot texture repeats noise, not identity.
One rail (alignment). Tagline sits with its headline, CTA stands apart (proximity). Headline dominates at twice the sub-line's size, one glossy CTA on a calm field (contrast). The swell corner and gradient span come from the kit (repetition).
Banner 02 — photo, dark
The headline sits straight on a busy photo — weak value contrast at feed size. The logo pill opens a second alignment edge in the far corner, and the italic tagline crowds the headline's cap-height.
The brand's navy diagonal wash protects the text side while the photo stays bright on the right (contrast). Logo joins the same rail as the type (alignment), and the tagline becomes a proper eyebrow to its headline (proximity).
Banner 03 — light
Two pills sit side by side — a tagline dressed as a button competes with the real CTA, so neither wins. The brand appears twice (symbol top-left, lockup top-right), and a white haze flattens the whole photo instead of just clearing space for text.
The brand hero wash, inverted: banner 02 runs dark-to-imagery, this one runs white-to-imagery. The full-bleed photo keeps its natural warm color with the signature teal glow in one corner (repetition), a white scrim does the legibility work so navy type and one CTA read cleanly (contrast), the text lives in the quiet zone opposite the subject (proximity), and everything hangs on the set's shared left rail (alignment).
Copy note: "The Proper Process" is kept verbatim from the originals. The V/TO-canonical process name is CIF® — Continuous Improvement Framework (Understand → Align → Execute → Improve); worth reconciling before these ship. Keep critical content out of the lower-left corner of any LinkedIn banner — the profile photo overlaps it.
The four questions to ask any draft
References
- Williams, Robin. The Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice, 4th edition. Peachpit Press, 2015.
- Shen, Zhenghui. "Robin Williams' Four Basic Design Principles for Non-Designers." Wiredcraft — wiredcraft.com/blog/robin-williams-four-basic-design-principles-for-non-designers
- "Proximity Principle in Visual Design." Nielsen Norman Group — nngroup.com/articles/gestalt-proximity
- "5 Principles of Visual Design in UX." Nielsen Norman Group — nngroup.com/articles/principles-visual-design
- "Book: The Non-Designer's Design Book — Fantastic Basic Design Principles." The Clarity Editor, 2021 — theclarityeditor.com
- Proper Sky Brand Guidelines 2024 and the Proper Sky design-system README (internal); visual tokens reconciled against propersky.com.
Set in Plus Jakarta Sans. Built entirely from the Proper Sky token sheet (colors_and_type.css): the six-token palette, canonical radii, blue-tinted shadows, and the swell motif. From Philadelphia with love.