Lively - Period Tracker, Cycle

Colors

• #120e0aDark Warm Background · background
• #ffffffPrimary White · title · brand
• #ff9f43Accent Orange · link
• #8c8784Button Gray · button fill
• #1c1c1eKeyboard Background · keyboard fill
• #007affKeyboard Action Blue · button fill

Type

• titlePlus Jakarta Sans · 48px · 500 · #ffffff
• buttonSF Pro Text · 32px · 500 · #ffffff
• linkSF Pro Text · 30px · 400 · #ff9f43

Elements

• Brand Header · header

  Top-left area with logo and wordmark 'lively.' · Small gradient icon followed by white text.

• No Code Yet Link · link

  Top-right corner, aligned with the brand header. · Orange text link.

• Main Title · heading

  Centered vertically in upper middle section, multi-line. · Large white bold text 'Enter Your Partner's Invitation Code'.

• Code Input Fields · input

  Row of dots and a cursor line below the title, centered. · Single active vertical cursor line followed by bullet dots.

• Sync Up Button · button

  Centered lower section above the keyboard. · Solid rounded rectangle in muted gray with white text.

• Virtual Keyboard · keyboard

  Pinned to bottom of the screen. · Dark gray standard virtual keyboard layout with blue return key.

Layout

Vertical stack with top brand elements, prominent title, code entry indicator, CTA button, and system keyboard at the bottom.

Notes

Focused passcode/code entry flow.