Skip to content
Get Pro

Docs

Theming

Accents, the design tokens behind every piece, and how to change them.

Markdown

Every piece is dark and monochrome at rest. Colour is one accent, used only for live, hot, focused or selected moments.

Accents

Each piece takes an accent prop: ember (orange, the default), volt (yellow-green) or arc (blue).

<Button label="Deploy" accent="arc" />

The accent is a temperature ramp, not one colour: char, deep, the accent itself, hot and a near-white core. Glows, sparks and heat use the whole ramp, so one prop changes all of it, including effects drawn on a canvas.

To use one accent everywhere, pass it from one place, such as a small wrapper or a constant.

Tokens

The styles are CSS custom properties on the .ember root of each piece. The ones you are most likely to change:

TokenDefaultWhat it is
--em-bg#000000The page under a piece
--em-surface, --em-raised#0a0a0a, #111111Surfaces, each step barely lighter
--em-text#edededText; -muted, -faint and -ghost step down from it
--em-fillwhite at 6%A field or cell at rest; -hover, -focus and -active step up
--em-accent#ff6a1aThe accent; -hot, -white, -deep and -char are its ramp
--em-radius-sm, --em-radius, --em-radius-lg6px, 10px, 14pxCorners
--em-sans, --em-monoGeist, Geist MonoType
--em-fast, --em-base120ms, 220msCSS transitions; springs drive the rest

Changing them

Override the tokens in your own CSS. :root .ember outranks the defaults wherever your stylesheet loads:

:root .ember {
  --em-radius: 8px;
  --em-surface: #0c0c0e;
}

To change an accent's colours, override it the same way, with all five steps of its ramp so it still reads like heat:

:root .ember[data-accent='ember'] {
  --em-accent: #ff5a36;
  --em-accent-hot: #ff9f6e;
}

Effects drawn on a canvas or with WebGL read the ramp from shared/accent.ts, so change the values there too if you change an accent. To scope a change, put it under your own class instead of :root.

Motion and focus

Motion runs on springs and stops for people who ask for reduced motion: the pieces honour prefers-reduced-motion and follow it live. Focus rings are a thin 1px line that shows for keyboard navigation only, never after a click.