Storytel - Audiobooks Library

Colors

• #FCFBFAsurface-light · screen background
• #E5E5E5avatar-bg · placeholder avatar circle fill
• #111111text-primary · title text · menu item titles
• #111111border-stroke · outline buttons
• #CCCCCCtoggle-track-off · switch track background

Type

• nav-headerMontserrat · 36px · 700 · #111111
• user-greetingMontserrat · 52px · 800 · #111111
• pill-button-textMontserrat · 28px · 700 · #111111
• menu-row-labelMontserrat · 36px · 600 · #111111

Elements

• avatar_circle · avatar

  Centered horizontally in upper body, diameter approx 300px · Grey solid circle with dark outline profile icon inside

• add_name_button · button

  Centered below 'Hi!' text, width 220px, height 70px · Transparent pill with thin 2px black border

• referral_card · card

  Near bottom above tab bar, 44px margins, height approx 140px · Light outline box containing promo text and right-aligned 'Share Storytel' pill button

• kids_mode_toggle · switch

  Right-aligned in Kids mode menu row · Inactive state with light rounded pill track and white circle thumb

Layout

Profile screen with navigation bar (back, settings gear), centered user profile information, vertically stacked action rows with chevrons/toggles, a referral promotion card, and bottom floating dock navigation.

Notes

Consistent custom rounded typeface.