ds-card
Primary content vessel. Hairline border over surface; lifts on hover with a rose-tinted shadow.
emphasis
default
A card wearing this system.
elevated
A card wearing this system.
Ember
v4 · publishedWarm 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.
Use in your project
Pull this design system into any project with the synthesisui CLI, then ask your coding agent to build components — it follows the system's tokens, recipes and rules.
1 · Authenticate
npx synthesisui login2 · Add this design system
npx synthesisui add ember --version 43 · Import the tokens in your global CSS
@import "_synthesisui/ds/ember/tokens.css";
@import "_synthesisui/ds/ember/theme.css";4 · Ask your agent
Add a button using the ember design systemColor
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.amber
200#f6cf8d
300#f0bc64
400#eaa83c
500#d8922a
600#b87720
color.obsidian
50#faf8fb
100#f5f2f6
200#e9e4ee
300#a79eb2
500#6b6375
700#221c2a
800#1a1620
900#121016
950#0b090d
color.semantic — resolved live via CSS variables
faint
{color.obsidian.500}
muted
{color.obsidian.300}
accent
{color.amber.400}
border
{color.obsidian.700}
canvas
{color.obsidian.950}
raised
{color.obsidian.800}
overlay
{color.obsidian.700}
primary
{color.rose.500}
surface
{color.obsidian.900}
foreground
{color.obsidian.100}
Typography
The voice of the system.
Display: Space Grotesk · Body: Inter · Mono: JetBrains Mono
lgDesign, set free1.125rem / 1.6
smDesign, set free0.875rem / 1.5
xlDesign, set free1.5rem / 1.3
xsDesign, set free0.75rem / 1rem
2xlDesign, set free2.25rem / 1.15
baseDesign, set free1rem / 1.6
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
embercubic-bezier(0.22, 1, 0.36, 1)
standardease-in-out
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 · 10
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-tabs
Segmented control; the active segment lifts onto a surface.
tone
ds-alert
Inline message. Tone maps onto the system's own semantic accents.
tone
accent
A message wearing this system.
neutral
A message wearing this system.
primary
A message wearing this system.
ds-badge
Mono-spaced status pill with a breathing ember dot for live states.
intent
accentneutral
ds-avatar
Identity token — sized circle with initials or image.
size
MAMAMA
ds-button
Pill-shaped action. The primary intent carries the gradient signature and a rose glow; quieter intents stay in hairlines.
intent
ds-select
Field trigger that reveals a focus ring on interaction.
tone
Choose an option
ds-switch
Binary toggle — the track wears the system, on flips primary.
size
ds-glow-tag
bespoke · pillIncandescent chip — a token name lit like a coal.
tone
ember
ds-progress
Determinate track — the fill carries the primary.
tone