Playground

A project may change three things inside a theme: the accent color, the display font and the radius dial. Try them on a real screen, check the contrast, then copy the overrides and the root attributes into your project.

Controls

Theme

Mode

Accent

The accent is the spark; accent ink is the same color as text, dark enough to read.

Use the accent for the primary button

Display font

Radius dial 100%sm 8px · md 12px · lg 18px · xl 30px · control 10px

ContrastChange the accent to check its contrast.

Thursday

Push day

Weekly volume

+8%

Bench press4 × 8 · 80 kg
Incline press3 × 10 · 26 kg
Cable fly3 × 12 · 18 kg

Revenue

MRR

+12.4% this month

Active seats

+86 this month

Churn

-0.3 pts

Invoices
Customer	Plan	Amount	Status
Northwind	Team	$1,240.00	Paid
Acme Labs	Business	$4,800.00	Overdue
Globex	Team	$980.00	Paid
Initech	Starter	$240.00	Draft

Auto-send

Invoice sent

Northwind will get it in a minute.

overrides.css

/* overrides.css: load after enma/css. Tweak budget only: accent, display font, radius. */
/* No changes yet: adjust a control to generate overrides. */

Root attributes

<html lang="en" data-enma="graphite" data-theme="dark">
  <body class="e-canvas">