picasso-skill 1.2.0 → 1.3.0

package/skills/picasso/references/anti-patterns.md

@@ -4,92 +4,181 @@ This is the most important reference file. These are the patterns that make AI-g
 
 ---
 
+## The AI Slop Fingerprint
+
+Any 3 or more of these together = AI slop. Stop and redesign.
+
+- Inter/Roboto + purple-to-blue gradient + centered hero + 3 equal feature cards + "Build the future of work" headline
+- `bg-indigo-500` as default accent (the Tailwind feedback loop)
+- Uniform 8px or 16px border-radius on everything
+- Generic `box-shadow: 0 4px 6px rgba(0,0,0,0.1)` on every card
+- Same page structure: hero > 3 cards > testimonials > pricing > CTA
+- Gradient text (`background-clip: text`) that fails accessibility
+- Abstract 3D blobs or stock photos of people smiling at laptops
+- Everything perfectly centered on a vertical axis
+- Uniform spacing with no density variation between sections
+- Fade-in-on-scroll applied identically to every element
+- Feature icons from Lucide/Heroicons in tinted circles
+- "Trusted by 10,000+ teams" with grayed-out logos nobody recognizes
+
+**The test:** Show someone a screenshot without context. If they say "AI-generated" in 3 seconds, it fails. The fingerprint is not any single choice -- it is the combination of defaults that signals zero human judgment.
+
+---
+
 ## Typography Anti-Patterns
 
-- **Inter everywhere.** The default safe choice. It signals "I did not think about fonts."
-- **Roboto, Arial, Helvetica, system-ui as primary.** Same problem.
-- **Space Grotesk on repeat.** Overused in AI/crypto contexts. Pick something else.
-- **Light (300) weight for body text.** Hard to read on most screens.
-- **Centered paragraphs.** Center alignment works for 1-2 lines (headings, quotes). Never for body text.
-- **No max-width on text.** Lines spanning 1400px are unreadable. Cap at 600-750px for body text.
-- **All caps without letter-spacing.** All-caps text needs 0.08-0.15em spacing to be legible.
+- **Inter everywhere.** Signals "I did not think about fonts."
+- **Roboto, Arial, Helvetica, system-ui as primary.** System defaults, not design decisions.
+- **Space Grotesk on repeat.** Overused in AI/crypto contexts.
+- **Light (300) weight for body text.** Hard to read. 400 minimum for body, 500+ for small text.
+- **Centered paragraphs.** Center alignment works for 1-2 lines only. Never for body text.
+- **No max-width on text.** Cap at 600-750px for body (45-75 characters per line).
+- **All caps without letter-spacing.** Needs 0.08-0.15em spacing to be legible.
 - **More than 3 font families.** Two is ideal. Three is the maximum.
-- **Font size under 14px for body text.** Especially on mobile.
+- **Font size under 14px for body text.** 16px is a safe default.
+- **Same font weight for everything.** Use at least 3 distinct weights for hierarchy.
+- **Line-height of 1.5 for all text.** Headings: 1.1-1.2. Body: 1.5-1.7. Small text: 1.6-1.8.
+- **No optical size adjustment.** Display text: lighter weight, tighter tracking. Small UI text: heavier, looser tracking.
 
 ---
 
 ## Color Anti-Patterns
 
