# Design System: FUO Warm Slate

## 1. Visual Theme & Atmosphere

A medical teaching presentation that pairs clinical authority with humanistic warmth. The design language draws from editorial medical journals and modern textbook illustrations — clean enough to convey scientific rigor, warm enough to feel approachable rather than sterile.

The background is not pure white but a warm linen (`#F5F0EB`) with subtle sandy undertones, evoking the feeling of quality paper in a well-made medical reference. Text is a deep slate (`#1E293B`) rather than pure black, reducing eye strain for dense clinical content. The amber accent (`#B45309`) brings warmth and draws attention to key findings, while emerald (`#059669`) signals positive outcomes and clinical confidence. A warm stone gray (`#78716C`) provides the muted mid-tone for secondary information and annotations.

**Key Characteristics:**
- Warm linen background — not white, not cream, a clinical warmth
- DM Sans for body (clean, medical-grade readability) + Lora for display (editorial gravitas)
- Amber accent for emphasis, alerts, and fever-related visual metaphors
- Emerald for positive outcomes, resolved diagnoses, good prognosis
- Deep slate text at near-black warmth — never pure `#000000`
- Restrained shadows with warm undertones (stone-gray based)
- 8px spacing grid, generous whitespace for dense medical content
- Rounded corners at 8-12px — approachable but not playful

## 2. Color Palette & Roles

### Core Colors

| Name | Hex | Role |
|------|-----|------|
| **Warm Linen** | `#F5F0EB` | Primary background, slide canvas |
| **Amber** | `#B45309` | Primary accent, emphasis, fever/alert metaphor |
| **Emerald** | `#059669` | Positive outcomes, success, resolved diagnosis |
| **Deep Slate** | `#1E293B` | Primary text, headings |
| **Warm Stone** | `#78716C` | Secondary text, annotations, muted labels |

### Derived Colors

| Name | Hex | Derivation | Role |
|------|-----|------------|------|
| **Amber Hover** | `#92400E` | Amber -20% lightness | Button hover, link hover |
| **Amber Light** | `#FEF3C7` | Amber 12% tint | Badge background, highlight strip |
| **Amber Muted** | `#D97706` | Amber +10% lightness | Secondary amber, warm accent |
| **Emerald Hover** | `#047857` | Emerald -10% lightness | Success hover state |
| **Emerald Light** | `#D1FAE5` | Emerald 12% tint | Positive badge background |
| **Slate Light** | `#F1F5F9` | Slate 5% tint | Code block background, card tint |
| **Warm Linen Dark** | `#E7E0D8` | Linen -8% lightness | Divider, subtle border |
| **Deep Dark** | `#0F172A` | Slate -30% lightness | Dark section background |

### Semantic Colors

| Purpose | Hex | Name | Notes |
|---------|-----|------|-------|
| **Fever / Alert** | `#DC2626` | Clinical Red | Temperature alerts, critical findings |
| **Warning** | `#D97706` | Amber Warning | Caution states, pending workup |
| **Success / Resolved** | `#059669` | Emerald | Diagnosis confirmed, good prognosis |
| **Info / Neutral** | `#2563EB` | Clinical Blue | References, links, neutral data |

### Developer Tokens (CSS Variables)

```css
:root {
  --color-bg: #F5F0EB;
  --color-bg-dark: #0F172A;
  --color-text: #1E293B;
  --color-text-muted: #78716C;
  --color-accent: #B45309;
  --color-accent-hover: #92400E;
  --color-accent-light: #FEF3C7;
  --color-success: #059669;
  --color-success-light: #D1FAE5;
  --color-error: #DC2626;
  --color-info: #2563EB;
  --color-border: #E7E0D8;
  --color-surface: #FFFFFF;
  --color-slate-light: #F1F5F9;

  --font-display: 'Lora', 'Noto Serif TC', Georgia, serif;
  --font-body: 'DM Sans', 'Noto Sans TC', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}
```

## 3. Typography Rules

### Font Families

