MedThread CRM Style Guide
A comprehensive design system for MedThread CRM. This guide ensures consistency across all components, layouts, and user interactions throughout the application.
Design Tokens Reference
Complete reference tables for all design system values and tokens.
Typography Tokens
| Token Name | Tailwind Classes | Line Height | Usage | Preview |
|---|---|---|---|---|
| Display Large | text-4xl lg:text-5xl font-extrabold | 1.1 | Page titles, hero headings | Aa |
| Display Medium | text-3xl font-bold | 1.2 | Section titles, card headers | Aa |
| Heading 1 | text-2xl font-semibold | 1.3 | Primary headings | Aa |
| Heading 2 | text-xl font-semibold | 1.4 | Secondary headings | Aa |
| Heading 3 | text-lg font-medium | 1.5 | Tertiary headings | Aa |
| Body Large | text-base leading-7 | 1.75 | Primary body text, descriptions | Aa |
| Body Medium | text-sm leading-6 | 1.5 | Secondary body text, captions | Aa |
| Body Small | text-xs | 1.4 | Labels, metadata, timestamps | Aa |
Color Tokens
| Token Name | Tailwind Class | Hex Value | Usage | Preview |
|---|---|---|---|---|
| Primary | bg-primary | #0f172a | Main brand color, primary actions | |
| Primary/80 | bg-primary/80 | #0f172acc | Hover states, active elements | |
| Primary/60 | bg-primary/60 | #0f172a99 | Disabled states | |
| Primary/10 | bg-primary/10 | #0f172a1a | Light backgrounds, subtle highlights | |
| Secondary | bg-secondary | #f1f5f9 | Subtle elements, secondary actions | |
| Accent | bg-accent | #f1f5f9 | Highlights, emphasis | |
| Muted | bg-muted | #f8fafc | Backgrounds, disabled text | |
| Destructive | bg-destructive | #ef4444 | Errors, warnings, delete actions | |
| Success | bg-green-500 | #22c55e | Success states, confirmations | |
| Warning | bg-yellow-500 | #eab308 | Warning states, cautions | |
| Error | bg-red-500 | #ef4444 | Error states, failures | |
| Info | bg-blue-500 | #3b82f6 | Information, neutral alerts |
Spacing Tokens
| Token | Pixels | REM | Usage | Visual |
|---|---|---|---|---|
| 1 | 4px | 0.25rem | Tight spacing, borders, fine details | |
| 2 | 8px | 0.5rem | Small gaps, button padding, icon spacing | |
| 3 | 12px | 0.75rem | Form elements, compact layouts | |
| 4 | 16px | 1rem | Standard spacing, default gaps | |
| 6 | 24px | 1.5rem | Section spacing, card padding | |
| 8 | 32px | 2rem | Large gaps, component margins | |
| 12 | 48px | 3rem | Page sections, major spacing | |
| 16 | 64px | 4rem | Major sections, hero spacing | |
| 20 | 80px | 5rem | Page-level spacing, large margins | |
| 24 | 96px | 6rem | Extra large spacing, section breaks |
Component Tokens
| Component | Variant | Tailwind Classes | Usage | Preview |
|---|---|---|---|---|
| Button | Primary | bg-primary text-primary-foreground hover:bg-primary/90 | Main actions, form submissions | |
| Button | Secondary | bg-secondary text-secondary-foreground hover:bg-secondary/80 | Secondary actions | |
| Button | Outline | border border-input bg-background hover:bg-accent | Neutral actions, cancel buttons | |
| Button | Ghost | hover:bg-accent hover:text-accent-foreground | Subtle actions, icon buttons | |
| Button | Destructive | bg-destructive text-destructive-foreground hover:bg-destructive/90 | Delete, remove actions | |
| Card | Default | rounded-lg border bg-card text-card-foreground shadow-sm | Content containers, information display | |
| Input | Default | border border-input bg-background px-3 py-2 rounded-md | Text input, form fields | |
| Badge | Default | bg-primary text-primary-foreground px-2.5 py-0.5 rounded-full text-xs | Status indicators, tags | Default |
| Badge | Secondary | bg-secondary text-secondary-foreground | Neutral status, categories | Secondary |
| Badge | Destructive | bg-destructive text-destructive-foreground | Error status, warnings | Destructive |
Layout Patterns
| Pattern Name | Tailwind Classes | Usage | Context |
|---|---|---|---|
| Page Container | flex flex-1 flex-col gap-6 p-6 md:gap-8 md:p-8 | Main page wrapper | 📄 Content Layout |
| Content Container | container mx-auto p-6 | Standard content width | 📄 Content Layout |
| Narrow Container | max-w-4xl mx-auto | Reading content, articles | 📄 Content Layout |
| Form Container | max-w-2xl mx-auto | Forms, input layouts | 📄 Content Layout |
| Stats Grid | grid gap-4 md:grid-cols-2 lg:grid-cols-4 | Dashboard metrics | 📊 Data Display |
| Content Grid | grid gap-6 md:grid-cols-2 | Two-column layouts | 📊 Data Display |
| Card Spacing | space-y-6 | Between cards and sections | 📏 Component Spacing |
| Form Spacing | space-y-4 | Between form fields | 📏 Component Spacing |
| Button Group | flex gap-2 | Action button groups | 🔘 Action Groups |
| List Spacing | space-y-2 | List items, menu items | 📏 Component Spacing |
Responsive Breakpoints
| Breakpoint | Screen Size | Tailwind Prefix | Usage | Priority |
|---|---|---|---|---|
| Mobile | < 768px | default | Base styles, mobile-first | Primary |
| Tablet | 768px+ | md: | Tablet and up modifications | Secondary |
| Desktop | 1024px+ | lg: | Desktop and up enhancements | Enhanced |
| Large Desktop | 1280px+ | xl: | Large screen optimizations | Optional |
| Extra Large | 1536px+ | 2xl: | Ultra-wide screen layouts | Optional |
Quick Reference
Most commonly used tokens and patterns.
Common Spacing
gap-2 - Button groupsgap-4 - Grid itemsgap-6 - Card groupsp-6 - Card paddingspace-y-4 - Form fieldsCommon Colors
bg-primary - Main actionsbg-secondary - Subtle elementsbg-muted - Backgroundstext-muted-foreground - Secondary textbg-green-500 - Success statesCommon Typography
text-2xl font-semibold - Page titlestext-lg font-medium - Section headerstext-base - Body texttext-sm text-muted-foreground - Captionstext-xs - Labels