few experiments

Built to work through a problem end to end: colour science, CSS specificity, design tokens, reaction-diffusion, and more.

foundation

kern, open source

The shared component and token layer every experiment here is built on.

  • React
  • TypeScript
  • Storybook
  • Design Tokens
live

specifi, open source

Paste a CSS selector and see its (a, b, c) specificity, parsed by a from-scratch Selectors Level 4 engine.

  • CSS
  • TypeScript
  • Tokeniser
  • Recursive Descent
  • AST
live

hexicon, open source

Paste a hex for its perceptual name and nearest matches by CIEDE2000, or map a palette in OKLCH with its WCAG contrast.

  • Colour
  • TypeScript
  • CIEDE2000
  • OKLCH
  • WCAG
live

gray-scott, open source

A real-time Gray-Scott reaction-diffusion simulation, run off the main thread in a Web Worker.

  • Simulation
  • TypeScript
  • Web Workers
  • Canvas
  • Float32Array
live

tokenise, open source

Paste a token file and see what DTCG, Figma, Tokens Studio and Tailwind each keep, change or drop, token by token.

  • Design Tokens
  • DTCG
  • TypeScript
  • Figma
  • Tailwind