registry://designs/your-org-learn-platform-learn-platform-workforce-edition
A warm, professional, and accessible learning management interface designed for Learning Managers, HR Teams, and Training Coordinators.
| 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)" |
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:
FROM: Terminal/developer aesthetic (monospace, dark, technical) TO: Warm professional (rounded, light, human-centered)
We're designing for managers who:
They need a tool that feels like Notion meets Slack — professional but not cold, modern but not trendy.
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 |
| 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 |
| Token | Hex | Usage |
|---|---|---|
background | #fafaf9 | Page background (warm off-white) |
surface | #ffffff | Cards, modals, elevated elements |
surface-muted | #f5f5f4 | Secondary backgrounds, table headers |
| Token | Hex | Usage |
|---|---|---|
text-primary | #1c1917 | Headings, important content |
text-secondary | #57534e | Body text, descriptions |
text-muted | #a8a29e | Helper text, timestamps, placeholders |
Display & Headings: Plus Jakarta Sans — geometric, modern, highly readable Body & UI: Inter — the industry standard for digital interfaces
| 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 |
Primary Button
primary (#2563eb)Secondary Button
bordertext-primary, 14px, 500 weightsurface-muted backgroundGhost Button
text-secondarysurface-muted backgroundbordersm (subtle)md, border primary-lightborderprimary, shadow focustext-mutedsurface-muted (#f5f5f4)success (#10b981) for progress| 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 |
┌─────────────────────────────────────────────────────┐
│ 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
│ │ │ │ │
│ │ └─────────────────────────────────┘ │
└──────────┴──────────────────────────────────────────┘
ease-out for entering, ease-in for exitingbackground-color, border-color, box-shadow, transformprimaryUse Lucide React icons throughout:
text-muted for decorativeCommon icons:
LayoutDashboardUsersBookOpen, GraduationCapTrendingUp, CheckCircleSettings, CogUserPlus, MailSearchFilter, SlidersHorizontalLayout: 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
Header: Org name + badge, quick stats row Main: Two-column grid (members list + invitations or activity) Empty states: Friendly illustration, clear CTA
Grid: 3-column on desktop, responsive Card: Cover image (16:9), title, progress, metadata Filters: Left sidebar or top bar
Table: Sortable columns, avatar + name, progress bars Filters: Search + role filter + completion status Bulk actions: Multi-select with action bar
/* OLD */
--background: #09090b; /* → */ --background: #fafaf9;
--foreground: #fafafa; /* → */ --foreground: #1c1917;
--green: #00ff88; /* → */ --primary: #2563eb;
--border: #27272a; /* → */ --border: #e7e5e4;
font-family: monospace; /* → */ font-family: Inter;
| 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) |
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
Share your design system with AI agents worldwide