mirror of
https://github.com/jhbruhn/respira.git
synced 2026-01-27 02:13:41 +00:00
0dbfc751cb
Implemented comprehensive responsive design improvements for tablet support and simplified typography from 12 different font sizes to a clean 5-level hierarchy using only standard Tailwind classes. Responsive improvements: - Canvas height now adapts: 400px (mobile) → 500px (tablet) → 600px (desktop) - Header stacks vertically on tablets, side-by-side on desktop (1024px+) - WorkflowStepper scales appropriately for smaller screens - Canvas overlays are more compact on mobile/tablet - All components use responsive spacing and padding Typography system redesign: - Reduced from 12 sizes to 5 levels (Display, Heading, Subheading, Body, Label) - Removed arbitrary pixel values (text-[7px], text-[9px], text-[10px], etc.) - All text now uses standard Tailwind classes (text-xs, text-sm, text-base, text-lg, text-xl) - Minimum text size is now 12px (text-xs) for better accessibility - Buttons upgraded to text-sm (14px) for improved touch targets - Consistent responsive scaling for top-level headers only Added docs/TYPOGRAPHY_SYSTEM.md with usage guidelines and component mapping. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
196 lines
6.8 KiB
Markdown
196 lines
6.8 KiB
Markdown
# Respira Typography System
|
|
|
|
## Current Problems
|
|
❌ 12 different font sizes including arbitrary values (7px, 9px, 10px, 11px, 13px)
|
|
❌ Inconsistent hierarchy - unclear when to use which size
|
|
❌ Poor accessibility - text as small as 7px
|
|
❌ Responsive scaling is inconsistent
|
|
|
|
## New Typography System (Tailwind Classes Only)
|
|
|
|
### **5-Level Hierarchy**
|
|
|
|
```
|
|
Level Desktop (lg:) Mobile/Tablet Weight Usage
|
|
─────────────────────────────────────────────────────────────────────────────────
|
|
Display text-xl (20px) text-lg (18px) font-bold App title, page headers
|
|
Heading text-lg (18px) text-base (16px) font-semibold Section titles, dialogs
|
|
Subheading text-sm (14px) text-sm (14px) font-semibold Card titles
|
|
Body text-sm (14px) text-sm (14px) font-medium Content, buttons
|
|
Label text-xs (12px) text-xs (12px) font-medium Metadata, helpers, tags
|
|
```
|
|
|
|
**Key Decisions:**
|
|
- ✅ **No custom pixel sizes** - only Tailwind standards
|
|
- ✅ **Minimum 12px** - text-xs (12px) is the smallest size (accessible)
|
|
- ✅ **Body = text-sm** - 14px is optimal for reading and touch targets
|
|
- ✅ **Consistent responsive** - most don't need breakpoints except Display/Heading
|
|
|
|
### **Font Weight System**
|
|
```
|
|
Display: font-bold (700) - Maximum emphasis
|
|
Heading: font-semibold (600) - Section headers
|
|
Subheading: font-semibold (600) - Card/component titles
|
|
Body: font-medium (500) - Interactive elements (buttons)
|
|
Body: font-normal (400) - Static text
|
|
Label: font-medium (500) - Small but important
|
|
Label: font-normal (400) - Decorative/secondary
|
|
```
|
|
|
|
---
|
|
|
|
## Component Mapping
|
|
|
|
### **App.tsx**
|
|
| Element | Old | New |
|
|
|---------|-----|-----|
|
|
| "Respira" title | text-lg | text-xl lg:text-xl (Display) |
|
|
| Serial number | text-sm | text-xs (Label) |
|
|
| "Not Connected" | text-sm | text-xs (Label) |
|
|
| Disconnect button | text-xs | text-sm (Body) |
|
|
| Status badge | text-xs | text-xs (Label) |
|
|
| Error message | text-sm | text-sm (Body) |
|
|
| "Pattern Preview" h2 | text-xl | text-lg lg:text-lg (Heading) |
|
|
| Empty state title | text-xl | text-lg (Heading) |
|
|
| Empty state body | text-sm | text-sm (Body) |
|
|
| Feature indicators | text-xs | text-xs (Label) |
|
|
|
|
### **FileUpload.tsx**
|
|
| Element | Old | New |
|
|
|---------|-----|-----|
|
|
| "Pattern File" title | text-sm | text-sm font-semibold (Subheading) |
|
|
| Filename | text-xs | text-xs (Label) |
|
|
| Stats labels | text-xs | text-xs (Label) |
|
|
| Button text | text-xs | text-sm (Body) |
|
|
| "Colors:" label | text-xs | text-xs (Label) |
|
|
| Error messages | text-xs | text-sm (Body) |
|
|
| Upload progress | text-xs | text-xs (Label) |
|
|
| **Remove:** text-[7px] badge → text-xs |
|
|
|
|
### **PatternCanvas.tsx**
|
|
| Element | Old | New |
|
|
|---------|-----|-----|
|
|
| "Pattern Preview" | text-sm | text-sm font-semibold (Subheading) |
|
|
| Dimensions | text-xs | text-xs (Label) |
|
|
| "Colors" header | text-[10px] sm:text-xs | text-xs (Label) |
|
|
| Color labels | text-[10px] sm:text-[11px] | text-xs (Label) |
|
|
| Thread metadata | text-[9px] | text-xs (Label) |
|
|
| "Pattern Position" | text-[10px] sm:text-[11px] | text-xs (Label) |
|
|
| "LOCKED" badge | text-[9px] sm:text-[10px] | text-xs (Label) |
|
|
| Coordinates (X/Y) | text-[11px] sm:text-[13px] | text-sm (Body) |
|
|
| Help text | text-[9px] sm:text-[10px] | text-xs (Label) |
|
|
| Zoom % | text-[11px] sm:text-[13px] | text-sm (Body) |
|
|
|
|
### **ProgressMonitor.tsx**
|
|
| Element | Old | New |
|
|
|---------|-----|-----|
|
|
| "Progress" title | text-sm | text-sm font-semibold (Subheading) |
|
|
| Block labels | text-xs | text-xs (Label) |
|
|
| Stitch counts | text-xs | text-xs (Label) |
|
|
| Button text | text-xs | text-sm (Body) |
|
|
|
|
### **WorkflowStepper.tsx**
|
|
| Element | Old | New |
|
|
|---------|-----|-----|
|
|
| Step numbers | text-[10px] lg:text-xs | text-xs (Label) |
|
|
| Step labels | text-[10px] lg:text-xs | text-xs (Label) |
|
|
|
|
### **NextStepGuide.tsx**
|
|
| Element | Old | New |
|
|
|---------|-----|-----|
|
|
| Step titles | text-lg | text-lg sm:text-base (Heading) |
|
|
| Instructions | text-sm | text-sm (Body) |
|
|
| Error codes | text-xs | text-xs font-mono (Label) |
|
|
|
|
### **PatternSummaryCard.tsx**
|
|
| Element | Old | New |
|
|
|---------|-----|-----|
|
|
| "Active Pattern" | text-sm | text-sm font-semibold (Subheading) |
|
|
| Filename | text-xs | text-xs (Label) |
|
|
| Stats | text-xs | text-xs (Label) |
|
|
| Button text | text-xs | text-sm (Body) |
|
|
| **Remove:** text-[7px] badge → text-xs |
|
|
|
|
### **MachineConnection.tsx**
|
|
| Element | Old | New |
|
|
|---------|-----|-----|
|
|
| Card titles | text-sm | text-sm font-semibold (Subheading) |
|
|
| Helper text | text-xs | text-xs (Label) |
|
|
| Button text | text-xs | text-sm (Body) |
|
|
| Error details | text-[10px] | text-xs (Label) |
|
|
|
|
### **ConfirmDialog.tsx**
|
|
| Element | Old | New |
|
|
|---------|-----|-----|
|
|
| Dialog title | text-xl | text-lg (Heading) |
|
|
| Button text | text-sm | text-sm (Body) |
|
|
|
|
### **BluetoothDevicePicker.tsx**
|
|
| Element | Old | New |
|
|
|---------|-----|-----|
|
|
| Dialog title | text-xl | text-lg (Heading) |
|
|
| Device names | text-sm | text-sm (Body) |
|
|
| Device IDs | text-xs | text-xs (Label) |
|
|
| Button text | text-sm | text-sm (Body) |
|
|
|
|
---
|
|
|
|
## Benefits
|
|
|
|
✅ **5 sizes only** - Down from 12 (much cleaner)
|
|
✅ **Standard Tailwind** - No custom pixel values
|
|
✅ **Accessible** - Minimum 12px (text-xs)
|
|
✅ **Touch-friendly** - Buttons use text-sm (14px)
|
|
✅ **Clear hierarchy** - Semantic naming (Display → Heading → Subheading → Body → Label)
|
|
✅ **Easy to maintain** - Standard classes everyone knows
|
|
✅ **Consistent responsive** - Only Display and Heading scale down
|
|
|
|
---
|
|
|
|
## Implementation Rules
|
|
|
|
### **When to use each level:**
|
|
|
|
**Display (text-xl/text-lg)** - Only for:
|
|
- Main app title ("Respira")
|
|
- Top-level page headers
|
|
|
|
**Heading (text-lg/text-base)** - For:
|
|
- Section headers ("Pattern Preview", "Step 1: Connect")
|
|
- Dialog titles
|
|
- Empty state titles
|
|
- Major workflow steps
|
|
|
|
**Subheading (text-sm semibold)** - For:
|
|
- Card component titles ("Pattern File", "Active Pattern", "Progress")
|
|
- Sub-section headers within cards
|
|
|
|
**Body (text-sm)** - For:
|
|
- Primary readable content
|
|
- Button labels (interactive!)
|
|
- Error messages
|
|
- Instructions and descriptions
|
|
- Input fields
|
|
|
|
**Label (text-xs)** - For:
|
|
- Metadata (filenames, dimensions, stitch counts)
|
|
- Field labels ("Size:", "Stitches:", "Colors:")
|
|
- Status badges
|
|
- Helper text
|
|
- Timestamps
|
|
- Tags and small indicators
|
|
|
|
---
|
|
|
|
## Responsive Strategy
|
|
|
|
**Most text doesn't need responsive variants:**
|
|
- Body (text-sm) stays the same
|
|
- Label (text-xs) stays the same
|
|
- Subheading (text-sm) stays the same
|
|
|
|
**Only top-level headers scale:**
|
|
- Display: `text-lg lg:text-xl` (18px → 20px)
|
|
- Heading: `text-base lg:text-lg` (16px → 18px)
|
|
|
|
This creates a subtle hierarchy shift on desktop without fragmenting the system.
|