Pearson PTE

Overview

Pearson PTE is a global English proficiency testing platform that embodies 'Institutional Modernism'—a design philosophy that marries authoritative credibility with contemporary accessibility. The brand serves international students, professionals, and migrants seeking transparent, AI-driven language assessment. The visual identity centers on a deep navy-to-purple gradient canvas (rgb(13, 0, 77) to rgb(31, 0, 107)) that conveys trust and institutional gravitas, while vibrant accent colors—golden yellow (#ffce00), cyan (#56e2e1), and magenta (#df41cf)—punctuate key interactions and data points, creating visual energy without sacrificing professionalism.

The tone is direct, empowering, and human-centered. Pearson PTE speaks in clear, outcome-focused language: 'Results in 48 hours. No human examiners. Accepted worldwide.' The brand avoids corporate jargon, instead using concrete benefits and transparent timelines. Voice example: 'Check your test availability in seconds—then book with confidence.' The design system prioritizes clarity over decoration, using Plus Jakarta Sans (a modern, geometric sans-serif with 200–800 weight range) to ensure legibility across all screen sizes and contexts.

Colors

The color system is built on a dark, saturated foundation that establishes institutional authority while allowing accent colors to command attention. The primary surface is a deep indigo (#0d004d, rgb(13, 0, 77)), which serves as the page background and primary container for dark-mode content. This is paired with a light, desaturated text layer (on-surface: #ede4f6, rgb(237, 236, 246)) for maximum contrast and accessibility (WCAG AAA compliant at 18.5:1 ratio).

Primary accent is golden yellow (#ffce00, rgb(255, 206, 0))—the brand's signature call-to-action color used on all primary buttons, hero CTAs ('Check availability', 'Book a test'), and key interactive elements. This warm, high-saturation yellow creates visual pop against the cool indigo background and signals actionability. Seconda

Typography

The type system uses Plus Jakarta Sans exclusively, a geometric sans-serif with exceptional clarity and personality across all weights (200–800). Display and headline levels (50–60px, 700 weight) anchor hero sections and page titles with strong visual hierarchy and tight letter-spacing (-0.03em to -0.04em) to enhance impact. Body text (16–18px, 400 weight) maintains 24–28px line-height for comfortable reading on both mobile and desktop, with 0.01em letter-spacing to preserve the typeface's geometric warmth.

Label and button text use 600–700 weight at 12–14px with 0.01–0.02em letter-spacing, creating crisp, scannable UI labels. All text on dark backgrounds (surface: #0d004d) uses the light on-surface color (#ede4f6) to maintain 18.5:1 contrast. For small labels over busy or gradient backgr

Layout

The layout system uses a 12-column grid with a max-width of 1280px (container-max: 1280px), enabling responsive scaling from mobile (single column) to desktop (full 12-column grid). The gutter is fixed at 24px, providing consistent breathing room between columns and sections. Page sections are separated using lg spacing (40px) for major breaks (hero to content, content to footer) and md spacing (24px) for subsection transitions within content areas.

The hero section spans full viewport width with a dark gradient background (surface #0d004d transitioning to surface-container-high #16005c) and overlaid imagery, creating visual depth. Content containers use surface-container (#0d004d) as the base, with surface-container-high (#16005c) for elevated cards and modals. Padding within cards and i

Elevation & Depth

Depth is conveyed through a three-tier shadow system that respects the dark background without creating visual noise. Level 1 (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.06)) is used for subtle hover states on flat elements and minor interactive feedback. Level 2 (md elevation: 0 3px 8px rgba(0, 0, 0, 0.15)) is applied to cards, dropdowns, and standard modals, creating clear separation from the background. Level 3 (lg elevation: 0 8px 24px rgba(0, 0, 0, 0.2)) is reserved for prominent modals, floating action buttons, and top-level overlays.

Because the background is already dark (rgb(13, 0, 77))

Shapes

The shape system follows 'Soft Modernism'—a balance between geometric precision and human warmth. Buttons and primary CTAs use full border-radius (9999px), creating pill-shaped buttons that feel friendly and approachable while maintaining professional polish. This is applied to all primary and secondary buttons (height: 44px, padding: 12px 24px). Cards and containers use lg border-radius (1rem / 16px), providing subtle rounding that softens corners without appearing overly playful. Input fields use DEFAULT border-radius (0.5rem / 8px), a middle ground that signals form functionality without ex

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use golden yellow (#ffce00) background with dark text (on-primary: #3d3200), full border-radius (9999px), and 44px height with 12px vertical × 24px horizontal padding. On hover, the background shifts to primary-fixed-dim (#bf9a00) and gains md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)). Secondary buttons use transparent background with a 2px solid yellow border and yellow text, creating a hollow variant for lower-priority actions. Tertiary buttons use transparent background with on-surface text (#ede4f6) and lg border-radius (16px), reserved for navigation and utility actions. All buttons use Plus Jakarta Sans at 600 weight (label-md: 14px, 20px line-height) with 0.01em letter-spacing.

Containers

Do's and Don'ts

**Do**

• Do use the golden yellow (#ffce00) primary accent exclusively for primary CTAs and high-priority interactive elements—it is the brand's signature color and must remain visually distinctive.
• Do maintain the dark indigo surface (#0d004d) as the primary background; it establishes institutional authority and ensures all accent colors pop with maximum contrast.
• Do apply Plus Jakarta Sans at 600–700 weight for all UI labels and buttons; the geometric warmth of this typeface is core to the brand's modern-but-trustworthy personality.
• Do use the three-tier shadow system (sm/md/lg elevation) consistently; shadows should feel subtle and rely on blur radius (8–24px) rather than opacity, respecting the dark background.
• Do use full border-radius (9999px) on all primary buttons and CTAs; the pill shape signals approachability and is the most clickable button form factor.

**Don't**

• Don't use the secondary cyan (#56e2e1) or tertiary magenta (#df41cf) as primary CTA colors—these are supporting accents and will dilute the brand's visual focus on golden yellow.
• Don't apply shadows with opacity > 0.2 on dark backgrounds; the resulting muddy appearance will obscure content. Instead, increase blur radius (16–24px) to create perceived depth.
• Don't mix border-radius values on related components; use full (9999px) for buttons, lg (16px) for cards, and DEFAULT (8px) for inputs consistently across all instances.
• Don't use system fonts or fallback sans-serifs in place of Plus Jakarta Sans; the typeface's geometric personality is essential to the brand's modern identity.
• Don't reduce letter-spacing below -0.04em on display/headline text or below 0em on body text; excessive tightening will harm readability and the typeface's intended warmth.