CRAP Design Principles: Contrast, Repetition, Alignment, Proximity (2026)

Back in 2006 I came across four golden rules of design known as C.R.A.P.: Contrast, Repetition, Alignment and Proximity. I was learning web design to make this site better, and they helped a lot. The CRAP design principles, popularised by designer Robin Williams in The Non-Designer’s Design Book, are still the quickest way for non-designers to make pages look professional. Here’s how to apply them in 2026.

Quick answer: CRAP stands for Contrast (make different things look clearly different), Repetition (reuse the same styles for consistency), Alignment (line every element up with something else) and Proximity (group related items close together). Applying all four makes web pages easier to scan, more readable and more trustworthy.

1. Contrast

If two elements aren’t the same, make them very different. Use size, weight and colour to separate headings from body text, and make buttons stand out from the background.

• Strong heading hierarchy (H1, H2, H3) with clear size steps.
• Text colour contrast of at least 4.5:1 for accessibility.
• One bold accent colour for calls to action.

2. Repetition

Repeat fonts, colours, spacing and components across pages so the site feels like one system.

• Use the same card style for every post listing.
• Limit yourself to one or two font families.
• Reuse button styles everywhere.

3. Alignment

Nothing should be placed arbitrarily. Every element should line up with another, creating clean edges.

• Pick a consistent left edge for text, images and buttons.
• Use a grid (CSS Grid or Flexbox) instead of nudging items by eye.
• Avoid centring long paragraphs.

4. Proximity

Group related items so readers see them as one unit, and add space between unrelated groups.

• Keep labels close to their form fields.
• Put the author, date and category together under the title.
• Add more space above a heading than below it.

Quick CRAP checklist for any page

1. Can you tell the most important element in 2 seconds? (Contrast)
2. Do similar elements look identical? (Repetition)
3. Do edges line up? (Alignment)
4. Are related things grouped? (Proximity)

See these principles in action in our guide to essential web design elements, and keep text fast with quicker Google Fonts loading.

FAQ

Who created the CRAP design principles?

Designer and author Robin Williams described them in The Non-Designer’s Design Book.

Do the CRAP principles apply to web design?

Yes. They apply to any layout: websites, slides, posters and documents.

Is CRAP the same as Gestalt principles?

They overlap. Proximity and similarity come from Gestalt psychology; CRAP packages them for beginners.