skip to content

[INSPIRATION] /inspiration

Design inspiration, by principle

Not a list of sites. Each section starts with the rule it teaches and a live piece that shows it, then the screenshots that do it best. Steal the technique, never the asset.

[FEATURED]

Experiments & tools

The pieces the experiences here learned from. Every one is credited and links to the original.

[TYPOGRAPHY] (24)

Typography

┌─ rule 05 ── the rules ─┐

[05]

Type is chosen and set for reading. Body 16px or more, lines 65ch or fewer.

read rule 05 →
┌─ live ── flying-type ─┐

Flying Type

[open ↗]

built with: r3f · drei · glsl · gsap · lenis · canvas2d

[COLOUR] (17)

Colour

┌─ rule 03 ── the rules ─┐

[03]

One accent, one meaning. Body text meets 4.5:1, large text 3:1.

read rule 03 →
┌─ live ── glass-lens ─┐

Liquid Lens

[open ↗]

built with: threejs · r3f · drei · glsl · gsap

[LAYOUT] (12)

Layout

┌─ rule 06 ── the rules ─┐

[06]

Mobile first, and 390px never scrolls sideways.

read rule 06 →
┌─ live ── flip-bento ─┐

Flip Bento

[open ↗]

built with: gsap · css · next-image

[HIERARCHY] (13)

Hierarchy

┌─ rule 04 ── the rules ─┐

[04]

Every size comes from a scale. Scale is what makes the reading order obvious.

read rule 04 →
┌─ live ── kinetic-poster ─┐

Kinetic Poster

[open ↗]

built with: r3f · drei · glsl · gsap · lenis · canvas2d · css

[SPECIMEN] (8)

Specimen

┌─ rule 01 ── the rules ─┐

[01]

Every value is a token. A specimen is the system, shown off.

read rule 01 →
┌─ live ── none yet ─┐
no live piece for this one yet.
the screenshots below carry it.

[EDITORIAL] (8)

Editorial

┌─ rule 12 ── the rules ─┐

[12]

Words and speed are part of the design. Buttons say what they do.

read rule 12 →
┌─ live ── none yet ─┐
no live piece for this one yet.
the screenshots below carry it.

[DARKMODE] (17)

Dark mode

┌─ rule 11 ── the rules ─┐

[11]

It meets WCAG 2.2 AA. Measure contrast on the dark ground too.

read rule 11 →
┌─ live ── none yet ─┐
no live piece for this one yet.
the screenshots below carry it.