Style Guide

Design reference for the Math Direct interface. Colors, typography, spacing, and component patterns.

Color Palette

Brand

Navy
#1e3a5f

Blue 500
#3b82f6

Blue 600
#2563eb

Blue 700
#1d4ed8

Feedback

Green 600
#16a34a

Amber 500
#f59e0b

Rose 500
#ef4444

Neutral

Stone 50
#fafaf9

Stone 200
#e7e5e4

Stone 500
#78716c

Stone 900
#1c1917

Typography

Child Display 3 + 4 = 7 Comic Neue, 700 — used for numbers, equations, child-facing text

UI / Navigation Phase 3: Addition Source Sans 3, 400/600/700 — headers, nav, labels, buttons

Teacher Script Read the script aloud exactly as written. Georgia, serif — teacher "say" scripts for readability

Body Text Math Direct covers foundational math skills through 150 scripted lessons. Lora, serif — long-form content, guides, descriptions

Spacing Scale

--space-xs: 0.25rem

--space-sm: 0.5rem

--space-md: 1rem

--space-lg: 1.5rem

--space-xl: 2rem

--space-2xl: 3rem

Buttons

Primary CTA Outline

Lesson Components

Say Script

This is six. Count the dots: one, two, three, four, five, six.

Do Instruction

Point to each dot as you count.

Feedback

Six! Good job.

Count again: one, two, three, four, five, six. Six.

Visual Aids

Dot Patterns (rows of 5)

Step Progress Dots

Cards

Guide Card

Used on the guide and features pages for grouped information blocks.

Another Card

Cards stack on mobile and form a 2-column grid on wider screens.

Stats Bar

150 Lessons

7 Phases

68 Concepts

63 Practice Sets