picasso-skill 1.2.0 → 1.3.1

package/skills/picasso/references/color-and-contrast.md

@@ -7,7 +7,9 @@
 4. Dark Mode
 5. Accessibility
 6. CSS Variables Pattern
-7. Common Mistakes
+7. Curated Color Palettes
+8. Wide Gamut Colors (P3)
+9. Common Mistakes
 
 ---
 
@@ -163,7 +165,254 @@ For component-level overrides:
 
 ---
 
-## 7. Common Mistakes
+## 7. Curated Color Palettes
+
+Ten tested OKLCH palettes ready to drop into any project. Each includes a complete token set. Copy the one that fits your domain, then adjust chroma and hue to taste.
+
+### 7.1 Warm Terracotta
+**Vibe**: Earthy, grounded, artisanal. Good for lifestyle brands, wellness, real estate, organic products.
+```css
+:root {
+  --surface-0: oklch(0.98 0.008 55);
+  --surface-1: oklch(0.95 0.012 55);
+  --text-primary: oklch(0.18 0.025 55);
+  --text-secondary: oklch(0.42 0.02 55);
+  --accent: oklch(0.58 0.16 45);
+  --accent-hover: oklch(0.52 0.18 45);
+  --accent-subtle: oklch(0.93 0.04 45);
+  --border: oklch(0.87 0.015 55);
+  --success: oklch(0.55 0.16 155);
+  --warning: oklch(0.68 0.16 75);
+  --error: oklch(0.55 0.20 25);
+}
+```
+
+### 7.2 Forest Green
+**Vibe**: Natural, sustainable, trustworthy. Good for fintech, health, environmental, agriculture.
+```css
+:root {
+  --surface-0: oklch(0.98 0.006 145);
+  --surface-1: oklch(0.96 0.01 145);
+  --text-primary: oklch(0.17 0.03 150);
+  --text-secondary: oklch(0.40 0.02 150);
+  --accent: oklch(0.52 0.14 155);
+  --accent-hover: oklch(0.46 0.16 155);
+  --accent-subtle: oklch(0.93 0.04 155);
+  --border: oklch(0.88 0.012 145);
+  --success: oklch(0.55 0.16 145);
+  --warning: oklch(0.66 0.16 80);
+  --error: oklch(0.55 0.20 25);
+}
+```
+
+### 7.3 Amber Gold
+**Vibe**: Premium, confident, optimistic. Good for finance, luxury SaaS, productivity tools.
+```css
+:root {
+  --surface-0: oklch(0.99 0.005 85);
+  --surface-1: oklch(0.96 0.01 85);
+  --text-primary: oklch(0.16 0.02 85);
+  --text-secondary: oklch(0.40 0.018 85);
+  --accent: oklch(0.68 0.18 75);
+  --accent-hover: oklch(0.62 0.20 75);
+  --accent-subtle: oklch(0.94 0.04 75);
+  --border: oklch(0.88 0.012 85);
+  --success: oklch(0.55 0.16 150);
+  --warning: oklch(0.68 0.18 75);
+  --error: oklch(0.55 0.20 28);
+}
+```
+
+### 7.4 Coral Salmon
+**Vibe**: Warm, energetic, approachable. Good for social apps, creative tools, food and hospitality.
+```css
+:root {
+  --surface-0: oklch(0.98 0.006 30);
+  --surface-1: oklch(0.96 0.01 30);
+  --text-primary: oklch(0.18 0.02 30);
+  --text-secondary: oklch(0.42 0.018 30);
+  --accent: oklch(0.65 0.20 25);
+  --accent-hover: oklch(0.58 0.22 25);
+  --accent-subtle: oklch(0.94 0.04 25);
+  --border: oklch(0.88 0.012 30);
+  --success: oklch(0.55 0.16 150);
+  --warning: oklch(0.66 0.16 75);
+  --error: oklch(0.52 0.22 20);
+}
+```
+
+### 7.5 Deep Teal
+**Vibe**: Calm, medical, authoritative. Good for health tech, enterprise SaaS, data platforms, legal.
+```css
+:root {
+  --surface-0: oklch(0.98 0.005 195);
+  --surface-1: oklch(0.96 0.008 195);
+  --text-primary: oklch(0.16 0.025 200);
+  --text-secondary: oklch(0.40 0.02 200);
+  --accent: oklch(0.52 0.12 195);
+  --accent-hover: oklch(0.46 0.14 195);
+  --accent-subtle: oklch(0.93 0.03 195);
+  --border: oklch(0.88 0.01 195);
+  --success: oklch(0.55 0.14 155);
+  --warning: oklch(0.66 0.16 75);
+  --error: oklch(0.55 0.20 25);
+}
+```
+
+### 7.6 Slate Blue
+**Vibe**: Professional, systematic, dependable. Good for project management, B2B SaaS, documentation.
+```css
+:root {
+  --surface-0: oklch(0.98 0.005 250);
+  --surface-1: oklch(0.96 0.008 250);
+  --text-primary: oklch(0.17 0.02 250);
+  --text-secondary: oklch(0.42 0.018 250);
+  --accent: oklch(0.55 0.14 250);
+  --accent-hover: oklch(0.49 0.16 250);
+  --accent-subtle: oklch(0.93 0.03 250);
+  --border: oklch(0.88 0.01 250);
+  --success: oklch(0.55 0.16 150);
+  --warning: oklch(0.66 0.16 75);
+  --error: oklch(0.55 0.20 25);
+}
+```
+
+### 7.7 Burgundy
+**Vibe**: Sophisticated, editorial, rich. Good for wine/food, publishing, luxury, fashion.
+```css
+:root {
+  --surface-0: oklch(0.98 0.006 10);
+  --surface-1: oklch(0.96 0.01 10);
+  --text-primary: oklch(0.16 0.025 10);
+  --text-secondary: oklch(0.40 0.02 10);
+  --accent: oklch(0.42 0.16 15);
+  --accent-hover: oklch(0.36 0.18 15);
+  --accent-subtle: oklch(0.93 0.04 15);
+  --border: oklch(0.87 0.012 10);
+  --success: oklch(0.55 0.16 150);
+  --warning: oklch(0.66 0.16 75);
+  --error: oklch(0.50 0.20 25);
+}
+```
+
+### 7.8 Sage
+**Vibe**: Soft, organic, restorative. Good for wellness, meditation, journaling, therapy platforms.
+```css
+:root {
+  --surface-0: oklch(0.98 0.006 130);
+  --surface-1: oklch(0.95 0.012 130);
+  --text-primary: oklch(0.20 0.02 130);
+  --text-secondary: oklch(0.42 0.018 130);
+  --accent: oklch(0.58 0.10 130);
+  --accent-hover: oklch(0.52 0.12 130);
+  --accent-subtle: oklch(0.93 0.03 130);
+  --border: oklch(0.88 0.01 130);
+  --success: oklch(0.55 0.14 150);
+  --warning: oklch(0.66 0.15 75);
+  --error: oklch(0.55 0.18 25);
+}
+```
+
+### 7.9 Charcoal with Orange Accent
+**Vibe**: Bold, industrial, high-contrast. Good for dev tools, gaming, analytics, creative coding.
+```css
+:root {
+  --surface-0: oklch(0.97 0.003 60);
+  --surface-1: oklch(0.94 0.005 60);
+  --text-primary: oklch(0.15 0.01 60);
+  --text-secondary: oklch(0.40 0.01 60);
+  --accent: oklch(0.65 0.22 55);
+  --accent-hover: oklch(0.58 0.24 55);
+  --accent-subtle: oklch(0.94 0.04 55);
+  --border: oklch(0.86 0.008 60);
+  --success: oklch(0.55 0.16 150);
+  --warning: oklch(0.66 0.18 70);
+  --error: oklch(0.55 0.22 25);
+}
+```
+
+### 7.10 Monochrome Black and White
+**Vibe**: Stark, typographic, gallery-like. Good for portfolios, photography, editorial, minimal SaaS.
+```css
+:root {
+  --surface-0: oklch(0.99 0.000 0);
+  --surface-1: oklch(0.96 0.000 0);
+  --text-primary: oklch(0.13 0.000 0);
+  --text-secondary: oklch(0.45 0.000 0);
+  --accent: oklch(0.15 0.000 0);
+  --accent-hover: oklch(0.25 0.000 0);
+  --accent-subtle: oklch(0.93 0.000 0);
+  --border: oklch(0.85 0.000 0);
+  --success: oklch(0.50 0.14 150);
+  --warning: oklch(0.62 0.14 75);
+  --error: oklch(0.50 0.18 25);
+}
+```
+
+For the monochrome palette, the accent is near-black. CTAs rely on fill weight (solid black buttons with white text) rather than color. Semantic colors (success, warning, error) break the monochrome intentionally so they remain functional.
+
+---
+
+## 8. Wide Gamut Colors (P3)
+
+### What is Display P3?
+Display P3 is a color space that covers roughly 25% more visible colors than sRGB. Modern Apple devices, most OLED screens, and recent monitors support it. Colors outside the sRGB gamut appear more vivid without being oversaturated.
+
+### CSS Syntax
+```css
+/* Display P3 via color() function */
+--accent: color(display-p3 0.92 0.34 0.15);       /* vivid orange impossible in sRGB */
+--success: color(display-p3 0.18 0.75 0.35);       /* richer green */
+--highlight: color(display-p3 1 0.85 0);            /* pure P3 yellow */
+```
+
+### Feature Detection
+```css
+@media (color-gamut: p3) {
+  :root {
+    --accent: color(display-p3 0.92 0.34 0.15);
+    --success: color(display-p3 0.18 0.75 0.35);
+  }
+}
+```
+
+### Progressive Enhancement Pattern
+Always define an sRGB fallback first, then override for wide gamut displays. This ensures every screen gets a reasonable color.
+
+```css
+:root {
+  /* sRGB fallback (works everywhere) */
+  --accent: oklch(0.65 0.22 35);
+  --success: oklch(0.55 0.18 150);
+  --highlight: oklch(0.82 0.18 90);
+}
+
+@media (color-gamut: p3) {
+  :root {
+    /* P3 override (wider gamut screens) */
+    --accent: oklch(0.65 0.27 35);          /* push chroma beyond sRGB limit */
+    --success: oklch(0.55 0.22 150);
+    --highlight: oklch(0.82 0.22 90);
+  }
+}
+```
+
+Note: OKLCH values automatically map to the widest gamut the browser and display support. Increasing chroma beyond ~0.15-0.20 (depending on hue) often pushes into P3 territory. This makes OKLCH the ideal space for progressive enhancement because you write one value and the browser resolves it to the best available gamut.
+
+### When to Use P3
+- Hero gradients and accent splashes where vibrancy matters
+- Success/error states that need to "pop" on capable screens
+- Brand colors that were designed in P3 (increasingly common)
+- Image overlays and tinted surfaces that blend with wide-gamut photography
+
+### When NOT to Use P3
+- Body text colors (perceptual difference is negligible)
+- Border and surface tokens (subtle differences, not worth the complexity)
+- Any context where the sRGB version already looks correct
+
+---
+
+## 9. Common Mistakes
 
 - Using pure black (#000) for text (use tinted near-black instead)
 - Using gray text on colored backgrounds (low contrast, hard to read)

package/skills/picasso/references/conversion-design.md

@@ -0,0 +1,193 @@
+# Conversion Design & Landing Page Reference
+
+## 1. Landing Page Anatomy
+
+### Hero Section Variations
+
+| Pattern | Best For | Key Spec |
+|---------|----------|----------|
+| **Split** (text left, visual right) | SaaS, B2B | 50/50 or 60/40 split; text column gets primary CTA |
+| **Centered** (text stacked over image) | Brand launches, simple products | Max 600-700px text width; single focal CTA below headline |
+| **Full-bleed media** (text overlay) | Lifestyle, hospitality, portfolios | 4.5:1 contrast on overlay text; darken overlay at 40-60% opacity |
+| **Video background** | High-engagement storytelling | Auto-mute; < 5s to first frame; fallback static image required |
+
+**Above-the-fold priorities (in order):** Value proposition headline, supporting subhead (1-2 sentences), primary CTA, trust signal (logo bar or stat).
+
+Users form an opinion in **50 milliseconds**. Every extra 100KB in hero media increases bounce by ~1.8%.
+
+### CTA Design
+
+- **Minimum size:** 44x44px (Apple/WCAG), 48x48px (Material).
+- **Color:** 3:1+ contrast ratio against background; prominence matters more than specific color.
+- **Placement:** Above fold in hero; repeat after mid-page value build; repeat near final content.
+- **Copy:** First-person ("Start my free trial") outperforms second-person by 10-90%.
+- **Repetition:** Single consistent CTA repeated 2-3 times, not multiple competing actions.
+
+### Social Proof Patterns
+
+| Type | Effectiveness | Placement |
+|------|--------------|-----------|
+| Star ratings + reviews | 82% influence | Near pricing/CTA |
+| Customer testimonials | 78% influence | After feature sections |
+| Video testimonials | +34% conversion lift | Mid-page or dedicated section |
+| Client logos | Trust signal | Directly below hero |
+| User count / stats | Up to +43% conversion | Hero section or sub-hero |
+| Security badges | Reduces abandonment | Near forms and payment |
+
+### Pricing Page Design
+
+**3 tiers optimal** (center-stage effect). Structure per card:
+1. Tier name + "best for" one-liner
+2. Price with billing toggle (default annual; show savings as % AND dollar)
+3. Primary CTA button (below price, above features)
+4. 8-12 core features with checkmarks/values
+
+**Highlight recommended tier:** Distinct background, "Most Popular" badge, border emphasis, or elevation. Produces 12-15% lift in mid-tier selection.
+
+---
+
+## 2. Conversion Psychology
+
+### Visual Hierarchy for Conversion
+
+Follow the **F-pattern**: headline, key benefit, and CTA along the top-left-to-bottom path. **Z-pattern** for simpler pages: logo top-left, nav CTA top-right, content center diagonal, conversion CTA bottom-right.
+
+### Scarcity & Urgency (Ethical Only)
+- Real-time inventory counts -- only truthful data.
+- Time-limited offers with visible countdown -- only genuine deadlines.
+- Social proof urgency ("42 people viewing") -- must reflect real data.
+
+### Trust Signals Hierarchy
+1. Security badges (SSL, payment logos) -- near checkout/forms.
+2. Money-back guarantees -- near CTA.
+3. Third-party reviews (G2, Trustpilot) -- 82% influence.
+4. Customer logos -- below hero.
+5. Certifications (SOC 2, GDPR, HIPAA) -- footer or trust section.
+
+### Friction Reduction
+- Each additional form field reduces completion by 3-5%.
+- Multi-step forms: 300% higher conversion on mobile vs single long form.
+- Progress bars: +20-30% form completion when visible.
+- Smart defaults: pre-fill known data; appropriate input types.
+- Single-column layout mandatory on mobile.
+- Inline validation on blur, not on submit.
+
+---
+
+## 3. Mobile Conversion Patterns
+
+### Sticky CTAs
+- Position 100-150px from bottom viewport, above gesture areas.
+- 10-20% conversion improvement on long pages.
+- Must not cover critical content; include dismiss option.
+- Pair with micro trust note: "No credit card required."
+
+### Thumb Zone Design
+- **Primary actions:** Lower-center of screen (natural thumb reach).
+- **Navigation:** Bottom bar with 3-5 destinations.
+- **Avoid:** Top corners for frequent actions.
+- **Tap targets:** Minimum 48px square with spacing.
+
+### Bottom Sheets & Swipe
+- Bottom sheets for secondary actions, filters, confirmations.
+- Swipe-to-dismiss for non-critical modals.
+- Swipe actions on list items for quick operations.
+
+### One-Tap Actions
+- Apple Pay / Google Pay for instant checkout.
+- Social login to reduce signup friction.
+- Quick-reply chips in notifications and chat.
+
+---
+
+## 4. Navigation & Information Architecture
+
+### Navigation by App Type
+
+| App Type | Primary Pattern | Key Feature |
+|----------|----------------|-------------|
+| **SaaS** | Left sidebar + top bar | Collapsible sidebar; breadcrumbs for depth |
+| **E-commerce** | Mega menu + category nav | Faceted filtering; persistent cart with count |
+| **Content** | Top nav + hamburger (mobile) | Search-forward; reading progress indicator |
+| **Social** | Bottom tab bar (mobile) | 3-5 tabs; notification badges; create center |
+
+### Search UX
+- Autocomplete after 2-3 characters; limit to 5-7 results.
+- Display recent searches on focus before typing.
+- Surface top 3-5 filters inline; bottom sheet for advanced.
+- No results: offer spelling corrections, related terms, category browsing.
+
+### Infinite Scroll vs Pagination
+
+| Criterion | Pagination | Infinite Scroll | Load More |
+|-----------|-----------|----------------|-----------|
+| Content type | Structured data, tables | Discovery feeds, social | Catalogs, search |
+| User intent | Find specific item | Browse/explore | Mixed |
+| SEO need | High (unique URLs) | Low | Medium |
+| Accessibility | Best | Worst | Good |
+| Mobile performance | Good | Memory risk | Good |
+
+### Breadcrumbs
+Use for hierarchies 3+ levels deep. Place below top nav, above page title. Truncate middle items on mobile with ellipsis.
+
+---
+
+## 5. Onboarding UX
+
+### Progressive Onboarding Framework
+
+**Phase 1 -- Signup:** Ask only email + password (or social login). Defer profile details until after first value moment.
+
+**Phase 2 -- First-run experience:** Welcome screen with 1-2 sentence value prop. 3-5 step setup wizard for essential configuration. Pre-populated sample data so the product feels alive.
+
+**Phase 3 -- Feature discovery (ongoing):** Contextual tooltips triggered by user behavior, not on first load. Checklist widget showing setup progress (drives 70%+ completion). Celebrate milestones.
+
+### Tooltips vs Modals vs Coachmarks
+
+| Pattern | Use When | Avoid When |
+|---------|----------|------------|
+| **Tooltips** | Explaining a single element | More than 1-2 on screen |
+| **Modals** | Critical announcements, required input | Interrupting flow; never on first load for tours |
+| **Coachmarks** | Introducing 3-5 key features in sequence | Users are mid-task; keep under 5 steps |
+| **Hotspots** | Passive discovery of new features | Overuse trains users to ignore them |
+
+### Empty States
+Every empty state needs: (1) Illustration/icon, (2) Brief explanation, (3) Primary action CTA, (4) Optional link to docs/help.
+
+---
+
+## 6. Email & Notification Design
+
+### Transactional Email Structure
+Brand header, clear subject line, single-column body at 600px max width, primary action button (min 44px height, full-width mobile), minimal footer with unsubscribe.
+
+### Notification Hierarchy
+
+| Level | Channel | Timing |
+|-------|---------|--------|
+| **Urgent** | Push + in-app + email | Immediate |
+| **Informational** | In-app + email | Batched or near-real-time |
+| **Promotional** | Email only | Scheduled; respect quiet hours |
+
+### Push Notification UX
+- 40-50 character headline max.
+- Deep-link to relevant screen, not app home.
+- Limit to 3-5 per day.
+- Implement quiet hours (default 10 PM - 8 AM local time).
+
+---
+
+## Quick Reference: Conversion Numbers
+
+| Metric | Value |
+|--------|-------|
+| First impression time | 50ms |
+| Mobile bounce if load > 3s | 53% |
+| First-person CTA copy lift | 10-90% |
+| Drop per extra form field | 3-5% |
+| Progress bar completion boost | 20-30% |
+| Multi-step form mobile lift | up to 300% |
+| Video testimonial lift | +34% |
+| Sticky mobile CTA lift | 10-20% |
+| "Most Popular" badge lift | 12-15% |
+| Per extra second load time | 7-10% drop |

package/skills/picasso/references/data-visualization.md

@@ -0,0 +1,226 @@
+# Data Visualization & Dashboard Design Reference
+
+## 1. Chart Selection Decision Matrix
+
+Select charts by the **question your data answers**, not by what looks interesting.
+
+| Purpose | Recommended Charts | Avoid |
+|---|---|---|
+| **Comparison** (categories vs values) | Bar (vertical/horizontal), Grouped bar, Lollipop | Pie (hard to compare slices) |
+| **Trend over time** (time-series) | Line, Area, Sparkline | Bar (unless discrete intervals) |
+| **Composition** (parts of a whole) | Stacked bar, Pie/Donut (<=6 slices), Treemap | Line chart |
+| **Distribution** (spread/frequency) | Histogram, Box plot, Violin, Scatter | Pie chart |
+| **Relationship** (two+ numeric vars) | Scatter, Bubble (3rd variable as size) | Bar chart |
+| **Ranking** (ordered comparison) | Horizontal bar (sorted), Lollipop | Pie/Donut |
+| **Flow/Conversion** (sequential stages) | Funnel, Sankey | Bar chart |
+| **Performance vs target** (single KPI) | Gauge, Bullet chart | Pie chart |
+| **Inline trend indicator** (compact) | Sparkline (word-sized) | Full chart |
+| **Intensity/correlation** (two categorical axes) | Heatmap | 3D bar charts |
+
+### Quick Decision Flow
+
+```
+What are you showing?
+  -> Change over time?  -> Line (continuous) / Bar (discrete intervals)
+  -> Comparison?        -> Bar (horizontal if labels are long)
+  -> Part of whole?     -> Donut (<=6 cats) / Treemap (many) / Stacked bar (over time)
+  -> Relationship?      -> Scatter / Bubble
+  -> Distribution?      -> Histogram / Box plot
+  -> Single KPI?        -> Big number card with sparkline
+```
+
+---
+
+## 2. Dashboard Design Patterns
+
+### Layout Patterns
+
+**Overview + Detail (most common):** Top row = KPI summary cards. Middle = primary charts. Bottom = detailed tables or drill-down views.
+
+**Drill-Down:** Start with high-level aggregates; clicking reveals progressively granular data. Use breadcrumbs for navigation context.
+
+**Contextual/Filtered:** Global filter bar at top. All panels respond to the same filter state.
+
+### Grid System
+
+Use a **12-column grid** with 16-24px gutters.
+
+```
+| KPI | KPI | KPI | KPI |       <- 3-col each (4 cards)
+|   Primary Chart   | Secondary |  <- 8-col + 4-col
+|      Data Table              |  <- 12-col full width
+```
+
+### KPI Card Anatomy
+
+```
++----------------------------------+
+|  Revenue            +12.3% ^    |  <- Label + trend indicator
+|  $1,234,567                     |  <- Primary metric (large)
+|  vs $1,098,000 target           |  <- Comparison context
+|  ________ sparkline             |  <- Trend line (last 30 days)
++----------------------------------+
+```
+
+**Rules:**
+- Always pair KPIs with context (target, prior period, benchmark).
+- Semantic color only for status: green = on track, amber = warning, red = critical.
+- Show "Last updated" timestamp on every dashboard.
+- Limit to 4-8 KPI cards maximum per view.
+
+### Real-Time Data Display
+
+- Visible "live" indicator or timestamp for data freshness.
+- CSS transitions for value changes (fade or count-up animation).
+- Avoid polling faster than ~5s minimum.
+
+---
+
+## 3. Color for Data
+
+### Sequential (low-to-high, single variable)
+```
+Blues:    #f7fbff -> #9ecae1 -> #08519c -> #08306b
+Viridis: #fde725 -> #35b779 -> #31688e -> #440154
+```
+Light = low, dark = high.
+
+### Diverging (two extremes with neutral midpoint)
+```
+RdBu:  #b2182b -> #f4a582 -> #f7f7f7 -> #92c5de -> #2166ac
+PRGn:  #762a83 -> #c2a5cf -> #f7f7f7 -> #a6dba0 -> #1b7837
+```
+Use for deviation from center (profit/loss, above/below average).
+
+### Qualitative / Categorical (distinct groups)
+```
+Tableau 10:  #4e79a7  #f28e2c  #e15759  #76b7b2  #59a14f  #edc949  #af7aa1  #ff9da7  #9c755f  #bab0ab
+Okabe-Ito:   #E69F00  #56B4E9  #009E73  #F0E442  #0072B2  #D55E00  #CC79A7  #000000
+```
+
+### OKLCH Programmatic Palettes
+
+```css
+/* Sequential: same hue, vary lightness */
+--color-1: oklch(0.95 0.03 250);  /* lightest */
+--color-2: oklch(0.75 0.08 250);
+--color-3: oklch(0.55 0.13 250);
+--color-4: oklch(0.35 0.15 250);  /* darkest */
+
+/* Qualitative: same lightness+chroma, rotate hue */
+--cat-1: oklch(0.7 0.12 30);   /* orange */
+--cat-2: oklch(0.7 0.12 230);  /* blue */
+--cat-3: oklch(0.7 0.12 150);  /* green */
+--cat-4: oklch(0.7 0.12 330);  /* pink */
+```
+
+### Colorblind-Safe Rules
+
+1. **Default to Okabe-Ito** for categorical data.
+2. **Never use red/green as the only differentiator.**
+3. **Use Viridis** for sequential scales.
+4. **Blue is the safest single hue.**
+5. **Supplement color with shape, pattern, or label** (WCAG 1.4.1).
+6. **Limit categorical colors to 6-8 max.**
+
+---
+
+## 4. Chart Accessibility
+
+### Text Alternatives (WCAG 1.1.1)
+
+```jsx
+<figure>
+  <svg role="img" aria-labelledby="chart-title" aria-describedby="chart-desc">
+    <title id="chart-title">Quarterly Revenue</title>
+    <desc id="chart-desc">Bar chart showing revenue growth from $1.2M in Q1 to $1.5M in Q4.</desc>
+  </svg>
+  <details>
+    <summary>View data table</summary>
+    <table><!-- structured data as accessible fallback --></table>
+  </details>
+</figure>
+```
+
+### Keyboard Navigation
+- All interactive chart elements must be focusable.
+- Arrow keys move between data points within a series.
+- Enter/Space to activate (drill-down, tooltip).
+- Escape to dismiss tooltips.
+
+### Visual Patterns for Colorblindness
+Use SVG fill patterns alongside color so colorblind users and grayscale remain readable.
+
+---
+
+## 5. React Charting Libraries
+
+| Library | Best For | Bundle Size | Learning Curve |
+|---|---|---|---|
+| **Recharts** | Standard dashboards, rapid prototyping | Light | Low |
+| **Nivo** | Rich chart variety, theming, SSR | ~371KB/module | Moderate |
+| **Victory** | Cross-platform (React + React Native) | ~1.16MB | Low |
+| **visx** | Custom/brand-specific visualizations | ~12.3KB | High |
+| **Chart.js** | Large datasets (up to 1M points) | 14-48KB | Low |
+| **D3** | Full control, custom viz libraries | Varies | Very High |
+
+```
+Need it fast with standard charts?         -> Recharts
+Need rich chart types + theming?           -> Nivo
+Need web + React Native?                   -> Victory
+Need pixel-perfect custom viz?             -> visx
+Need to render 100K+ data points?          -> Chart.js (Canvas)
+Need full control?                         -> D3 directly
+```
+
+### Recharts Example
+
+```tsx
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+
+function RevenueChart({ data }) {
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <BarChart data={data}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
+        <XAxis dataKey="month" />
+        <YAxis tickFormatter={(v) => `$${v / 1000}k`} />
+        <Tooltip formatter={(v) => [`$${v.toLocaleString()}`, 'Revenue']} />
+        <Bar dataKey="revenue" fill="#4e79a7" radius={[4, 4, 0, 0]} />
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}
+```
+
+---
+
+## 6. Data-Ink Ratio (Tufte Principles)
+
+### Core Rules
+1. **Above all else, show the data.**
+2. **Maximize data-ink ratio** = (ink used for data) / (total ink).
+3. **Erase non-data-ink** -- gridlines, borders, backgrounds that carry no information.
+4. **Erase redundant data-ink** -- if a label says "42%", you don't also need a gridline at 42.
+
+### Remove (Chartjunk)
+3D effects, gradient fills, heavy gridlines, decorative icons, redundant legends, box borders around charts, background colors (unless encoding data).
+
+### Add
+Direct labels on bars/lines, annotations on key events, reference lines (target, average, benchmark).
+
+### Small Multiples
+Instead of one cluttered multi-series chart, repeat the same simple chart for each category. Same axes, same scale, side by side.
+
+### Sparklines
+Word-sized graphics embedded inline. No axes, no labels -- pure trend.
+
+```tsx
+<ResponsiveContainer width={80} height={20}>
+  <LineChart data={trend}>
+    <Line type="monotone" dataKey="value" stroke="#4e79a7" dot={false} strokeWidth={1.5} />
+  </LineChart>
+</ResponsiveContainer>
+```
+
+Use in: KPI cards, table cells, inline with text.