01 — Manifesto
Instructional design and code. Intent before the tool.
I design learning experiences and I build them. The two disciplines answer each other: no pedagogy without understanding the system, no interface without intention.
Every pixel, every word, every interaction is there for a reason. No gratuitous ornament. No complexity for effect.
Direct. No forced narrative. Expertise reads in the choices, not in the stories one tells.
02 — Palette
Eight tokens, one intent per use.
The palette is deliberately narrow. Indigo accent carries action, zinc neutrals carry reading, electric nuances the gradients. Click a swatch to copy its value.
03 — Typography
Sora to strike. Inter to read.
Two variable families, two complementary roles. Sora structures impact; Inter carries reading.
Sora · Display, headlines
Pierre Touzet
Regular 400 / Semibold 600 / Bold 700
font-display
Inter · Body, UI
I design learning experiences and I build them. The two disciplines answer each other.
Regular 400 / Medium 500
font-sans
Fluid type scale
Display
--text-display
Intent
.text-display
Heading
--text-heading
One section, one idea.
.text-heading
Subheading
--text-subheading
Frames the point without stealing the show.
.text-subheading
Caption
--text-caption
MONO-LABEL — 11PX UPPERCASE
.text-caption
04 — Voice & tone
Three rules, one stance.
Show the work, skip the story.
01
Direct
Subject, verb, evidence. No padding.
02
No forced narrative
No "I woke up one morning…", no cliffhangers, no performative vulnerability.
03
Implicit expertise
I show what I know by doing, not by claiming to be an expert.
✓ We write
- "We shipped X in 6 weeks. Here’s the demo."
- "The feature didn’t work. We rebuilt the auth."
- "Here’s the code. Here’s the result. Here’s what’s left."
- "This technical choice costs X hours. It’s worth Y."
✗ We don’t write
- "It was an incredible journey with a team of heroes…"
- "Facing adversity, I learned to pivot…"
- "Let me tell you a story about a developer who…"
- "This project changed my vision of development."
05 — Motion & motifs
Content arrives, it doesn’t flail.
Three principles, each embodied by the section itself.
01
Scroll reveal
Soft 0.6s appearance, cubic-bezier(0.22, 1, 0.36, 1) easing. Neutralized under prefers-reduced-motion.
animate-reveal / scroll-reveal
02
Hover glow
Subtle radial halo that follows the cursor. Quiet feedback, never loud.
glow-hover
03
Dark-mode grain
Static SVG texture at 3% opacity, applied via body::before in dark mode only.
body::before (dark)
Live motifs
Hover to see →
TILE
glow-hover
grain