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 · blood orange
- accent-300
- #ff7a53
- Rare bright moments
- accent-400
- #ff4d1a
- Hover states, prompt carets, outcome stats, text selection
- accent-500
- #d94116
- 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
- DM Sans · 12px · uppercase · tracking-widest
- Section labels, overview keys
I design and ship AI products.
Working software answers questions a static mock can't.
Designed the public playground for IBM's Granite models.
Selected work
Layout & spacing
- column
- 768px / 1024px
- The page column: max-w-3xl, widening to max-w-5xl at lg
- 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)
- pattern
- none
- CSS-only page texture selected by the active vibe
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.