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

--role
tech-lead-frontend
Leads frontend teams: architecture, mentoring, delivery.
--expertise
design-systems
Builds and runs design systems used by hundreds of developers.
--conviction
accessibility
Interfaces should work for everyone. WCAG AA is the baseline, not the target.
--method
agentic-workflows
Works with AI agents daily: coding agents, custom skills, MCP servers. This site was built that way.
--stack
vue / nuxt
Primary tools since 2016. Also ships React, Angular and Web Components.
--standard
semantic-html
The right element for the job, then CSS, then JavaScript. In that order.
--base
tours-france
Remote first, from the Loire Valley. One hour from Paris by TGV.
--languages
fr, en
Fully bilingual after two years working in Australia and the US.
--drive
always-shipping
Side projects go to production: a browser DJ, an accessibility guide, a daily weather mood.
--home
parwine & many
The people behind the work. Many joined the team in June 2026.
fig. 02tokens/theme.css (live)

Live theme tokens

Accent hue in oklch. It 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.