Gizmo: AI Tutor

Colors

• #F4F5F7Background Off-White · screen background behind modal
• #FFFFFFModal Card White · bottom sheet background · action card background
• #1B2232Primary Dark Slate · headings · primary text · list icons · chevron icons
• #E02E49Brand Crimson Red · logo secondary wordmark
• #8A94A6Subtle Gray · secondary text · body captions · borders
• #EEF4FFSoft Icon Pill Blue · icon container background
• #E5E9F0Card Border Gray · list container outline

Type

• Background HeadingNunito · 56px · 800 · #1B2232
• Modal Brand TitleNunito · 44px · 900 · #1B2232
• Menu Item TitleNunito · 28px · 700 · #1B2232
• Menu Item SubtitleNunito · 22px · 500 · #8A94A6

Elements

• Live Indicator Badge · pill_badge

  Top right below status bar, horizontal layout with cube icon and text · Light lilac/gray tinted background, rounded pill shape, dark purple icon

• Bottom Sheet Container · modal_sheet

  Covers lower half of viewport, anchored to bottom with rounded top corners · Solid white fill, pronounced top border radius, subtle drop shadow over dimmed backdrop

• Options List Container · list_group

  Centered within modal sheet, contains 3 action rows with horizontal dividers · White background, rounded outline border in light gray with subtle hairline dividers

• Option Item Row · list_tile

  Horizontal row with rounded icon badge on left, two-line text block center, chevron on right · Transparent fill inside list container, soft light blue circular badge for icons

Layout

Modal bottom sheet layout presenting GizmoLive play options overlaying the study screen dashboard with an axolotl character illustration.

Notes

Background screen is dim/inactive. Typographic styling resembles rounded modern sans-serifs such as Nunito, Poppins, or Quicksand.