DuckDuckGo, optional Duck.ai

Colors

• #ffffffWhite · background · card fill
• #4477ffPeriwinkle Blue · primary action button fill
• #7799ffLight Blue Banner · plan banner fill

Type

• Section HeaderSystem UI · 22px · bold · #111111
• Pricing TextSystem UI · 20px · bold · #111111
• Legal DisclosuresSystem UI · 14px · normal · #556677

Elements

• Plan Card · card

  Centered near top, rounded container with blue header banner · White fill with thin blue border and rounded corners

• Yearly Option Radio · radio card

  Card option in middle with discount badge · White fill, blue border, radio selected state

• Start Free Trial Button · button

  Bottom of screen, full width primary button · Periwinkle blue fill, white text, pill-shaped

Layout

Vertical stack with top plan summary, pricing choices, dense legal terms text block, and fixed bottom checkout button.

Notes

Typical App Store subscription confirmation screen.