Design system

UI library

Living demos of tokens and components used on the bootcamp marketing page. Spec in DESIGN.md. Direct URL only — not in public nav or search.

Color

COSS-inspired semantic neutrals. Prefer these tokens over raw hex in components.

Background--background

Foreground--foreground

Muted--muted

Muted fg--muted-foreground

Primary--primary

Border--border

Onest via --font-sans / --font-heading. Mono for code.

Display — leave with a live page

Heading XL — Weekend 1

Large — supporting lede for marketing sections

Base — body copy for feature rows and FAQ answers.

Small — badges, captions, muted helper text

code sample — ui-monospace

Primary for main CTA, secondary for alternate, ghost for quiet header actions.

Link as button

Labels for private share, weekend status, and section kickers.

Private share This share Unlisted

Relume-style how-it-works block used for Weekend 1 teaching units.

Supporting sentence in muted foreground. Keep one job per block.

Do it now Exercise callout on muted surface.

Quiet bordered surface for arc tiles and compact callouts.

Short description of a weekend or outcome.

Native details / summary — no JS accordion.

Sample question

Sample answer in muted foreground at small size.