Learn Platform Design System

Workforce Training Edition

Overview

A warm, professional, and accessible learning management interface designed for Learning Managers, HR Teams, and Training Coordinators. This is NOT a developer tool — it's a productivity platform for business professionals managing team learning and development.

The design prioritizes:

• Clarity: Information hierarchy that helps users find what they need
• Trust: Professional aesthetics that inspire confidence in the platform
• Progress: Visual indicators that celebrate achievement and track completion
• Accessibility: WCAG AA compliance, large touch targets, clear contrast

Design Philosophy

FROM: Terminal/developer aesthetic (monospace, dark, technical) TO: Warm professional (rounded, light, human-centered)

We're designing for managers who:

• Review team progress reports
• Assign courses to team members
• Track compliance and certifications
• Present learning metrics to leadership

They need a tool that feels like Notion meets Slack — professional but not cold, modern but not trendy.

Colors

Primary Palette

The primary blue conveys trust, stability, and professionalism — essential for enterprise learning tools.

Semantic Colors

Surface Colors (Light Mode)

Text Colors

Typography

Font Stack

Display & Headings: Plus Jakarta Sans — geometric, modern, highly readable Body & UI: Inter — the industry standard for digital interfaces

Type Scale

Do's

• Use sentence case for headings ("Team progress" not "TEAM PROGRESS")
• Maintain generous line-height (1.5-1.6) for readability
• Use text-secondary for less important content

Don'ts

• No ALL CAPS except for very small labels (12px badges)
• No monospace fonts in the main UI
• No tracking-widest letter spacing

Components

Buttons

Primary Button

• Background: primary (#2563eb)
• Text: White, 14px, 500 weight
• Padding: 12px 24px
• Border-radius: 8px
• Hover: Darker blue + subtle shadow
• Disabled: 50% opacity

Secondary Button

• Background: White
• Border: 1px solid border
• Text: text-primary, 14px, 500 weight
• Hover: surface-muted background

Ghost Button

• Background: Transparent
• Text: text-secondary
• Hover: surface-muted background

Cards

• Background: White
• Border: 1px solid border
• Border-radius: 12px
• Shadow: sm (subtle)
• Padding: 24px
• Hover (if interactive): Shadow md, border primary-light

Inputs

• Background: White
• Border: 1px solid border
• Border-radius: 8px
• Padding: 12px 16px
• Focus: Border primary, shadow focus
• Placeholder: text-muted

Progress Indicators

• Track: surface-muted (#f5f5f4)
• Fill: success (#10b981) for progress
• Border-radius: Full (pill shape)
• Height: 8px for standard, 4px for compact

Badges & Status

Layout Patterns

Dashboard Layout

┌─────────────────────────────────────────────────────┐
│  Logo    [Org Switcher ▼]    Search    [User ▼]    │ ← Navbar
├──────────┬──────────────────────────────────────────┤
│          │                                          │
│  Nav     │  Page Content                           │
│  Links   │                                          │
│          │  ┌─────────────────────────────────┐     │
│  • Dash  │  │  Page Title                     │     │
│  • Team  │  │  Subtitle / breadcrumb          │     │
│  • Cours │  └─────────────────────────────────┘     │
│  • Report│                                          │
│          │  ┌────────┐ ┌────────┐ ┌────────┐       │
│          │  │ Stat 1 │ │ Stat 2 │ │ Stat 3 │       │ ← Stats Row
│          │  └────────┘ └────────┘ └────────┘       │
│          │                                          │
│          │  ┌─────────────────────────────────┐     │
│          │  │ Main Content Card               │     │ ← Primary Content
│          │  │                                 │     │
│          │  └─────────────────────────────────┘     │
└──────────┴──────────────────────────────────────────┘

Key Layout Principles

1. Generous whitespace: 24px minimum padding, 32px between sections
2. Card-based UI: Group related content in cards with clear boundaries
3. Progressive disclosure: Show summary first, details on demand
4. Consistent alignment: Left-aligned content, right-aligned actions

Motion & Interactions

Transitions

• Duration: 150ms for micro-interactions, 300ms for page transitions
• Easing: ease-out for entering, ease-in for exiting
• Properties: background-color, border-color, box-shadow, transform

Hover States

• Cards: Subtle shadow increase + optional border color change
• Buttons: Slight darken/lighten of background
• Links: Underline or color shift to primary

Loading States

• Skeleton screens preferred over spinners
• Pulse animation (opacity 50% → 100%)
• Maintain layout stability during load

Iconography

Use Lucide React icons throughout:

• Size: 16px for inline, 20px for buttons, 24px for emphasis
• Color: Match text color or use text-muted for decorative
• Stroke width: 1.5 (default)

Common icons:

• Dashboard: LayoutDashboard
• Team/Users: Users
• Courses: BookOpen, GraduationCap
• Progress: TrendingUp, CheckCircle
• Settings: Settings, Cog
• Invite: UserPlus, Mail
• Search: Search
• Filter: Filter, SlidersHorizontal

Page-Specific Patterns

Auth Pages (Login, Register, Forgot Password)

Layout: Centered card on subtle gradient background Card: Max-width 440px, generous padding (32px) Logo: Centered above form Form: Single column, clear labels above inputs Social login: Below divider with "or" separator Footer: Links to privacy, terms

Organization Dashboard

Header: Org name + badge, quick stats row Main: Two-column grid (members list + invitations or activity) Empty states: Friendly illustration, clear CTA

Course Catalog

Grid: 3-column on desktop, responsive Card: Cover image (16:9), title, progress, metadata Filters: Left sidebar or top bar

Team Progress View

Table: Sortable columns, avatar + name, progress bars Filters: Search + role filter + completion status Bulk actions: Multi-select with action bar

Do's and Don'ts

Do's

• Use warm stone/neutral colors instead of cold grays
• Round corners generously (8-12px default)
• Show progress visually (bars, rings, percentages)
• Use friendly, encouraging microcopy
• Provide clear empty states with next steps
• Use avatars and names to humanize the interface

Don'ts

• No monospace fonts in user-facing UI
• No terminal/code aesthetics
• No ALL CAPS headings (except tiny badges)
• No harsh borders or sharp corners
• No cryptic developer jargon
• No green-on-black "hacker" aesthetics

Migration Notes

CSS Variables to Update

/* OLD */
--background: #09090b;      /* → */ --background: #fafaf9;
--foreground: #fafafa;      /* → */ --foreground: #1c1917;
--green: #00ff88;           /* → */ --primary: #2563eb;
--border: #27272a;          /* → */ --border: #e7e5e4;
font-family: monospace;     /* → */ font-family: Inter;

Class Name Changes

Resources

• Fonts: Plus Jakarta Sans, Inter
• Icons: Lucide
• Color Inspiration: Linear, Notion, Stripe Dashboard
• Component Library: shadcn/ui (customize with our tokens)