Skip to main content

Mulutime Platform Design System

Last updated: June 2025

Overview​

This page summarizes the official design system for the Mulutime scheduling platform. It covers brand identity, color palette, typography, layout, UI components, accessibility, and implementation guidelines to ensure a cohesive, accessible, and professional user experience.

1. Brand Identity​

  • Brand Name: Mulutime
  • Logo: Circular gradient with scheduling/time icon
  • Brand Colors: Blue-purple gradient (see Color System)
  • Typography: Modern, clean sans-serif (Plus Jakarta Sans, Cal Sans)
  • Voice: Professional, approachable, efficient, user-centric, calm, and organized
  • Philosophy: Calm productivity, universal accessibility, timeless appeal, brand differentiation

2. Color System​

Primary Palette​

NameHSL ValueHexUsage
Primary177 94% 33%#03A6A1CTAs, links, brand, primary buttons
Accent259 39% 35%#52357BSecondary buttons, highlights
Primary Foreground0 0% 100%#ffffffOn primary/accent backgrounds
Secondary210 20% 98%#f8fafcNeutral light backgrounds
Secondary Foreground222 47% 11%#1a1a2eOn secondary backgrounds

Brand Colors (CSS Custom Properties)​

--primary: 177 94% 33%;            /* #03A6A1 */
--primary-foreground: 0 0% 100%;   /* #ffffff */
--accent: 259 39% 35%;             /* #52357B */
--accent-foreground: 0 0% 100%;    /* #ffffff */
--brand-teal: 177 94% 33%;         /* #03A6A1 */
--brand-purple: 259 39% 35%;       /* #52357B */
--brand-teal-light: 177 94% 85%;   /* Light teal */
--brand-purple-light: 259 39% 85%; /* Light purple */

Semantic & Neutral Colors​

--success: 142 71% 45%;           /* #10b981 */
--warning: 38 92% 50%;            /* #f59e0b */
--error: 0 84% 60%;               /* #ef4444 */
--info: 217 91% 60%;              /* #3b82f6 */
--background: 0 0% 100%;          /* #ffffff */
--foreground: 222.2 84% 4.9%;     /* #0f0f23 */
--muted: 210 40% 96.1%;           /* #f1f5f9 */
--muted-foreground: 215.4 16.3% 46.9%; /* #64748b */
--border: 214.3 31.8% 91.4%;      /* #e2e8f0 */

Dark Mode​

.dark {
  --background: 222.2 84% 4.9%;    /* #0f0f23 */
  --foreground: 210 40% 98%;       /* #f8fafc */
  --primary: 210 40% 98%;          /* Inverted for contrast */
  --muted: 217.2 32.6% 17.5%;      /* #2d3748 */
  --border: 217.2 32.6% 17.5%;     /* #2d3748 */
}

3. Typography​

  • Primary font: 'Plus Jakarta Sans', system-ui, sans-serif
  • Headings: 'Cal Sans', system-ui, sans-serif
  • Monospace: 'JetBrains Mono', monospace

Example Font Stacks​

--font-plus-jakarta: 'Plus Jakarta Sans';
--font-cal: 'Cal Sans';
--font-mono: 'JetBrains Mono';

Typography Scale​

  • Headings: .text-heading-1 to .text-heading-5 (bold, tight tracking)
  • Body: .text-body, .text-body-lg, .text-body-sm, .text-caption
  • Special: .text-muted, .text-gradient

4. Layout & Spacing​

  • Containers: .container-app, .container-dashboard, .container-form, .container-content
  • Spacing scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px
  • Layout patterns: .layout-stack, .layout-inline, .layout-spread, .layout-center, .layout-grid, .layout-responsive
  • Border radius: 8px, 12px, 16px, 24px, full (pills)

5. Component Library​

  • Buttons: Variants for default, destructive, outline, secondary, ghost, link
  • Cards: Standard card with header, content, and actions
  • Forms: Labeled fields, helper text, select menus
  • Navigation: Sidebar, header, mobile navigation
  • Dialogs: Modal dialogs with header, content, footer
  • Badges: Status and feature badges with color coding

6. UI Patterns​

  • Page headers: Consistent layout with icon, title, description, actions
  • Data display: Card grids for stats, lists, and tables
  • Empty states: Friendly, inviting empty state components
  • Loading states: Skeleton loaders for async content

7. Responsive Design​

  • Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)
  • Mobile-first: All layouts adapt from mobile up
  • Mobile navigation: Sheet/drawer for navigation on small screens

8. Animations & Interactions​

  • Custom animations: Gradient flow, subtle pulse, fade/slide in
  • Transitions: Smooth, fast, slow; hover/active/focus effects
  • Interactive states: Visual feedback for hover, active, focus

9. Accessibility​

  • Color contrast: All text and interactive elements meet WCAG AA/AAA
  • Focus management: Visible, high-contrast focus rings
  • ARIA support: Proper labels, roles, and descriptions
  • Keyboard navigation: Logical tab order, skip links, shortcuts

10. Implementation Guidelines​

  • File structure: Modular, with components/, styles/, lib/, and app/
  • CSS variables: For colors, fonts, spacing, and radius
  • Component development: Use Tailwind, class-variance-authority, and semantic HTML
  • Styling: Prefer Tailwind utilities, support dark mode, use custom properties
  • Best practices: Performance, accessibility, responsiveness, consistency, documentation

For detailed examples and code snippets, see the full Mulutime Platform Design Specification or reach out to the design team.