Office Word: Edit Document

Colors

• #2B56F6brand-blue · primary CTA fill · selected card border · feature checkmarks
• #EFF4FFselected-card-tint · yearly plan card background
• #FFA500badge-orange · best offer badge background
• #22C55Ecancel-green · cancel anytime checkmark icon
• #E5E7EBborder-grey · card borders
• #111827text-primary · headlines · plan names · prices
• #9CA3AFtext-muted · close button · restore link · legal links

Type

• headlineSF Pro Display · 54px · 700 · #111827
• feature-itemSF Pro Text · 28px · 500 · #1F2937
• plan-titleSF Pro Display · 30px · 700 · #111827
• plan-priceSF Pro Display · 32px · 600 · #111827
• badge-textSF Pro Text · 18px · 700 · #FFFFFF
• footer-linkSF Pro Text · 22px · 400 · #9CA3AF

Elements

• Dismiss Button · icon button

  Top left below status bar, ~48px inset. · Subtle gray '×' icon.

• Restore Purchases Link · text button

  Top right below status bar, ~48px inset. · Plain grey text 'Restore'.

• App Icon · graphic

  Centered horizontally, ~100px below top navigation; width ~190px, height ~190px. · Rounded rectangle in deep blue with white Word document graphic.

• Features List · list

  Centered block below headline, ~40px vertical spacing between items; items left-aligned relative to each other. · Blue circular checkmark icon paired with medium weight sans-serif text.

• Free Trial Toggle Card · container / toggle row

  Full width with 48px lateral margins; height ~100px. · Outlined white card with gray border (#E5E7EB), label 'Not Sure? Enable Free Trial' on left, iOS style toggle switch on right (currently off).

• Yearly Plan Card · card / radio selector

  Full width with 48px lateral margins; height ~120px; 16px below toggle. · Light blue fill (#EFF4FF) with 2px blue border (#2B56F6). Left text 'YEARLY PLAN', right text '$49.99/year'. Top-right pill badge 'BEST OFFER' in solid orange.

• Weekly Plan Card · card / radio selector

  Full width with 48px lateral margins; height ~120px; 16px below yearly plan. · White fill with 1px gray border (#E5E7EB). Left text 'WEEKLY PLAN', right text '$4.99/week'.

• Continue Button · button

  Full width with 48px lateral margins; height ~110px; positioned ~40px below weekly card. · Solid brand blue (#2B56F6) fill with white centered text and right arrow icon.

• Footer Trust Strip · footer

  Row positioned at bottom with space-between alignment across the page margins. · 'Terms of use' on left, green checkmark with 'Cancel Anytime' in center, 'Privacy Policy' on right.

Layout

Modal paywall with fixed dismiss/restore actions at top, central value proposition and pricing options, followed by sticky action button and compliance footer.

Notes

Best offer badge overlaps the top border of the yearly plan card slightly to the right.