Tokens
The system this site is built from. Nothing here is a mockup — every swatch, specimen, and duration below is rendered by the same tokens the rest of the site uses.
Color
Surface
- bg
- #0a0a0a
- One surface everywhere — page, cards, exhibits
- border
- #404040
- Card outlines and hairline dividers (neutral-700)
Text
- title
- #f5f5f5
- Headings, section labels, link emphasis (neutral-100)
- body
- #a3a3a3
- Body text, primary and secondary (neutral-400)
- dim
- #737373
- Metadata, captions, years, footnotes (neutral-500)
Accent — amber phosphor
- accent-300
- #fcd34d
- Rare bright moments
- accent-400
- #fbbf24
- Hover states, live dots, outcome stats, text selection
- accent-500
- #f59e0b
- Pressed states
Typography
- display
- DM Sans · 30–36px · medium · tracking-tight
- Page titles, the hero claim
- body
- DM Sans · 16px · regular · leading-relaxed
- Paragraphs, project narratives
- body-sm
- DM Sans · 14px · regular · leading-relaxed
- One-liners, card copy, notes
- label
- JetBrains Mono · 12px · uppercase · tracking-widest
- Section labels, overview keys
- meta
- JetBrains Mono · 12–14px · regular · tabular-nums
- Years, stats, links, kbd hints
I design AI products and ship them.
Working software answers questions a static mock can't.
Designed the public playground for IBM's Granite models.
Selected work
235K+ prompts · 3× unique users
Layout & spacing
- column
- 768px
- The one page column — every page, nav, footer (max-w-3xl)
- measure
- 672px / 65ch
- Inner text measure within the column (max-w-2xl, max-w-prose)
- gutter
- 24px
- Horizontal page padding (px-6)
- section-gap
- 112px
- Between sections (mt-28)
- block-gap
- 24px
- Label to content (mt-6)
Radius & borders
- radius-sm
- 2px
- Focus rings, kbd chips
- radius-md
- 6px
- Thumbnails, small buttons
- radius-lg
- 8px
- Cards, exhibits, media
- border-w
- 1px
- Everything — no heavy strokes
Motion
Opacity and transform only — nothing moves unless it means something. Try the link below.
- ease-out
- cubic-bezier(0.23, 1, 0.32, 1)
- The one entrance curve — reveals, fades, slide-ups
- hover
- 200ms ease-out
- Link color, arrow nudges, work-row chevron
- press
- scale(0.97) · 200ms
- Buttons and chips scale down on :active
- enter
- 300ms ease-out
- Hover previews and status notes fading in
- reveal
- 500ms ease-out · +16px rise
- Sections fading in on scroll, staggered 60–80ms
- drift
- 4000ms ease-out
- Ken Burns on stills without footage
- keyboard
- 0ms — no animation
- ⌘K palette and arrow-key selection respond instantly
- reduced-motion
- all of the above → off
- Every animation respects prefers-reduced-motion
Selection
Select this sentence — highlighted text takes the accent, with near-black type for contrast.