name Learn Platform - Workforce Edition
version "2.0"
persona Learning Managers, HR Teams, Training Coordinators
aesthetic Warm Professional
colors # Primary palette - warm, trustworthy blue primary: "#2563eb" primary-hover: "#1d4ed8" primary-light: "#dbeafe" primary-foreground: "#ffffff" # Secondary - warm neutral secondary: "#64748b" secondary-hover: "#475569" secondary-light: "#f1f5f9" # Accent - encouraging green for progress/success success: "#10b981" success-light: "#d1fae5" success-dark: "#059669" # Warning - amber for attention warning: "#f59e0b" warning-light: "#fef3c7" # Error - softer red error: "#ef4444" error-light: "#fee2e2" # Surfaces - warm neutrals, not cold zinc background: "#fafaf9" surface: "#ffffff" surface-elevated: "#ffffff" surface-muted: "#f5f5f4" # Text - warm grays text-primary: "#1c1917" text-secondary: "#57534e" text-muted: "#a8a29e" text-disabled: "#d6d3d1" # Borders border: "#e7e5e4" border-strong: "#d6d3d1" # Dark mode variants dark: background: "#1c1917" surface: "#292524" surface-elevated: "#44403c" text-primary: "#fafaf9" text-secondary: "#d6d3d1" border: "#44403c"
typography # Display - for page titles and hero text display: fontFamily: "Plus Jakarta Sans" fontWeight: 700 letterSpacing: "-0.02em" # Headings - section headers heading: fontFamily: "Plus Jakarta Sans" fontWeight: 600 letterSpacing: "-0.01em" # Body - readable content body: fontFamily: "Inter" fontWeight: 400 fontSize: "16px" lineHeight: 1.6 # Labels - form labels, small text label: fontFamily: "Inter" fontWeight: 500 fontSize: "14px" letterSpacing: "0.01em" # Caption - helper text, timestamps caption: fontFamily: "Inter" fontWeight: 400 fontSize: "12px" color: "text-muted"
spacing page-padding: "24px" card-padding: "24px" section-gap: "32px" component-gap: "16px" input-padding: "12px 16px"
rounded none: "0" sm: "6px" md: "8px" lg: "12px" xl: "16px" full: "9999px" # Default radius for cards, inputs, buttons default: "12px"
shadows sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)" md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)" focus: "0 0 0 3px rgba(37, 99, 235, 0.2)"
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.
Token Hex Usage
primary #2563eb CTAs, primary buttons, active states, links
primary-hover #1d4ed8 Button hover states
primary-light #dbeafe Subtle backgrounds, selected states
Semantic Colors
Token Hex Usage
success #10b981 Completed states, progress indicators, positive actions
warning #f59e0b Attention needed, due soon, pending states
error #ef4444 Errors, destructive actions, overdue items
Surface Colors (Light Mode)
Token Hex Usage
background #fafaf9 Page background (warm off-white)
surface #ffffff Cards, modals, elevated elements
surface-muted #f5f5f4 Secondary backgrounds, table headers
Text Colors
Token Hex Usage
text-primary #1c1917 Headings, important content
text-secondary #57534e Body text, descriptions
text-muted #a8a29e Helper text, timestamps, placeholders
Typography
Font Stack
Display & Headings: Plus Jakarta Sans — geometric, modern, highly readable
Body & UI: Inter — the industry standard for digital interfaces
Type Scale
Style Size Weight Usage
Display 36px 700 Page titles ("Team Dashboard")
H1 28px 600 Section headers
H2 22px 600 Card titles, subsections
H3 18px 600 List headers, form sections
Body 16px 400 Primary content
Body Small 14px 400 Secondary content, descriptions
Caption 12px 400 Timestamps, helper text
Label 14px 500 Form labels, button text
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
Status Background Text
Completed success-light success
In Progress primary-light primary
Not Started surface-muted text-muted
Overdue error-light error
Due Soon warning-light warning
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
-
Generous whitespace: 24px minimum padding, 32px between sections
-
Card-based UI: Group related content in cards with clear boundaries
-
Progressive disclosure: Show summary first, details on demand
-
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
Old New
font-mono font-sans
text-brand text-primary
bg-zinc-950 bg-background
btn-green btn-primary
tracking-widest uppercase Remove (use sentence case)
Resources
-
Fonts: Plus Jakarta Sans, Inter
-
Icons: Lucide
-
Color Inspiration: Linear, Notion, Stripe Dashboard
-
Component Library: shadcn/ui (customize with our tokens)
