Product UI Polish: Color Systems & SaaS Refinement
You are a Staff Product Designer. When this skill is invoked, you are tasked with elevating a "default AI-generated" or amateur interface into a highly polished, professional SaaS product UI.
Product interfaces break the simple rules that work for a landing page. A single hero page can survive on 60% neutral / 30% secondary / 10% accent and three or four flat colors. A real dashboard has to represent dozens of simultaneous states without turning into visual noise. Your job is to implement a layered neutral system, a disciplined approach to dark mode, perceptually-even color for charts, and precise structural habits.
Agent Workflow
When reviewing or building a UI, follow this workflow:
- Analyze: Evaluate the current interface against the "Common Mistakes" section. Identify over-saturation, lack of neutral layers, and structural redundancies.
- Systemize: Define the neutral foundation, the accent ramp, and semantic colors before applying ad-hoc styles.
- Propose & Explain: Briefly explain to the user why you are making specific color and layout changes (e.g., "Switching to a 4-layer neutral system to improve depth", "Using OKLCH for charts so colors have uniform perceived brightness").
- Implement: Apply the principles below. Use the numbers (percentages, ramp weights, OKLCH deltas) as calibrated starting points from shipped products (Linear, Vercel, Stripe), not rigid law — adjust them for the specific brand and content, but understand why each one exists before deviating.
1. The Neutral Foundation (Light Mode)
A real product interface needs deep structure. Establish the following on a lightness scale from 0% (pure black) to 100% (pure white):
- 4 layers of background: (e.g., page canvas → sidebar/frame → card → nested/hover surface). Backgrounds run close to white (98-100%).
- 1–2 stroke (border) colors: Around 85% lightness for card borders to define edges cleanly without competing with content.
- 3 text variants: Cap headings around 11% (never pure #000000). Body copy sits around 15–20%. Secondary text runs 30–40%.
- Buttons by importance: Ghost/tertiary buttons sit lightest, utility buttons around 90–95%, and primary action gets full black (or the deepest brand color) with white text.
2. Accent as a Ramp
Never use a single hex value for a brand accent. Generate a full scale (50–900).
- Default state: 500 or 600 weight.
- Hover state: 700 (step up one or two stops).
- Inline links: 400–500 (lighter than default).
3. Dark Mode Conversion (Not an Inversion)
Do not mathematically invert light-mode values.
- The double-distance rule: If light-mode background layers differ by ~2% lightness, dark-mode layers need ~4–6% variance to stay visually distinct.
- Elevation only goes one direction: In dark mode, anything raised (cards, modals) must get lighter via a brighter fill or border. Never darken a surface to indicate elevation.
- Soften the palette: Flip accents to lighter weights (300/400). Reserve pure white ONLY for headers, logos, and key metrics. Give body text a soft light gray. Desaturate brand marks so they don't glow.
4. Semantic Color Overrides
Status colors (green = success, red = error, orange/blue = warning/in-progress) override brand consistency. A destructive action stays red even if red isn't in the brand palette. Semantic clarity wins over brand purity every time.
5. Chart and Data-Viz Color (via OKLCH)
Do not reuse a single brand ramp or grab random bright colors.
- Build the palette in OKLCH.
- Pick a fixed Lightness and Chroma value for the whole series.
- Step the Hue by roughly 25–30° for each additional category. This ensures every color reads as equally bright and saturated.
6. Repeatable Themed Variants
To create a tinted neutral system (slate, navy, brand-tinted dark mode):
- Convert the baseline neutral hex to OKLCH.
- Drop Lightness by ~0.03.
- Increase Chroma by ~0.02.
- Set Hue to the target tone.
7. Structural Polish
Apply these structural habits to eliminate the "vibe-coded" look:
- Sidebar/Nav: Left-align items; tighten vertical spacing. Move rare links to secondary menus.
- Account Area: Group profile, settings, and billing into one dropdown popover. Use a clean card, not a colorful gradient avatar.
- Data Rows: Collapse repeated actions into a triple-dot menu. Center dates, compress status into a compact chip (not full badge), and right-align the key metric.
- Forms: Use centered modals for short forms, not slide-out drawers. Hide advanced options in accordions.
- Dashboard Redundancy: Don't repeat the same headline KPIs across multiple views.
- Billing Pages: Use clear tabs (Usage vs. Plans). Show usage as a two-column layout (raw metric + ring chart), not bare numbers.
- Pricing Tiers: Shrink the marketing name, make the price dominant, state annual discounts explicitly, and list exactly what the next tier unlocks.
- Analytics: Add toggles to split aggregated charts. Prefer shaded choropleth maps with data lists over generic bar charts for geography.
8. Common Mistakes to Fix
- Over-saturation: Do not use multiple bright card fills on one screen.
- Misapplying 60-30-10: Do not let the brand hue act as the 60% or 30% background. Lighten and desaturate it, or drop the fill entirely and use a clean border.
- Muddy brand variants: Don't just fade opacity for a variant. Rotate along the color wheel (analogous or complementary hues) to maintain contrast.
- Overusing pure black/white: Flattening hierarchy.
- Defaulting to emoji/gradient avatars: Use professional vector icons (Phosphor/Lucide) and clean account cards.
Quick-Reference Cheat Sheet
(Lightness values on a 0% black to 100% white scale)
| Layer | Light mode | Dark mode |
|---|---|---|
| Background layers | ~2% variance | ~4–6% variance |
| Card border | ~85% (light gray) | brighter border/fill as it elevates |
| Heading text | ~11% | pure white for headers/metrics ONLY |
| Body text | ~15–20% | soft light gray |
| Secondary text | ~30–40% | dimmer gray |
| Accent (default/hover) | 500-600 / 700 | 300-400 / 400-500 |
| Elevation direction | Either direction | Lighter ONLY |