Introduction
Pixels is a design system with a matching Figma library and code library. Designers and developers use the same components, tokens and names.
Every component on this site is built from the Pixels Design System Figma file. The colors, spacing, radius, type and component tokens are exported from Figma variables, so a change in Figma becomes a change in code.
Installationnpm install @pixelsds/react, or two CSS files.
Components196 components with live previews and code.
Theming1,163 tokens. Light, dark, RTL and density.
StorybookEvery component and block live, with code, themes and RTL.
Principles
- One source of truth. Figma variables generate
pixels-tokens.css. Components only use tokens, never raw values. - Plain HTML first. Components are classes on normal elements (
button,input,dialog). They work with React, Vue, Angular, Svelte or no framework. - Accessible by default. Real elements, visible focus, keyboard support and ARIA wiring are part of every component.
- Ready for every market. Every component mirrors in right-to-left layouts and switches to Arabic type with one attribute.
- Themeable. Light and dark color modes, three densities and a brand palette you can swap.
What’s inside
| Part | File | What it does |
|---|---|---|
| Tokens | css/pixels-tokens.css | All Figma variables as CSS custom properties (--px-*). |
| Components | css/pixels-ui.css | Styles for every component, built only on tokens. |
| Behaviour | js/pixels-ui.js | Menus, selects, date picker, dialogs, tabs, toasts and more. 0 dependencies. |
| Figma library | Pixels Design System | The same components with variants, properties and descriptions. |
| React | @pixelsds/react on npm | The same components for React and Tailwind CSS v4. Pro parts in @pixelsds-pro/react. |
| Storybook | /explore/ | Every React component, pattern and template live, with its code. |
How Figma maps to code
Figma component properties become classes or attributes. For example, the Figma Button with Hierarchy = Secondary gray, Size = lg and Destructive = True is:
<button class="px-btn px-btn--secondary-gray px-btn--lg px-btn--destructive">Delete</button>Each component page lists its Figma properties next to the code API, so a designer and a developer can point at the same thing.