Open Design system

CODECAVE is dark, round,
and violet.

In that order of importance. This is the front door to the system — the canonical rules, the machine-readable tokens, and the specimen cards that prove them. Everything below is traceable to first-party source.

Start here

Read in this order. DESIGN.md is the source of truth; colors_and_type.css is its machine-readable half.

1 · The rules Eleven sections: foundations, the 26-step ramp, components, motion, anti-patterns, and the known divergences. Says so where evidence is thin rather than guessing. DESIGN.md 2 · The tokens Every value as a custom property, semantic layer over raw ramp. Consume the semantic names; never hard-code a hex. colors_and_type.css 3 · The brand kit The dark brand page — logo lockups, clear space, palette, type scale and the glow CTA, rendered on the real ground. brand-kit.html 4 · The foundations Twelve preview cards: color, typography, spacing, radius, buttons, inputs, assets and the decorative art layer. preview/ 5 · The live components Thirteen components extracted from codecave.pro — twelve mount the real compiled .vue sources live — each with its real prop signature, a variant matrix and what the extraction found — 55 findings, 30 of them defects. storybook/ 6 · The templates Six whole surfaces composed from the system — pitch deck, contact form, marketing email, newsletter, landing page, print poster. One self-contained file each. artifacts/

The four decisions, in color

Depth is not built from contrast. The page is #0A0A0B; cards rise one barely-perceptible step to #0F0F15. That narrow separation is deliberate — if you are lightening a card to make it read, you have made a layout mistake, not a color mistake.

Surface primary#0A0A0B
Surface secondary#0F0F15
Border#2B2848
Heading / body#F4F4F6
Action#5F20FE
The violet field#9980FF

The light comes from below

Section panels cast violet light upward — the source sits under the panel edge. It is physically wrong and instantly recognizable. Never replace it with a conventional drop shadow. This panel and the button are the real thing.

Open the brand kit

There is one brand page. brand-kit.html is it, and DESIGN.md is the rules. The host pipeline also emits a brand.html from brand.json, but its template is fixed-light — --paper is a hard-coded #ffffff and any dark surface falls through to white — so it renders this dark-first brand on paper. It is not shipped here.