picasso-skill 2.0.3 → 2.1.0

package/agents/picasso.md

@@ -85,7 +85,7 @@ Quick yes/no questions:
 These questions force intentional differentiation. Do NOT skip them.
 
 - "What font will you use? (Not Inter, Roboto, or Arial — pick something with character)"
-- "What's your primary color? Give me a hex, OKLCH, or describe it. (Not Tailwind's default indigo/violet)"
+- "What's your primary color? Give me a hex, OKLCH, or describe it. (Not Tailwind's default indigo/violet/purple — these are the most overused AI-generated colors)"
 - "Name ONE specific design choice that will make this look different from typical SaaS/dashboard/landing pages."
 - "What's your layout strategy? (Left-aligned asymmetric, bento grid, split-screen, editorial — NOT centered-everything)"
 - "What aesthetic are you explicitly REJECTING?" (This forces awareness of what NOT to do)
@@ -140,12 +140,14 @@ Before generating ANY design code, write out your specific commitments. Not vagu
 ```
 ANTI-SLOP COMMITMENTS:
 - Font: [exact font name, NOT Inter/Roboto/Arial]
-- Layout: [specific structure — NOT "centered hero + 3 equal cards"]
-- Color accent: [exact OKLCH value — NOT bg-indigo-500 or #5B8DEF]
+- Layout: [specific structure — NOT "centered hero + 3 equal cards" or "gradient hero card + plain cards"]
+- Color accent: [exact value — NOT indigo/violet/purple family. NOT bg-indigo-500, bg-violet-500, or any from-indigo-to-violet gradient]
 - Neutrals: [tinted toward which hue?]
-- What makes this UNFORGETTABLE: [one specific visual choice someone will remember]
+- What makes this UNFORGETTABLE: [one specific visual choice — NOT gradients, colored borders, dark sidebar, or icon badges]
 - Spatial logic: [where is density high? where is it low? what breaks the grid?]
 - Border radius philosophy: [sharp/professional/friendly/playful — with px values]
+- Domain competitors studied: [list 2-3 real products in the same industry]
+- What I will NOT do: [list 3 specific AI patterns I will avoid for this project]
 ```
 
 If you cannot fill this out with specific, non-default values, you are not ready to design. Go back to the references.
@@ -154,11 +156,26 @@ If you cannot fill this out with specific, non-default values, you are not ready
 
 Before writing code, mentally picture the finished design. Ask yourself: "If someone saw a screenshot of this with no context, would they say 'AI-generated' in 3 seconds?" If yes, REDESIGN YOUR COMMITMENTS. The fingerprint is not any single choice — it is the combination of defaults.
 
