Prep Education

Overview

Prep Education is an AI-powered language learning and exam preparation platform designed for learners of all levels seeking structured, adaptive education. The design system embodies 'Tech-Forward Clarity'—a movement that combines vibrant, energetic color (deep blues and golden accents) with clean, accessible typography and purposeful whitespace to create an interface that feels both intelligent and approachable. The visual language prioritizes engagement through playful iconography (the yellow robot mascot), confident primary actions, and a light, airy canvas that reduces cognitive load during study sessions. Users encounter a sense of optimism and capability: the platform communicates 'you can master this' through every interaction.

The brand voice is encouraging, precise, and conversational—never patronizing, always respectful of the learner's time and intelligence. Vocabulary leans toward action-oriented language ('Explore Now', 'Start Learning', 'Practice Smart') and avoids jargon. The tone balances professionalism with warmth; example sentence: 'Master English faster with AI-powered feedback tailored to your speaking patterns.'

Colors

The color system is anchored by a vibrant primary blue (#0071f9) that appears on all call-to-action buttons, interactive elements, and focus states—this is the signature accent that signals interactivity and brand identity. Secondary gold (#ffb800) provides energetic highlights for badges, decorative elements, and accent illustrations, creating visual rhythm without overwhelming the interface. The tertiary blue (#acc5ea) and its darker variant (#092f9e) support secondary information hierarchies and form backgrounds. Surfaces use a clean white (#ffffff) as the dominant background with a carefully calibrated gray scale for containers and dividers: #f7fafc for the lightest container, #dddddd for medium-emphasis dividers, and #23242d for primary text. The outline color (#9ca3af) is used for su

Typography

The type system pairs SVN-Poppins (a geometric, modern sans-serif) for display and headline scales with Inter (a highly legible humanist sans-serif) for body and label text. This pairing creates visual hierarchy while maintaining readability at all sizes. Display text (100px, 600 weight, -0.04em letter-spacing) commands attention on hero sections with tight tracking that conveys confidence. Headlines (48px–32px, 600 weight) use -0.02em to -0.01em letter-spacing for warmth without sacrificing clarity. Body text (18px–16px, 400 weight) sits at 24–28px line-height to ensure comfortable reading during extended study sessions. Labels (14px–12px, 500–600 weight) use 0.01–0.02em positive letter-spacing to enhance scannability in navigation and form contexts. Apply text-shadow: 0 2px 4px rgba(0, 0

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px, maintaining a 24px gutter on desktop and collapsing to 12px on tablet. Page rhythm is established through consistent 24px (md) spacing between major sections and 40px (lg) spacing for section breaks. The hero section occupies full viewport height with centered content, using 64px (xl) spacing for vertical breathing room. Cards and containers use 24px internal padding (md) with 12px (sm) padding for compact elements like chips and badges. The whitespace philosophy prioritizes clarity over density: never stack more than 3 interactive elements vertically without a visual break. Container backgrounds use the surface-container scale (#e5e7eb for medium emphasis, #f0f4f9 for low emphasis) to create subtle depth wit

Elevation & Depth

Depth is conveyed through a three-tier shadow system combined with subtle background color shifts. Level 1 (Base/Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) with background #ffffff or #f7fafc—used for standard cards, input fields, and resting state buttons. Level 2 (Hover/Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with background #f0f4f9—applied on button hover, card hover, and modal backgrounds. Level 3 (Modal/Overlay): box-shadow: 0 3px 13px rgba(0, 0, 0, 0.08) with background #ffffff—reserved for modals, dropdowns, and the highest interactive surfaces. Focus states add a 3px

Shapes

The shape philosophy is 'Approachable Geometry'—combining sharp, modern corners with generous rounding on interactive elements to balance professionalism with friendliness. Buttons and chips use full rounding (999px border-radius) to signal interactivity and create a soft, inviting aesthetic that encourages clicks. Cards and containers use 16px (lg) rounding for a modern, polished appearance without excessive softness. Input fields and smaller components use 8px (DEFAULT) rounding for subtle definition. Modals and elevated surfaces use 24px (xl) rounding to emphasize their prominence. The rati

Components

Action Elements Buttons are the primary interaction mechanism and use consistent sizing: 48px height with 12px vertical and 24px horizontal padding for primary/secondary buttons, and 12px vertical/16px horizontal for tertiary buttons. Primary buttons (background: #0071f9, text: #ffffff) use full rounding and {elevation.md} shadow at rest, transitioning to #0060fd on hover with {elevation.lg} shadow and a 200ms ease-out animation. Secondary buttons (background: #ffffff, text: #0071f9, border: 1px solid #0071f9) maintain the same sizing and rounding, inverting colors on hover. Tertiary buttons (background: transparent, text: #0071f9) have no border at rest but gain a 1px solid #0071f9 border on hover. All buttons use Inter 14px 600 weight with 0.01em letter-spacing. Focus state: 3px inse

Do's and Don'ts

**Do**

• Do use the primary blue (#0071f9) exclusively for call-to-action buttons and interactive focus states—it is the brand's signature accent and must remain visually distinct.
• Do maintain 24px gutter spacing between major sections and use the spacing scale (sm/md/lg/xl) consistently across all layouts to create predictable rhythm.
• Do apply full rounding (999px) to all primary buttons and chips to signal interactivity and create a modern, approachable aesthetic.
• Do use Inter for body and label text (16px–14px) and SVN-Poppins for display/headline text (100px–32px) to maintain the established type hierarchy.
• Do pair the primary blue with white backgrounds and the secondary gold (#ffb800) sparingly for accent illustrations and badges to avoid visual chaos.
• Do use the three-tier shadow system (0 1px 2px / 0 3px 8px / 0 3px 13px) to create depth without relying on color alone.
• Do ensure all interactive elements have a visible focus state using the 3px inset ring at rgba(0, 113, 249, 0.1) for keyboard accessibility.

**Don't**

• Don't use the primary blue (#0071f9) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus states to maintain visual hierarchy.
• Don't apply sharp corners (0px border-radius) to user-facing buttons, cards, or inputs; the brand uses minimum 8px rounding for all interactive surfaces.
• Don't stack multiple shadows or use shadows deeper than {elevation.lg} (0 3px 13px rgba(0, 0, 0, 0.08))—excessive shadow creates visual clutter and reduces clarity.
• Don't mix typefaces within a single text block; use either SVN-Poppins (display/headline) or Inter (body/label) consistently per the established hierarchy.
• Don't use the secondary gold (#ffb800) as a primary background color; it is an accent only and should appear in badges, illustrations, and decorative elements at <15% of the interface.
• Don't reduce button height below 48px or padding below 12px vertical/24px horizontal—the brand prioritizes touch-friendly, accessible interaction targets.
• Don't apply transparency or blur effects to text or interactive elements; the design system uses solid colors and sharp edges for clarity and legibility.