✦ design class is in session

How to make
things look really
damn good.

6 secret techniques behind every beautiful design — explained playfully, with things you can actually touch.

↓ scroll to learn ↓
01
Lesson 01

Every design needs
a Visual Anchor.

An anchor is one dominant element that the eye finds first. It holds the whole page together. Without it, the eye wanders — and the viewer feels lost.

It could be a giant number, a bold headline, a single image. Whatever it is — it's the boss. Everything else exists in its shadow.

start every design by asking: "what's the ONE thing that rules here?"
42
Projects shipped this year
Lorem ipsum dolor · Q4 2024 · Annual Report
02
Lesson 02

Design lives in
Tension.

Contrast is the engine of visual interest. Big vs. small. Light vs. dark. Dense vs. open. Serif vs. mono. Pick a conflict — and let it run.

When everything is the same size, the same weight, the same tone — nothing stands out. Tension is what makes your eye move.

if your design feels boring, add contrast. if it feels chaotic, reduce it.
72°
TEMPERATURE
MON
TUE
WED
THU
03
Lesson 03

Constrain your
Palette hard.

Two colors + neutrals. That's the rule. Every color you add dilutes the ones already there. Less is more intentional. More intentional is more beautiful.

Hover the locked colors to see how cluttered it gets. Then look at the clean version again.

if you can't justify a third color, you don't need it.
hover the faded swatches — yes, that's what chaos looks like 🙈
04
Lesson 04

Space is the
real design.

Whitespace isn't empty. It's a design element. Tight space feels urgent and dense. Loose space feels premium and calm. Neither is wrong — but you must choose.

Drag the slider below and watch how the personality of the card completely changes.

when in doubt, give it more room to breathe.
heading
Hello World
body
Some text here
button
Click me
← tight · · · · · · · · · · · · · · · · · · loose →
05
Lesson 05

Typography does
the heavy lifting.

A clear type hierarchy is a map for the eye. Size, weight, and spacing tell the reader: "this is more important than that." Get this right and the layout nearly designs itself.

Hover each row — feel how the weight creates a pull.

you can design a beautiful page with only type. you cannot design one with poor type hierarchy.
72px The Headline
28px The Subheading
16px Body text that gives context and detail to what the heading promised. It's the supporting actor.
11px Caption · Metadata · Label
06
Lesson 06

Break one rule
on purpose.

The grid exists to be broken. One element that violates the expectation — slightly rotated, oversized, asymmetric — is the thing people remember. It's the signature.

Too many breaks = chaos. Zero breaks = template. One break = designed.

every great design has one moment where it says "I did that on purpose."
rebel ✦