ETS TOEFL

Overview

ETS TOEFL is a globally recognized English language proficiency testing platform serving 13,000+ institutions across 160+ countries. The design system embodies 'Institutional Clarity'—a philosophy that combines authoritative, trustworthy visual language with warm, human-centered interaction patterns. The brand personality is confident yet approachable: precise in its messaging, never condescending, and designed to reduce test-taker anxiety through clear visual hierarchy and predictable interaction patterns. The UI evokes a sense of global accessibility and academic rigor, using a sophisticated navy-to-periwinkle color palette grounded in warm neutrals. Voice example: 'Your English proficiency opens doors—let TOEFL prove it to the world.'

Colors

The color system is anchored by a deep institutional navy primary (#343579) used exclusively for primary CTAs, focus states, and brand-critical interactive elements. This color conveys authority and trustworthiness while remaining distinct from the near-black text (#161513). The secondary accent (#3072be) provides a brighter, more accessible blue for supporting UI elements and secondary actions. The surface stack progresses from warm off-white (#faf8f5) as the base background through increasingly saturated warm grays (#f5f4f2 → #e4e1dd → #dcd9d5) to create subtle depth without harsh contrast. Tertiary (#655f5c) is a warm taupe used for cards, badges, and decorative elements, humanizing the otherwise cool-toned palette. Error states use a warm coral (#dc5c5e) for visibility without aggressi

Typography

The type system uses three distinct font families to create visual hierarchy and personality: Greet Narrow (85.68px, 700 weight) for display-level headlines that command attention without aggression; Greet Standard (14.28px–20px, 600 weight) for labels, buttons, and UI controls that demand precision and scannability; and Beausite Classic (16.32px–18px, 400 weight) for body copy and conversational content. This pairing communicates 'global institution meets human warmth.' Display headlines use -0.04em letter-spacing to create visual density and authority, while body text uses 0em spacing for maximum legibility at 16.32px base size. Apply text-shadow 0 1px 2px rgba(0, 0, 0, 0.06) on small labels (12px) placed over busy backgrounds to ensure 4.5:1 contrast minimum. All interactive text (butto

Layout

The page uses a 12-column fluid grid with a 1280px container max-width, maintaining responsive behavior on mobile (single-column stack below 768px) and tablet (6-column grid 768–1024px). The gutter spacing is consistently 24px, creating breathing room around content blocks. Section separation uses lg spacing (40px) for major content shifts (hero to features, features to testimonials) and md spacing (24px) for subsection breaks within a feature block. The hero section (#f4f4ff background) extends full-width with xl padding (64px top/bottom) to create visual prominence. Card-based layouts use md padding (24px) internally with md spacing (24px) between cards in a grid. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus on content. Whitespace i

Elevation & Depth

Visual hierarchy is conveyed through a three-tier shadow system and background color progression rather than aggressive depth. Level 1 (Base): surface backgrounds (#f5f4f2) with no shadow, used for body content and standard cards. Level 2 (Elevated): surface-container-high (#e4e1dd) with md shadow (0 4px 12px rgba(0, 0, 0, 0.08)), used for modals, popovers, and floating UI elements. Level 3 (Maximum Depth): inverse-surface (#2a2825) with lg shadow (0px -4px 32px rgba(0, 0, 0, 0.1)), reserved for critical overlays and chat widgets. Buttons use no shadow in default state but gain a 200ms transit

Shapes

The shape philosophy is 'Soft Institutional'—combining sharp, professional edges with subtle softness to balance authority and approachability. Buttons and inputs use 4px border-radius (DEFAULT), creating a clean, modern look without the playfulness of 8px+ radii. Cards and containers use 8px (lg) for slightly more breathing room, signaling they are content containers rather than interactive controls. Full-width elements (hero sections, headers) use 0px radius to anchor them to the viewport edge. Badges and pills use 50% (full) radius to create visual distinction from rectangular UI. The ratio

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (#343579 background, white text, 48px height, 16px 24px padding) use Greet Standard 600 weight at 14.28px. On hover, the background shifts to #2a2d5d with a 200ms ease-in-out transition; never use opacity changes for hover states as they reduce perceived clickability. Secondary buttons are transparent with a 2px solid border in primary color; on hover, they fill with primary-container (#e8ebff) background. Ghost buttons (transparent, 4px border-radius) are used for tertiary actions; they use rgba(22, 21, 19, 0.04) background on hover. All buttons must have a minimum 48px height to meet WCAG touch target guidelines.

Containers & Surfaces Cards use 8px border-radius with md shadow (0 4px 12px rgba(0, 0, 0,

Do's and Don'ts

**Do**

• Do use primary navy (#343579) exclusively for primary CTAs and focus states—never use it for decorative elements or backgrounds.
• Do maintain 24px gutter spacing on all sides of content containers; this is the foundational rhythm of the system.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do use Greet Standard 600 weight for all interactive text (buttons, links, form labels) to create visual distinction from body copy.
• Do stack components using md spacing (24px) for subsections and lg spacing (40px) for major section breaks.
• Do ensure all interactive elements have a minimum 48px height to meet WCAG touch target guidelines.

**Don't**

• Don't use the secondary blue (#3072be) for primary CTAs; it's reserved for supporting UI and secondary actions only.
• Don't apply opacity-based hover states to buttons; always use background color shifts or shadow changes to maintain perceived clickability.
• Don't mix border-radius values within a component family (e.g., all buttons must be 4px, not a mix of 4px and 8px).
• Don't collapse spacing below sm (12px) between interactive elements; this increases accidental click risk and reduces accessibility.
• Don't use Beausite Classic for interactive text; it's reserved for body copy and conversational content only.
• Don't apply more than three elevation levels (shadow tiers) in a single view; the system is deliberately flat to reduce cognitive load.