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 productionLive
Theo opened a rollback on api-gatewayReview
Ida archived legacy-workerArchived

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-primaryglow-secondarygradient-accent-text

Contrast

Dark

Light

Both

Pair	Dark	Light	Needs
Body text on cardThe single most-read pairing in the system.			4.5:1 text
Body text on basePage-level prose.			4.5:1 text
Secondary text on cardDescriptions, table cells, helper copy.			4.5:1 text
Muted text on cardTimestamps and captions still have to be readable.			4.5:1 text
Ghost text on cardThe faintest step. Fails easily — reserve it for decoration.			4.5:1 text
Accent text on cardLinks and accent labels are read, not just seen.			4.5:1 text
Accent on deepFocus rings and glows against the deepest ground.			3:1 non-text
Secondary accent on cardGradient endpoints and secondary emphasis.			3:1 non-text
Success on cardStatus color carrying meaning without text.			3:1 non-text
Warning on cardStatus color carrying meaning without text.			3:1 non-text
Error on cardStatus color carrying meaning without text.			3:1 non-text
Info on cardStatus color carrying meaning without text.			3:1 non-text
Bright border on cardStructure, not state — no threshold applies. Below about 1.3:1 the edge stops being findable.			—
Default border on cardStructure, 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.