RevisionDojo

Overview

RevisionDojo is the #1 IB learning platform, serving 650,000+ students across 4,000+ schools worldwide with expert-written exam prep resources. The design aesthetic is "Accessible Clarity"—a bright, optimistic interface that transforms academic rigor into an inviting, approachable experience. The UI employs a clean white canvas (rgb(255, 255, 255)) with strategic use of a vibrant teal primary accent (rgb(2, 132, 197)) on all call-to-action elements, paired with warm secondary accents (coral red #fb2c36 and golden orange #f99c00) for status indicators and highlights. The emotional response is one of confidence and clarity: students feel supported, not overwhelmed, by the density of learning resources.

The brand voice is direct, encouraging, and peer-to-peer. Vocabulary favors concrete outcomes ("43 ty dojo ur the best :)", "Expert-Written Exam Prep") over marketing jargon. The tone is conversational yet authoritative—it speaks to students as capable learners, not passive consumers. Example sentence in brand voice: "You've completed 87% of Paper 1 practice—here's where to focus next."

Colors

The color system is built on a foundation of neutral grays (--gray1 through --gray12, ranging from hsl(0, 0%, 99%) to hsl(0, 0%, 9%)) that provide a calm, distraction-free reading environment. Primary (rgb(2, 132, 197) / #0284c5) is the signature teal used exclusively on primary CTAs ("Continue" button), active states, and key interactive elements—it signals trust and forward momentum. Secondary (rgb(251, 44, 54) / #fb2c36) is a vibrant coral red reserved for error states, alerts, and high-priority notifications; it appears 22 times in the codebase, indicating frequent use in validation feedback. Tertiary (rgb(249, 156, 0) / #f99c00) is a warm golden orange used for warnings and secondary highlights, creating visual hierarchy without competing with primary. Surface stack: surface (#ffffff)

Typography

The type system uses Inter exclusively (fontFamily: Inter, "Inter Fallback"), a humanist sans-serif that balances precision with approachability—critical for an educational platform where clarity is non-negotiable. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines; headline-lg (40px, 600 weight) anchors major section titles; headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 500 weight, 28px line-height) is used for primary CTA text and prominent descriptions, ensuring readability at a glance. Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, body copy, and secondary descriptions. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to all button text and small UI labels; label-sm (12

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px (container-max-width: 1280px), allowing content to breathe on desktop while remaining responsive on mobile. Gutter spacing is 24px (--gutter: 24px), applied consistently between columns and sections. Page rhythm is established through lg spacing (40px) for major section breaks, md spacing (24px) for component padding and card gaps, and sm spacing (12px) for internal element spacing. The hero section occupies the full viewport width with a light blue gradient background, establishing immediate visual hierarchy. Form containers (email input + Continue button) use md spacing (24px) for vertical rhythm, with the input field set to 100% width at 48px height. Secondary CTAs ("Don't have an account? Sign up") are positioned below t

Elevation & Depth

Elevation is achieved through a restrained shadow system that emphasizes clarity over depth. Level 1 (Base): no shadow; flat surfaces on the white background. Level 2 (Standard Cards & Inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to input fields and secondary cards to lift them 4px above the surface. Level 3 (Elevated Cards & Modals): box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), used on primary cards and modal overlays to create distinct separation. Focus states add a 3px outline shadow: 0 0 0 3px rgba(2, 132, 197, 0.2), providing accessible focus indication without disrupting t

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used strategically to soften the precision of an academic interface without sacrificing clarity. Buttons use rounded.lg (1rem / 16px border-radius), creating a friendly, inviting appearance that encourages interaction. Input fields use the same rounded.lg (16px) to maintain visual consistency with buttons, signaling that they are interactive elements. Cards use rounded.xl (1.5rem / 24px), the largest radius in the system, to create a sense of containment and visual separation from the background. Secondary UI elements (badges, list i

Components

Action Elements Primary buttons (button-primary) use backgroundColor: rgb(2, 132, 197), textColor: rgb(255, 255, 255), padding: 12px 20px, height: 48px, rounded: 1rem, and fontSize: 18px with fontWeight: 500. On hover (button-primary-hover), the background darkens to #0066a1 with a 200ms ease transition. On focus, a 3px outline shadow (0 0 0 3px rgba(2, 132, 197, 0.2)) provides accessible indication. Secondary buttons (button-secondary) use a transparent background with a 1px border (border-color: {colors.surface-container-high}), padding: 16px 12px, and height: 48px. On hover, the background shifts to {colors.surface-container-high} with the same 200ms transition. All buttons use Inter 14px label-md typography with 0.01em letter-spacing.

Containers & Surfaces Cards (card) use bac

Do's and Don'ts

**Do**

• Do use primary teal (rgb(2, 132, 197)) exclusively on CTAs and active states—it's the signature accent that builds brand recognition.
• Do maintain 16:1 contrast ratio between on-surface (#0a0a0a) and surface (#ffffff) for WCAG AAA compliance on all body text.
• Do apply 24px gutter spacing between grid columns and 40px lg spacing between major sections to create breathing room.
• Do use Inter 18px body-lg with 500 weight for primary button text and 16px body-md with 400 weight for secondary descriptions.
• Do apply 200ms ease transitions on all interactive elements (hover, focus) to provide tactile feedback without feeling sluggish.
• Do use rounded.lg (16px) for buttons and inputs, rounded.xl (24px) for cards, and rounded.full (9999px) for avatars to establish visual hierarchy.

**Don't**

• Don't use secondary red (#fb2c36) or tertiary orange (#f99c00) on primary CTAs—reserve them for error states and warnings only.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use harsh black shadows; maintain the light, approachable aesthetic.
• Don't mix border-radius values inconsistently; stick to the rounded scale (sm, DEFAULT, md, lg, xl, full) to maintain visual coherence.
• Don't use font weights lighter than 400 for body text or heavier than 700 for headlines; Inter's weight range is 400–700 for optimal rendering.
• Don't exceed 1280px container max-width on desktop; wider layouts dilute the focused, academic experience.
• Don't apply more than one shadow level to a single element; use either md (0 4px 12px) or lg (0 8px 32px), never both.