-### Step 4: Verify No Slop Combinations
+### Step 4: Hard-Banned Pattern Check (BLOCKING)
+
+Before proceeding, verify NONE of these are in your plan. If ANY single one is present, STOP and redesign. These are not "3+ = bad" -- each one individually is banned:
+
+- [ ] Gradient background on stat cards, hero cards, or data surfaces (from-X to-Y on a card)
+- [ ] Indigo/violet/purple as primary color (unless user's existing brand explicitly uses it)
+- [ ] Colored left-border or top-border accents on cards (border-l-4 border-[color])
+- [ ] Different colored borders per card in a set (rainbow pattern)
+- [ ] Dark sidebar paired with gradient CTA button
+- [ ] Icons inside colored circle/rounded-square containers (bg-[color]-100 p-2 rounded-lg)
+- [ ] hover:-translate-y + shadow-lg on cards
+- [ ] Staggered entrance animations (animation-delay) on stat cards or data
+- [ ] Colored dots/badges per category in activity feeds
+- [ ] Converting hex to OKLCH and calling it a "redesign"
+
+### Step 5: Verify No Slop Combinations
 
 Check that your commitments don't trigger 3+ of these simultaneously:
 - [ ] Centered vertical layout with everything on one axis
-- [ ] Default Tailwind accent color (indigo/violet/purple family)
+- [ ] Default Tailwind accent color (any shade of indigo/violet/purple)
 - [ ] Uniform card grid (all same size, same radius, same shadow)
 - [ ] Generic sans-serif font (Inter, Roboto, system-ui)
 - [ ] Purple/blue glow blobs on dark backgrounds
@@ -169,6 +186,17 @@ Check that your commitments don't trigger 3+ of these simultaneously:
 
 If 3+ are checked, you MUST change your commitments until fewer than 3 remain.
 
+### Step 6: Competitor Research (MANDATORY for redesign/godmode)
+
+Before redesigning any app, you MUST identify 2-3 real competitors in the same domain and study their design patterns. For example:
+- Legal SaaS: Clio, PracticePanther, Smokeball, MyCase
+- Finance/Accounting: QuickBooks, Xero, FreshBooks, Wave
+- Project Management: Linear, Notion, Asana, Monday
+- CRM: HubSpot, Salesforce, Pipedrive
+- Healthcare: Epic, Athenahealth, DrChrono
+
+Your design should feel like it BELONGS in that category, not like a generic SaaS template with the app name swapped in. If you can't tell what industry the app serves from the design, you've failed.
+
 ---
 
 ## Knowledge Base
@@ -239,16 +267,26 @@ Run through each category. For every finding, assign a severity and provide the
 These are the telltale signs that make interfaces look AI-generated. Flag all of them:
 
 - [ ] Inter, Roboto, Arial, or system-ui as the primary font
-- [ ] Purple/blue gradient accents on white backgrounds
+- [ ] Purple/blue/indigo/violet gradient accents ANYWHERE (stat cards, hero sections, CTAs, sidebars)
+- [ ] Indigo/violet/purple as primary color (the Tailwind default trap)
 - [ ] Everything centered vertically and horizontally (the "vertical highway")
 - [ ] Uniform card grids with identical rounded corners
+- [ ] Gradient background on stat/data cards (colored bg with white text)
+- [ ] Colored left-border or top-border accents per card (rainbow pattern)
+- [ ] Dark sidebar + gradient CTA button combination
+- [ ] Icons inside colored circle/rounded-square containers
 - [ ] Pure black (#000) text or pure gray (#808080, #ccc) neutrals
 - [ ] Cards nested inside cards
 - [ ] Equal spacing everywhere with no visual grouping
 - [ ] `transition: all 0.3s` on elements
+- [ ] `hover:-translate-y + shadow-lg` on cards
+- [ ] Staggered entrance animations on static data (animation-delay on stat cards)
+- [ ] Colored dots/badges per category in activity feeds
 - [ ] Bounce or elastic easing
 - [ ] Generic stock imagery or placeholder content
 
+**IMPORTANT:** When FIXING slop, do not replace it with different slop. "Replace uniform cards with a gradient hero card" is replacing one AI pattern with another. The fix for uniform cards is to change SIZE or TYPOGRAPHY weight, not to add gradients or colored borders.
+
 ### 2.2 Typography (HIGH)
 
 - [ ] Font choice is intentional and distinctive (not a banned default)
@@ -420,6 +458,11 @@ When invoked with `/polish`, `/redesign`, or when the user says "fix it":
 4. After fixing, re-run the audit to verify the score improved
 5. Show a before/after diff summary
 6. **Re-run the 3-Second Test** on screenshots. If it still looks AI-generated, you're not done.
+7. **Post-fix banned pattern scan.** After every fix category, grep your changes for HARD-BANNED patterns from anti-patterns.md. If any are found, revert that specific fix and try a different approach. Common traps:
+   - "Make one card stand out" does NOT mean "add a gradient background." It means change the size, position, or typography weight.
+   - "Add visual hierarchy" does NOT mean "add colored borders." It means adjust font size, weight, or spacing.
+   - "Make the sidebar more professional" does NOT mean "make it dark." It means improve spacing, typography, and active states.
+   - "Improve the color system" does NOT mean "switch to indigo/violet." It means ensure consistency and appropriate contrast.
 
 ### Common Auto-Fixes
 
@@ -615,6 +658,10 @@ Before/after report: /tmp/picasso-before-after.html
 - **Re-verify after every category.** Don't stack fixes without checking they work.
 - **The before/after report is mandatory.** The user must be able to see and share the transformation.
 - **If the before score is already 85+**, say so: "This is already in great shape. Here are the 3-4 things that would take it to 95+." Don't force a full pipeline on a polished project.
+- **MANDATORY POST-FIX SLOP SCAN.** After ALL fixes are applied, before presenting the final report, re-read anti-patterns.md HARD-BANNED PATTERNS section and grep your own changes for every banned pattern. If ANY are found, revert that specific change immediately. This is not optional.
+- **Restraint over decoration.** The goal of a redesign is NOT to add visual elements. It is to improve clarity, hierarchy, and usability. If a change adds visual complexity (gradients, colored borders, animations, icon badges), ask: "Would Stripe/Linear/Notion do this?" If no, don't do it.
+- **Research the domain first.** Before redesigning any app, identify 2-3 real competitors in the same industry and study their design. A legal app should look like legal software, not a generic SaaS dashboard.
+- **Prefer removal over addition.** When improving a UI, first look for things to REMOVE (unnecessary borders, extra colors, decorative elements) before adding anything new. The best design improvements are often subtractive.
 
 ## Creative Commands
 
@@ -1165,3 +1212,13 @@ Next: Add prefers-reduced-motion guard to animations
 8. Maximum text width: 65ch or 750px for body content
 9. Spacing must follow a consistent scale (4px base)
 10. Every design decision must be intentional, not default
+11. **NEVER use gradient backgrounds on stat cards, data cards, or hero cards.** Data surfaces must be flat and readable.
+12. **NEVER use indigo/violet/purple as default primary.** These are the most overused AI-generated colors. If the user hasn't specified a brand color, choose based on their industry (blue for finance, green for health, warm tones for consumer, slate for enterprise).
+13. **NEVER add colored left-border or top-border accents to cards.** This is the AI rainbow pattern.
+14. **NEVER pair a dark sidebar with a gradient CTA button.**
+15. **NEVER put icons inside colored circle/rounded-square containers** (the `bg-color-100 p-2 rounded-lg` pattern).
+16. **NEVER add hover:-translate-y + shadow-lg to cards.** Use subtle background color change only.
+17. **NEVER add staggered entrance animations to static data** (animation-delay on stat cards).
+18. **Prefer subtraction over addition.** The best redesign often removes visual noise rather than adding decoration.
+19. **Study real competitors first.** Before any redesign, identify what actual products in the same industry look like. Match their energy, not a generic SaaS template.
+20. **The restraint test:** Before writing any visual change, ask "Would Linear/Notion/Stripe do this?" If the answer is no, don't do it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picasso-skill",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "The ultimate AI design skill for producing distinctive, production-grade frontend interfaces",
   "bin": {
     "picasso-skill": "./bin/install.mjs"

package/references/anti-patterns.md

@@ -4,6 +4,34 @@ This is the most important reference file. These are the patterns that make AI-g
 
 ---
 
+## HARD-BANNED PATTERNS (NEVER USE -- NO EXCEPTIONS)
+
+These patterns are so strongly associated with AI-generated design that they must NEVER appear in any Picasso output. Not as a "starting point," not as "we'll iterate later," not in any context. If you catch yourself reaching for any of these, STOP and choose something else.
+
+### Banned Color Patterns
+- **Indigo/violet/purple gradient on stat cards or hero sections.** This is the #1 most recognizable AI design pattern in 2025-2026. `from-indigo-600 to-violet-500`, `from-purple-500 to-blue-500`, or any variation. NEVER.
+- **Colored left-border or top-border accents on cards.** The `border-l-4 border-purple-500` pattern on stat cards, feature cards, or list items is an AI fingerprint. Real dashboards use uniform subtle borders or no borders at all.
+- **Dark sidebar with gradient CTA button.** A `bg-slate-950` sidebar paired with a `from-indigo-500 to-violet-500` gradient "New [Thing]" button is the second most common AI dashboard pattern after gradient stat cards.
+- **Rainbow-coded card borders.** Giving each card in a row a different colored border (purple, amber, green, blue) is not "visual hierarchy" -- it's the AI rainbow pattern. Use one accent color sparingly.
+- **Indigo/violet as primary color for any project.** Unless the user's existing brand is specifically indigo/violet, never default to the indigo-500/violet-500 family. It's the Tailwind default trap.
+
+### Banned Layout Patterns  
+- **Gradient hero stat card that "pops" from a row of plain cards.** Making one stat card a full gradient (colored background, white text) while the others are plain white with borders. This is the most common AI "fix" for uniform card grids and it's just as recognizable.
+- **Colored dot/badge indicators on every list item by category.** Green dot for "create," blue dot for "update," red dot for "delete" in activity feeds. Real apps use subtle text differentiation, not a color-coded dot system.
+- **Gradient section headers.** Adding `from-muted/40 to-transparent` backgrounds to card headers is decorative noise that signals AI generation.
+- **Colored icon badges in rounded containers.** Putting icons inside colored circles/rounded squares (`bg-purple-100 p-2 rounded-lg`) next to section titles is a v0/bolt/lovable fingerprint.
+
+### Banned "Improvement" Patterns
+- **Converting hex to OKLCH as a "redesign."** Swapping `#2563eb` to `oklch(0.48 0.18 265)` changes nothing visually. It's a code quality improvement, not a design improvement. Never present token format changes as visual improvements.
+- **Adding hover translateY + shadow-lg to every card.** `hover:-translate-y-0.5 hover:shadow-lg transition-all` on cards is the universal AI "make it feel interactive" pattern.
+- **Staggered entrance animations on stat cards.** `animation-delay: 75ms, 150ms, 225ms, 300ms` on a row of cards. Real dashboards load content instantly; they don't choreograph card entrances.
+
+### Why These Are Banned
+
+These patterns emerged because AI models (including this one) were trained on thousands of examples of modern SaaS dashboards, and these are the statistical median of those examples. They represent the AVERAGE of all dashboards, which means they look like NO specific dashboard. A human designer makes opinionated choices. AI makes average choices. The patterns above are the most average choices possible.
+
+---
+
 ## The AI Slop Fingerprint
 
 Any 3 or more of these together = AI slop. Stop and redesign.
@@ -20,6 +48,12 @@ Any 3 or more of these together = AI slop. Stop and redesign.
 - 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
+- **Gradient stat/hero cards** (colored background with white text in a row of plain cards)
+- **Colored left/top border accents** on cards (border-l-4 with different colors per card)
+- **Dark sidebar + gradient CTA button** combination
+- **Rainbow-coded elements** (each item in a set gets a different color)
+- **Colored icon badges** (icons inside tinted rounded containers)
+- **hover:-translate-y + shadow-lg** on every interactive card
 
 **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.
 
@@ -44,17 +78,20 @@ Any 3 or more of these together = AI slop. Stop and redesign.
 
 ## Color Anti-Patterns
 
-- **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.
+- **Purple/indigo/violet gradient on ANY surface.** The signature AI slop aesthetic. If your first instinct is purple-to-blue, STOP. This includes stat cards, hero sections, CTAs, sidebars, and buttons. The entire indigo-to-violet spectrum is burned.
+- **`bg-indigo-500`, `bg-violet-500`, `bg-purple-500` as primary.** The Tailwind default palette trap. Also banned: `from-indigo-* to-violet-*` gradients.
+- **Gradient backgrounds on data cards/stat cards.** Stat cards should display data clearly. A gradient background with white text is decoration that hurts readability. Use flat backgrounds with colored text accents if needed.
+- **Different colored borders per card in a set.** If you have 4 stat cards, they should NOT each have a different colored left/top border. That's the AI rainbow pattern. Use consistent, subtle borders.
 - **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.
+- **Too many accent colors.** One primary, one secondary maximum. A dashboard should have ONE accent color, not four.
 - **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.
+- **"Professional" = dark sidebar.** A dark sidebar is not inherently more professional. It's become a cliche. Study what the user's ACTUAL competitors do. Most legal/accounting/business SaaS uses light sidebars (Clio, QuickBooks, Xero, PracticePanther).
 
 ---
 
@@ -168,17 +205,34 @@ The antidote is intentionality. Every choice -- font, color, spacing, layout, an
 | 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) |
+| Purple-to-blue gradient | Single brand hue + tinted neutrals (monochromatic palette). NO gradients on data surfaces. |
+| Gradient stat/hero card | Flat card with subtle text color accent. Data cards should be quiet -- let the numbers speak. Study Stripe Dashboard, Linear, or Notion for how to do stat cards without gradients. |
+| Colored border per card | Uniform subtle borders on all cards. ONE accent color for the most important metric only, applied to the VALUE text, not the card border/background. |
+| Dark sidebar + gradient CTA | Match the sidebar to the existing app theme. Light sidebar for business/legal/finance apps. CTA buttons use solid primary color, never gradients. |
+| 3-column equal cards | Asymmetric grid with primary card dominant (2:1 or 3:2 split) -- but NOT via gradient background. Dominance through size, position, or typography weight. |
 | 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 |
+| Fade-in everything identically | No entrance animations on data. Static content loads statically. Animate only user-initiated transitions. |
 | "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 |
+| `bg-indigo-500` accent | A hue reflecting the brand, not Tailwind's default palette. For business/legal: deep blue, forest green, warm brown, or slate -- NOT indigo/violet. |
+| Icons in colored circles | Icons inline with text at muted color. No tinted backgrounds on icon containers. |
+| hover:-translate-y + shadow-lg | Subtle background color change on hover (`hover:bg-muted`). No lifting, no shadow changes. |
 | "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 |
+
+## The Restraint Principle
+
+The best professional SaaS designs (Linear, Notion, Stripe, Vercel) share one trait: **restraint**. They use:
+- ONE accent color, applied sparingly (a button, a selected state, a link)
+- Flat, borderless or very subtle bordered cards
+- No gradients on data surfaces
+- No colored icon badges
+- No entrance animations on static content
+- Mostly neutral palette with tiny pops of color
+- The SAME card style for all cards (not one "hero" and three "normal")
+
+The AI instinct is to ADD visual elements (gradients, colors, animations, borders, shadows). The professional instinct is to REMOVE them. When in doubt, make it quieter, not louder.

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

@@ -4,6 +4,34 @@ This is the most important reference file. These are the patterns that make AI-g
 
 ---
 
+## HARD-BANNED PATTERNS (NEVER USE -- NO EXCEPTIONS)
+
+These patterns are so strongly associated with AI-generated design that they must NEVER appear in any Picasso output. Not as a "starting point," not as "we'll iterate later," not in any context. If you catch yourself reaching for any of these, STOP and choose something else.
+
+### Banned Color Patterns
+- **Indigo/violet/purple gradient on stat cards or hero sections.** This is the #1 most recognizable AI design pattern in 2025-2026. `from-indigo-600 to-violet-500`, `from-purple-500 to-blue-500`, or any variation. NEVER.
+- **Colored left-border or top-border accents on cards.** The `border-l-4 border-purple-500` pattern on stat cards, feature cards, or list items is an AI fingerprint. Real dashboards use uniform subtle borders or no borders at all.
+- **Dark sidebar with gradient CTA button.** A `bg-slate-950` sidebar paired with a `from-indigo-500 to-violet-500` gradient "New [Thing]" button is the second most common AI dashboard pattern after gradient stat cards.
+- **Rainbow-coded card borders.** Giving each card in a row a different colored border (purple, amber, green, blue) is not "visual hierarchy" -- it's the AI rainbow pattern. Use one accent color sparingly.
+- **Indigo/violet as primary color for any project.** Unless the user's existing brand is specifically indigo/violet, never default to the indigo-500/violet-500 family. It's the Tailwind default trap.
+
+### Banned Layout Patterns  
+- **Gradient hero stat card that "pops" from a row of plain cards.** Making one stat card a full gradient (colored background, white text) while the others are plain white with borders. This is the most common AI "fix" for uniform card grids and it's just as recognizable.
+- **Colored dot/badge indicators on every list item by category.** Green dot for "create," blue dot for "update," red dot for "delete" in activity feeds. Real apps use subtle text differentiation, not a color-coded dot system.
+- **Gradient section headers.** Adding `from-muted/40 to-transparent` backgrounds to card headers is decorative noise that signals AI generation.
+- **Colored icon badges in rounded containers.** Putting icons inside colored circles/rounded squares (`bg-purple-100 p-2 rounded-lg`) next to section titles is a v0/bolt/lovable fingerprint.
+
+### Banned "Improvement" Patterns
+- **Converting hex to OKLCH as a "redesign."** Swapping `#2563eb` to `oklch(0.48 0.18 265)` changes nothing visually. It's a code quality improvement, not a design improvement. Never present token format changes as visual improvements.
+- **Adding hover translateY + shadow-lg to every card.** `hover:-translate-y-0.5 hover:shadow-lg transition-all` on cards is the universal AI "make it feel interactive" pattern.
+- **Staggered entrance animations on stat cards.** `animation-delay: 75ms, 150ms, 225ms, 300ms` on a row of cards. Real dashboards load content instantly; they don't choreograph card entrances.
+
+### Why These Are Banned
+
+These patterns emerged because AI models (including this one) were trained on thousands of examples of modern SaaS dashboards, and these are the statistical median of those examples. They represent the AVERAGE of all dashboards, which means they look like NO specific dashboard. A human designer makes opinionated choices. AI makes average choices. The patterns above are the most average choices possible.
+
+---
+
 ## The AI Slop Fingerprint
 
 Any 3 or more of these together = AI slop. Stop and redesign.
@@ -20,6 +48,12 @@ Any 3 or more of these together = AI slop. Stop and redesign.
 - 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
+- **Gradient stat/hero cards** (colored background with white text in a row of plain cards)
+- **Colored left/top border accents** on cards (border-l-4 with different colors per card)
+- **Dark sidebar + gradient CTA button** combination
+- **Rainbow-coded elements** (each item in a set gets a different color)
+- **Colored icon badges** (icons inside tinted rounded containers)
+- **hover:-translate-y + shadow-lg** on every interactive card
 
 **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.
 
@@ -44,17 +78,20 @@ Any 3 or more of these together = AI slop. Stop and redesign.
 
 ## Color Anti-Patterns
 
-- **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.
+- **Purple/indigo/violet gradient on ANY surface.** The signature AI slop aesthetic. If your first instinct is purple-to-blue, STOP. This includes stat cards, hero sections, CTAs, sidebars, and buttons. The entire indigo-to-violet spectrum is burned.
+- **`bg-indigo-500`, `bg-violet-500`, `bg-purple-500` as primary.** The Tailwind default palette trap. Also banned: `from-indigo-* to-violet-*` gradients.
+- **Gradient backgrounds on data cards/stat cards.** Stat cards should display data clearly. A gradient background with white text is decoration that hurts readability. Use flat backgrounds with colored text accents if needed.
+- **Different colored borders per card in a set.** If you have 4 stat cards, they should NOT each have a different colored left/top border. That's the AI rainbow pattern. Use consistent, subtle borders.
 - **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.
+- **Too many accent colors.** One primary, one secondary maximum. A dashboard should have ONE accent color, not four.
 - **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.
+- **"Professional" = dark sidebar.** A dark sidebar is not inherently more professional. It's become a cliche. Study what the user's ACTUAL competitors do. Most legal/accounting/business SaaS uses light sidebars (Clio, QuickBooks, Xero, PracticePanther).
 
 ---
 
@@ -168,17 +205,34 @@ The antidote is intentionality. Every choice -- font, color, spacing, layout, an
 | 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) |
+| Purple-to-blue gradient | Single brand hue + tinted neutrals (monochromatic palette). NO gradients on data surfaces. |
+| Gradient stat/hero card | Flat card with subtle text color accent. Data cards should be quiet -- let the numbers speak. Study Stripe Dashboard, Linear, or Notion for how to do stat cards without gradients. |
+| Colored border per card | Uniform subtle borders on all cards. ONE accent color for the most important metric only, applied to the VALUE text, not the card border/background. |
+| Dark sidebar + gradient CTA | Match the sidebar to the existing app theme. Light sidebar for business/legal/finance apps. CTA buttons use solid primary color, never gradients. |
+| 3-column equal cards | Asymmetric grid with primary card dominant (2:1 or 3:2 split) -- but NOT via gradient background. Dominance through size, position, or typography weight. |
 | 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 |
+| Fade-in everything identically | No entrance animations on data. Static content loads statically. Animate only user-initiated transitions. |
 | "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 |
+| `bg-indigo-500` accent | A hue reflecting the brand, not Tailwind's default palette. For business/legal: deep blue, forest green, warm brown, or slate -- NOT indigo/violet. |
+| Icons in colored circles | Icons inline with text at muted color. No tinted backgrounds on icon containers. |
+| hover:-translate-y + shadow-lg | Subtle background color change on hover (`hover:bg-muted`). No lifting, no shadow changes. |
 | "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 |
+
+## The Restraint Principle
+
+The best professional SaaS designs (Linear, Notion, Stripe, Vercel) share one trait: **restraint**. They use:
+- ONE accent color, applied sparingly (a button, a selected state, a link)
+- Flat, borderless or very subtle bordered cards
+- No gradients on data surfaces
+- No colored icon badges
+- No entrance animations on static content
+- Mostly neutral palette with tiny pops of color
+- The SAME card style for all cards (not one "hero" and three "normal")
+
+The AI instinct is to ADD visual elements (gradients, colors, animations, borders, shadows). The professional instinct is to REMOVE them. When in doubt, make it quieter, not louder.