EDUEX

Overview

EDUEX is an educational excellence platform that bridges students with academic pathways, mentorship, and transformative opportunities. The design system embodies 'Confident Clarity'—a modern aesthetic that combines institutional authority with approachable warmth. The brand serves ambitious learners and educators seeking structured, dignified pathways to academic success. The visual language uses a signature burgundy accent (#ab0c2f) paired with clean, geometric typography (Outfit) to convey professionalism, trustworthiness, and forward momentum. The UI evokes a sense of curated opportunity: like opening a library of possibilities, each interaction feels intentional and rewarding.

The brand voice is direct, encouraging, and solution-focused. EDUEX speaks in active imperatives and concrete outcomes—never vague, never breathless. Vocabulary emphasizes pathways, connections, and unlocking potential. Example sentence: 'Book an appointment to explore your pathway to academic excellence—our advisors are ready to connect you with the right opportunity.'

Colors

The color system is anchored by a deep burgundy primary (#ab0c2f), which appears on all call-to-action buttons, active states, and brand-critical interactive elements. This color conveys confidence and institutional weight without coldness. The primary container (#f0d5dc) provides a soft, accessible background for secondary messaging and hover states. Secondary blue (#1a73e8) is reserved for informational links and secondary actions, creating visual hierarchy without competing for attention. Tertiary coral (#ff7162) is used sparingly for highlights, status indicators, and accent elements that require warmth. The surface stack is anchored in clean white (#ffffff) with carefully calibrated grays for containers and dividers: surface-container-high (#e9ecef) for elevated cards, surface-contain

Typography

The typography system uses Outfit, a geometric sans-serif from Google Fonts, across all scales. This single-family approach creates visual cohesion while the weight spectrum (300–800) provides sufficient contrast. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section titles, commanding attention through size and negative letter-spacing that tightens the letterforms. Headline-lg (40px, 600 weight) anchors page sections; headline-md (28px, 600 weight) breaks content into digestible chunks. Body text uses 16px at 400 weight with 24px line-height (1.5), ensuring comfortable reading at arm's length. Labels (14px, 500 weight) are used for button text, form labels, and metadata; smaller labels (12px) appear in badges and captions. All typography appli

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing flexibility for desktop and tablet while maintaining readability. The gutter is consistently 24px, applied as margin between grid columns and as padding around page edges. White-space is generous: section separation uses lg spacing (40px) vertically, creating visual breathing room that reinforces the 'curated opportunity' aesthetic. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for component internal padding, md (24px) for card padding and section margins, lg (40px) for major section breaks, and xl (64px) for hero sections and full-width spacing. Container max-width (1280px) prevents text from becoming uncomfortably wide on ultra-large displays. Fluid mar

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through darkness or blur. The elevation system uses three levels: sm (0 1px 2px rgba(0,0,0,0.06)) for minimal lift on interactive elements like hover states, md (0 3px 8px rgba(0,0,0,0.15)) for standard cards and modals that sit above the base surface, and lg (0 16px 40px rgba(0,0,0,0.12)) for prominent modals and floating elements. Shadows use soft, spread blur radii (8px–40px) to create diffuse light rather than hard edges. Cards and containers receive a 1px border in outline-variant (#c4c7c8) to define edges without relying on sha

Shapes

The shape philosophy is 'Structured Approachability'—rounded corners are used strategically to soften institutional geometry without sacrificing clarity. Buttons use rounded.md (0.75rem / 12px), providing a friendly, modern appearance while remaining clearly clickable. Cards and containers use rounded.lg (1rem / 16px) for a slightly softer presence that feels curated rather than harsh. Input fields use rounded.DEFAULT (0.5rem / 8px) for a compact, functional appearance that doesn't distract from content entry. Badges and pills use rounded.full (9999px) to create a distinct visual category for

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses #ab0c2f background with white text, 16px Outfit 500 weight, 13px vertical and 34px horizontal padding, and 6px border-radius. On hover, the background darkens to #8b0820 with a 200ms ease-in-out transition. On active/pressed state, the background further darkens to #7a0820 with an inset shadow (0 2px 4px rgba(0,0,0,0.2)) to indicate depression. Button-secondary uses a transparent background with a 2px primary-colored border and primary text; on hover, it fills with primary-container (#f0d5dc) and on-primary-container text. Button-ghost is text-only with no border; on hover, it receives a surface-container-high background. All buttons use cursor: pointer and disable cursor: not-allowed when di

Do's and Don'ts

**Do**

• Do use primary (#ab0c2f) exclusively for call-to-action buttons, active states, and brand-critical interactive elements—never for body text or backgrounds.
• Do apply consistent 24px gutter spacing and 40px section margins to create visual rhythm and breathing room across all page layouts.
• Do use Outfit typography exclusively; maintain weight hierarchy (700 for display, 600 for headlines, 400 for body, 500 for labels) to guide visual scanning.
• Do apply md elevation shadow (0 3px 8px rgba(0,0,0,0.15)) to cards and containers; reserve lg shadow for modals and floating elements only.
• Do use 12px border-radius on buttons and 16px on cards to balance friendliness with institutional clarity; never use sharp corners or extreme radius.
• Do provide 200ms ease-in-out transitions on hover and focus states to create smooth, professional feedback without feeling sluggish.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#575f5f) for body text and on-surface-variant (#6c757d) for secondary text to reduce eye strain.
• Don't apply primary color to non-interactive elements or backgrounds; reserve it exclusively for CTAs, active states, and brand accents.
• Don't mix typefaces; Outfit is the sole font family across all scales—weight and size variations provide sufficient contrast without introducing new families.
• Don't use shadows larger than lg (0 16px 40px rgba(0,0,0,0.12)) on standard components; excessive shadow depth creates visual chaos and reduces clarity.
• Don't apply border-radius greater than 16px on cards or containers; full-radius (9999px) is reserved for badges and pills only.
• Don't skip focus states on interactive elements; always provide a visible focus indicator (3px box-shadow in primary color at 10% opacity) for keyboard accessibility.