Grok Bot

Colors

• #FFFFFFsheet-bg · bottom sheet background
• #000000scrim-overlay · dimming backdrop for presentation
• #000000button-black · primary action button fill
• #F0F0F2icon-bg · close button circular fill
• #111111text-dark · sheet header · title · button label · secondary actions
• #7A7A7Atext-muted · subtitle · price line · legal disclosure text

Type

• sheet-titleSF Pro Text · 32px · 600 · #111111
• modal-titleSF Pro Display · 40px · 700 · #111111
• subtitleSF Pro Text · 26px · 400 · #7A7A7A
• priceSF Pro Text · 28px · 500 · #7A7A7A
• buttonSF Pro Text · 28px · 600 · #FFFFFF
• disclaimerSF Pro Text · 22px · 400 · #999999

Elements

• close-button · button

  Top left of sheet, circle ~80x80 px. · Light gray circular button (#F0F0F2) with dark cross icon.

• grok-logo · icon_container

  Centered horizontally, ~220x220 px. · Solid black circle with two upright rounded capsule cutouts.

• subscribe-now-button · button

  Centered horizontally, width ~90% (~960 px), height ~110 px. · Solid black pill (#000000) with white centered bold text.

• restore-purchases-button · button

  Centered below primary button, text-only button. · Subtle dark gray text label.

• legal-footer-nav · link_group

  Horizontal row of three links centered near sheet bottom. · Gray text links for Help Center, Privacy Policy, Terms of Service.

Layout

iOS standard bottom modal sheet overlaid over the pricing tier view, focusing conversion on the single Pro subscription option with Apple in-app purchase disclosures.

Notes

Modal sheet presentation has rounded top corners (~48 px radius). Uses system San Francisco typeface standard for iOS.