Romain GabinDS
Older versions of Romain are no longer maintained.

Overview / Design tokens

Values, as custom properties.

A design system starts with tokens; so does a person. The first table is who I am. The second is this site’s actual theme layer — and it’s live: move the accent hue and watch every redline, link and focus ring recompute. That’s what tokens are for.

fig. 01tokens/romain.css

Personal tokens

--craft
css
Takes CSS seriously. Hand-written, no utility soup.
--a11y
non-negotiable
WCAG is a floor, not a stretch goal.
--markup
semantic-html
The right element for the job. No div soup.
--stack-primary
vue / nuxt
Primary framework since 2016.
--stack-supported
react, angular, web-components
Multi-framework by design — that’s the whole point of a design system.
--naming
bem
Blocks, elements, modifiers. Boring and bulletproof.
--ai-posture
agent-first
Builds MCP servers and skills so agents ship correct code, not generic code.
--location
tours-france
Remote from the Loire Valley. TGV to Paris in 55 min.
--locale
fr, en
Fully bilingual. Two years in Australia and the US.
--side-projects
always-shipping
A browser DJ, an a11y guide, a weather vibe, a tarot site…
fig. 02tokens/theme.css — live

Live theme tokens

Accent hue in oklch — recolors the whole site.

  • --color-papersurface
  • --color-paper-raisedcards & panels
  • --color-inktext
  • --color-accentlinks, redlines & focus
  • --font-proseFraunces — headings & prose
  • --font-specSpline Sans Mono — labels, code & specs

How it works

One token layer, two schemes, zero duplication: every color is a single light-dark() declaration, and the accent is derived from oklch(… var(--accent-h)). Open devtools and inspect :root — the stylesheet is the documentation.