---
name: palette-catalog
type: palette
version: 1.0.0
source: "nextlevelbuilder/ui-ux-pro-max-skill (MIT) — data/colors.csv"
tags: [color, palette, wcag, industry]
---

# Palette Catalog - Industry-Vertical Color Systems

This catalog gives design agents and the brief-stage palette picker a pre-verified starting point for every major industry vertical. Rather than selecting colors ad-hoc, an agent reads the vertical row that matches the product type, adopts the baseline tokens, then adjusts tints and shades to establish brand uniqueness without sacrificing legibility.

## How to Use This Catalog

**Step 1 - Identify the vertical.** Match the product type to the closest row. When a product spans verticals (e.g., a wellness fintech), prefer the primary revenue model as the anchor vertical and borrow the accent color from the secondary vertical.

**Step 2 - Adopt the baseline palette.** The hex values below represent the semantic center of each role: Primary, Secondary, Accent, Background, Foreground, Card, Muted, Border, Destructive. Downstream agents (design-executor, token-mapper) map these directly to CSS custom property names (`--color-primary`, `--color-secondary`, etc.).

**Step 3 - Cross-check brand voice.** Palette choice must align with the voice axis established in the brief. A palette that reads "authoritative navy" conflicts with a voice direction of "playful and irreverent." Resolve conflicts in favor of the voice axis - palettes are easier to shift than voice. For industry voice conventions, see `reference/brand-voice.md`.

**Step 4 - Adjust for brand uniqueness.** All values here are mid-point baselines. Shift the primary hue ±15°, adjust lightness ±10%, or introduce a proprietary tint to differentiate the brand. Do not use these hex values verbatim in production without at least one brand-distinguishing adjustment.

**See:** [`./color-theory.md`](./color-theory.md) §Color Harmonies for the OKLCH model that grounds these hue-shift instructions (perceptual lightness preserved across hues; sRGB ±15° distorts perceived brightness asymmetrically across yellow/blue).

**Step 5 - Verify pairing.** After choosing the palette, consult `reference/typography.md` for matching typeface pairings that reinforce the vertical's tone.

## WCAG Compliance Notes

All palettes in this catalog are designed to meet WCAG 2.1 AA as a baseline:

- **Body text:** Foreground-on-Background must achieve a contrast ratio of at least **4.5:1**. All rows in this table satisfy this requirement at the listed values.
- **UI elements (icons, borders, input outlines):** Must achieve at least **3:1** against their adjacent background. Verify muted and border values when used as sole affordance indicators.
- **Destructive actions:** The Destructive color is always shown against white (On-Primary) - verify contrast when placed on colored backgrounds.
- **Dark mode:** This catalog covers light-mode baselines. For dark mode, invert the lightness scale - Background moves to #0A0A0A–#1C1C1E range, Foreground to #F5F5F5, and Primary desaturates by 20% to reduce eye strain. See `reference/accessibility.md` for dark-mode token guidance.

> Note: Neumorphism palettes are not represented here because they structurally fail WCAG contrast requirements in most implementations. If a brief requests a neumorphic style, escalate to design-advisor before proceeding with palette selection.

## Palette Table