- **Display**: Lora (serif) — editorial gravitas for titles and key statements
- **Body**: DM Sans (sans-serif) — clean medical-grade readability
- **Mono**: JetBrains Mono — diagnostic criteria, lab values, algorithms
- **CJK Fallback**: Noto Serif TC (display), Noto Sans TC (body)

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Use |
|------|------|------|--------|-------------|----------------|-----|
| Display Hero | Lora | 56px (3.5rem) | 700 | 1.10 | -1.5px | Slide title, presentation name |
| Section Title | Lora | 40px (2.5rem) | 700 | 1.15 | -1.0px | Section headers (e.g., "Etiological Spectrum") |
| Slide Title | Lora | 32px (2.0rem) | 600 | 1.20 | -0.5px | Individual slide headings |
| Subtitle | DM Sans | 24px (1.5rem) | 500 | 1.30 | -0.25px | Slide subtitles, key statements |
| Body Large | DM Sans | 20px (1.25rem) | 400 | 1.60 | normal | Primary reading text on slides |
| Body | DM Sans | 16px (1.0rem) | 400 | 1.60 | normal | Standard content, descriptions |
| Body Bold | DM Sans | 16px (1.0rem) | 700 | 1.60 | normal | Emphasized terms, drug names |
| Caption | DM Sans | 14px (0.875rem) | 400 | 1.50 | 0.1px | Source citations, footnotes |
| Badge | DM Sans | 12px (0.75rem) | 600 | 1.33 | 0.2px | Category labels, status tags |
| Data Value | JetBrains Mono | 28px (1.75rem) | 700 | 1.20 | -0.5px | Key statistics (e.g., "51%", "91%") |
| Code/Criteria | JetBrains Mono | 14px (0.875rem) | 400 | 1.60 | normal | Diagnostic criteria, lab ranges |

### Principles

- **Serif for authority**: Lora headings convey academic weight without coldness
- **Sans for clarity**: DM Sans body ensures readability of dense clinical content
- **Mono for precision**: JetBrains Mono for data, criteria, and algorithms — signals exactness
- **Generous line height**: 1.60 for body text; medical content needs breathing room
- **Negative tracking at display**: -1.5px at 56px, relaxing to normal at 16px

## 4. Component Stylings

### Buttons

**Primary (Amber)**
- Background: `var(--color-accent)` (`#B45309`)
- Text: `#FFFFFF`
- Padding: 12px 24px
- Radius: `var(--radius-md)` (10px)
- Hover: `var(--color-accent-hover)` (`#92400E`)
- Transition: background 0.2s ease

**Outline**
- Background: transparent
- Border: 2px solid `var(--color-accent)`
- Text: `var(--color-accent)`
- Hover: filled amber background, white text

**Ghost**
- Background: transparent
- Text: `var(--color-text-muted)`
- Hover: background `var(--color-accent-light)`

**Success**
- Background: `var(--color-success)` (`#059669`)
- Text: `#FFFFFF`
- Use: Positive outcomes, "Good Prognosis" indicators

### Cards

- Background: `var(--color-surface)` (`#FFFFFF`)
- Border: 1px solid `var(--color-border)`
- Radius: `var(--radius-md)`
- Shadow: `0 1px 3px rgba(120, 113, 108, 0.06), 0 4px 12px rgba(120, 113, 108, 0.04)`
- Padding: `var(--spacing-lg)` (24px)

### Data Callout Box

- Background: `var(--color-accent-light)` (`#FEF3C7`)
- Border-left: 4px solid `var(--color-accent)`
- Radius: 0 `var(--radius-sm)` `var(--radius-sm)` 0
- Use: Key statistics, important findings

### Clinical Alert Box

- Background: `#FEF2F2` (red-5)
- Border-left: 4px solid `var(--color-error)`
- Use: Critical findings, red flags, fever alerts

### Positive Outcome Box

- Background: `var(--color-success-light)` (`#D1FAE5`)
- Border-left: 4px solid `var(--color-success)`
- Use: Good prognosis indicators, resolved cases

### Badges / Tags

- Padding: 4px 12px
- Radius: `var(--radius-full)` (9999px)
- Font: Badge size (12px / 600)
- Variants:
  - **Infection**: amber bg + amber text
  - **Inflammatory**: blue bg + blue text
  - **Neoplasm**: red bg + red text
  - **Miscellaneous**: stone bg + stone text
  - **Undiagnosed**: slate-light bg + slate text

### Tables

- Header: `var(--color-bg)` background, `var(--color-text)` 700 weight
- Rows: alternating white / `var(--color-bg)` striping
- Border: 1px solid `var(--color-border)`
- Cell padding: 12px 16px

### Divider

- Standard: 1px solid `var(--color-border)` (`#E7E0D8`)
- Decorative: `◆ ✦ ◆` in `var(--color-text-muted)` with 0.4 opacity

## 5. Layout Principles

- **Slide aspect ratio**: 16:9 (1920×1080)
- **Content max-width**: 1200px centered
- **Slide padding**: 64px horizontal, 48px vertical
- **Grid**: 8px base unit
- **Spacing scale**: 4 / 8 / 16 / 24 / 32 / 48 / 64px
- **Column layouts**: single column for text-heavy, 2-column for comparison, 3-column for category cards
- **Generous whitespace**: Medical content is dense — let it breathe

## 6. Depth & Elevation

