Chatbot AI Assistant - Genie

Colors

• #000000background-black · screen background
• #121316device-bezel · mockup phone frame border
• #1C1E22card-dark-gray · prompt card container background
• #34D399accent-mint-green · category tag pill border and text
• #FFFFFFtext-primary-white · headline · list text · button label

Type

• screen-headlineSF Pro Display · 54px · 700 · #FFFFFF
• tag-labelSF Pro Text · 36px · 600 · #34D399
• card-bullet-textSF Pro Text · 34px · 400 · #FFFFFF
• button-primarySF Pro Text · 36px · 700 · #000000

Elements

• Device Frame Mockup · illustration

  Centered horizontally in top 60% of viewport with top edge partially cropped. · Dark phone outline with Dynamic Island camera pill at top center and subtle outer glow.

• Work Tag Pill · tag

  Top-left overlapping the mock device screen edge, 240px wide by 90px high. · Dark fill with rounded border stroked in mint green, laptop emoji icon and 'Work' text in green.

• Work Prompt Card · card

  Positioned directly under Work Tag Pill inside phone screen, width ~760px, height ~180px. · Dark gray solid rounded card containing white bulleted prompt text.

• Fun Tag Pill · tag

  Positioned right-aligned below Work card, overlapping the right side of phone mockup. · Dark fill with mint green outline, silly face emoji, and 'Fun' text.

• Fun Prompt Card · card

  Positioned beneath Fun Tag Pill, width ~620px, height ~240px. · Dark gray solid rounded card containing multiple white bulleted creative prompt options.

• Bottom Action Button · button

  Full width with 60px horizontal padding, 130px height, docked near bottom safe area. · Solid white pill shape with centered black text and right arrow indicator.

Layout

Vertical onboarding carousel step showcasing capability illustrations inside a mock smartphone frame, anchored by a prominent headline and primary continue button at the bottom.

Notes

Green accent border uses an estimated mint/emerald tone (#34D399).