One design system, shipped three ways — CSS tokens, typed React components, and an agent skill. Drawn 1:1 from the official brand manual, then used to build this very page.
Every color, type weight, radius, shadow and glass pane here renders from the system's own tokens — not one hand-written brand value. Change a token in design-system/ and the whole site follows. Nothing here can drift off-brand, by construction.
One source of truth, packaged for stylesheets, for React, and for AI agents. Mix them freely — generated from one place, they can't drift apart.
@raandino/atelier-tokens Every brand token as CSS custom properties, webfonts included.
npm i @raandino/atelier-tokens@raandino/atelier-react Typed, tree-shakeable React primitives, styled on the tokens.
npm i @raandino/atelier-reacttruora-design The system as an agent skill — Claude Code, Cursor, Codex.
npx @raandino/atelier skills installThen, in production code:
// 1 · inherit tokens + webfonts, once import '@raandino/atelier-tokens/tokens.css'; // 2 · build with typed, tree-shakeable components import { Button, GlassCard } from '@raandino/atelier-react';
Not screenshots of a PDF — real specimens, rendered from the same tokens the product consumes.
White dominates, violet does the brand work, orange is reserved for action.
Headings in Medium (never bolder), body in Light.
Zero gradients. Depth comes from translucent panes — rectangles only, never circles.
Curves extracted verbatim from the isotype — leaf, fin, flower, crescent, seed, and the Eye of Truora.
Every product mark reuses the isotype's own curves — one geometry, four products.
Identity validation A user mid facial-recognition — the biometrics that secure an identity.
Background checks The check mark as the axis — clean history, successful validation.
Customer engagement The verified badge meets onboarding and chatbots on WhatsApp.
E-signature Stylus and finger combined — agile, formal signing on any device.
The lockup over every brand surface — primary on light backgrounds, white wherever the background carries the color.
The same language applied to a real flow: identity and e-signature inside a WhatsApp conversation, validations floating over the real world.
Want the full pages? See the UI kits →
Behind every yes, there's Truora.
The 40/30/15/10/5 color hierarchy, Host Grotesk, the Glass Effect and the shape DNA — encoded once, shipped everywhere.