Presentation

Design system

Your UI is not my UI — React Advanced 2026. Every sample on this page is styled by the same rules as the slides (css/talk.css), inside a card at slide scale: 1em = the card's 1.5em body size. The specs beside each sample are read live from the browser, so resize below 700px to see the mobile values.

Typefaces

Two families, both openly licensed and served from fonts/: a sans for titles, body and meta, and a serif for headlines and quotes. The weights listed are the ones css/talk.css declares.

Aileron
Aa Bb Cc Gg Qq Rr 0123456789 & ? ! — “ ”
Sora Sagano · public domain (CC0)

Act and talk titles, body, lists, meta
Libre Baskerville
Aa Bb Cc Gg Qq Rr 0123456789 & ? ! — “ ”
Impallari Type · SIL OFL 1.1

Scene headlines and quotes

Styles

Every type style in the deck, each beside the rule that sets it and its size, weight and line height as the browser computes them here.

Act title Opens every act; the first act opens on the talk title instead. .act-title, [data-scene='your-ui-is-not-my-ui-title'] h2
User
research
Scene headline One per scene; lines balanced. main h2

The industry is already doing this

Body sans Paragraphs and lists, and the line under a persona's name. main p, main ul

Rose tried to build a bespoke Steam library manager. We replaced configuration toil with developer toil.

  • Setups are very personalized
  • Adaptations conflict with each other
  • Configuration costs energy
Body serif Interview quotes and the Q&A questions; centred where they're used. main blockquote
“[…] you have to put your name to things. If it went ahead, did a bunch of tasks, emailed people, and I couldn't really take it back — that feels … uncomfortable.”
Meta Labels and the slide chrome. main small, .deck-chrome

We replaced configuration toil with developer toil.

Sub-meta A secondary line under meta: the event's city and year, and the slide number in the notes drawer. Serif italic, the only italic. .sub-meta

React Advanced—London 2026

Button A slide's video, where the video sits: a pill in the act's colour whose label underlines on hover. The deck adds the clip's length. .video-play
Link The notes drawer's footer: the speakers, this page and the source code, bold in the act's colour with an arrow. .drawer-footer a

Notes

The speaker notes, read mid-talk in the drawer. Default is the drawer's size; large, for reading from further away, is .notes-large on the notes.

Default The notes drawer as it opens. #notes-drawer
Large Light and larger, set close, for reading at a distance. .notes-large

Melody struggled to see and uses a collection of tools to navigate her life relatively independently. Uses a screen reader at a very fast speed.

  • Magnifier on every device
  • Speech output at 3× speed

Act colours

One named colour per act (--act-*), used for all of that act's text, rules and diagram strokes, in deck order. Each should pass WCAG AAA (≥ 7:1) on white; any that doesn't is flagged.

Greys

The neutrals beside the act colours (--grey-*), lightest first: light ones for rules (this page's dividers, the index card, the footer, the cards beside the open drawer), dark ones for secondary text, which should pass AAA on white.

Icons

The deck's icon set: the sprite at the top of index.html, used with <use href="#icon-…"> and styled by .icon, one 2.5 stroke on a 24px grid. Lucide's x, menu, pin, pin-off and play (filled), and the deck's own two arrows, long in the shaft and short in the head. Turned 45°, the x is the notes toggle's +.

Illustrations

Every persona illustration in the deck, each in its act's colour. scripts/normalize-personas.mjs builds them from the traced originals in media/personas/originals/: every colour snaps to the ramp below (--ramp-*), and each drawing is cropped to a square with the same padding and its floor on the bottom edge, so the figures share a scale.

Slide templates

The three layouts in the talk, rendered from the live slides in index.html at 1280×800. Left: the labelled areas, measured from the example. Right: the slide itself, with its chrome. Stepped reveals are shown fully revealed; a dashed line marks the fold on slides that scroll.