Knowunity - AI learning app

Colors

• #0D1117Background Dark · Drawer / menu background
• #131E3AWidget Card Surface · Promo banner card
• #FFFFFFPrimary Text · Titles · Menu items · Empty state heading
• #8B949EMuted Text · Subtitles · Empty state message
• #7B61FFMascot Purple · Sleeping mascot character
• #FFFFFFButton Fill White · New chat button background
• #000000Button Text Dark · New chat button label

Type

• Widget Card TitleSF Pro Text · 32px · 700 · #FFFFFF
• Menu Item LabelSF Pro Text · 32px · 500 · #FFFFFF
• Section HeaderSF Pro Display · 36px · 700 · #FFFFFF
• Empty State TitleSF Pro Display · 34px · 700 · #FFFFFF
• Action Button LabelSF Pro Text · 26px · 700 · #000000

Elements

• Top Navigation Icons · Header

  Top row with close icon ('X') on the left and edit/compose icon on the right · Monochrome white icons on dark circular hit zones

• Promo Card · Banner

  Full width rounded card near top with thumbnail icon on left, title/subtitle, and 'x' dismiss button on right · Deep navy blue rounded rectangle

• Navigation Menu List · List

  Vertical stack of five items with left-aligned icons and text labels ('Study Timer', 'Uploaded Images & Files', etc.) · Transparent rows with white line icons

• Empty State Illustration · Empty State

  Centered vertically in lower half: sleeping purple mascot, two-line text prompt, and 'New chat' button · Purple mascot illustration with closed eyes; high-contrast white rounded button

Layout

Modal sidebar/drawer view with top promo widget, list of main menu destinations, followed by a 'Past Chats' section populated with an empty state.

Notes

Sidebar/sheet pattern opened over the main interface.