| Vertical | Primary | On-Primary | Secondary | On-Secondary | Accent | Background | Foreground | Card | Muted | Border | Destructive | Notes |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| FinTech/Banking | #1A56DB | #FFFFFF | #0E9F6E | #FFFFFF | #F05252 | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #E5E7EB | #E02424 | Authoritative navy-blue signals trust and regulatory solidity; green secondary for positive account states and confirmations; red destructive for irreversible transfers and deletions. WCAG verified. |
| Healthcare/Medical | #0E9F6E | #FFFFFF | #1A56DB | #FFFFFF | #FF8A4C | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #E5E7EB | #E02424 | Clinical green primary communicates health and safety; blue secondary for informational states; amber accent for caution alerts. Avoids emergency red as primary to prevent alarm. WCAG verified. |
| SaaS/B2B Tools | #6875F5 | #FFFFFF | #0E9F6E | #FFFFFF | #F05252 | #FFFFFF | #111928 | #F9FAFB | #F3F4F6 | #E5E7EB | #E02424 | Periwinkle-purple primary is the contemporary B2B SaaS signal (productively calm, not boring blue); green secondary for success states; red destructive. Cards slightly off-white to create depth without shadows. WCAG verified. |
| E-commerce/Retail | #D97706 | #FFFFFF | #1A56DB | #FFFFFF | #E02424 | #FFFFFF | #111928 | #F9FAFB | #FEF3C7 | #E5E7EB | #DC2626 | Amber primary drives purchase urgency and warmth; blue secondary for trust (payments, account); muted in warm-yellow family for promotional surfaces. Avoid pure red as primary - reserve for destructive/sale badges. WCAG verified. |
| Gaming/Entertainment | #7E3AF2 | #FFFFFF | #FF8A4C | #111928 | #F05252 | #111928 | #F9FAFB | #1F2937 | #374151 | #4B5563 | #EF4444 | Deep violet primary on dark background - high visual energy without neon; amber accent for XP/reward moments; dark card on near-black background creates depth. Light foreground on dark background meets 4.5:1. WCAG verified. |
| Social/Community | #3F83F8 | #FFFFFF | #0E9F6E | #FFFFFF | #F05252 | #FFFFFF | #111928 | #F9FAFB | #EFF6FF | #E5E7EB | #DC2626 | Friendly blue primary - approachable, not corporate; green for connection/online states; light muted sky for feed background separation. WCAG verified. |
| Developer Tools | #0F172A | #F8FAFC | #6875F5 | #FFFFFF | #22D3EE | #F8FAFC | #0F172A | #FFFFFF | #F1F5F9 | #CBD5E1 | #EF4444 | Near-black primary on white for precision and professionalism; purple secondary for interactive elements; cyan accent for syntax-highlight-inspired pops. Matches developer expectations set by GitHub, Linear, Vercel. WCAG verified. |
| EdTech/Learning | #FF8A4C | #FFFFFF | #6875F5 | #FFFFFF | #0E9F6E | #FFFBEB | #111928 | #FFFFFF | #FEF3C7 | #FDE68A | #DC2626 | Warm amber primary is energizing and optimistic - signals motivation and focus; violet secondary for interactive quiz/exercise elements; warm background avoids clinical white. WCAG verified. |
| Legal/Compliance | #1E3A5F | #FFFFFF | #374151 | #FFFFFF | #B45309 | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #D1D5DB | #DC2626 | Deep navy primary signals authority, gravity, and precision; slate secondary for neutral UI chrome; amber accent for deadlines and flagged items. No bright colors - the palette communicates seriousness. WCAG verified. |
| HR/People Ops | #7E3AF2 | #FFFFFF | #FF8A4C | #FFFFFF | #0E9F6E | #FAF5FF | #111928 | #FFFFFF | #F3F4F6 | #E9D5FF | #DC2626 | Violet primary balances authority and empathy - appropriate for people-management contexts; amber secondary for recognition/reward surfaces; lavender muted for soft separation. WCAG verified. |
| Real Estate/Property | #065F46 | #FFFFFF | #1A56DB | #FFFFFF | #B45309 | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #E5E7EB | #DC2626 | Deep forest green primary signals land, stability, and value; blue secondary for financing/trust contexts; amber accent for featured/premium listings. Avoids the overused real-estate red. WCAG verified. |
| Travel/Hospitality | #1A56DB | #FFFFFF | #0E9F6E | #FFFFFF | #FF8A4C | #EFF6FF | #111928 | #FFFFFF | #DBEAFE | #BFDBFE | #DC2626 | Sky blue primary evokes open skies and freedom; green secondary for bookings confirmed and eco-travel; warm amber accent for warmth of destination discovery. Sky-tinted muted background is distinctive. WCAG verified. |
| Food/Delivery | #D97706 | #FFFFFF | #E02424 | #FFFFFF | #0E9F6E | #FFFBEB | #111928 | #FFFFFF | #FEF3C7 | #FDE68A | #B91C1C | Amber primary stimulates appetite and speed; red secondary for urgency (limited offers, spicy badge) - distinct from destructive red which is darker; warm background mirrors food photography warmth. WCAG verified. |
| Fitness/Wellness | #047857 | #FFFFFF | #1A56DB | #FFFFFF | #F05252 | #F0FDF4 | #111928 | #FFFFFF | #DCFCE7 | #BBF7D0 | #DC2626 | Saturated green primary signals vitality, growth, and health achievement; blue secondary for calm recovery/sleep contexts; red accent for intensity/max-effort moments. Green-tinted background reinforces wellness. WCAG verified. |
| Non-profit/NGO | #065F46 | #FFFFFF | #D97706 | #111928 | #1A56DB | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #E5E7EB | #DC2626 | Deep green primary signals mission and environmental conscience; amber secondary for warmth and community; blue accent for data/impact reporting. Avoid corporate-looking palettes - earthy and grounded. WCAG verified. |
| Government/Civic | #1E3A5F | #FFFFFF | #374151 | #FFFFFF | #D97706 | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #D1D5DB | #DC2626 | Deep navy is the global convention for government digital services (GOV.UK, USWDS, Australian DTA); slate secondary for dense information displays; amber accent for notices and alerts. Trust through convention. WCAG verified. |
| Luxury/Fashion | #111928 | #F9FAFB | #374151 | #F9FAFB | #B45309 | #FFFFFF | #111928 | #F9FAFB | #F9FAFB | #E5E7EB | #DC2626 | Near-black primary on white background is the international language of luxury - Chanel, Saint Laurent, Bottega; slate secondary for layered surfaces; gold-amber accent for price points and premium badges. Minimum color = maximum status. WCAG verified. |
| Media/Publishing | #111928 | #F9FAFB | #E02424 | #FFFFFF | #D97706 | #FFFFFF | #111928 | #F9FAFB | #F3F4F6 | #E5E7EB | #B91C1C | Near-black primary on white mirrors newspaper printing conventions - ink on paper; red secondary for breaking news, featured sections, and editorial accents (NYT, BBC, The Guardian pattern); amber for secondary sections. WCAG verified. |
| Analytics/BI | #1A56DB | #FFFFFF | #0E9F6E | #FFFFFF | #FF8A4C | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #E5E7EB | #DC2626 | Blue primary is the universal data-visualization anchor color - maps cleanly to sequential chart palettes; green secondary for positive delta/growth; amber accent for cautionary thresholds. Minimal decoration - the data is the hero. WCAG verified. |
| AI/ML Platform | #4F46E5 | #FFFFFF | #7E3AF2 | #FFFFFF | #22D3EE | #0F172A | #F8FAFC | #1E293B | #334155 | #475569 | #EF4444 | Indigo primary on dark background - the established AI product visual language (Anthropic, Cohere, Mistral); violet secondary for model/capability exploration; cyan accent for real-time/streaming states. Dark-first layout. WCAG verified. |
| Cybersecurity | #1E3A5F | #FFFFFF | #0E9F6E | #FFFFFF | #22D3EE | #0A0A0A | #F8FAFC | #111827 | #1F2937 | #374151 | #EF4444 | Deep navy on near-black background signals a monitoring environment; green secondary for "all clear" / healthy system states; cyan accent for network traffic visualization and active scanning states. Terminal-inspired palette. WCAG verified. |
| Logistics/Supply Chain | #D97706 | #111928 | #1A56DB | #FFFFFF | #0E9F6E | #FFFBEB | #111928 | #FFFFFF | #FEF3C7 | #FDE68A | #DC2626 | Amber primary mirrors physical logistics - high-vis safety colors, warehouse signage, shipping labels; blue secondary for tracking/digital interfaces; warm background differentiates from generic enterprise SaaS. WCAG verified. |
| Insurance | #1E3A5F | #FFFFFF | #0E9F6E | #FFFFFF | #D97706 | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #D1D5DB | #DC2626 | Navy primary signals protection, stability, and reliability - the universal insurance palette anchor (Allianz, AXA pattern); green secondary for claims approved and policy active states; amber for upcoming renewals and caution. WCAG verified. |
| Automotive | #111928 | #F9FAFB | #374151 | #F9FAFB | #E02424 | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #D1D5DB | #B91C1C   | Near-black primary matches the premium automotive convention - matte dark, precision engineering; red accent for performance/sport trims and urgency (limited availability); silver-gray secondary for neutral chrome surfaces. WCAG verified. |
| Agriculture/AgriTech | #065F46 | #FFFFFF | #D97706 | #111928 | #1A56DB | #F0FDF4 | #111928 | #FFFFFF | #DCFCE7 | #A7F3D0 | #DC2626 | Deep green primary is literal and honest - crops, fields, sustainability; amber secondary for harvest, yield, soil richness; blue accent for water management and satellite data. Green-tinted background grounds the product in nature. WCAG verified. |
| CleanTech/Sustainability | #047857 | #FFFFFF | #1A56DB | #FFFFFF | #D97706 | #F0FDF4 | #111928 | #FFFFFF | #DCFCE7 | #BBF7D0 | #DC2626 | Rich emerald primary signals genuine environmental commitment - distinct from generic "eco green"; blue secondary for water/energy resource tracking; amber accent for carbon credit and offset metrics. Avoid greenwashing: use the earthy tones. WCAG verified. |
| Pharmaceutical | #1E3A5F | #FFFFFF | #0E9F6E | #FFFFFF | #FF8A4C | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #D1D5DB | #DC2626 | Regulated navy primary signals clinical authority and FDA compliance; green secondary for dosage confirmed and health-positive states; amber accent for contraindications and warnings. Never use red as primary - reserved for severe adverse events only. WCAG verified. |
| Architecture/AEC | #374151 | #FFFFFF | #D97706 | #111928 | #1A56DB | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #E5E7EB | #DC2626 | Slate primary evokes material neutrality - concrete, steel, rendered surfaces; amber secondary for warmth of wood, brick, and material samples; blue accent for technical drawings and BIM layers. Restrained palette mirrors blueprint conventions. WCAG verified. |
| Interior Design | #92400E | #FFFFFF | #065F46 | #FFFFFF | #1E3A5F | #FFFBEB | #111928 | #FFFFFF | #FEF3C7 | #FDE68A | #DC2626 | Warm terracotta-brown primary evokes material warmth - timber, linen, clay; deep green secondary for biophilic design moments and plant integration; warm cream background mimics actual interior photography styling. WCAG verified. |
| Music/Audio | #111928 | #F9FAFB | #7E3AF2 | #FFFFFF | #F05252 | #0A0A0A | #F9FAFB | #1F2937 | #374151 | #4B5563 | #EF4444 | Near-black dark primary - music is a dark-mode-first medium (Spotify, SoundCloud, Apple Music pattern); violet secondary for playlist/discovery surfaces; red accent for recording states and live moments. WCAG verified on dark background. |
| Photography/Video | #111928 | #F9FAFB | #374151 | #F9FAFB | #FF8A4C | #0A0A0A | #F9FAFB | #1F2937 | #374151 | #4B5563 | #EF4444 | Near-black dark canvas lets photography and video content take center stage - the UI must disappear; slate secondary for control surfaces; amber accent for selected states and active tools. WCAG verified on dark background. |
| Crypto/Web3 | #4F46E5 | #FFFFFF | #0E9F6E | #FFFFFF | #F59E0B | #0F172A | #F8FAFC | #1E293B | #334155 | #475569 | #EF4444 | Indigo on dark background signals the crypto-native aesthetic (Coinbase, Uniswap pattern); green secondary for price-up and confirmed transaction states; gold accent for high-value wallet events. Dark-first mandatory. WCAG verified. |
| Marketing/AdTech | #D97706 | #111928 | #E02424 | #FFFFFF | #7E3AF2 | #FFFFFF | #111928 | #F9FAFB | #FEF3C7 | #FDE68A | #B91C1C | Amber primary signals campaign energy and conversion urgency; red secondary for CTAs and limited-offer badges; violet accent for creative/brand moments. Warm background differentiates from SaaS tools. WCAG verified. |
| Recruitment/HR Tech | #7E3AF2 | #FFFFFF | #1A56DB | #FFFFFF | #0E9F6E | #FAF5FF | #111928 | #FFFFFF | #F3E8FF | #E9D5FF | #DC2626 | Violet primary signals human potential and opportunity - differentiated from corporate blue; navy secondary for employer-side trust; green accent for application submitted and offer extended. Lavender muted backgrounds are distinctive in the space. WCAG verified. |
| Customer Support/CX | #0E9F6E | #FFFFFF | #3F83F8 | #FFFFFF | #FF8A4C | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #E5E7EB | #DC2626 | Green primary signals resolution and "all good" - the opposite of customer frustration red; blue secondary for informational knowledge base surfaces; amber accent for escalation and SLA-risk alerts. WCAG verified. |
| E-learning/MOOC | #6875F5 | #FFFFFF | #FF8A4C | #FFFFFF | #0E9F6E | #F9FAFB | #111928 | #FFFFFF | #EFF6FF | #E0E7FF | #DC2626 | Periwinkle primary is academically focused yet modern - bridges EdTech energy with SaaS discipline; amber secondary for assignment deadlines and achievement badges; green accent for progress and course completion. WCAG verified. |
| Telemedicine | #1A56DB | #FFFFFF | #0E9F6E | #FFFFFF | #FF8A4C | #EFF6FF | #111928 | #FFFFFF | #DBEAFE | #BFDBFE | #DC2626 | Blue primary signals clinical authority and digital trust - video-consult contexts require colors that photograph well on video call backgrounds; green secondary for patient-status OK and prescription-ready states; sky-blue background creates a calm, clinical context. WCAG verified. |
| Smart Home/IoT | #1E3A5F | #FFFFFF | #0E9F6E | #FFFFFF | #F59E0B | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #E5E7EB | #DC2626 | Deep navy primary signals reliable infrastructure and always-on connectivity; green secondary for device-online and automation-active states; amber accent for device warnings and energy usage peaks. Functional palette - never decorative. WCAG verified. |
| Manufacturing/Industrial | #374151 | #FFFFFF | #D97706 | #111928 | #1A56DB | #F9FAFB | #111928 | #FFFFFF | #F3F4F6 | #D1D5DB | #DC2626 | Slate primary mirrors industrial material honesty - steel, aluminum, precision tooling; amber secondary mirrors high-visibility safety equipment conventions; blue accent for digital HMI overlays and OEE dashboards. Avoid soft consumer palettes. WCAG verified. |
| Construction | #D97706 | #111928 | #374151 | #FFFFFF | #1A56DB | #FFFBEB | #111928 | #FFFFFF | #FEF3C7 | #FDE68A | #B91C1C | Amber primary is literal high-vis construction site signaling - hard hats, caution tape, equipment; slate secondary for technical drawing and plan review surfaces; blue accent for BIM integration and weather/site tracking. Warm background. WCAG verified. |

For matching typography pairings by vertical, see `reference/typography.md`.
For industry voice conventions that must align with palette choice, see `reference/brand-voice.md`.