Component gallery

Open edX safety pilot · tokens generated from Figma · viewport 390 × 844

Learner home

Good morning, Sam

Safety

🔥 6 day streak ⭐ 1,240 pts
  • 🔒 Passenger conflict de-escalation Unlocks after 3 lessons

Lesson view

LESSON 2 OF 5

Night visibility basics

▶

Most night-time incidents happen in the first ten minutes after sunset, while your eyes are still adjusting.

Why sunset is the risk window
Your pupils need roughly twenty minutes to fully dilate. Oncoming headlights reset that adjustment each time.
Cleaning your windscreen
Interior film scatters light far more than exterior dirt. Wipe the inside of the glass weekly.

How long do your eyes need to adjust?

Accountability dashboard

Your progress

68%

11 of 16 safety lessons complete

Badges

🛡️First week
🌙Night pro
🔥7 streak
🏆All clear

This week

You 1,240 pts
Top 10% of drivers in Lahore 1,500 pts

Typography

Base sets every text style in one of three Uber Move families: Uber Move for display and headings, Uber Move Text for labels and body copy, Uber Move Mono for figures. All ten faces come from Uber's official 1.003 packages. Each status shows whether this browser actually loaded that face; a failure means text in that face is rendering in the system fallback.

Uber Move

Aa

Display and Heading styles, always Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@%?! →

  • Light 300No Base text styleChecking
  • Regular 400No Base text styleChecking
  • Medium 500No Base text styleChecking
  • Bold 700Display (4), Heading (6)Checking

Uber Move Text

Aa

Label and Paragraph styles

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@%?! →

  • Light 300No Base text styleChecking
  • Regular 400Paragraph (4)Checking
  • Medium 500Label (4)Checking
  • Bold 700No Base text styleChecking

Uber Move Mono

Aa

Every Mono style: figures, codes, metrics

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@%?! →

  • Regular 400Mono Paragraph (4)Checking
  • Medium 500Mono Display (4), Mono Heading (6), Mono Label (4)Checking

Type scale — 36 Base text styles

Display 4

Display Large
Display Medium
Display Small
Display X Small

Heading 6

Heading XX Large
Heading X Large
Heading Large
Heading Medium
Heading Small
Heading X Small

Label 4

Label Large
Label Medium
Label Small
Label X Small

Paragraph 4

Paragraph Large
Paragraph Medium
Paragraph Small
Paragraph X Small

Mono Display 4

Mono Display Large
Mono Display Medium
Mono Display Small
Mono Display X Small

Mono Heading 6

Mono Heading XX Large
Mono Heading X Large
Mono Heading Large
Mono Heading Medium
Mono Heading Small
Mono Heading X Small

Mono Label 4

Mono Label Large
Mono Label Medium
Mono Label Small
Mono Label X Small

Mono Paragraph 4

Mono Paragraph Large
Mono Paragraph Medium
Mono Paragraph Small
Mono Paragraph X Small

Input family

🔍
Select

Tabs — standard and wide

Progress, steps, vertical steps

✓Distracted drivingCompleted
2Night visibilityIn progress
3Safe pickupLocked

Banners

ℹNew lessonsTwo safety lessons were added.
✓Progress saved.
!Your streak ends tonight.
✕Could not load. Retry.

List

This week

Empty state

📭No badges yetFinish your first lesson to earn one.

Buttons

Semantic colour

content-primary
program-safety
background-positive
background-negative
background-warning
background-accent
background-tertiary
content-tertiary

Draggable list — drag or arrow keys

1Check mirrors
2Signal early
3Slow before the turn
4Scan for cyclists

Drag a handle, or focus one and press the arrow keys.

Button dock

Indeterminate, pill, divider

4 of 10Complete
This week

Select — Base menu, no OS wheel

Base menu, not the OS wheel.

Layout grid & dividers

The grid below is the live token matrix: 4 columns at phone width, 8 from 600px, 12 from 1136px. Resize the window and the column count changes.

Compact density: same columns, tighter gutter and margin.

Dividers: cell 1px, section 2px, module 8px — all on Border / Opaque.