-- **Purple gradient on white background.** The signature AI slop aesthetic.
-- **Pure black text (#000000).** Always use tinted near-black (e.g., oklch(0.15 0.02 260)).
-- **Pure gray (#808080, #cccccc).** Always tint neutrals toward the palette hue.
-- **Gray text on colored backgrounds.** Creates low contrast and looks washed out.
-- **Full-saturation brand colors for large surfaces.** Reserve maximum chroma for small accents. Large areas need reduced saturation.
-- **Too many accent colors.** One primary, one secondary maximum. More creates visual chaos.
-- **Using opacity instead of actual color values.** opacity:0.5 on colored elements creates inconsistent results depending on background.
-- **No dark mode consideration.** Even if not implementing dark mode, design with the possibility in mind.
+- **Purple gradient on white background.** The signature AI slop aesthetic. If your first instinct is purple-to-blue, stop.
+- **`bg-indigo-500`, `bg-violet-500`, `bg-purple-500` as primary.** The Tailwind default palette trap.
+- **Pure black text (#000000).** Use tinted near-black (e.g., `oklch(0.15 0.02 260)`).
+- **Pure gray (#808080, #cccccc).** Tint neutrals toward the palette hue.
+- **Gray text on colored backgrounds.** Low contrast, washed out. Use white or a very light tint.
+- **Full-saturation brand colors for large surfaces.** Reserve max chroma for small accents. Large areas need reduced saturation.
+- **Too many accent colors.** One primary, one secondary maximum.
+- **Using opacity instead of actual color values.** `opacity:0.5` creates inconsistent results. Define explicit tokens.
+- **No dark mode consideration.** Use CSS custom properties from the start.
+- **Gradient text without a solid fallback.** Breaks in selection, high contrast mode, some browsers.
+- **Rainbow or multi-stop gradients.** Two stops maximum. Four or more is a circus.
 
 ---
 
 ## Layout Anti-Patterns
 
-- **Everything centered vertically and horizontally.** Creates a lifeless vertical highway. Use left-aligned content with intentional centering for specific elements.
-- **Cards nested inside cards.** One level of card is usually enough. Nesting creates visual confusion about hierarchy.
-- **Wrapping everything in cards.** Not every piece of content needs a container with rounded corners and a shadow. Sometimes flat sections, dividers, or whitespace work better.
-- **Uniform rounded corners on everything.** Vary border-radius by context: pills for tags (999px), subtle rounding for cards (8-12px), sharper for data elements (4px).
-- **Equal spacing everywhere.** Groups need tighter internal spacing and wider external spacing. Without this, there is no visual structure.
-- **Three or four equal columns at every breakpoint.** Asymmetric grids (2:1, 3:2) are more interesting and create clearer hierarchy.
+- **Everything centered vertically and horizontally.** Creates a lifeless vertical highway. Use left-aligned content with intentional centering.
+- **Three-column equal-width feature grid as default.** The most common AI layout. Make one card dominant (2:1 split) or use a different structure.
+- **Same page structure every time.** Hero > cards > testimonials > pricing > CTA. Break the pattern: split-screen, bento grid, horizontal scroll, text-as-hero.
+- **No spatial surprises.** Every section on the same grid. Professional sites break the grid -- full-bleed images, asymmetric splits, oversized pull quotes.
+- **No density variation.** Some sections should feel spacious (hero, CTA), others dense (feature lists, data tables, pricing).
+- **No overlapping elements or grid breaks.** Elements that bleed outside containers add depth and interest.
+- **Uniform card sizing in grids.** Primary item should be visually dominant. Featured card taller/wider.
+- **Cards nested inside cards.** One level is usually enough.
+- **Wrapping everything in cards.** Sometimes flat sections, dividers, or whitespace work better.
+- **Equal spacing everywhere.** Groups need tighter internal spacing and wider external spacing.
 - **Content that could belong to any product.** If the layout has no personality, the design is not done.
+- **Sticky header over 80px.** Keep slim (48-56px) or hide on scroll-down.
+
+---
+
+## Shadow Anti-Patterns
+
+- **Same shadow on every elevated element.** `shadow-md` on cards, modals, dropdowns, and buttons is not a system.
+- **No shadow hierarchy.** Define 3-4 levels: subtle (tooltips), moderate (cards, dropdowns), dramatic (modals, drawers).
+- **Shadows invisible in dark mode.** `rgba(0,0,0,0.1)` disappears on dark backgrounds. Use inner glows, border effects, or background lightness differentiation.
+- **Shadows instead of background-color for elevation.** Elevation is often better communicated through surface tint, not shadows.
+- **Hard-edged shadows.** Small blur + high opacity = 2005. Modern shadows: large blur (20-40px), low opacity (0.03-0.08).
+- **Colored shadows that do not match the element.** A blue button with gray shadow looks disconnected. Use the element's hue at low opacity.
+
+---
+
+## Border Radius Anti-Patterns
+
+- **Uniform 8px or 16px on everything.** Border radius is a system, not one value.
+- **No hierarchy.** Pills for tags (999px), generous for modals (16-24px), subtle for cards (8-12px), sharp for data (2-4px), sharp for marketing (0-2px).
+- **Nested radius not accounting for padding.** Inner radius = outer radius minus padding. Card with `16px` radius and `8px` padding = inner element at `8px` radius.
+- **Rounded corners on elements flush with container edges.** Touching corners should be 0 radius.
+- **Mixing rounded and sharp in the same component.** Button at `8px` next to input at `0px` = two design systems colliding.
 
 ---
 
 ## Motion Anti-Patterns
 
-- **Bounce/elastic easing.** Feels dated and gimmicky. Use ease-out curves.
-- **Animating everything on the page.** Creates visual noise. Animate the important moments.
-- **transition: all 0.3s.** Animates properties you did not intend. Be specific: `transition: opacity 0.2s, transform 0.3s`.
-- **No loading feedback.** User clicks a button and nothing happens for 2 seconds. Always show progress.
-- **Spinner for content areas.** Use skeleton screens instead. Spinners should be reserved for small inline actions.
-- **Animation without prefers-reduced-motion handling.** Always provide a reduced-motion path.
+- **Bounce/elastic easing.** Dated. Use ease-out for entrances, ease-in for exits.
+- **Animating everything.** Animate important moments only: state changes, entrances, user-initiated actions.
+- **transition: all 0.3s.** Be specific: `transition: opacity 0.2s ease-out, transform 0.3s ease-out`.
+- **Uniform fade-in-on-scroll.** Stagger timing. Vary animation type. Let some elements just be there.
+- **No loading feedback.** Always show progress on async actions.
+- **Spinner for content areas.** Use skeleton screens. Spinners for small inline actions only.
+- **No prefers-reduced-motion handling.** Wrap motion in `@media (prefers-reduced-motion: no-preference)`.
+- **Duration over 500ms for UI transitions.** 150-300ms for most interactions. 300-500ms for large layout changes.
+- **Animating layout properties (width, height, top, left).** Triggers reflows. Animate `transform` and `opacity` only.
 
 ---
 
 ## Interaction Anti-Patterns
 
 - **Placeholder text as the only label.** Disappears on focus. Inaccessible.
-- **outline: none without replacement.** Keyboard users lose all orientation.
+- **outline: none without replacement.** Replace with a custom focus ring, never remove it.
 - **Hover-only interactions.** Must have keyboard and touch equivalents.
-- **Custom scrollbars that break native behavior.** Users expect scrolling to work natively.
-- **Toast notifications for errors.** They disappear. Use inline error messages instead.
-- **Alert/confirm dialogs for minor actions.** Blocking the entire page for "Are you sure?" on non-destructive actions.
-- **No focus trapping in modals.** Tab key escapes the modal and the user gets lost.
-- **Links that look like buttons and buttons that look like links.** Use the correct element for the correct purpose.
+- **Custom scrollbars that break native behavior.** Custom thin scrollbars fine. Custom scroll physics not.
+- **Toast notifications for errors.** They disappear. Use inline errors. Toasts for confirmations only.
+- **Alert/confirm dialogs for minor actions.** Do not block the page for non-destructive actions.
+- **No focus trapping in modals.** Tab key must stay within the modal.
+- **Links that look like buttons, buttons that look like links.** `<a>` navigates. `<button>` acts.
+- **Disabled buttons with no explanation.** Show inline validation or tooltip for why the action is unavailable.
+- **Click targets smaller than 44x44px on mobile.** 44px minimum per Apple and Google guidelines.
 
 ---
 
-## Code Anti-Patterns
+## Content / Copy Anti-Patterns
 
-- **div soup.** Use semantic HTML: nav, main, section, article, aside, header, footer.
-- **Inline styles for everything.** Use CSS variables, modules, or Tailwind. Inline styles cannot be overridden or themed.
-- **!important everywhere.** If specificity requires !important, the CSS architecture is broken.
-- **z-index: 9999.** Use a z-index scale (1, 10, 20, 30...) with named CSS variables.
-- **Fixed pixel values for everything.** Use rem for typography and spacing, em for component-internal sizing, px only for borders and shadows.
-- **console.log left in production.** Clean it up.
+- **"Lorem ipsum" in final deliverables.** Design without content is decoration.
+- **Stock photo people smiling at laptops.** Use contextual illustrations, product screenshots, or abstract art.
+- **"Click here" link text.** Describe the destination: "View documentation."
+- **"Submit" button text.** Use the specific action: "Create account", "Send message", "Save changes."
+- **Walls of text without hierarchy.** Break with headings, spacing, and visual rhythm.
+- **Generic headlines.** "Build the future of work." "Your all-in-one platform." "Scale without limits." These say nothing. Use a specific value proposition.
+- **AI-telltale words.** "Delve", "pivotal", "seamless", "leverage", "cutting-edge", "elevate", "harness", "robust", "streamline", "utilize." If you would not say it in conversation, do not write it.
+- **Hedge language.** "May help you", "might improve." Commit to the claim or do not make it.
+- **Unrealistic demo data.** Not $1M revenue and 99.99% uptime. Use $47,230 and 99.93%. Not "John Doe" -- use "Sarah Chen" or "Marcus Rivera."
+- **Broken Unsplash placeholder links.** `unsplash.com/random` links rot. Use solid color blocks or local assets.
+- **Exclamation marks in UI copy.** "Welcome!" "Success!" Save enthusiasm for genuinely exciting moments.
 
 ---
 
-## Content Anti-Patterns
+## Code Anti-Patterns
 
-- **"Lorem ipsum" in final deliverables.** Use real or realistic content. Design without content is decoration.
-- **Stock photo people smiling at laptops.** If using imagery, make it contextual.
-- **"Click here" link text.** Links should describe their destination: "View documentation" not "Click here".
-- **"Submit" button text.** Use the specific action: "Create account", "Send message", "Save changes".
-- **Walls of text without hierarchy.** Break content with headings, spacing, and visual rhythm.
+- **div soup.** Use semantic HTML: `nav`, `main`, `section`, `article`, `aside`, `header`, `footer`.
+- **Inline styles for everything.** Use CSS variables, modules, or Tailwind.
+- **!important everywhere.** If needed, the CSS architecture is broken.
+- **z-index: 9999.** Use a scale with named variables: `--z-dropdown: 10`, `--z-modal: 20`, `--z-toast: 30`.
+- **Fixed pixel values for everything.** `rem` for typography/spacing, `em` for component internals, `px` for borders/shadows.
+- **console.log left in production.**
+- **Tailwind class strings over 200 characters.** Extract to a component or use `@apply`.
+- **Hardcoded color values instead of CSS custom properties.** `bg-[#6366f1]` in 40 files means 40 edits for a brand change.
+- **No responsive behavior.** Test at 320px, 768px, and 1440px minimum.
 
 ---
 
 ## The Overall Pattern to Avoid
 
-The "AI slop" aesthetic is recognizable by its combination of: Inter/Roboto font, purple/blue gradient accents, evenly spaced centered layouts, uniform card grids with identical rounded corners, and generic stock imagery. Any single element might be fine in isolation. Together, they signal "an AI made this with zero human judgment."
+The AI slop aesthetic: Inter/Roboto + purple/blue gradient + centered layouts + uniform card grids + identical rounded corners + generic shadows + stock imagery. Any single element is fine in isolation. Together they signal zero human judgment.
+
+The antidote is intentionality. Every choice -- font, color, spacing, layout, animation, shadow, radius, copy -- should be a conscious decision tied to the specific context. If you cannot explain why you chose it, you defaulted.
+
+---
 
-The antidote is intentionality. Every choice (font, color, spacing, layout, animation) should be a conscious decision tied to the specific context of what you are building.
+## Professional Alternatives (Quick Reference)
+
+| AI Default | Professional Alternative |
+|---|---|
+| Inter / Roboto | Satoshi, Cabinet Grotesk, Plus Jakarta Sans, Outfit, General Sans, Switzer |
+| Purple-to-blue gradient | Single brand hue + tinted neutrals (monochromatic palette) |
+| 3-column equal cards | Asymmetric grid with primary card dominant (2:1 or 3:2 split) |
+| Centered everything | Left-aligned content with intentional centering for heroes/CTAs only |
+| Uniform 8px radius | Context-appropriate: 0-2px marketing, 8-12px cards, 16-24px modals, 999px tags |
+| `0 4px 6px rgba(0,0,0,0.1)` | Elevation-based shadow scale with 3-4 distinct levels |
+| Hero > Cards > Testimonials > CTA | Split-screen, bento grid, horizontal scroll, text-as-hero, editorial layout |
+| Fade-in everything identically | Staggered entrance with varied timing, direction, and type per element |
+| "Scale without limits" | Specific claim with real metric: "Process 10k invoices in 3 minutes" |
+| `bg-indigo-500` accent | A hue reflecting the brand, not Tailwind's default palette |
+| Generic box icons in circles | Custom illustrations, product screenshots, or no icons at all |
+| "Trusted by 10,000+ teams" | Real customer logos with permission, or skip entirely |
+| Uniform section spacing | Varied density: spacious heroes, dense feature grids, breathing room at CTAs |
+| Same shadow on everything | Shadow hierarchy: none flat, subtle cards, medium dropdowns, heavy modals |
+| Stock laptop photos | Product screenshots, hand-drawn illustrations, or abstract geometric art |

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)