Storytel - Audiobooks Library

Colors

• #FAFAFABackground Off-White · Screen canvas background · Main view background
• #F3532CPrimary Orange · Brand logo mark · Active tab icon and text color
• #111111Primary Dark / Charcoal · Primary titles · Primary CTA button background · Top bar header text · Inactive nav icons
• #333333Body Text Grey · Descriptive body text
• #FFFFFFPure White · Button text color · Circular back button background · Bottom navigation bar background
• #FEECE7Active Tab Tint · Active tab pill background highlight

Type

• Screen HeaderCircular Std · 38px · 700 · #111111
• Section Title / H1Circular Std · 42px · 700 · #111111
• Body TextCircular Std · 36px · 400 · #333333
• CTA Button LabelCircular Std · 36px · 700 · #FFFFFF
• Bottom Nav Tab LabelCircular Std · 24px · 500 · #111111

Elements

• Back Navigation Button · icon_button

  Positioned top left below status bar; circle approximately 96x96 px. · White circular container with subtle diffuse drop shadow, containing a black chevron icon pointing left.

• Header Navigation Bar · app_bar

  Top section containing back button at left and 'Subscription settings' centered horizontally. · Transparent background blending with screen canvas.

• Storytel Graphic Mark · image

  Centered horizontally in the upper middle area; approximately 60x68 px. · Orange organic droplet/speech-bubble brand icon shape with smooth edges.

• Get Started CTA Button · button

  Spans full width with ~48 px horizontal margins; positioned directly above the bottom nav bar; height approximately 112 px. · Solid dark black/charcoal fill, white bold centered text, fully rounded pill shape.

• Bottom Navigation Bar · navigation_bar

  Fixed along the bottom edge, spanning full screen width with 4 tabs: Home, Explore, Bookshelf, Search. · White container with rounded top pill highlights; Home tab active item sits in an oblong soft orange background pill with orange icon and text; inactive tabs use solid dark icons.

Layout

Single-column mobile subscription introductory screen with a persistent top navigation bar, vertically centered promo messaging (brand mark, headline, body description), a bottom-anchored primary action button, and a fixed bottom tab bar.

Notes

Circular Std or a similar geometric sans-serif (such as GT Walsheim, Inter, or SF Pro Display) is visually apparent. Confidence is low due to common geometric letterforms.