Gizmo: AI Tutor

Colors

• #F8F9FABackground Off-White · screen background
• #FFFFFFDeck Card White · card background · search icon background
• #111827Text Primary Slate · screen title · active tab · deck title
• #717B8AText Inactive Gray · inactive tab · more options icon
• #30D4B2Accent Turquoise · deck card color bar stripe
• #121A2CFAB Dark Slate · floating action button fill

Type

• Screen TitleNunito · 44px · 800 · #111827
• Tab Label ActiveNunito · 26px · 800 · #111827
• Tab Label InactiveNunito · 26px · 700 · #717B8A
• Deck Item NameNunito · 26px · 700 · #111827

Elements

• Search Button · icon_button

  Top right aligned next to Live badge · Circular white button with soft shadow and dark magnifying glass icon

• Deck Card · list_card

  Full width with side margin, horizontal card displaying color badge, title, and context menu · White rounded rectangle with left turquoise indicator cap, soft drop shadow

• Floating Action Button · fab

  Floating in bottom right viewport above tab bar · Circular dark navy button with white plus icon and drop shadow

• Bottom Navigation Bar · bottom_navigation

  Anchored near bottom, pill style floating bar with 4 tabs · Translucent glass effect with highlighted active folder tab

Layout

Clean top-heavy layout with spacious empty canvas below single deck item, punctuated by FAB and floating navigation bar.

Notes

The Decks view currently contains one card titled 'Untitled'. Tab navigation allows switching between 'My decks' and 'Public decks'.