Laws of UX
Systematic and modernist educational archive. A neutral warm-grey backdrop hosts an orderly 3-column index of cards, each paired with bold Bauhaus-style geometric visualisations.
Visit siteColour
Background#d6d6cd
Text#060f13
Accent#e95444
Surface#edede9
Muted#1a3c4d
Typefaces
- Display
- IBM Plex Sans
- Body
- IBM Plex Sans
- Mono
- IBM Plex Mono
- Source
- self_hosted
- Scale
- 15 · 20 · 26 · 35 · 62
Layout
- Grid
- —
- Container
- —
- Spacing base
- 10px
- Radius
- 16px
Capture
- Category
- education
- Sections
- 12
- Captured
- 2026-08-30
- Rhythm
- light x12
Type rules
- card titles set in bold sentence-case IBM Plex Sans
- body text limited to approximately 40 characters per line for optimal legibility
- monospaced font reserved exclusively for callout notices and utility metadata
Colour rules
- canvas remains in muted warm grey tones to let individual card illustration colors stand out
- each reference card top block uses an individual saturated primary or secondary hue for geometric vector art
Voice rules
- definitions written as concise single-sentence summaries
- neutral academic tone free of promotional fluff
Holds it together
- every law card is split into a top colorful graphic banner and a bottom light surface with title and summary
- maintain uniform 3-column card grid rhythm across all viewport sections
- use monospaced typography solely for administrative notices and system prompts
Contrast
text on background13.2:1 AAA
muted text on background8.0:1 AAA
text on surface16.5:1 AAA
accent on background2.5:1 fail
background on accent2.5:1 fail
Type, measured
- Body
- 20px / 1.4
- Measure
- 41 characters
- Display
- 62px / 1
- Tracking
- 0em display
- Scale ratio
- 1.33
Voice
- Tone
- declarative, precise
- Sentences
- medium
- Person
- third
- Vocabulary
- technical
- Calls to action
- check
Built with
- Builder
- —
- Framework
- —
- Motion
- —
- WebGL
- —
- Nav
- top_bar, 5 items
- Length
- 6.3 screens
Sections in page order
3 marked strong · 12- 00
hero
Quiet and disciplined light-mode hero with Swiss typographic balance and a subtle monospaced announcement card.
- Mood
- quiet + clinical
- Layout
- 1 col · stacked · airy
- 01
showcase
A row of graphic, colorful cards showcasing Bauhaus-inspired geometric patterns and dot matrices on a light neutral canvas.
- Mood
- playful + clinical
- Layout
- 1 col · grid · balanced
- 02
feature grid
StrongClean, systematic reference card grid pairing concise UX definitions with bold geometric abstract graphics.
- Mood
- clinical + quiet
- Layout
- 3 col · grid · balanced
- 03
feature grid
StrongClean, educational card grid pairing concise UX definitions with bold geometric graphic representations.
- Mood
- clinical + editorial
- Layout
- 3 col · grid · balanced
- 04
feature grid
StrongSystematic educational reference cards pairing concise behavioral law definitions with bold geometric graphic abstractions.
- Mood
- clinical + editorial
- Layout
- 12 col · grid · balanced
- 05
feature grid
Clean, educational card grid balancing concise UX definitions with vibrant, geometric visual diagrams.
- Mood
- clinical + playful
- Layout
- 3 col · grid · balanced
- 06
feature grid
Educational reference grid pairing succinct Gestalt design law definitions with colorful geometric vector diagrams below.
- Mood
- clinical + editorial
- Layout
- 3 col · grid · balanced
- 07
feature grid
Educational cards pair concise typographic definitions with bold geometric graphic abstractions across a structured grid.
- Mood
- clinical + editorial
- Layout
- 3 col · grid · balanced
- 08
feature grid
Clean educational card grid pairing precise geometric iconography with structured design principles on a muted neutral backdrop.
- Mood
- clinical + quiet
- Layout
- 3 col · grid · balanced
- 09
feature grid
Structured educational card grid pairing muted tones and clean geometric diagrams with concise design principles.
- Mood
- clinical + quiet
- Layout
- 3 col · grid · balanced
- 10
feature grid
A structured educational reference grid pairing crisp typography with clean geometric diagrams on rounded cards.
- Mood
- clinical + editorial
- Layout
- 3 col · grid · balanced
- 11
footer
A quiet, book-like reference card layout settling into a clean, understated utilitarian footer with balanced neutral tones.
- Mood
- quiet + clinical
- Layout
- 6 col · split · airy
