Style Guide

Design system and visual reference for Open Phonics. This page documents the colors, typography, components, and visual prompting system used throughout the application.

Color Palette

Teal 700
#074245
Teal 600
#0a5c5f
Teal 400
#36b5ab
Gold 400
#d4a017
Gold 500
#b8860b
Stone 900
#1c1917
Stone 600
#57534e
Stone 100
#f5f5f4
Red (pointer)
#dc2626
Green (praise)
#1a7a3a
Rose (correct)
#b91c1c
Amber (instruct)
#d97706

Typography

Lora — Headings

Serif. Used for h1, h2, h3 headings. Weights: 400, 500, 600, 700.

Source Sans 3 — Body Text

Sans-serif. Used for all body text, buttons, labels, and UI elements. Weights: 400, 500, 600, 700.

Comic Neue — Learner Text

Used only in the child view for lesson display text. Weight: 700.

Visual Prompting System

Based on the Funnix/Direct Instruction methodology. Four types of visual prompts help learners decode words:

Type 1: Underlined Combinations

sh   th   er

Letter combinations that make a single sound. CSS class: .digraph

Type 2: Letter-Name Pairs

ai   ea

One letter says its name, the other is silent. CSS: .letter-name + .silent-partner

Type 3: Silent Letters

māte   know

Letters that don't make a sound. Shown smaller and faded. CSS class: .silent

Type 4: Irregular Parts

said   was

Parts that don't follow learned rules. Wavy underline. CSS class: .irregular

Spacing

Blend Space

mat

Space between sounds during blending. CSS class: .blend-space

Word Focus

The cat sat.

Highlights the current word in story reading. CSS class: .word-focus

Design Principles

  • Squared edges. No border-radius on UI elements. Only the pointer dot and step dots are circular.
  • High contrast. All text meets WCAG AA (4.5:1 minimum). Dark mode uses warm tones.
  • No icons with text. Lesson controls (play, reset, back, next) use icons only.
  • Child view is sacred. The reading display area is distraction-free — large text, centered, generous whitespace.
  • Inclusive language. Use "the learner" or "the reader" — not "your child" or "your student."
  • Professional, not playful. Lora serif headings, Source Sans body text. Comic Neue only in the child view.