Quizlet: More than Flashcards

Colors

• #0a0824Screen Background Dark Violet · Main screen background
• #19163aSurface Dark Slate · Skeleton feed card background · Search button circle background
• #ffcd1fAccent Yellow · Free trial pill button background
• #792cd8Profile Avatar Purple · User avatar circle background
• #f5f5ffAssistant Prompt White · Ask Quizlet floating pill background
• #272450Bottom Navigation Bar · Navigation bar pill background container
• #9e9cc2Icon Inactive Lilac · Navigation icons · Search icon

Type

• header_button_labelInter · 38px · 600 · #1a1a2e
• avatar_letterHurme Geometric Sans · 60px · 700 · #ffffff
• ai_pill_textInter · 42px · 700 · #1a1a2e

Elements

• Search Icon Button · icon_button

  Top-left navigation, 134px circular container 72px from screen edge. · Dark purple circular container with centered magnifying glass icon in white/pale lavender.

• Free Trial Action Button · button

  Top navigation right side, height 120px, horizontal padding 52px. · Pill-shaped solid yellow fill with dark navy typography.

• User Profile Avatar · avatar

  Top navigation rightmost element, 140px diameter circle, 52px margin from right edge. · Solid royal purple circle with centered white initial 'D'.

• Placeholder Feed Cards · card

  Stacked cards with ~72px horizontal padding, ~680px height each, separated by 48px gap. · Flat empty containers filled with muted dark slate purple (#19163A) with large rounded corners.

• Ask Quizlet Pill · floating_action_button

  Centered floating pill above bottom nav, height 136px, width 816px. · Bright off-white surface, bold dark text accompanied by dual four-point sparkle icon glyphs.

• Bottom Navigation Bar · navigation_bar

  Floating pill bar at screen bottom center, height 160px, width 816px, containing 3 evenly spaced icons. · Deep purple/indigo container (#272450) with active home icon, centered plus action, and folder library icon.

Layout

Main dashboard/feed view showing empty state placeholder cards under top navigation items, with docked dual-pill control group (AI prompt and navigation bar) anchored over the lower viewport.

Notes

Large blank rounded cards appear to be loading skeleton states or empty study set placeholders.