ARC UI

ARC Radiant Components

Theme Synthesizer

Dark

Light

Mirror to both

Import

Reset

Export

Color

Type

Space

Motion

Start from

Surfaces

The five grounds, deepest first. Each step should read as lifting off the one below it.

Deep --bg-deep

Surface --bg-surface

Base --bg-base

Card --bg-card

Elevated --bg-elevated

Text

Hierarchy comes from lifting to primary, not from stepping down the ramp — the lower three sit within 17 RGB points of each other.

Primary --text-primary

Secondary --text-secondary

Muted --text-muted

Ghost --text-ghost

Borders

Structure only. State is never marked with a border in ARC UI.

Subtle --border-subtle

Default --border-default

Bright --border-bright

Accent

The two colors the whole system is built on. Every gradient, glow and focus ring composes from these — change them and watch the preview.

Primary --accent-primary

Secondary --accent-secondary

Status

Reserved for state. Keep them distinguishable from the accent pair, or a success badge reads as a brand element.

Success --color-success

Warning --color-warning

Error --color-error

Info --color-info

Workspace

Deployments

Filter

New deploy

Requests

184,204

Error rate

0.42%

Build

Passing

v3.0.1 deployed. Rolled out to all regions in 46 seconds.

Recent activity

Nina promoted edge-cache to production Live
Theo opened a rollback on api-gateway Review
Ida archived legacy-worker Archived

Deploy settings

us-east — IAD

eu-central — FRA

ap-southeast — SYD

Cancel

Save changes

Buttons

Primary

Secondary

Ghost

Disabled

Small

Status

Default

Primary

Secondary

Success

Warning

Error

Info

Feedback

An informational message.

Everything completed successfully.

This action affects production.

The request could not be completed.

Inputs

Type

Display

Heading

Body text carries the prose weight and line height.

Section label

Muted supporting copy.

const theme = synthesize(tokens);

Surfaces

deep

surface

base

card

elevated

Accent, composed

None of these read an accent token directly — they read the gradients, glows and focus rings that compose from it. They move because the base tokens moved.

glow-primary glow-secondary gradient-accent-text

Contrast

Dark

Light

Both

Pair	Dark	Light	Needs
Body text on card The single most-read pairing in the system.			4.5:1 text
Body text on base Page-level prose.			4.5:1 text
Secondary text on card Descriptions, table cells, helper copy.			4.5:1 text
Muted text on card Timestamps and captions still have to be readable.			4.5:1 text
Ghost text on card The faintest step. Fails easily — reserve it for decoration.			4.5:1 text
Accent text on card Links and accent labels are read, not just seen.			4.5:1 text
Accent on deep Focus rings and glows against the deepest ground.			3:1 non-text
Secondary accent on card Gradient endpoints and secondary emphasis.			3:1 non-text
Success on card Status color carrying meaning without text.			3:1 non-text
Warning on card Status color carrying meaning without text.			3:1 non-text
Error on card Status color carrying meaning without text.			3:1 non-text
Info on card Status color carrying meaning without text.			3:1 non-text
Bright border on card Structure, not state — no threshold applies. Below about 1.3:1 the edge stops being findable.			—
Default border on card Structure, not state. Shown so you can see how far your surfaces and borders have drifted apart.			—

WCAG 2.1 ratios, computed from the tokens as you set them. Text pairs clearing 7:1 are marked AAA. This covers the pairings ARC UI actually paints; a component that composites your colors at partial alpha can still land differently.

Export

CSS

JSON

Include unchanged tokens

arc-theme.css

Copy

Download

Load this after ARC UI's stylesheet. Only what you changed is here — gradients, glows, focus rings and shadows compose from the base tokens at :root, so they re-derive on their own.

Controls

Preview

Paste a stylesheet — what this tool exports, ARC UI's own base.css, or a theme you hand-edited. A single color works too, and becomes the primary accent.