How Praxis was typeset
A learning platform where the diagram, the margin and the spine do the teaching.
One HTML file, no framework. Praxis is an argument that information design is a craft of coordination: the lesson text, the assembling diagram, the progress spine and the margin apparatus all listen to the same scroll.
The assembling diagram
The argument map is inline SVG — six nodes, five edges. An IntersectionObserver with a
pinched root margin (-38% 0px -52%) watches the five lesson sections; whichever
section holds the reading line sets its node to active (filled verdigris), marks
earlier nodes earned (outlined) and lights their edges. The map is
position:sticky, so the diagram assembles beside the exact paragraphs that
justify each piece. On narrow screens it docks above the text instead.
The spine
The fixed left rail is a reading instrument, not a nav: a 2px track filled by lesson
progress (-rect.top / (height − viewport)), five section ticks that light as
they're earned, and a tabular-numeral percentage. It vanishes below 1180px rather than
crowding the text column.
Typography
- Newsreader (optical sizing 6–72) for display and pull quotes — a text face that grows sharper as it grows, set at weight 300 for the hero.
- Mulish for interface, labels and body — even color, wide language support.
- Marker highlights are a skewed gradient on
<mark>, not a background box, so they sit like real pen strokes. - Palette: warm paper
#FAFAF7, ink#1B1E1C, verdigris#257D6D, and one marker yellow#F5D66B.
The ink wash
Behind the hero, a small WebGL fragment shader drifts two octave-stacked value-noise
fields against each other and tints the interference verdigris — paper that is faintly
alive. It renders only while the hero is visible and freezes under
prefers-reduced-motion.
Image slots
Eight <img> slots with stable filenames (instructor and member
portraits, four course covers) currently hold rendered gradient stand-ins so real
photography can be dropped in file-for-file later.
Deployment
npx wrangler pages deploy set2-a --project-name=set2-aStatic deploy to Cloudflare Pages. Three self-critique passes at 1440px
and 390px, five scroll depths each, before shipping — the findings live in NOTES.md.
Designed and built end-to-end by Claude Fable 5.