Gizmo: AI Tutor

Colors

• #F8F9FABackground Off-White · screen background
• #40E0D0Cyan Banner Gradient Start · plan card top-left gradient
• #1E90FFBlue Banner Gradient End · plan card bottom-right gradient
• #111827Primary Dark Navy · page title · list item titles · try unlimited button fill
• #FFFFFFCard Surface White · settings action list card background
• #6B7280Muted Text Gray · list item descriptions · chevron arrows
• #F1F4F9Icon Badge Light Gray · settings row icon background

Type

• Screen HeaderNunito · 32px · 800 · #111827
• Plan Card LabelNunito · 22px · 700 · #111827
• Plan Title GraphicNunito · 54px · 900 · #0B2D46
• Feature Bullet TextNunito · 23px · 600 · #0B2D46
• List Option TitleNunito · 26px · 700 · #111827

Elements

• Top Navigation Bar · navigation_bar

  Back chevron on left, centered 'Settings' header title · Clean transparent/white bar with standard iOS back chevron

• Current Plan Summary Card · promo_card

  Full width rounded banner showcasing current tier, features with checkmarks, 3D controller graphic, and CTA · Vibrant cyan to sky-blue gradient with rounded corners and solid dark pill button

• Try Unlimited Button · cta_button

  Full width horizontal button pinned at bottom of the plan card · Solid dark slate fill with centered rocket emoji and bold white text

• Settings Options Group · list_group

  Grouped list cards displaying leading icon inside squircle badge, title, subtitle, and trailing chevron · White rounded rectangle with thin border and clean dividers

Layout

Settings view containing a top navigation bar, an eye-catching current plan status hero card with upgrade CTA, followed by grouped action list items.

Notes

Illustrations feature stylized 3D assets (gamepad). List icons use soft rounded square background containers.