# Design Elevation Protocol

A systematic process for transforming functional outputs into exceptional designs. Follow these phases in order, spending appropriate time on each based on the output complexity.

## Phase 1: Foundation Analysis (2-3 minutes)

### Content Audit
1. **Identify the core message**
   - What's the single most important thing?
   - What are the supporting points?
   - What can be removed?

2. **Map the information hierarchy**
   - Primary: What must be seen first?
   - Secondary: What supports the primary?
   - Tertiary: What's nice to have?
   - Metadata: What's functional but not focal?

3. **Determine the appropriate design language**
   - Corporate → Clean, trustworthy, stable
   - Technical → Precise, systematic, data-focused
   - Creative → Expressive, dynamic, unexpected
   - Analytical → Clear, logical, evidence-based

### Context Assessment
- **Audience**: Technical, executive, general?
- **Environment**: Screen, print, projection?
- **Duration**: Glance, scan, or study?
- **Action**: What should they do after viewing?

## Phase 2: Structure Design (3-5 minutes)

### Grid Establishment
1. **Choose grid complexity**
   - Simple (2-4 columns): Documents, simple layouts
   - Moderate (8-12 columns): Presentations, reports
   - Complex (12-16 columns): Dashboards, interfaces

2. **Define spatial units**
   ```
   Base unit: 8px (or 4px for dense interfaces)
   Spacing scale: 1x, 2x, 3x, 4x, 6x, 8x, 12x
   Example: 8, 16, 24, 32, 48, 64, 96px
   ```

3. **Set margins and safe areas**
   - Minimum: 2-3 grid columns for margins
   - Breathing room: 20-30% of total space
   - Consistent internal padding

### Layout Architecture
1. **Zone definition**
   - Header/identity zone
   - Content/focus zone
   - Supporting/context zone
   - Navigation/action zone

2. **Flow planning**
   - Natural reading path (F or Z pattern)
   - Hierarchy through position
   - Grouping related elements

3. **Balance decisions**
   - Symmetrical for stability
   - Asymmetrical for dynamics
   - Radial for focus
   - Mosaic for variety

## Phase 3: Typography System (5-7 minutes)

### Type Selection
1. **Choose primary typeface**
   - Serif: Traditional, editorial, trustworthy
   - Sans-serif: Modern, clean, universal
   - Display: Unique, branded, memorable
   
   **Premium choices**:
   - Sans: Inter, SF Pro, Helvetica Neue, Akkurat
   - Serif: Minion, Sabon, Tiempos, Freight
   - Display: Pangram, Founders Grotesk, GT America

2. **Set type scale**
   ```
   Modular scale (1.25x - Major Third):
   12 → 15 → 19 → 24 → 30 → 37 → 46 → 58 → 72
   
   Modular scale (1.333x - Perfect Fourth):
   12 → 16 → 21 → 28 → 38 → 50 → 67 → 89
   
   Modular scale (1.5x - Perfect Fifth):
   12 → 18 → 27 → 40 → 60 → 90
   ```

3. **Define styles**
   ```css
   /* Display */
   font-size: 48-72px;
   font-weight: 300-400;
   line-height: 1.0-1.2;
   letter-spacing: -0.02em;
   
   /* Heading */
   font-size: 24-36px;
   font-weight: 500-600;
   line-height: 1.2-1.3;
   letter-spacing: -0.01em;
   
   /* Body */
   font-size: 15-18px;
   font-weight: 400-450;
   line-height: 1.5-1.7;
   letter-spacing: 0;
   
   /* Caption */
   font-size: 12-14px;
   font-weight: 400-500;
   line-height: 1.4-1.5;
   letter-spacing: 0.01em;
   ```

### Typography Refinement
1. **Optical adjustments**
   - Tighten display type tracking
   - Adjust line height for measure
   - Kern problematic pairs
   - Hang punctuation

2. **Hierarchy reinforcement**
   - Size contrast (minimum 1.5x jump)
   - Weight variation (300, 400, 600, 700)
   - Color/opacity changes
   - Spacing emphasis

## Phase 4: Color Development (3-5 minutes)

### Color Strategy
1. **Build neutral foundation**
   ```
   Near-blacks: #0a0a0a, #1a1a1a, #2d2d2d
   Mid-grays: #666, #999, #ccc
   Near-whites: #f5f5f5, #f9f9f9, #fcfcfc
   ```

2. **Add primary accent**
   - Choose brand-appropriate hue
   - Create tint/shade variations (5-7 steps)
   - Test against backgrounds
   - Ensure accessibility (4.5:1 minimum)

3. **Develop supporting palette**
   - Secondary: Complement or analogous
   - Semantic: Success, warning, error
   - Data: 5-7 categorical colors
   - Apply 60-30-10 rule

### Color Application
1. **Functional use**
   - Navigation and wayfinding
   - State indication
   - Data differentiation
   - Emphasis and hierarchy

2. **Atmospheric use**
   - Subtle backgrounds
   - Gradient overlays
   - Depth through opacity
   - Temperature for mood

## Phase 5: Data Visualization Elevation (5-8 minutes)

*Skip if no charts, tables, or data displays are present.*

### Data-Ink Audit (Tufte)
1. **Maximize data-ink ratio**
   - Remove all background fills from chart areas
   - Eliminate or lighten gridlines to `border-gray-100`
   - Strip chart borders and bounding boxes
   - Question every non-data pixel: does it help the reader?

