Epic - Kids' Books & Reading

Colors

• #FFFFFFbackground-white · screen background · input background · button surface
• #1CA7ECbrand-blue · screen title · back arrow
• #273444border-slate · social button borders
• #273444social-text-dark · social button text
• #DFE3E8divider-gray · divider rule line · input border
• #8C9BA5text-secondary · divider text · placeholder text
• #D8DFE9disabled-button-bg · disabled CTA fill
• #FFFFFFdisabled-button-text · disabled CTA text

Type

• page-titleNunito · 44px · 800 · #1CA7EC
• social-button-textSF Pro Text · 22px · 500 · #273444
• divider-textSF Pro Text · 18px · 400 · #8C9BA5
• input-placeholderSF Pro Text · 24px · 400 · #8C9BA5
• submit-button-textNunito · 24px · 700 · #FFFFFF

Elements

• back_button · icon_button

  Top left below status bar, 44px left margin · Thick light-blue leftward arrow icon

• apple_sso_button · button

  Full-width with margins (~670px wide), height ~68px, horizontal center · White fill, ~2px dark charcoal outline, Apple logo icon on left, centered label

• google_sso_button · button

  Full-width with margins (~670px wide), height ~68px, 20px below Apple button · White fill, ~2px dark charcoal outline, full-color Google G icon on left, centered label

• facebook_sso_button · button

  Full-width with margins (~670px wide), height ~68px, 20px below Google button · White fill, ~2px dark charcoal outline, blue circular Facebook icon on left, centered label

• or_divider · divider

  Horizontal row spanning input width with centered 'or' label · Thin light gray horizontal line interrupted by centered text

• email_text_field · input_field

  Full-width with margins (~670px wide), height ~76px · Light grey border ~1.5px, white fill, rounded corners, placeholder text 'Enter Email'

• continue_button · button

  Full-width with margins (~670px wide), height ~76px, 28px below email field · Pill/rounded rectangle with muted pastel blue-gray disabled fill and white text

Layout

Single column authentication screen. Top bar contains back navigation, centered title, three rounded social login buttons, an 'or' separator, email text input, and a primary CTA.

Notes

Input styling is rounded-rect, social buttons are pill-shaped.