← All foundations
Color · card 1 of 3

Primary violet and the raw ramps

Verbatim from codecave.pro/src/styles/global.css after the 2026 palette rebuild — a violet brand ramp, a gray ramp, and single-use accents. The ramps exist only so the semantic names have somewhere to point — consume the semantic layer, never a raw step, with the three documented exceptions below.

The action color

#5F20FE edges, links and marks. It never fills a large area. When a genuine purple field is needed the system switches to the lighter #9980FF and flips to near-black text — the only dark-on-light text anywhere in the system.

Action --color-action
#5F20FE · brand-500
links · borders · eyebrows · focus halo
Aa
Action field --color-glow-25
#9980FF + #1B0D4E text
the single glow CTA only
Hovered --color-hovered
#B19AFE · brand-200
hover foreground · focus ring
Brand gradient --gradient-brand
#5F20FE → #8252FC → #B19AFE → #E8E6F0
mid stop is progress-0, not brand-300
display type · rule accents

Where the cyan went

The 2026 rebuild removed bright cyan #20EFFE from the ramp — it survives only inside the decorative SVGs (see the imagery card). The token layer keeps one deep cyan, and only inside the technology-card wash.

Technology wash --color-technology-gradient-0 · #077689
always at 0.1 alpha

Reserved. The technology card blends brand-500 → brand-400 → brand-500 at low alpha for its ring — and since the rebuild brand-400 is the violet #5F3ABD, so the ring reads violet end to end. Cyan is never a CTA, body color, large field, or photographic grade. It is a light effect in the art, not a UI color.

Raw ramps — 12 violet steps, 13 grays

Light to dark. Only three raw values are legitimately consumed directly, because that is what production does: glow-25 (glow-button fill), shadow-0 (the upward glow), and progress-0 (the gradient mid stop). Two quirks are upstream facts: gray-1100 (the card) is lighter than gray-1000, and brand-500 is lighter than brand-400.

Brand — violet

brand-25#E8E6F0 · gradient endpoint
brand-50#BBB9CB
brand-100#B8AFDB
brand-200#B19AFE · hover fg
brand-300#735CAB · muted violet
brand-400#5F3ABD · ring mid-stop (was cyan)
brand-500#5F20FE · ACTION
brand-600#4705ED
brand-700#4004AF · primary hover
brand-800#1B0D4E · text on CTA
brand-900#1E113B · primary active · secondary fill
brand-950#0A0A0B · THE PAGE

Gray

gray-50#F4F4F6 · headings, body
gray-100#DCDCE5 · resting icon
gray-200#D5D5DD · long-form copy
gray-300#C7C7DB · secondary, lighter
gray-400#A3A3C2
gray-500#9595BB · metadata, placeholders
gray-600#6B6699 · neutral · large text only
gray-700#2B2848 · borders
gray-800#232339 · surface hover
gray-900#1C1C27 · raised card
gray-950#15151E
gray-1000#050505 · failureproof ground
gray-1100#0F0F15 · card — lighter than gray-1000

Single-use accents

glow-25#9980FF · glow-button fill
shadow-0#281470 · the upward glow
progress-0#8252FC · gradient mid

Error ramp

Four steps. --color-error points at error-300; error-100 and error-200 drive the input error halo, and error-400 drives the pulsing dot on the last nav item.

error-100#FE9A9A · error value text
error-200#FE2020 · error halo
error-300#B42318 · --color-error
error-400#CA1400 · nav pulse dot