Ember

v24 · published

Warm obsidian, incandescent gradients, motion that breathes.

incandescentnocturnalconfident

Ember reads the SynthesisUI flame literally: fire against the night. The canvas is a warm near-black - never pure black - so the amber-to-rose gradient lands like a live coal. Color is spent sparingly: hairlines, glows and one gradient signature, while typography carries the structure with a geometric display face over a quiet humanist body.

Open the playground →Fork it · design a page →

Use in your project

Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.

1 · Authenticate

npx synthesisui@latest login

2 · Add this design system

npx synthesisui add ember --version 24

3 · Import the tokens in your global CSS

@import "_synthesisui/ds/ember/tokens.css";
@import "_synthesisui/ds/ember/theme.css";

Ask your agent

Use the "Ember" design system (slug: ember) to: build the UI I describe next

First make sure it's installed: run `npx synthesisui add ember` if `_synthesisui/ds/ember/` isn't in the project yet.

Read these files first (highest authority first):
- _synthesisui/ds/ember/rules.md - project rules for this system (if present); obey them above everything else
- _synthesisui/ds/ember/philosophy.md - the mission, voice and principles (if present); let it shape every screen
- _synthesisui/ds/ember/v24/GUIDE.md - how to apply the system, the recipes and the token vocabulary

Follow this contract (target framework: next):
- First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new.
- Scope the markup with `data-ds="ember"` (or rely on it at the app root).
- Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale.
- Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply").
- Wire the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS.

Composition (make it look composed, not just correct):
- Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge.
- Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen.

Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.

Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use ember "…".

Dependencies

What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.

Web fonts - Space Grotesk, Inter, JetBrains Mono
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
Icons - Lucidenpm i lucide-react
Components reference Lucide icon names. Install it (or swap in your own icon set) to render them.
Chartsnpm i recharts
Charts are themed through your series tokens, but you bring the rendering library (the gallery uses Recharts).

Color

Primitives and roles.

Named scales forged by the synthesis; semantic roles only ever point at them.

color.rose

300#ec7d97

400#e45f7c

500#dd4161

600#c23351

700#9e2741

color.veil

500#08060bb3

color.amber

200#f6cf8d

300#f0bc64

400#eaa83c

500#d8922a

600#b87720

700#966310

color.azure

400#5b8def

500#4576d9

600#2265e9

color.obsidian

50#faf8fb

100#f5f2f6

200#e9e4ee

300#a79eb2

500#6b6375

700#221c2a

800#1a1620

900#121016

950#0b090d

color.viridian

400#45b07a

500#3a9968

600#307b56

color.vermilion

400#e0533a

500#cc4329

600#c93920

color.semantic - resolved live via CSS variables

info

{color.azure.400}

faint

{color.obsidian.500}

muted

{color.obsidian.300}

scrim

{color.veil.500}

accent

{color.amber.400}

border

{color.obsidian.700}

canvas

{color.obsidian.950}

danger

{color.vermilion.400}

raised

{color.obsidian.800}

overlay

{color.obsidian.700}

primary

{color.rose.500}

success

{color.viridian.400}

surface

{color.obsidian.900}

warning

{color.amber.400}

foreground

{color.obsidian.100}

color.series - categorical data-viz palette (bg-series-*)

series-1

series-2

series-3

series-4

series-5

series-6

series-7

series-8

Foundations

Shape & depth.

Corner radius, spacing rhythm and elevation - the physical feel of the system.

radius

full

spacing

3xs0.25rem

2xs0.5rem

xs0.75rem

sm1rem

md1.5rem

lg2rem

xl3rem

2xl4rem

3xl6rem

shadow

glow

lift

glow-strong

Typography

The voice of the system.

Display: Space Grotesk · Body: Inter · Mono: JetBrains Mono

xsDesign, set free0.75rem / 1rem

smDesign, set free0.875rem / 1.5

baseDesign, set free1rem / 1.6

lgDesign, set free1.125rem / 1.6

xlDesign, set free1.5rem / 1.3

2xlDesign, set free2.25rem / 1.15

displayDesign, set free4.5rem / 1.05

Motion

How it breathes.

Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.

keyframes - 7 live

glow

flame

sweep

kindle

sparks

fade-up

ember-drift

easings

standardease-in-out

embercubic-bezier(0.22, 1, 0.36, 1)

durations

base · 300msfast · 150msslow · 500msdrift · 18sambient · 4.5s

interaction patterns

enterreveal

Featured tiles kindle into place, scaling up from a spark.

enterentrance

Content enters rising softly, staggered by ~100ms.

hovercta-sheen

A warm sheen sweeps across primary CTAs on hover.

hoverhover-lift

Cards rise 4px and gain a rose-tinted shadow.

loopnotify-glow

A ring of ember radiates out to draw the eye.

loopambient-pulse

Live indicators breathe like a coal being fanned.

Components · 44

Recipes, rendered live.

Every value below is a token reference resolved by the renderer - hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.

ds-badge

Mono-spaced status pill with a breathing ember dot for live states.

tone

infoaccentdangerneutralsuccesswarning

ds-button

Pill-shaped action. The primary intent carries the gradient signature and a rose glow; quieter intents stay in hairlines.

intent

ds-glow-tag

bespoke · pill

Incandescent chip - a token name lit like a coal.

ember

ds-card

Primary content vessel. Hairline border over surface; lifts on hover with a rose-tinted shadow.

padding

Default

A card wearing this system.

None

A card wearing this system.

emphasis

Default

A card wearing this system.

Elevated

A card wearing this system.

ds-link

bespoke · surface

Inline text link, for words inside sentences - the underline is the affordance, so it reads as a link without relying on colour alone. For standalone actions use button; for navigation chrome use navbar/sidebar items.

A surface wearing this system.

ds-kicker

bespoke · text

Mono uppercase eyebrow with wide tracking - the HUD microtype that labels a section ("01 · ECOSYSTEM"). Use above headings; data-tone="accent" for the highlighted variant.

tone

defaultaccent

ds-readout

bespoke · text

HUD data readout - a mono tabular value over a micro uppercase label ("42s · AVG RENDER"). The corner instrument of cinematic scenes; pair with the count-up hook for live-feeling numbers.

ValueLabel

ds-heading

bespoke · text

Display heading on the system's type scale - the display family at a semibold weight. Pick a `size` step (defaults to 2xl) so headings stay on-scale without hand-set styles.

size

lgxl2xldisplay

ds-text

bespoke · text

Body copy on the system's type scale. Pick a `size` step and a `tone`; defaults to base body text on the foreground color - so text stays on-system without hand-set styles.

size

xssmbaselg

tone

defaultmuted

ds-stack

bespoke · surface

Vertical layout primitive - a flex column with a token `gap` (defaults to md). Stack sections/cards without hand-set flex styles.

gap

A surface wearing this system.

align

A surface wearing this system.

ds-row

bespoke · surface

Horizontal layout primitive - a centered flex row with a token `gap` (defaults to sm). Compose toolbars/inline groups without hand-set flex styles.

gap

A surface wearing this system.

justify

A surface wearing this system.

align

A surface wearing this system.