1Password: Password Manager

Colors

• #003e9cBrand Dark Blue · Hero background surface fill
• #007affPrimary Accent Blue · Primary action button fill · Secondary action button border · Secondary action button label
• #ffffffPure White · Primary text · Logo mark fill · Card background · Active carousel dot · Primary button label
• #b3c7e8Translucent White · Inactive carousel dot border

Type

• Hero SubtitleSF Pro Display · 44px · 600 · #ffffff
• Brand TitleSF Pro Display · 76px · 800 · #ffffff
• Primary Button LabelSF Pro Text · 38px · 500 · #ffffff
• Secondary Button LabelSF Pro Text · 38px · 500 · #007aff

Elements

• Hero Section · container

  Spans full width from top to ~76% height, ending in a convex bottom curve · Solid deep blue fill (#003e9c) with curved mask at lower edge

• Brand Lock Icon & Name · image/logo

  Centered horizontally around 44% down the screen, horizontal row with lock emblem and wordmark · White circle enclosing keyhole bracket graphic alongside bold white logotype

• Carousel Pagination Dots · indicator

  Horizontal row of 5 dots centered at ~72% height, ~24px gap · First dot solid white circle (~20px diameter), remaining 4 dots are ring outlines with 2px stroke

• Create New Account Button · button

  Full-width with ~140px side margins, centered below curved container at ~82% height, height ~104px · Solid vibrant blue fill (#007aff), centered white text

• Sign In Button · button

  Directly below primary button with ~24px vertical margin, matching width and height (~104px) · White background fill with 2px solid light blue border (#7cb5ec), centered blue text

Layout

Two-tier vertical layout: dominant upper hero area with curved lower perimeter containing branding and pagination, transitioning into a white lower drawer/pad housing two stacked action buttons.

Notes

System typography resembles standard Apple SF Pro styling. Specific tracking and curve control points are visually approximated.