Speak: Language Learning

Colors

• #000000pure-black · screen background
• #06C755line-green · LINE login button fill
• #0055FEemail-blue · Email login button fill
• #FFFFFFapple-white · Apple button fill · heading text · button labels
• #000000apple-black · Apple button label and icon
• #4267B2facebook-blue · Facebook login button fill
• #767B86text-muted · legal disclaimer text · login prompt text
• #2563EBlink-blue · terms and log in link color

Type

• titleSF Pro Display · 44px · 700 · #FFFFFF
• button labelSF Pro Text · 26px · 600 · #FFFFFF
• legal bodySF Pro Text · 22px · 500 · #767B86
• footer textSF Pro Text · 24px · 500 · #767B86

Elements

• screen header · heading

  Centered in upper third of screen, two lines of text · Bold white sans-serif text

• LINE button · button

  Full width with side padding, height roughly 88px · Solid bright green pill with left-aligned LINE speech bubble logo

• Email button · button

  Full width with side padding, height roughly 88px · Solid bright blue pill with left-aligned white mail icon

• Apple button · button

  Full width with side padding, height roughly 88px · Solid bright white pill with left-aligned black Apple logo

• Facebook button · button

  Full width with side padding, height roughly 88px · Solid Facebook muted slate-blue pill with white 'f' logo

• footer legal and log in links · text link group

  Centered below buttons with vertical margin · Muted grey text with inline saturated blue interactive links

Layout

Centered vertical column on pure black background with top dismiss affordance, large bold heading, stack of 4 full-width branded login pills, and bottom terms/login links.

Notes

The buttons adopt official brand colors for LINE, Apple, and Facebook alongside an email action.