Quizlet: More than Flashcards

Colors

• #0e0c29Modal Dark Navy · Sheet modal background
• #1b183cPlan Card Dark Slate · Unselected card background · Selected card background base
• #8c87e8Active Card Stroke Highlight · Selected plan card bottom border / accent outline
• #ffcd1fBadge Accent Yellow · Best value badge background · Primary CTA button fill
• #4fe5a4Success Mint Green · Selected checkmark badge fill
• #a5a3c6Subdued Text Lavender · Secondary labels · Timeline description text
• #ffffffPrimary Text White · Modal title · Tier headers · Prices
• #e7a91aIcon Circle Gold · Lock icon circle stroke

Type

• modal_titleHurme Geometric Sans · 56px · 700 · #ffffff
• badge_labelInter · 28px · 700 · #1a1a2e
• card_headingInter · 44px · 700 · #ffffff
• price_textHurme Geometric Sans · 66px · 800 · #ffffff
• timeline_headerInter · 44px · 700 · #ffffff
• timeline_bodyInter · 36px · 400 · #a5a3c6
• button_labelInter · 44px · 600 · #1a1a2e

Elements

• Modal Drag Handle · indicator

  Centered at top edge of bottom sheet, width 140px, height 12px. · Subtle gray/lavender horizontal capsule.

• Close Button · icon_button

  Top-left corner, 130px circle positioned 48px from left edge. · Deep purple circular container (#1e1b43) containing a white 'X' icon.

• Selected Annual Plan Card · card

  Centered horizontal container, margin 72px left/right, height 330px with inner padding 48px. · Solid dark navy-slate container with vibrant 6px solid light-purple bottom border strip, badge on top left, and green circular checkmark on right.

• Unselected Monthly Plan Card · card

  Stacked directly below annual plan with 36px vertical margin, height 330px. · Solid dark navy-slate (#1B183C) without border accent.

• Subscription Timeline · stepper

  Vertical list below plan cards with vertical dotted/solid connector lines joining icon circular anchors. · Circular icons (yellow locked badge, white bell, grey dollar) connected by 4px vertical lines.

• Try Free CTA Button · button

  Fixed near bottom, width calc(100% - 144px), height 150px. · Solid bright yellow background (#FFCD1F), dark text, fully rounded capsule.

Layout

Bottom-sheet modal overlay occupying roughly 92% of the screen height, containing scrollable plan selector options, trial explanation timeline, and bottom-fixed action container.

Notes

Third timeline item is partially masked/scrolled at the bottom behind the sticky CTA gradient area.