| Level | Shadow | Use |
|-------|--------|-----|
| Level 0 | none | Flat surfaces, slide background |
| Level 1 | `0 1px 2px rgba(120,113,108,0.04)` | Subtle card edge |
| Level 2 | `0 1px 3px rgba(120,113,108,0.06), 0 4px 12px rgba(120,113,108,0.04)` | Standard card |
| Level 3 | `0 4px 12px rgba(120,113,108,0.08), 0 12px 28px rgba(120,113,108,0.06)` | Elevated card, hover state |
| Level 4 | `0 8px 24px rgba(120,113,108,0.10), 0 20px 48px rgba(120,113,108,0.08)` | Modal, focused element |

All shadows use warm stone-gray base (`rgb(120,113,108)`) instead of pure black.

## 7. Do's and Don'ts

### Do's
1. Use Lora for headings to establish editorial authority
2. Use amber callout boxes for key statistics and findings
3. Use emerald for positive outcomes and resolved diagnoses
4. Use warm linen background — never pure white for slides
5. Use JetBrains Mono for diagnostic criteria and lab values
6. Leave generous whitespace between clinical data points
7. Use the 5-category badge system for etiological classification
8. Use decorative dividers (`◆ ✦ ◆`) sparingly between major sections
9. Maintain ≥4.5:1 contrast ratio for all text on backgrounds
10. Use data callout boxes for statistics that should stand out

### Don'ts
1. Don't use pure black (`#000000`) — always use Deep Slate (`#1E293B`)
2. Don't use pure white (`#FFFFFF`) for slide backgrounds — use Warm Linen
3. Don't mix more than 2 accent colors on a single slide
4. Don't use red for anything other than clinical alerts/fever
5. Don't use playful or bouncy animations — keep motion restrained
6. Don't put more than 5 bullet points per slide
7. Don't use small text (<14px) for anything the audience needs to read live
8. Don't use gradient backgrounds — this is editorial, not tech
9. Don't center-align body text — left-align for readability
10. Don't skip source citations — medical content needs attribution

## 8. Responsive Behavior

| Breakpoint | Width | Behavior |
|------------|-------|----------|
| Desktop (default) | ≥1024px | 16:9 slide, full layout |
| Tablet | 768–1023px | Slight padding reduction, 2-col → 1-col |
| Mobile | <768px | 9:16 or scroll view, enlarged touch targets |

- Font sizes scale down 15% on tablet, 25% on mobile
- Data callout boxes stack vertically on mobile
- Tables become horizontally scrollable on small screens
- Touch targets minimum 44×44px
- Slide navigation buttons ≥48px on mobile

## 9. Agent Prompt Guide

### Quick Color Reference

```
Background: #F5F0EB (warm linen)
Text: #1E293B (deep slate)
Muted: #78716C (warm stone)
Accent: #B45309 (amber)
Success: #059669 (emerald)
Alert: #DC2626 (clinical red)
Info: #2563EB (clinical blue)
Border: #E7E0D8 (warm linen dark)
Surface: #FFFFFF (white cards on linen bg)
Dark bg: #0F172A (deep dark)
```

### Ready-to-Use Prompts

**Medical Slide Deck**
```
Build a 16:9 HTML slide deck with warm linen background (#F5F0EB),
deep slate text (#1E293B), Lora serif headings, DM Sans body,
amber (#B45309) accent callouts, emerald (#059669) for positive outcomes.
Use JetBrains Mono for data values. Cards on white with warm stone shadows.
```

**Data Comparison Slide**
```
Create a 2-column comparison card layout on #F5F0EB background.
Left card: amber-accented (#B45309) with key statistic in JetBrains Mono 28px.
Right card: emerald-accented (#059669) with positive outcome.
Lora heading, DM Sans body, warm shadows using rgb(120,113,108).
```

**Clinical Algorithm Flowchart**
```
Design a vertical flowchart on warm linen (#F5F0EB).
Decision nodes: white cards with 10px radius, warm stone borders.
Yes/No paths: emerald (#059669) for positive, amber (#B45309) for continue.
Alert nodes: red-tinted (#FEF2F2) with red left border.
Text: DM Sans 16px, node titles in Lora 20px 600.
```

**Dark Section (Key Takeaway)**
```
Full-width dark section with #0F172A background.
Heading in Lora 40px 700, color #F5F0EB.
Key points in DM Sans 20px, color rgba(245,240,235,0.8).
Amber (#B45309) accent for numbered list markers.
Emerald pill badges for positive outcomes.
```

### Image Generation Keywords
```
medical illustration, warm tones, editorial style, textbook quality,
amber and emerald palette, linen paper texture, clinical diagram,
humanistic medicine, modern healthcare, warm slate aesthetic
```