Week 02 · Design System Token Page

The visual foundation for a stock and crypto Trading Dashboard.

This milestone intentionally stops before the complete dashboard layout. It validates the color roles, accessible light and dark themes, fluid typography, and relative spacing scale that later weeks will use.

01

Perceptual color with OKLCH

Semantic roles stay stable while theme values change.

Primary

--color-primary

Brand emphasis and primary actions.

Secondary

--color-secondary

Market data, focus, and analytical accents.

Background

--color-background

The full application canvas.

Surface

--color-surface

Cards, panels, navigation, and side-rails.

Text

--color-text

Primary readable content.

Muted Text

--color-text-muted

Supporting labels and descriptions.

Contrast baseline

Light theme text/background: approximately 15.87:1. Dark theme text/background: approximately 17.01:1. Both exceed the 4.5:1 WCAG AA target for normal text.

02

Fluid typography with clamp()

Headings interpolate smoothly while remaining bounded and zoom-aware.

--size-heading-lg

Market intelligence at every viewport.

--size-heading-md

A scalable heading for dashboard sections.

--size-base

Readable base copy for research, labels, instructions, and analytical context.

--size-base: 1rem;
--size-heading-md: clamp(1.35rem, 1.18rem + 0.75vw, 2rem);
--size-heading-lg: clamp(1.75rem, 1.3099rem + 1.8779vw, 3rem);
03

Relative spacing constants

One rem-based rhythm will govern future navigation, cards, grids, and comparison widgets.

--space-xs · 0.5rem
--space-sm · 0.75rem
--space-md · 1rem
--space-lg · 1.5rem
04

Week 02 verification

Manual checks required before Week 03 begins.

  • Zoom the page to 200% and confirm all typography grows without clipping.
  • Resize from a narrow mobile viewport to a wide desktop viewport and inspect the heading scale.
  • Switch between light and dark mode and verify readable contrast.
  • Open this page directly at /week02/index.html.
  • Confirm the project root links to this preserved milestone.