Rocket Money - Bills & Budgets

Colors

• #ffffffBackground White · screen background
• #000000Text Dark · headings · body text · input text
• #f5f5f7Input Background · text input fill
• #8e8e93Muted Grey · helper text · icons
• #111111Primary Button Dark · continue button background

Type

• TitleSF Pro Display · 28px · bold · #000000
• BodySF Pro Text · 16px · normal · #48484a
• ButtonSF Pro Text · 17px · semibold · #ffffff

Elements

• Top Navigation Bar · header

  Top of screen, contains close button, URL indicator, and menu icon. · White background with thin bottom border.

• Password Input Field · text_input

  Centered horizontally below description, width spans most of the screen. · Light grey rounded rectangle container with an eye icon on the right.

• Continue Button · button

  Bottom section, centered, pill-shaped. · Solid dark fill with white text.

Layout

Single column vertical layout with top navigation, centered headers and input fields, validation checklist, and bottom action button.

Notes

Standard mobile web view inside an iOS browser wrapper.