One design system for product and web

Atomus 4.0 is a Figma design system with matching design tokens, React components and guidelines for AI tools. Docs and code are free and open source; the Figma file is on Gumroad.

Get started Get the Figma file GitHub

Figma library

~140 component sets, 30 responsive website sections and 13 example pages, all on 671 variables with Light/Dark, brand, radius and breakpoint modes.

Design tokens

W3C DTCG JSON, plain CSS, a Tailwind v4 theme and a shadcn/ui theme, generated from the Figma variables, with the same names as Dev Mode.

React components

@stanvision/atomus-react: 21 accessible components whose props match the Figma properties one to one.

AI guidelines

Markdown rules that teach Figma Make, the Figma MCP, Claude, Cursor and v0 to build with Atomus.

Start here

Getting startedPick your path: Figma, code, or both.

FoundationsColour, type, spacing, radius, icons and theming.

ComponentsLive React examples with usage rules.

Tokens for codeDTCG, CSS, Tailwind and shadcn/ui.