Chatbot AI Assistant - Genie

Colors

• #000000background-black · paywall screen background
• #FFFFFFtext-primary-white · headline · checklist labels · button label
• #9E9EA7text-muted-gray · checklist text · plan terms · footer links
• #48E5A3accent-neon-green · selected plan border · active toggle track · discount badge fill
• #131417card-dark-surface · plan card background · toggle container background
• #27272Acard-border-subtle · unselected plan card stroke · toggle container stroke

Type

• paywall-headlineSF Pro Display · 60px · 700 · #FFFFFF
• paywall-subtitleSF Pro Display · 38px · 500 · #FFFFFF
• pill-tagSF Pro Text · 24px · 600 · #FFFFFF
• checklist-itemSF Pro Text · 28px · 500 · #FFFFFF
• plan-titleSF Pro Display · 32px · 700 · #FFFFFF
• discount-badge-textSF Pro Text · 22px · 800 · #000000
• plan-price-primarySF Pro Display · 34px · 700 · #FFFFFF
• plan-price-secondarySF Pro Text · 26px · 400 · #9E9EA7
• button-ctaSF Pro Text · 38px · 700 · #000000
• footer-linkSF Pro Text · 24px · 500 · #71717A

Elements

• Dismiss Button · icon_button

  Top-left corner, approximately 60px from left and 120px from top. · Minimalist translucent cross (X) glyph in neutral gray.

• Model Tag Chips · chip_group

  Two rows of rounded tag chips below the subtitle, centered horizontally. · Dark pill chips with brand icons and colored/white text (Gemini in cyan, DeepSeek in blue, Claude in orange, Grok and GPT-5 in white).

• Feature Checklist · list

  Vertical list of 4 items centered with 60px left indent. · Circular gray checkmark icons on the left paired with white descriptive text.

• Free Trial Toggle Row · row_container

  Full width card container with 50px margins, height ~120px. · Dark surface with subtle border, white 'Free Trial Enabled' label on left, bright green active toggle switch on right.

• Yearly Plan Card · card_option

  Horizontal card below toggle, height ~130px, 50px side margins. · Dark gray fill with subtle border, left-aligned title and annual price, right-aligned '90% OFF' green pill badge and weekly breakdown.

• 3-Day Free Trial Plan Card · card_option

  Horizontal card below yearly plan, height ~130px, 50px side margins. · Selected state with 3px vibrant mint green border, bold trial label on left and subsequent weekly price on right.

• CTA Button · button

  Full width with 50px side margins, height ~130px, positioned below plans. · Solid white pill shape with bold black text 'Try for Free' and arrow indicator.

• Footer Links Bar · link_group

  Bottom safe area, horizontal row with space-around alignment. · Subtle gray underline-free text buttons for 'Restore', 'Terms of Use', and 'Privacy Policy'.

Layout

Standard mobile paywall architecture featuring dismiss control at top, value proposition headline, supported AI model tags, 4-point feature checklist, interactive trial toggle, plan selection cards, primary conversion button, and legal footer links.

Notes

Selected plan is highlighted using neon mint green stroke matching the active toggle switch.