UWC

Overview

UWC is an institutional education platform serving a global community of learners, educators, and administrators. The design system embodies 'Structured Clarity'—a philosophy that prioritizes information accessibility, institutional trust, and functional elegance over decorative flourish. The aesthetic is rooted in academic tradition (serif typography, neutral palettes) while maintaining contemporary usability standards. The UI evokes professionalism, reliability, and intellectual rigor; users should feel they are engaging with a serious, well-organized institution.

The brand voice is formal yet approachable, precise without being cold. Vocabulary favors clarity over jargon; when technical terms are necessary, they are explained. Tone is consistent across all touchpoints: respectful of the user's time, confident in the institution's mission, and transparent about processes. Example: 'Your application is under review. We'll notify you by 15 March with a decision.'

Colors

The color palette is deliberately restrained, reflecting institutional gravitas and accessibility-first design. Primary (#505050) is a warm mid-gray used for interactive elements, text emphasis, and structural hierarchy—it reads as authoritative without aggression. Secondary (#6c757d) and Tertiary (#666666) provide subtle tonal variation for disabled states, helper text, and secondary actions. The surface stack (white #ffffff through container shades #e9ecef, #f0f9fa) creates depth through luminance rather than saturation, ensuring readability across all contexts.

Usage rules: Primary (#505050) appears on all primary CTAs, focus states, and active navigation items. Secondary (#6c757d) is reserved for disabled text, captions, and tertiary buttons. The surface-container-high (#f0f9fa) is us

Typography

The type system pairs Georgia (display/headline) with Times New Roman (body/label), creating a sophisticated serif-based hierarchy that signals institutional authority while maintaining legibility at all sizes. Display (56px, 700 weight, -0.02em tracking) is reserved for page titles and hero statements; Headline-lg (36px, 600 weight) anchors major sections; Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, descriptions, and body copy. Label-md (14px, 500 weight, 0.02em tracking) is applied to button text and form field labels, with increased letter-spacing to enhance scannability in dense interfaces. All serif text at sizes below 16px should receive a subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) when rendered over light backgrounds to prevent anti-aliasing

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, ensuring content remains readable on large displays while maintaining focus on educational content. Spacing follows a semantic scale: unit (8px) for micro-adjustments, sm (12px) for form field padding and tight grouping, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. White-space is treated as a design element—generous margins around form fields and cards reduce cognitive load and signal that each component is a distinct, actionable unit. The gutter (24px) is applied consistently to all grid columns, creating a predictable rhythm that aids navigation and scanning.

Elevation & Depth

Visual hierarchy is conveyed through a restrained shadow system and surface color variation rather than dramatic depth effects. Level 1 (Base) uses no shadow; elements sit flush on the white background. Level 2 (Elevated Components) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to dropdown panels, modals, and floating elements—this shadow is subtle but sufficient to lift the element off the page. Level 3 (Modal Overlays) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) for full-page modals and critical alerts. Disabled states are conveyed through surface-container (#e9ecef) background with

Shapes

The shape philosophy is 'Institutional Minimalism'—subtle rounding that softens hard edges without introducing playfulness. All interactive elements (buttons, inputs, dropdowns) use border-radius: 4px (0.25rem), a conservative radius that maintains a professional appearance while improving touch targets on mobile. Dropdown panels and modals use the same 4px radius for consistency. This minimal rounding reflects the brand's commitment to clarity and efficiency; overly rounded corners would contradict the formal, structured aesthetic. The 4px radius is applied universally across all components t

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (#505050 background, white text, 44px height, 12px 24px padding, 4px radius) is used for all primary actions (submit, confirm, apply). Button-primary-hover transitions to surface-container (#e9ecef) background with primary text, signaling interactivity without jarring color shifts. Button-secondary uses a transparent background with a 1px outline (#d0d0d0) and primary text; on hover, it fills with surface-container-high (#f0f9fa) and gains a primary-colored border. All buttons use label-md typography (14px, 500 weight, 0.02em tracking) for consistent visual weight.

Inputs & Selection Select dropdowns are custom-styled to ensure consistency across browsers. The select-dropdown component uses a white backg

Do's and Don'ts

**Do**

• Do use primary (#505050) exclusively for interactive elements and focus states; never use it for body text or backgrounds.
• Do apply the 4px border-radius consistently across all components—buttons, inputs, dropdowns, cards—to maintain visual cohesion.
• Do use the surface-container-high (#f0f9fa) hover state for all interactive elements; this provides consistent, predictable feedback.
• Do pair Georgia serif headlines with Times New Roman serif body copy to maintain the institutional aesthetic across all text sizes.
• Do use the md (24px) spacing token for section gutters and card padding; this creates a predictable, scannable rhythm.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to floating elements like dropdowns and modals to establish clear visual hierarchy.

**Don't**

• Don't use colors outside the defined palette—no bright accents, gradients, or saturated hues; they contradict the institutional aesthetic.
• Don't apply border-radius greater than 4px to interactive components; excessive rounding introduces visual inconsistency and reduces perceived professionalism.
• Don't use sans-serif fonts for headlines or body copy; the serif system (Georgia + Times New Roman) is core to the brand identity.
• Don't mix shadow depths within a single interface layer; use either no shadow (Level 1) or the standard 0 3px 8px shadow (Level 2), never both.
• Don't reduce padding below 6px 12px on form elements or dropdown options; cramped spacing reduces accessibility and increases cognitive load.
• Don't use color alone to convey state changes; always pair color transitions with text labels, icons, or cursor changes for accessibility.