Coursera: Grow your career

Colors

• #000000background_black · canvas fill
• #FFFFFFtext_primary · screen title · row titles · section descriptions
• #E0E2E6text_section_header · section header uppercase titles
• #7CA7FFtext_subtitle_blue · selected option subtext and tick icon · active state title
• #7CA7FFaccent_blue · login/signup button fill
• #34C759toggle_active_green · automatic translations switch track
• #1F2327icon_fill_circle · close button circular background

Type

• screen_headerSource Sans 3 · 44px · 700 · #FFFFFF
• section_headerSource Sans 3 · 30px · 700 · #E0E2E6
• body_promptSource Sans 3 · 36px · 600 · #FFFFFF
• button_labelSource Sans 3 · 38px · 700 · #0A1B3A
• row_labelSource Sans 3 · 36px · 500 · #FFFFFF
• row_sublabelSource Sans 3 · 30px · 400 · #7CA7FF

Elements

• close_modal_button · icon_button

  top left navigation area, 90x90 px circle · circular dark gray fill with centered white cross icon

• login_signup_button · button

  full width minus horizontal margins, height approx 112px · light blue solid fill with leftward arrow icon and dark bold typography

• appearance_radio_group · list

  stacked rows with leading icons: Dark Mode, Light Mode, Use Device Settings · borderless rows with checked checkmark icon for the active item

• automatic_translations_switch · switch

  trailing edge of Automatic Translations row · iOS style rounded pill toggle with green active background and white circle knob

Layout

Modal scrollable settings view with sticky top header containing a close button and centered title. Content is organized into semantic uppercase sections (Account, Appearance, Language, Support) separated by generous vertical spacing.

Notes

Shows initial viewport of Settings. Device appearance setting is selected, indicated by blue text and a trailing checkmark.