# Lab Dashboard Design Tokens
Visual reference for the clinical lab dashboard design system.
---
## Color Palette
### Grayscale (11 steps)
```
--white: #FFFFFF ███████ Base background
--gray-50: #FAFAFA ███████ Subtle backgrounds
--gray-100: #F5F5F5 ███████ Card backgrounds
--gray-200: #E5E5E5 ███████ Borders (primary)
--gray-300: #D4D4D4 ███████ Borders (secondary)
--gray-400: #A3A3A3 ███████ Disabled text
--gray-500: #737373 ███████ Muted text
--gray-600: #525252 ███████ Secondary text
--gray-700: #404040 ███████ Body text
--gray-800: #262626 ███████ Strong text
--gray-900: #171717 ███████ Headings
--black: #000000 ███████ Primary text
```
### Accent Color
```
--blue: #0066FF ███ Primary accent
--blue-light: #3385FF ███ Hover state
--blue-dark: #0052CC ███ Active state
```
**Usage:**
- Interactive elements (buttons, links, pills)
- Timeline markers
- Progress fills
- Hover effects
---
## Typography
### Font Families
```css
/* Sans-serif (UI text) */
--font-sans: -apple-system, BlinkMacSystemFont,
"SF Pro Display", "Inter",
"Helvetica Neue", Arial, sans-serif;
/* Monospace (timestamps, code) */
--font-mono: "SF Mono", "Monaco", "Consolas", monospace;
```
### Font Sizes
```
10px → Labels (uppercase, 0.5-0.8px letter-spacing)
11px → Metadata, hints, mono text
12px → Small UI text
13px → Body text, lists
14px → Headers, emphasis
16px+ → (not used, maintain minimal scale)
```
### Font Weights
```
400 → Regular (body text)
500 → Medium (values, emphasis)
600 → Semibold (headers, labels)
700 → Bold (not used, maintain minimal aesthetic)
```
### Text Colors by Context
```
Primary text: --black (#000000) → Headlines, values
Body text: --gray-700 (#404040) → Paragraphs, descriptions
Secondary text: --gray-600 (#525252) → Metadata labels
Muted text: --gray-500 (#737373) → Hints, timestamps
Disabled text: --gray-400 (#A3A3A3) → Inactive elements
Accent text: --blue (#0066FF) → Links, interactive
```
---
## Spacing Scale
```css
--space-1: 4px ▏ Tight spacing
--space-2: 8px ▏▏ Default gap
--space-3: 12px ▏▏▏ Small padding
--space-4: 16px ▏▏▏▏ Standard padding
--space-6: 24px ▏▏▏▏▏▏ Section spacing
--space-8: 32px ▏▏▏▏▏▏▏▏ Large spacing
```
**Usage:**
- Padding: `--space-4` (default), `--space-3` (compact)
- Gaps: `--space-2` (pills), `--space-4` (cards)
- Sections: `--space-6` (between), `--space-8` (major)
---
## Border System
### Border Width
```
1px → Standard borders (cards, inputs, dividers)
2px → Emphasized borders (not used, maintain minimal)
```
### Border Colors
```
--gray-200: #E5E5E5 → Primary borders (cards, dividers)
--gray-300: #D4D4D4 → Secondary borders (subtle)
--blue: #0066FF → Accent borders (hover, focus)
```
### Border Radius
```
3px → Small elements (tags, badges)
4px → Standard elements (cards, inputs)
6px → Buttons
12px → Pills, status badges
```
---
## Shadows (Minimal)
```css
/* Subtle shadow for depth */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
/* Medium shadow for elevation */
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
```
**Usage:**
- Cards: No shadow (rely on borders)
- Hover: `--shadow-sm` (optional)
- Modals: `--shadow-md` (if implemented)
**Note:** Prefer borders over shadows for minimal aesthetic.
---
## Component Tokens
### Header Bar
```
Background: --white
Border: 1px solid --gray-200
Padding: --space-4 --space-6
Height: Auto (content-based)
Position: Sticky (top: 0)
```
### Cards
```
Background: --white
Border: 1px solid --gray-200
Radius: 4px
Padding: --space-4
Gap: --space-4
```
### Sidebar Cards
```
Width: 480px (desktop)
Gap: --space-4
Padding: --space-4
```
### Metadata Strip
```
Background: --white
Border: 1px solid --gray-200 (bottom only)
Padding: --space-4
Grid: Auto-fit, min 120px columns
```
### Timeline Bar
```
Background: --gray-50
Height: 4px
Markers: 2px wide, --blue
Padding: --space-3 --space-4
```
### Transcript Rows
```
Grid: 80px | 100px | 1fr
Padding: --space-3 --space-4
Border: 1px solid --gray-100 (bottom)
Hover: --gray-50 background
```
### Pills/Badges
```
Background: --gray-100
Border: 1px solid --gray-200
Radius: 4px
Padding: --space-1 --space-2
Font: 11px, 500 weight
Hover: --blue background, --white text
```
### Buttons
```
Width: 32px × 32px
Border: 1px solid --gray-200
Radius: 6px
Hover: --gray-50 bg, --blue border/text
```
---
## Layout Grid
### Desktop (> 1200px)
```
Container: max-width: 1600px
Grid: 1fr 480px (main | sidebar)
Gap: --space-6 (24px)
```
### Tablet (768px - 1200px)
```
Grid: 1fr (single column)
Sidebar: Below main content
```
### Mobile (< 768px)
```
Padding: --space-4
Grid: 1fr (stacked)
Transcript: Single column
```
---
## Interactive States
### Hover
```
Background: --gray-50 (subtle)
Border: --blue (accent)
Color: --blue (text/icons)
Transform: translateY(-1px) (optional)
```
### Active/Pressed
```
Background: --gray-100
Border: --blue-dark
Color: --blue-dark
Transform: translateY(0)
```
### Focus
```
Outline: 2px solid --blue
Offset: 2px
```
### Disabled
```
Background: --gray-100
Color: --gray-400
Cursor: not-allowed
Opacity: 0.6
```
---
## Accessibility
### Contrast Ratios (WCAG AA)
```
Black on white: 21:1 ✓ AAA
Gray-700 on white: 10.5:1 ✓ AAA (body text)
Gray-600 on white: 7.2:1 ✓ AA (secondary)
Gray-500 on white: 4.6:1 ✓ AA (large text)
Blue on white: 4.5:1 ✓ AA
White on blue: 4.5:1 ✓ AA (hover)
```
### Text Sizes (WCAG)
```
10px → Use only for labels (uppercase, bold)
11px → Minimum for body text (AA large)
13px → Preferred for body text (AA)
```
---
## Animation Tokens
```css
/* Transitions */
--duration-fast: 0.15s
--duration-normal: 0.2s
--duration-slow: 0.3s
/* Easing */
--ease: ease
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
```
**Usage:**
- Hover: `0.15s ease` (fast, subtle)
- Color changes: `0.2s ease` (normal)
- Transforms: `0.3s ease-in-out` (smooth)
**Note:** Keep animations minimal and subtle.
---
## Z-Index Scale
```
Header: 100 (sticky)
Sidebar: 10 (above content)
Modals: 1000 (if implemented)
Tooltips: 1100 (if implemented)
```
---
## Responsive Breakpoints
```css
/* Desktop */
@media (min-width: 1201px) {
/* Two-column layout */
}
/* Tablet */
@media (min-width: 769px) and (max-width: 1200px) {
/* Single column, sidebar below */
}
/* Mobile */
@media (max-width: 768px) {
/* Stacked layout, simplified grid */
}
```
---
## Usage Examples
### Header
```css
.lab-header {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
padding: var(--space-4) var(--space-6);
}
```
### Card
```css
.lab-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 4px;
padding: var(--space-4);
}
```
### Button
```css
.icon-btn {
width: 32px;
height: 32px;
border: 1px solid var(--gray-200);
border-radius: 6px;
transition: all 0.15s ease;
}
.icon-btn:hover {
background: var(--gray-50);
border-color: var(--blue);
color: var(--blue);
}
```
### Pill
```css
.concept-pill {
padding: var(--space-1) var(--space-2);
background: var(--gray-100);
border: 1px solid var(--gray-200);
border-radius: 4px;
font-size: 11px;
font-weight: 500;
}
.concept-pill:hover {
background: var(--blue);
color: var(--white);
border-color: var(--blue);
}
```
---
## Design Principles
### Swiss Design
1. **Grid-based layout** - Everything aligns
2. **High contrast** - Black on white
3. **Minimal decoration** - No gradients, effects
4. **Typography-driven** - Type hierarchy creates structure
### Clinical Aesthetic
1. **White space** - Let content breathe
2. **Precision** - Exact measurements, alignment
3. **Data-first** - Information over decoration
4. **Professional** - Serious, trustworthy
### Accessibility
1. **High contrast** - 4.5:1 minimum
2. **Clear hierarchy** - Size, weight, color
3. **Readable fonts** - Sans-serif, 13px+ body
4. **Semantic HTML** - Screen reader friendly
---
## References
### Inspiration
- Swiss design (Josef Müller-Brockmann)
- Apple Human Interface Guidelines
- Clinical lab interfaces
- Medical documentation systems
### Tools
- WCAG Contrast Checker
- SF Pro Display (Apple)
- Inter (Google Fonts alternative)
---
**Last Updated:** 2026-02-04
**Version:** 1.0.0
