Coconote - AI Note Taker

Colors

• #121316Screen Background · Modal sheet background
• #1E2024List Row Fill · Settings menu section background · Banner card background
• #6C38FFGradient Purple Start · Upgrade banner gradient start
• #2551FFGradient Blue End · Upgrade banner gradient end
• #FFFFFFText White · Header · Row titles · Banner text
• #FFFFFFSection Header Text · Section title label
• #7E828EIcon Gray · Accessory chevron arrows

Type

• Modal TitleSF Pro Display · 74px · 800 · #FFFFFF
• Upgrade Banner CTASF Pro Text · 38px · 700 · #FFFFFF
• Section HeaderSF Pro Text · 44px · 700 · #FFFFFF
• Settings Row LabelSF Pro Text · 38px · 500 · #FFFFFF

Elements

• Close Sheet Button · icon_button

  Top-right aligned, approx 120x120 px circle · Dark circular button (#222429) with white 'X' icon

• Get Unlimited Notes Banner · button

  Full width banner, approx 1040x160 px · Smooth horizontal violet-to-blue gradient (#6C38FF to #2551FF) with centered white label

• Gift Card Row · list_item

  Full width isolated row card, approx 1040x160 px · Dark gray card (#1E2024) with 3D gift box icon and right chevron

• Grouped Settings Section · list

  Vertical stack of 4 grouped rows in one contiguous container, approx 1040x600 px · Dark gray card (#1E2024) with inner dividers, circular icon badges (star, plus, bell, window), and right chevrons

Layout

Modal bottom sheet layout with standard drag-handle/sheet top curve, top header bar with dismiss button, followed by promotional banners and grouped navigation settings items.

Notes

Rows within the 'For You' section have subtle horizontal separators separating items.