Open design system · v1.0
The system behind this site. One token file feeds every page, both themes and both languages, and you can read all of it.
The old site grew page by page. Colors drifted between sections, and every new section meant choosing values again. A light and a dark theme doubled that work.
Components read semantic tokens only, never raw hex. Violet is reserved for action, focus and labels, so it always means something. One type family, Geist, with a strict scale. Motion has tokens too, and all of it turns off with reduced motion.
A new page is built from existing components. A new theme is a remap of about twenty semantic tokens. The build exports tokens.json, so the same values can go into Figma variables or another codebase.
Primitives are the raw palette. Nothing in the interface uses them directly.
--ink-950#07060b--ink-900#0d0b13--ink-850#13101b--ink-800#1a1624--ink-700#262133--ink-500#5b546d--ink-300#8d87a0--ink-200#b5afc6--ink-100#e4e0ee--ink-50#f5f3fa--paper-0#ffffff--paper-50#faf9fd--paper-100#f2eff9--paper-200#e7e2f2--violet-200#d9cfff--violet-300#c2b3ff--violet-400#a68dff--violet-500#8a6cff--violet-600#6c4cf5--violet-700#5535d9--violet-800#3d24a8--violet-900#241566--magenta-400#ff7ab6--magenta-600#c2185b--green-400#48e3a0--green-600#0e7448What a value is for. Each theme maps the same names to different primitives. Contrast is computed from the real values when the page is built.
| Token | Use | Dark | Light |
|---|---|---|---|
--bg | Page background | #07060b | #faf9fd |
--surface | Cards and panels | #0d0b13 | #ffffff |
--surface-raised | Raised elements, inputs | #13101b | #f2eff9 |
--surface-sunken | Wells under content | #050408 | #f2eff9 |
--fg | Primary text | #f5f3fa18.4:1 · AAA | #120f1a18.1:1 · AAA |
--fg-muted | Body copy, secondary text | #b5afc69.5:1 · AAA | #4f49628.1:1 · AAA |
--fg-subtle | Captions, metadata | #8d87a05.9:1 · AA | #6a64805.3:1 · AA |
--line | Dividers, card borders | rgba(255, 255, 255, .08) | rgba(18, 15, 26, .09) |
--line-strong | Control borders | rgba(255, 255, 255, .16) | rgba(18, 15, 26, .18) |
--accent | Primary action background | #6c4cf5 | #5535d9 |
--accent-hover | Primary action, hover | #8a6cff | #3d24a8 |
--accent-fg | Text on accent | #ffffff5.3:1 · AA | #ffffff7.2:1 · AAA |
--accent-ink | Links, labels, accent text | #c2b3ff10.8:1 · AAA | #5535d96.9:1 · AA |
--accent-soft | Hover wash, selected rows | rgba(138, 108, 255, .14) | rgba(85, 53, 217, .09) |
--accent-glow | Glow behind key elements | rgba(108, 76, 245, .45) | rgba(108, 76, 245, .22) |
--success | Availability, confirmations | #48e3a012.3:1 · AAA | #0e74485.5:1 · AA |
--highlight | Rare emphasis | #ff7ab6 | #c2185b |
--focus-ring | Keyboard focus outline | #c2b3ff10.8:1 · AAA | #5535d96.9:1 · AA |
--nav-bg | Translucent nav | rgba(7, 6, 11, .72) | rgba(250, 249, 253, .78) |
--scene-a | 3D scene, main color | #8a6cff | #5535d9 |
--scene-b | 3D scene, light | #c2b3ff | #8a6cff |
--scene-c | 3D scene, shadow | #241566 | #e7e2f2 |
Geist for everything, Geist Mono for labels and code. Large sizes get tighter tracking; body stays at 1.6 line height.
Products people come back to
Products people come back to
Products people come back to
Products people come back to
Products people come back to
Seven years designing apps, sites, platforms and games.
Seven years designing apps, sites, platforms and games.
Seven years designing apps, sites, platforms and games.
Seven years designing apps, sites, platforms and games.
A 4px base. Sections breathe with a fluid --section value; gutters scale with the viewport.
--space-14px--space-28px--space-312px--space-416px--space-524px--space-632px--space-748px--space-864px--space-996px--space-10144px--radius-sm8px--radius-md12px--radius-lg20px--radius-xl28px--radius-pill999px--shadow-1Resting cards--shadow-2Featured mediaMotion is saved for three moments: the hero deck, the Orra story and the How Vk is built teardown. Everything else stays still. Scroll-linked effects use transform and opacity only, and all of it stops with prefers-reduced-motion.
Live components from this site, rendered with the same classes and tokens. Hover and focus them.
One primary per view. Secondary for the second path, like the CV next to the work.
Two primaries side by side, or a button for navigation inside a paragraph (use a link).
44px minimum target (40px for small in dense rows), visible 2px focus ring, white on --accent at 5.3:1 (7.2:1 in light).
Status for one live fact (availability). Tags to scan skills, never to carry meaning alone.
Tags that look clickable, or more than six on a card.
The green dot is decoration; the text carries the meaning. Links keep an underline.
Image first, then context, title, one-line result and a single action. The whole card is one link.
Nested links or buttons inside the card; a result longer than two lines.
One tab stop per card, the title is the accessible name, images carry real alt text.
Real numbers with the context that makes them useful, in one sentence.
Numbers without a source, or a stat that needs a footnote.
Numbers are static text, so they read the same with or without script.
Both. Design is the main role; front-end makes the handoff short.
Yes.
Short answers people scan for, like time zone or contract.
Hiding content people need to decide.
Native details and summary: keyboard and screen readers work without script.
Dark is the default. The choice is saved on the device.
Translating by script: each language is its own page with its own URL.
The toggle's label says what it will do. Language links carry hreflang and lang.
Both themes side by side, from the same component. Dark is the default; light is a remap of the semantic tokens, scoped by a data-theme attribute on any element.
Same markup, same names. Only the semantic layer changes.
Same markup, same names. Only the semantic layer changes.
Changelog · v1.0, November 2026: first public version.
