Design System

FOUNDATION · REUSE THESE VALUES EVERYWHERE

Every color, size, and spacing value below is a CSS custom property defined in src/styles/tokens.css. Components and pages should reference these tokens rather than hardcoding new values, so the whole site stays visually consistent as it grows past 30 lessons and the full problem bank.

Surfaces

--surface-sunken

--surface-base

--surface-raised

--surface-border

Text

--text-heading

--text-body

--text-dim

Primary — ember

The site's one accent color. Used for links, buttons, active nav, callout borders. Deliberately not blue.

--primary

--primary-hover

--primary-dim

--primary-subtle

Semantic diagram states

Fixed meaning across every algorithm animation — never repurposed for UI chrome.

Aa

--state-neutral

Aa

--state-compare

Aa

--state-swap

Aa

--state-sorted

Aa

--state-pointer

Aa

--state-active

Typography

Base size 18px (not the usual 16px), line-height 1.7 — tuned for long reading sessions.

--text-3xlDay 1: JS Essentials

--text-2xlGoal of the day

--text-xlSolution 2: Kadane’s algorithm

--text-lgLead paragraph text sample

--text-baseDefault paragraph body text sample

--text-smSecondary / nav label text

--text-xsDAY 1 / 30 · WEEK 1

Spacing scale

4px base unit. Reference these instead of ad hoc rem values.

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-8

--space-10

--space-12

--space-16

Radius

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-pill

Buttons

Primary actionSecondary actionGhost action

Badges & pills

MEDIUMDAY 1 / 30Day 1: JS Essentials for DSA

Card

EXAMPLE CARD

Card title in JetBrains Mono

Card body copy in JetBrains Mono, using --text-base and --leading-normal — the same combination used for lesson prose.