Learn Platform - Workforce Edition

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)