[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
[05]
Type is chosen and set for reading. Body 16px or more, lines 65ch or fewer.
read rule 05 →[COLOUR] (17)
Colour
[03]
One accent, one meaning. Body text meets 4.5:1, large text 3:1.
read rule 03 →[LAYOUT] (12)
Layout
[06]
Mobile first, and 390px never scrolls sideways.
read rule 06 →Flip Bento
[open ↗]built with: gsap · css · next-image
[HIERARCHY] (13)
Hierarchy
[04]
Every size comes from a scale. Scale is what makes the reading order obvious.
read rule 04 →[SPECIMEN] (8)
Specimen
[01]
Every value is a token. A specimen is the system, shown off.
read rule 01 →no live piece for this one yet. the screenshots below carry it.
[EDITORIAL] (8)
Editorial
[12]
Words and speed are part of the design. Buttons say what they do.
read rule 12 →no live piece for this one yet. the screenshots below carry it.
[DARKMODE] (17)
Dark mode
[11]
It meets WCAG 2.2 AA. Measure contrast on the dark ground too.
read rule 11 →no live piece for this one yet. the screenshots below carry it.



