Color

Near-black glass, light text and one violet accent. The five Jewel colors live in the background, where they do all the talking.

CSS: css/tokens.css
Contrast: docs/accessibility.md

01 — Jewel palette

The five Jewel colors

They make up the lava lamp animation in the background. Components never use them directly; charts use versions stepped for contrast.

Purple--jewel-purple

Magenta--jewel-magenta

Teal--jewel-teal

Red--jewel-red

Orange--jewel-orange

Lava lamp palettes

The animation can use a warm or a cool set instead of Jewel’s own. Put data-palette on <html>. Text contrast doesn’t change: every palette color is darker than the near-white backdrop that glass is already tested over.

JeweldefaultWarm and cool together. The default.

Emberdata-palette="ember"Warm: reds, orange, amber and rose.

Lagoondata-palette="lagoon"Cool: teal, sky, cyan, blue and indigo.

Duskdata-palette="dusk"Violet and rose over deep blue.

<html lang="en" data-theme="dark" data-palette="ember">

02 — Color tokens

Text

Every text color meets WCAG AA (4.5:1) on glass over any part of the background, and on solid panels.

Default--text-default

Muted--text-muted

Accent--text-accent

Inverse--text-inverse

Surfaces and edges

Glass fill, the hairline, and the opaque surfaces behind images and pop-ups. The checks show what’s see-through.

Panel--panel-bg

Hairline--panel-border

Solid surface--surface-solid

Media backdrop--media-bg

Scrim--scrim

Form fields

Field edges are brighter than the hairline so they reach 3:1. Errors use one red, for text and edges.

Edge--field-border

Edge, hover--field-border-hover

Fill--field-fill

Focus--field-focus

Error--field-error

Placeholder--field-placeholder

Status

The traffic light, for the state of things: success, warning, error, info and unknown. Each has a text tone (at least 4.5:1) and a stronger mark tone for dots and bars (at least 3:1). Status colors always mean something, so they never stand in for chart colors, or the other way round.

Success--status-success

Success mark--status-success-mark

Warning--status-warning

Warning mark--status-warning-mark

Error--status-error

Error mark--status-error-mark

Info--status-info

Info mark--status-info-mark

Unknown--status-neutral

Unknown mark--status-neutral-mark

Interaction states

Shared by every component, so hover, pressed and selected feel the same everywhere.

Hover--state-hover-fill

Pressed--state-pressed-fill

Selected--state-selected-fill

Pressed, filled--state-pressed-solid

Charts

One validated palette in a fixed order. A sixth series turns gray; colors never repeat.

Series 1--chart-1

Series 2--chart-2

Series 3--chart-3

Series 4--chart-4

Series 5--chart-5

Context--chart-context

03 — Three tiers

How the tokens fit together

Primitives hold raw values. The theme maps them to colors. Components read only the resolved tier, which is what lets a solid panel or a future theme change their colors without touching a component.

Tier	Where	Holds
1. Primitives	`:root`	The Jewel palette, type scale, spacing, radii, motion
2. Theme	`[data-theme="dark"]`	`--color-` and `--glass-`
3. Resolved	`:root, [data-theme]`	`--panel-`, `--text-`, `--field-`, `--state-`, `--chart-*`

04 — Usage

Use it for

Resolved tokens only, in components and page CSS: --text-*, --panel-*, --field-*, --state-*, --status-*, --chart-*.
The accent for links on hover, focus rings, the current item and selected states.
The error red for errors only, on text and edges, and to fill the one destructive button.
Status colors for the state of things, always with a word beside them.
Overriding a token in your own stylesheet, loaded after jewel.css.

Avoid

Hex values or --color-* primitives in a component. They skip the glass and solid adjustments.
Colored backgrounds on notices and tags. Tone lives in a 2px edge. The destructive button is the one filled color.
Status colors as decoration, or for chart series.
A second accent color.
Changing a color without rechecking contrast in docs/accessibility.md.