celprep · Design System

← Back to site

The visual language behind the marketing site. Foundations (tokens, type, buttons) live in coursera.css; components live in mentor.css. Both load through MentorLayout.

Colour tokens

CSS custom properties from coursera.css :root.

--blue

Primary

#0056D2

--blue-700

Primary hover

#00419E

--blue-100

Primary tint

#DCE8FB

--blue-50

Primary wash

#EBF1FC

--ink

Headings

#1F1F1F

--text

Body

#2D2D2D

--gray

Muted

#5B6871

--gray-soft

Subtle

#8C969D

--line

Borders

#E0E0E0

--bg-alt

Alt surface

#F7F9FB

--green

Success / score

#1F8A4C

--amber

Highlight

#B26A00

Typography

Source Sans 3 · weights 400 / 600 / 700 / 800 / 900.

Reach a 9+ CELPIP score

Section heading · 38 / 700

Card title · 19 / 700

Lead paragraph · 17 / 400 — used for section subtitles and supporting copy in a muted grey.

Body · 16 / 400 — the default running text size for the system.

Small / fine print · 13 / 400

Eyebrow · 12 / 800 uppercase

Buttons

.btn with --primary / --ghost, plus the CTA sizes used on the page.

Primary Ghost Start now

End-CTA pill

I'm ready for CLB 9

Badges & pills

MOST POPULAR 29% OFF CLB 9 Speaking · Task 4 Verified 7-day money-back

Components

The reusable blocks from mentor.css. Live styles — what renders here is what ships.

AI score card

Speaking · Task 4 View feedback

9/12

Coherence9

Vocabulary8

Fulfillment9

Speaking-task chip

Speaking · Task 4

How-it-works card

Get instant AI scoring

Our AI scores you in seconds on the same criteria CELPIP uses.

Solution card

Speaking

All eight task types, recorded and AI-scored against the real criteria.

Practice Speaking

Pricing plan