CODECAVE

Design System

The tokens, type and shape language behind CODECAVE. Everything here is transcribed from the production stylesheet and verified against the live site — not estimated from screenshots.

Foundations

Colour

Semantic tokens, the 24-step brand ramp, and the brand gradient.

Typography

The Satoshi scale from 56px down to 14px, and the eyebrow pattern.

Radius & Layout

Corner radii, container breakpoints, section rhythm and the glow panel.

Patterns

Buttons, cards and the eyebrow — with copy-paste CSS.

Guidelines

Brand guidelines

Logo usage, colour and type rules, shape language, motion, and what not to do.

Using the tokens

Link the stylesheet and every token is live on :root. There is no provider and no theme object.

FileContents
styles.cssImports fonts and all tokens, sets the dark baseline, defines .page-container and .section-container
tokens/colors.cssBrand ramp, error ramp, semantic colour layer, gradient
tokens/typography.cssFamily, heading sizes, type scale, line heights
tokens/layout.cssRadii, gutters, section rhythm, card padding, section glow
fonts/fonts.cssThe Satoshi @font-face
Two things that constrain design. Only Satoshi Regular (400) ships as a real font file — 300 and 700 are synthesized by the browser. And CODECAVE builds in Astro and Vue, so there is no importable component library: compose markup yourself and style it with these tokens.