Coursera: Grow your career

Colors

• #000000Canvas Black · Screen background
• #0E1524Card Surface Dark Slate · Plan subscription card fill
• #1B3B82Plan Card Border · Subscription card outline border
• #142244Plan Header Fill · Most popular badge background header strip
• #79A6F6Brand Accent Blue · Bottom sticky CTA fill · Plus badge background · Most popular text
• #272A30Accordian Item Border · FAQ accordion border
• #FFFFFFText Primary White · Section headings · Card title · FAQ question text · Checklist text · Price number
• #878C98Text Secondary Dim · Pricing duration label · Inactive bottom nav labels
• #001A4ECTA Dark Text · Subscribe button label · Plus badge label text
• #243242Nav Active Highlight · Active navigation pill background

Type

• Section HeaderSF Pro Display · 50px · 700 · #FFFFFF
• Plan TitleSF Pro Display · 48px · 700 · #FFFFFF
• Plan Price LargeSF Pro Display · 44px · 700 · #FFFFFF
• Plan Price MetadataSF Pro Text · 40px · 400 · #878C98
• Feature Item TextSF Pro Text · 38px · 400 · #FFFFFF
• FAQ Question TextSF Pro Text · 42px · 700 · #FFFFFF
• Bottom CTA ButtonSF Pro Text · 42px · 700 · #001A4E
• Tab Bar LabelSF Pro Text · 28px · 500 · #878C98

Elements

• Circular Back Button · icon_button

  Floating circular button near top left corner, roughly 120px diameter · Dark translucent circular container (#1C1E22) with white left-chevron icon

• Plan Tier Card · card

  Full width minus 64px horizontal margins, rounded container housing top banner, pricing header, and bullet list · Subtle deep navy fill with 2px stroke (#1B3B82), top bar filled with darker blue banner

• Plus Badge · badge

  Inline immediately after 'Coursera' in plan heading, padding ~6px horizontal · Solid accent blue rounded rectangle with navy bold capital text

• FAQ List Accordion Item · accordion

  Full width within screen margins, height ~180px, containing question text and right-facing chevron · Surface dark fill with subtle stroke border (#272A30) and centered vertical contents

• Sticky Purchase CTA · button

  Spans full content width above tab bar, height ~130px · Accent light-blue fill (#79A6F6) with bold text

• Bottom Navigation Bar · navigation_bar

  Bottom-pinned container with 5 tab items (Explore, Career, Learn, Profile, Search) · Dark background with icon and text labels, active item indicated by oval pill background

Layout

Scrollable checkout / subscription detail screen overlay with a circular back navigation control, prominent subscription tier card with list benefits, FAQ expandable cards, anchored above a sticky CTA and standard five-item bottom navigation bar.

Notes

The top courses text is partially obscured by the floating back button and browser overlay, confirming scrollable content underneath.