Atlas DS Colors Type Grid Components Patterns
Atlas · Color system

One oxblood. Two papers. Violet and blue on a leash.

Warm bone by day, warm near-black by night, ink that adapts, and a single oxblood that owns every accent role. Violet and blue exist for data and atmosphere only — they never take a primary action.

01 / ModesPaper & archive

Two modes, one system of names.

Every color is a role, not a value. Components never reference hex — they reference --bone, --ink, --accent, and the modes re-cast them. Both modes run the same oxblood accent, pitched dark on bone and brightened on near-black.

Paper · default[data-mode="paper"]

Warm bone field, near-black ink, deep oxblood accent. The accent steps brighten toward clay for emphasis on light ground.

Archive · night[data-mode="archive"]

Warm near-black field, bone ink, brightened oxblood accent. The same steps lift to clay and sand to hold contrast on dark ground.

02 / PaletteRoles

Seventeen roles. Every one earns its place.

Chips render live from the tokens — toggle the mode to watch the whole page re-cast.

Bone--bonePage field. The default ground.
Bone 2--bone-2Raised panels, rails, table heads.
Bone 3--bone-3Deepest surface. Bars, wells.
Field--fieldViz stages and map grounds.
Ink--inkPrimary text, hard borders.
Ink 2--ink-2Secondary text, ink gradients.
Ink muted--ink-mutedBody prose, captions.
Ink faint--ink-faintMicro labels, disabled.
Hairline--hairlineDefault rules and borders.
Hairline 2--hairline-2Emphasized borders, inputs.
Accent--accentThe oxblood. Actions, marks, links.
Accent soft--accent-softTinted panels, banner fills.
Accent bright--accent-brightGradients, glow, viz series A.
Accent 2--accent-2Gradient midpoints only.
Accent 3--accent-3Gradient endpoints only.
Violet · support--cat-violetViz series C, speculative frames.
Blue · support--cat-blueViz series B, atmosphere.
03 / RulesUsage

Four rules keep seventeen roles from becoming noise.

R1Oxblood is the only actor.Buttons, links, selected states, and progress are always --accent. Violet and blue never take an interactive role.
R2One accent per composition.A section may use oxblood plus at most one support color, and only when the support color encodes data or marks speculative content.
R3Surfaces stay in the bone ramp.Panels move one step at a time (bone → bone-2 → bone-3). No component invents a fill outside the ramp.
R4Body text never drops below ink-muted.ink-faint is reserved for micro labels and disabled states — anything a reader must actually read stays at ink or ink-muted.
04 / GradientsAtmosphere

Atmospheric layers, carried by the same tokens.

Brand, field, paper, ink, mesh — mood without flooding components. The tri-color mesh (oxblood → blue → violet) is the only place all three hues meet.

grad-brand
grad-field
grad-mesh
grad-paper
grad-ink
05 / TextureGrain

Soft-light grain keeps large fields from going flat.

A stippled CSS gradient at 5px, blended soft-light at ~45% opacity, applied to heroes and stages — never to text panels.

With grain
Without
06 / DataViz encoding

In charts, hue encodes series — never style.

Series A is always oxblood, B blue, C violet. Warm tones are reserved for warnings and reopen paths.

Series A · --accent-bright

Series B · --cat-blue

Series C · --cat-violet

Warning · --cat-warm