1# Layout Patterns
2 
325 slide layouts with CSS structures and animation classes.
4 
5## Layout Selection by Use Case
6 
7| Layout | Use Case | Animation |
8|--------|----------|-----------|
9| Title Slide | Opening/first impression | `animate-fade-up` |
10| Problem Statement | Establish pain point | `animate-stagger` |
11| Solution Overview | Introduce solution | `animate-scale` |
12| Feature Grid | Show capabilities (3-6 cards) | `animate-stagger` |
13| Metrics Dashboard | Display KPIs (3-4 metrics) | `animate-stagger-scale` |
14| Comparison Table | Compare options | `animate-fade-up` |
15| Timeline Flow | Show progression | `animate-stagger` |
16| Team Grid | Introduce people | `animate-stagger` |
17| Quote Testimonial | Customer endorsement | `animate-fade-up` |
18| Two Column Split | Compare/contrast | `animate-fade-up` |
19| Big Number Hero | Single powerful metric | `animate-count` |
20| Product Screenshot | Show product UI | `animate-scale` |
21| Pricing Cards | Present tiers | `animate-stagger` |
22| CTA Closing | Drive action | `animate-pulse` |
23 
24## CSS Structures
25 
26### Title Slide
27```css
28.slide-title {
29    display: flex;
30    flex-direction: column;
31    justify-content: center;
32    align-items: center;
33    text-align: center;
34}
35```
36 
37### Two Column Split
38```css
39.slide-split {
40    display: grid;
41    grid-template-columns: 1fr 1fr;
42    gap: 48px;
43    align-items: center;
44}
45@media (max-width: 768px) {
46    .slide-split { grid-template-columns: 1fr; gap: 24px; }
47}
48```
49 
50### Feature Grid (3 columns)
51```css
52.slide-features {
53    display: grid;
54    grid-template-columns: repeat(3, 1fr);
55    gap: 24px;
56}
57@media (max-width: 768px) {
58    .slide-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
59}
60@media (max-width: 480px) {
61    .slide-features { grid-template-columns: 1fr; }
62}
63```
64 
65### Metrics Dashboard (4 columns)
66```css
67.slide-metrics {
68    display: grid;
69    grid-template-columns: repeat(4, 1fr);
70    gap: 16px;
71}
72@media (max-width: 768px) {
73    .slide-metrics { grid-template-columns: repeat(2, 1fr); }
74}
75@media (max-width: 480px) {
76    .slide-metrics { grid-template-columns: 1fr; }
77}
78```
79 
80## Component Variants
81 
82### Card Styles
83| Style | CSS Class | Use For |
84|-------|-----------|---------|
85| Icon Left | `.card-icon-left` | Features with icons |
86| Accent Bar | `.card-accent-bar` | Highlighted features |
87| Metric Card | `.card-metric` | Numbers/stats |
88| Avatar Card | `.card-avatar` | Team members |
89| Pricing Card | `.card-pricing` | Price tiers |
90 
91### Metric Styles
92| Style | Effect |
93|-------|--------|
94| `gradient-number` | Gradient text on numbers |
95| `oversized` | Extra large (120px+) |
96| `sparkline` | Small inline chart |
97| `funnel-numbers` | Conversion stages |
98 
99## Visual Treatments
100 
101| Treatment | When to Use |
102|-----------|-------------|
103| `gradient-glow` | Title slides, CTAs |
104| `subtle-border` | Problem statements |
105| `icon-top` | Feature grids |
106| `screenshot-shadow` | Product screenshots |
107| `popular-highlight` | Pricing (scale 1.05) |
108| `bg-overlay` | Background images |
109| `contrast-pair` | Before/after |
110| `logo-grayscale` | Client logos |
111 
112## Search Commands
113 
114```bash
115# Find layout for specific use
116python .claude/skills/design-system/scripts/search-slides.py "metrics dashboard" -d layout
117 
118# Contextual recommendation
119python .claude/skills/design-system/scripts/search-slides.py "traction slide" \
120  --context --position 4 --total 10
121```
122 
123## Layout Decision Flow
124 
125```
1261. What's the slide goal?
127   └─> Search layout-logic.csv
128 
1292. What emotion should it trigger?
130   └─> Search color-logic.csv
131 
1323. What's the content type?
133   └─> Search typography.csv
134 
1354. Should it break pattern?
136   └─> Check position (1/3, 2/3) → Use full-bleed
137```
138