Chatbot AI Assistant - Genie

Colors

• #000000background-black · screen background
• #1A1A1Ecard-surface-gray · feature card tile background
• #FFFFFFtext-primary-white · card headings · screen headline · button label
• #E53E3Eaccent-red-pdf · PDF icon illustration accent
• #3B82F6accent-cyan-blue · web search globe graphic · keyboard pill accent

Type

• card-titleSF Pro Display · 42px · 700 · #FFFFFF
• screen-headlineSF Pro Display · 56px · 700 · #FFFFFF
• button-primarySF Pro Text · 36px · 700 · #000000

Elements

• PDF Analyzer Card · feature_card

  Top full-width card with 60px horizontal margins, height ~320px. · Rounded dark tile with title on left and 3D red PDF document preview graphic on right.

• Image Generation Card · feature_card

  Left tile of the middle 2-column row, width ~450px, height ~380px. · Rounded dark tile with generative portrait/cat image previews above bottom title.

• Web Search Card · feature_card

  Right tile of the middle 2-column row, width ~450px, height ~380px. · Rounded dark tile with wireframe globe and line graph icon above bottom title.

• AI Smart Keyboard Card · feature_card

  Bottom full-width card above screen title, width full minus 120px margins, height ~320px. · Rounded dark tile with text title on left and mobile keyboard mock with 'Improve' popup on right.

• Primary Continue Button · button

  Bottom-pinned full-width button with 60px side margins, height 130px. · Solid white pill shape with centered text and right arrow glyph.

Layout

Structured bento-style feature grid consisting of a top wide card, two middle square cards, and a bottom wide card, followed by a two-line centered headline and primary CTA button.

Notes

Grid shows diverse AI multi-modal features in a cohesive dark theme layout.