Theming

Tokens come straight from the Figma variable collections. Change a brand color or a mode and every component follows.

Token collections

The Figma file has seven variable collections. Each becomes a block in pixels-tokens.css:

Collection	Modes	Tokens	Purpose
Primitives	Default	303	Raw palette, sizes, radius, blur and type values
Brand	Pixels, Mono	11	The brand ramp (points at Blue by default)
Color	Light, Dark, Light · Mono, Dark · Mono	139	Semantic colors for content, background, border and surface
Dimension	Desktop, Tablet, Mobile	127	Responsive type, spacing, radius and layout
Locale	en · LTR, ar · RTL	53	Direction, font family and line heights for LTR / RTL
Density	Default, Compact, Comfortable	10	Control heights, padding and gaps
Component	Default	299	Per-component tokens like `--px-button-radius`

Naming

Tokens use the Figma name with slashes turned into dashes and a --px- prefix. Semantic tokens point to primitives, and component tokens point to semantic tokens:

CSS

--px-color-blue-500: #2563eb;                                    /* Primitive */
--px-color-brand-500: var(--px-color-blue-500);                   /* Brand */
--px-color-background-brand-default: var(--px-color-brand-500);   /* Semantic */
--px-button-primary-background-default: var(--px-color-background-brand-default); /* Component */

Change the brand color

Override the Brand collection. Every button, link, focus ring and selected state updates.

CSS

:root {
  --px-color-brand-50:  #fdf2f8;
  --px-color-brand-100: #fce7f3;
  --px-color-brand-200: #fbcfe8;
  --px-color-brand-500: #db2777;
  --px-color-brand-600: #be185d;
  --px-color-brand-700: #9d174d;
}

Badge Switch Link

HTML

<div class="row" style="--px-color-brand-50:#fdf2f8;--px-color-brand-100:#fce7f3;--px-color-brand-200:#fbcfe8;--px-color-brand-300:#f9a8d4;--px-color-brand-500:#db2777;--px-color-brand-600:#be185d;--px-color-brand-700:#9d174d;--px-color-background-brand-default:var(--px-color-brand-500);--px-color-background-brand-hover:var(--px-color-brand-600);--px-color-background-brand-subtle:var(--px-color-brand-50);--px-color-content-brand-default:var(--px-color-brand-500);--px-color-border-brand-default:var(--px-color-brand-500);--px-color-border-brand-subtle:var(--px-color-brand-200);--px-color-content-link-default:var(--px-color-brand-500);--px-button-primary-background-default:var(--px-color-brand-500);--px-button-primary-background-hover:var(--px-color-brand-600);--px-button-secondary-border-default:var(--px-color-brand-500);--px-button-secondary-content-default:var(--px-color-brand-500);--px-badge-brand-subtle-background:var(--px-color-brand-50);--px-badge-brand-subtle-content:var(--px-color-brand-700);--px-badge-brand-subtle-border:var(--px-color-brand-200);--px-toggle-track-on-default:var(--px-color-brand-500);--px-link-brand-content-default:var(--px-color-brand-500)">
  <button class="px-btn">Primary</button>
  <button class="px-btn px-btn--secondary">Secondary</button>
  <span class="px-badge px-badge--brand">Badge</span>
  <label class="px-switch"><input type="checkbox" role="switch" class="px-switch__track" checked> Switch</label>
  <a class="px-link" href="#">Link</a>
</div>

<div class="row" style="--px-color-brand-50:#fdf2f8;--px-color-brand-100:#fce7f3;--px-color-brand-200:#fbcfe8;--px-color-brand-300:#f9a8d4;--px-color-brand-500:#db2777;--px-color-brand-600:#be185d;--px-color-brand-700:#9d174d;--px-color-background-brand-default:var(--px-color-brand-500);--px-color-background-brand-hover:var(--px-color-brand-600);--px-color-background-brand-subtle:var(--px-color-brand-50);--px-color-content-brand-default:var(--px-color-brand-500);--px-color-border-brand-default:var(--px-color-brand-500);--px-color-border-brand-subtle:var(--px-color-brand-200);--px-color-content-link-default:var(--px-color-brand-500);--px-button-primary-background-default:var(--px-color-brand-500);--px-button-primary-background-hover:var(--px-color-brand-600);--px-button-secondary-border-default:var(--px-color-brand-500);--px-button-secondary-content-default:var(--px-color-brand-500);--px-badge-brand-subtle-background:var(--px-color-brand-50);--px-badge-brand-subtle-content:var(--px-color-brand-700);--px-badge-brand-subtle-border:var(--px-color-brand-200);--px-toggle-track-on-default:var(--px-color-brand-500);--px-link-brand-content-default:var(--px-color-brand-500)">
  <button class="px-btn">Primary</button>
  <button class="px-btn px-btn--secondary">Secondary</button>
  <span class="px-badge px-badge--brand">Badge</span>
  <label class="px-switch"><input type="checkbox" role="switch" class="px-switch__track" checked> Switch</label>
  <a class="px-link" href="#">Link</a>
</div>

Dark mode

Set data-px-theme="dark" on <html>. The Color collection switches to its Dark mode values. Try the theme button in the header.

HTML

<html data-px-theme="dark">

Right-to-left and Arabic

Set dir="rtl" (and lang="ar"). The Locale collection switches font family and line heights, and every component mirrors using logical properties. Each preview on this site has an RTL switch.

HTML

<html dir="rtl" lang="ar">

Density

Three densities from the Density collection change control heights and padding.

HTML

<html data-px-density="compact">   <!-- 32px controls -->
<html data-px-density="comfortable"> <!-- 44px controls -->

compact

default

comfortable

Responsive tokens

The Dimension collection has Desktop, Tablet and Mobile modes. They apply automatically below 1024px and 600px, so headings, spacing and layout margins shrink on small screens.