2. **Eliminate chartjunk**
   - No 3D effects on any chart type
   - No gradient fills on bars or areas
   - No decorative illustrations mixed with data
   - No moiré patterns (hatching, crosshatching)
   - No redundant encoding (color AND pattern AND label for same dimension)

### Chart Selection & Structure
3. **Verify chart type matches data relationship**
   - Comparison → bar chart or dot plot
   - Trend → line chart
   - Distribution → histogram or strip plot
   - Part-to-whole → stacked bar or waffle (not pie for >5 slices)
   - Correlation → scatter plot (never dual-axis)

4. **Apply small multiples where appropriate**
   - 4+ series in one chart? → split into small multiples
   - Same scales across all panels (critical)
   - Use `grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4`

### Data Storytelling
5. **Title states the finding, not the chart type**
   - "Revenue grew 23% after the pricing change" NOT "Revenue by Quarter"
   - Subtitle provides methodology/context in `text-sm text-gray-500`

6. **Label directly, minimize legends**
   - Direct labels on data series when possible (end-of-line labels)
   - If legend required, place near the data it describes
   - Use the gray-out highlight technique for emphasis

7. **Format numbers consistently**
   - Use `tabular-nums` for all number columns
   - Abbreviate large numbers: $2.4M, 14.2K
   - Percentages: one decimal with sign (+12.3%, -4.1%)
   - Color deltas: `text-emerald-600` for positive, `text-rose-600` for negative

### Dashboard Composition
8. **Structure dashboards as arguments**
   - KPI bar (top): 3-5 headline numbers with trend indicators
   - Primary chart: the main story
   - Supporting charts: 2-3 smaller context charts
   - Detail layer: tables for drill-down
   - Source attribution in `text-xs text-gray-400`

## Phase 6: Visual Enhancement (5-8 minutes)

### Depth and Dimension
1. **Shadow system**
   ```css
   /* Subtle */
   box-shadow: 0 1px 3px rgba(0,0,0,0.08);
   
   /* Medium */
   box-shadow: 
     0 2px 4px rgba(0,0,0,0.06),
     0 4px 8px rgba(0,0,0,0.08);
   
   /* Elevated */
   box-shadow: 
     0 4px 6px rgba(0,0,0,0.05),
     0 10px 20px rgba(0,0,0,0.1);
   ```

2. **Layering**
   - Background layer (subtle texture/gradient)
   - Content layer (main elements)
   - Overlay layer (emphasis, annotations)
   - Interactive layer (hover states, tooltips)

### Details and Polish
1. **Micro-interactions**
   - Hover states (lift, glow, reveal)
   - Transitions (200-300ms, ease-out)
   - Loading states (skeleton, progress)
   - Success feedback (color, check, animation)

2. **Visual details**
   - Icons (consistent style, purposeful)
   - Dividers (subtle, functional)
   - Borders (considered width and color)
   - Corner radius (systematic: 4, 8, 12, 16px)

3. **Special touches**
   - Custom bullets or numbering
   - Decorated quotes
   - Subtle patterns or textures
   - Brand moments

## Phase 7: Optimization (3-5 minutes)

### Reduction Pass
1. **Remove the unnecessary**
   - Question every element
   - Eliminate redundancy
   - Simplify complex elements
   - Combine similar functions

2. **Clarify the essential**
   - Strengthen primary message
   - Improve contrast where needed
   - Refine alignment
   - Perfect spacing

### Consistency Check
1. **Systematic review**
   - All similar elements styled identically
   - Spacing follows the system
   - Colors from defined palette
   - Typography from defined scales

2. **Edge case handling**
   - Long text scenarios
   - Empty states
   - Error conditions
   - Responsive behavior

## Phase 8: Final Polish (2-3 minutes)

### Quality Assurance
1. **Technical checks**
   - All text readable (contrast)
   - Interactive elements obvious
   - Loading performance acceptable
   - Export quality appropriate

2. **Design checks**
   - Passes squint test
   - Hierarchy immediately clear
   - Feels cohesive throughout
   - Nothing feels default

### Elevation Verification
Ask yourself:
- Does this feel crafted or generated?
- Would a designer be proud of this?
- Has it moved beyond functional to beautiful?
- Does it exceed expectations?

## Time Investment Guide

### Quick Elevation (5-10 minutes)
- Focus on Phases 1, 3, 4
- Apply one strong technique
- Fix obvious defaults
- Add one surprise detail

### Standard Elevation (15-20 minutes)
- Complete Phases 1-5
- Apply multiple techniques
- Develop consistent system
- Polish key moments

### Deep Elevation (25-30 minutes)
- Complete all phases thoroughly
- Apply advanced techniques
- Create custom elements
- Perfect every detail

## Output Examples

### Before Elevation
- Default fonts and colors
- Even spacing throughout
- No clear hierarchy
- Functional but forgettable

### After Elevation
- Considered typography system
- Purposeful color palette
- Clear spatial rhythm
- Memorable and refined

## Remember

The goal isn't decoration but **intentional design**. Every choice should have a reason. When in doubt:
- Choose clarity over cleverness
- Choose system over one-offs
- Choose restraint over excess
- Choose refinement over features

The best design often feels like it was inevitable—like it couldn't have been any other way.