Hooked on Phonics Learning

Colors

• #FFFFFFPure White · Screen background · Annual plan card fill
• #2F5597Navy Blue · Back button background · Header icon · Completed progress step
• #21BFC9Bright Cyan · Selected subscription card border · Progress track outline
• #EEF4F7Muted Sky Blue · Unselected card background
• #F6B831Golden Yellow · Start Free Trial button fill
• #EF5C64Coral Pink · Discount badge background
• #182330Dark Slate · Titles · Plan names · Pricing values
• #3D4A58Charcoal Body · Disclaimer legal copy

Type

• Screen HeaderNunito · 36px · 700 · #182330
• Card TitleNunito · 46px · 700 · #182330
• Body ExplanationNunito · 34px · 500 · #182330
• Option HeaderNunito · 36px · 700 · #182330
• Monthly PriceNunito · 38px · 700 · #182330
• Badge TextNunito · 26px · 700 · #FFFFFF
• CTA ButtonNunito · 32px · 800 · #182330
• Legal Terms TextNunito · 22px · 400 · #182330

Elements

• Progress Stepper · progress_bar

  Horizontal bar below top nav spanning ~900px, 4 circular step nodes connected by thin line · First node is solid dark blue (#2F5597), following 3 nodes are circular outlines with cyan stroke (#21BFC9)

• Yearly Plan Card · selectable_card

  Centered card, width ~860px, height ~180px, relative badge pinned to top-right corner · White surface, thick 4px cyan border (#21BFC9), containing bold plan title, trial subtext, and breakdown rate

• Save Badge · badge

  Overlapping top-right edge of Yearly Plan card, ~240px wide, ~64px high · Coral pink pill (#EF5C64) with white text 'Save 28%'

• Monthly Plan Card · selectable_card

  Centered below Yearly card with ~28px gap, width ~860px, height ~180px · Soft grayish-blue fill (#EEF4F7), no visible border, identical text layout without badge

• Start Free Trial Button · button

  Centered pill button below monthly plan card, width ~860px, height ~100px · Solid amber/yellow fill (#F6B831) with bold dark text

• Restore Purchases Link · text_link

  Centered below primary CTA button, ~40px vertical gap · Underlined royal blue text link

Layout

Vertical multi-step checkout screen: top bar with back navigation and title, multi-node progress indicator, marketing value proposition, two tiered pricing cards, sticky primary CTA, and bottom legal disclaimer copy.

Notes

Annual subscription is styled as the default selected tier via strong cyan outline and promotional discount tag.