Volume III

Enterprise Design System

Career Pathways 2.0 — Brand Standards Reference

v2.0Approved for Development

Color System

Primary brand palette — use intentionally. Accent colors identify departments, not interfaces.

Primary Brand Colors

Deep Navy
#0B2C3D
Primary — Headers, sidebar, key UI
Professional Blue
#1A5276
Primary — Interactive elements
Clean White
#FFFFFF
Backgrounds, cards
Charcoal
#2C3E50
Body text, headings
Accent Gold
#C9A43B
Highlights, awards, CTAs

Department Accent Colors

Cloud Engineering
Azure Blue
Cybersecurity
Crimson
Software Engineering
Purple
Data Analytics
Indigo
Career Development
Emerald
Artificial Intelligence
Violet
Accessibility
Teal
Academic Leadership
Midnight Blue

Typography Scale

Inter font family — consistent hierarchy, generous line spacing, accessible contrast.

Display Heading

Career Pathways 2.0

Page Heading

Your Learning Dashboard

Section Heading

Current Module Progress

Body Text

Complete your next milestone and unlock your certificate. Each step builds the evidence employers need.

Caption

Last updated 2 hours ago

Helper Text

Required field — must be a valid email address.

Button Text

Continue Learning

Button Standards

Four tiers — clear action labels, accessible contrast, visible focus indicators.

Card Design Standards

Rounded corners, consistent padding, soft elevation, hover state, accessible focus.

Module Complete

Completed

You've finished Introduction to Cloud Architecture. Your next step is ready.

Skill Assessment

In Progress

Test your knowledge of cybersecurity fundamentals before moving on.

Certificate Earned

New

Your Cloud Engineering Foundation certificate is ready to download.

Department Identity

Each department uses its accent color for badges, borders, and section highlights — never as a full background.

Cloud Engineering
Azure Blue
Sample Badge
Cybersecurity
Crimson
Sample Badge
Software Engineering
Purple
Sample Badge
Data Analytics
Indigo
Sample Badge
Career Development
Emerald
Sample Badge
Artificial Intelligence
Violet
Sample Badge
Accessibility
Teal
Sample Badge
Academic Leadership
Midnight Blue
Sample Badge

Accessibility Standards

WCAG 2.2 AA — accessibility is a design requirement, not a post-development task.

✓Keyboard navigation on all interactive elements
✓Screen reader compatible with semantic HTML
✓Logical heading structure (h1 → h2 → h3)
✓Accessible form labels and error messages
✓High color contrast (minimum 4.5:1 for text)
✓Reduced motion support (prefers-reduced-motion)
✓Visible focus indicators on all focusable elements
✓Alternative text for all meaningful images

Modernization Checklist

Confirm before approving any interface enhancement.

✓Existing functionality is preserved
✓Existing learner data remains intact
✓Visual consistency is maintained across all screens
✓Accessibility requirements are met (WCAG 2.2 AA)
✓Responsive behavior verified on mobile, tablet, desktop
✓Components follow the enterprise design system
✓User experience is improved without increasing complexity

Career Pathways 2.0 · Enterprise Design System & Brand Standards · Volume III · Version 2.0 · July 2026

Sable Echelon Innovations LLC — Approved for Development