Tokens

36 tokens, grouped by category. Click a token to copy its CSS variable.

color

color.accent

#E8462C

Primary accent color. Use sparingly for focal points, CTAs, focus rings, and selection.

text-accent / bg-accent

var(--color-accent)

color.bone

#F5F1EC

Body text on dark. Background in light theme.

text-bone / bg-bone

var(--color-bone)

color.dd-accent

#e7f6ef

DealDash Emerald — soft green tint for hover surfaces (ghost/outline hover, menu item hover). Dark mode `#15241e`.

bg-accent

var(--accent)

color.dd-accent-foreground

#0f6a4f

DealDash Emerald — text on accent tint surfaces. Dark mode `#34d399`.

text-accent-foreground

var(--accent-foreground)

color.dd-background

#ffffff

DealDash Emerald — page background, bottom of the elevation ramp. Dark mode `#0a0d0c` (near-black with a whisper of green).

bg-background

var(--background)

color.dd-border

#e6e9e7

DealDash Emerald — the hairline. Borders carry ALL structure (no gray slabs, no heavy shadows). Dark mode `#212824`.

border-border

var(--border)

color.dd-card

#fafbfa

DealDash Emerald — card surface, one step above background on the elevation ramp. Dark mode `#121615`. Structure comes from hairline borders, not shadows.

bg-card

var(--card)

color.dd-destructive

#dc2626

DealDash Emerald — danger status. Dark mode `#f87171` (lighter hue for dark surfaces). Soft chip recipe bg-destructive/10 text-destructive border-destructive/20.

text-destructive / bg-destructive

var(--destructive)

color.dd-foreground

#0e1512

DealDash Emerald — primary text. Dark mode `#f4f6f5`.

text-foreground

var(--foreground)

color.dd-info

#1d4ed8

DealDash Emerald — info status. Dark mode `#60a5fa` (with dark text `#082f49` on fills). Soft chip recipe bg-info/10 text-info border-info/20.

text-info / bg-info

var(--info)

color.dd-input

#f6f8f7

DealDash Emerald — form control fill, slightly raised from background. Dark mode `#161c19`.

bg-input

var(--input)

color.dd-muted-foreground

#66716c

DealDash Emerald — secondary text; must stay AA on card surfaces in both modes. Dark mode `#8f9a94`.

text-muted-foreground

var(--muted-foreground)

color.dd-primary

#1a7a5e

DealDash Emerald — THE brand accent. Buttons, active states, brand moments, focus ring (--ring shares this value). Same in light and dark. Use sparingly; color is a signal, not decoration.

bg-primary / text-primary

var(--primary)

color.dd-primary-foreground

#ffffff

DealDash Emerald — text/icon color on primary fills. Same in light and dark.

text-primary-foreground

var(--primary-foreground)

color.dd-secondary

#f1f3f2

DealDash Emerald — secondary/muted fill (shares value with --muted). Dark mode `#1a201d`.

bg-secondary / bg-muted

var(--secondary)

color.dd-spark

#34d399

DealDash Emerald — bright mint accent for dark surfaces, charts, glows, and the spark comet head. Same in light and dark.

text-chart-1

var(--chart-1)

color.dd-warning

#b45309

DealDash Emerald — warning status. Dark mode `#fbbf24` (with dark text `#451a03` on fills). Soft chips use a 15% fill for warning (10% elsewhere).

text-warning / bg-warning

var(--warning)

color.elevated

#1A1210

Elevated surfaces — cards, tabs, modals.

text-elevated / bg-elevated

var(--color-elevated)

color.ink

#0A0606

Background / foreground in dark theme. The deep neutral.

text-ink / bg-ink

var(--color-ink)

space

space.1

0.25rem

Smallest spacing unit.

var(--space-1)

space.4

1rem

Default body-copy spacing.

var(--space-4)

space.8

2rem

Section-gap spacing.

var(--space-8)

radius

radius.dd-base

0.5rem

DealDash Emerald — base radius. Cards/dialogs 8px (--radius), controls 6px (--radius - 2px), chips 4px or full. No rounded-2xl+ outside marketing hero art.

var(--radius)

radius.md

8px

Default border-radius.

var(--radius-md)

shadow

shadow.dd-btn-drop

0 1px 2px 0 #0a140f40

DealDash Emerald — drop shadow for filled buttons (default/destructive). Dark mode `0 1px 2px 0

var(--shadow-btn-drop)

shadow.dd-btn-drop-subtle

0 1px 2px 0 #0a140f0d

DealDash Emerald — whisper drop shadow for outline/secondary buttons. Dark mode `0 1px 2px 0

var(--shadow-btn-drop-subtle)

shadow.dd-btn-highlight

inset 0 1px 0 0 #ffffff2e

DealDash Emerald — the "lit" top inner edge of every filled button. Dark mode `inset 0 1px 0 0

var(--shadow-btn-highlight)

shadow.dd-overlay

0 12px 50px -12px #0a140f38, 0 2px 8px -2px #0a140f1f

DealDash Emerald — ONE deep soft shadow shared by dialogs, dropdowns, popovers, and select menus so every floating surface feels identical. Dark mode `0 16px 70px -12px

var(--shadow-overlay)

motion

motion.dd-duration-base

180ms

DealDash Emerald — hover and transform transitions. Pair with motion.dd-ease-standard.

var(--duration-base)

motion.dd-duration-fast

120ms

DealDash Emerald — press and color feedback. Pair with motion.dd-ease-standard.

var(--duration-fast)

motion.dd-duration-slow

260ms

DealDash Emerald — enter and overlay transitions. The ceiling: anything longer is a hero-only, deliberate moment.

var(--duration-slow)

motion.dd-ease-standard

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

DealDash Emerald — ONE standard easing for the whole app. Never inline a bezier; in JS use EASE/DUR constants from a shared motion module.

var(--ease-standard)

motion.duration-base

300ms

Base animation duration.

var(--motion-duration-base)

motion.ease-out-quart

cubic-bezier(0.165, 0.84, 0.44, 1)

Default easing for outgoing motion.

var(--motion-ease-out-quart)