Grok Bot

Colors

• #FFFFFFpage-bg · main screen background
• #F6F6F6card-surface · subscription tier card fills
• #E5E5E7badge-bg · tier price/included tag fills
• #E2E2E2button-light · secondary action button fill
• #000000button-dark · primary action button fill
• #000000text-black · main title · tier names · button labels
• #5A5A5Atext-secondary · tier descriptions · badge labels

Type

• titleSF Pro Display · 48px · 700 · #000000
• card-titleSF Pro Display · 34px · 600 · #000000
• badge-textSF Pro Text · 24px · 600 · #666666
• card-descriptionSF Pro Text · 26px · 400 · #5A5A5A
• buttonSF Pro Text · 28px · 600 · #000000

Elements

• more-options-btn · button

  Top right corner, circle ~80x80 px. · Off-white circular button with horizontal three dots icon.

• app-avatar · icon_container

  Centered below screen title, ~180x180 px. · Solid black circular emblem with two white eyes.

• tier-supergrok-card · card

  First card in vertical stack, width ~90% (~980 px), height ~480 px. · Very light gray container (#F6F6F6), contains top row with title and badge, description, and Link Grok Account pill button.

• tier-pro-card · card

  Second card in vertical stack, width ~90% (~980 px), height ~380 px. · Light gray surface (#F6F6F6), title 'Pro' with badge '$25.99/mo', short copy, and full-width black pill button.

• subscribe-now-btn · button

  Contained inside Pro tier card, width ~860 px, height ~110 px. · Solid black pill (#000000) with white bold text.

• tier-proplus-card · card

  Third card partially visible at bottom, width ~90% (~980 px). · Light gray container with 'Pro+' title and '$77.99/mo' badge.

Layout

Native mobile paywall / tier selection screen featuring a hero header with avatar and a vertically scrolling list of pricing cards.

Notes

Visual styling uses rounded card hierarchy with pill tags and pill-shaped action buttons typical of modern iOS apps.