335 lines
19 KiB
Markdown
335 lines
19 KiB
Markdown
---
|
|
name: concepts/industry-color-systems
|
|
title: Industry Color Systems
|
|
description: 161 color palettes (11 tokens each) per industry — primary, secondary, accent, background, card, muted, border, destructive, ring.
|
|
tags: [colors, palette, design-tokens, industry, brand, accessibility]
|
|
source: ui-ux-pro-max-skill
|
|
---
|
|
|
|
# Industry Color Systems
|
|
|
|
161 цветовых систем, привязанных к типу продукта. Каждая система содержит 11 токенов (Primary, On Primary, Secondary, Accent и др.).
|
|
|
|
## Структура токенов
|
|
|
|
| Токен | Использование | Пример |
|
|
|-------|---------------|--------|
|
|
| **Primary** | Основной бренд-цвет | `#2563EB` |
|
|
| **On Primary** | Текст/иконки на primary | `#FFFFFF` |
|
|
| **Secondary** | Вспомогательный цвет | `#3B82F6` |
|
|
| **Accent** | CTA, важные действия | `#EA580C` |
|
|
| **Background** | Фон страницы | `#F8FAFC` |
|
|
| **Foreground** | Основной текст | `#1E293B` |
|
|
| **Card** | Фон карточек | `#FFFFFF` |
|
|
| **Muted** | Второстепенный текст | `#64748B` |
|
|
| **Border** | Границы элементов | `#E2E8F0` |
|
|
| **Destructive** | Ошибки, удаление | `#DC2626` |
|
|
| **Ring** | Focus ring | `#2563EB` |
|
|
|
|
---
|
|
|
|
## SaaS / B2B
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 1 | SaaS (General) | `#2563EB` | `#3B82F6` | `#EA580C` | `#F8FAFC` | `#1E293B` |
|
|
| 2 | Micro SaaS | `#6366F1` | `#818CF8` | `#059669` | `#F5F3FF` | `#1E1B4B` |
|
|
| 6 | B2B Service | `#0F172A` | `#334155` | `#0369A1` | `#F8FAFC` | `#020617` |
|
|
| 30 | Knowledge Base | `#475569` | `#64748B` | `#2563EB` | `#F8FAFC` | `#1E293B` |
|
|
| 68 | Freelancer Platform | `#6366F1` | `#818CF8` | `#16A34A` | `#EEF2FF` | `#312E81` |
|
|
| 69 | Marketing Agency | `#EC4899` | `#F472B6` | `#0891B2` | `#FDF2F8` | `#831843` |
|
|
| 72 | Digital Products | `#6366F1` | `#818CF8` | `#16A34A` | `#EEF2FF` | `#312E81` |
|
|
| 101 | CRM & Client Mgmt | `#2563EB` | `#3B82F6` | `#059669` | `#F8FAFC` | `#0F172A` |
|
|
| 102 | Inventory Mgmt | `#334155` | `#475569` | `#059669` | `#F8FAFC` | `#0F172A` |
|
|
| 105 | Invoice & Billing | `#1E3A5F` | `#2563EB` | `#059669` | `#F8FAFC` | `#0F172A` |
|
|
| 108 | Parenting Tracker | `#EC4899` | `#F472B6` | `#0284C7` | `#FDF2F8` | `#0F172A` |
|
|
| 109 | Scanner & Doc Mgmt | `#1E293B` | `#334155` | `#2563EB` | `#F8FAFC` | `#0F172A` |
|
|
| 111 | Password Manager | `#1E3A5F` | `#334155` | `#059669` | `#0F172A` | `#FFFFFF` |
|
|
| 112 | Expense Splitter | `#059669` | `#10B981` | `#DC2626` | `#F8FAFC` | `#0F172A` |
|
|
| 113 | Voice Recorder | `#DC2626` | `#EF4444` | `#2563EB` | `#FFFFFF` | `#0F172A` |
|
|
| 114 | Bookmark & Read-Later | `#D97706` | `#F59E0B` | `#2563EB` | `#FFFBEB` | `#0F172A` |
|
|
| 115 | Translator App | `#2563EB` | `#0891B2` | `#EA580C` | `#F8FAFC` | `#0F172A` |
|
|
| 117 | Alarm & World Clock | `#D97706` | `#F59E0B` | `#6366F1` | `#0F172A` | `#FFFFFF` |
|
|
| 118 | File Manager | `#2563EB` | `#3B82F6` | `#D97706` | `#F8FAFC` | `#0F172A` |
|
|
| 119 | Email Client | `#2563EB` | `#3B82F6` | `#DC2626` | `#FFFFFF` | `#0F172A` |
|
|
| 120 | Casual Puzzle Game | `#EC4899` | `#8B5CF6` | `#F59E0B` | `#FDF2F8` | `#0F172A` |
|
|
| 121 | Trivia & Quiz | `#2563EB` | `#7C3AED` | `#F59E0B` | `#EFF6FF` | `#0F172A` |
|
|
| 131 | Link-in-Bio Builder | `#2563EB` | `#7C3AED` | `#EC4899` | `#FFFFFF` | `#0F172A` |
|
|
| 132 | Wardrobe Planner | `#BE185D` | `#EC4899` | `#D97706` | `#FDF2F8` | `#0F172A` |
|
|
| 135 | Couple App | `#BE185D` | `#EC4899` | `#DC2626` | `#FDF2F8` | `#0F172A` |
|
|
| 136 | Family Calendar | `#2563EB` | `#059669` | `#D97706` | `#F8FAFC` | `#0F172A` |
|
|
| 139 | Gift & Wishlist | `#DC2626` | `#D97706` | `#EC4899` | `#FFF1F2` | `#0F172A` |
|
|
| 145 | Medication Reminder | `#0284C7` | `#0891B2` | `#DC2626` | `#F0F9FF` | `#0F172A` |
|
|
| 146 | Water Tracker | `#0284C7` | `#06B6D4` | `#0891B2` | `#F0F9FF` | `#0F172A` |
|
|
| 147 | Fasting Timer | `#6366F1` | `#4338CA` | `#059669` | `#0F172A` | `#FFFFFF` |
|
|
| 148 | Anonymous Community | `#475569` | `#334155` | `#0891B2` | `#0F172A` | `#FFFFFF` |
|
|
| 149 | Local Events Discovery | `#EA580C` | `#F97316` | `#2563EB` | `#FFF7ED` | `#0F172A` |
|
|
| 150 | Study Together | `#2563EB` | `#3B82F6` | `#059669` | `#F8FAFC` | `#0F172A` |
|
|
| 151 | Coding Challenge | `#22C55E` | `#059669` | `#D97706` | `#0F172A` | `#FFFFFF` |
|
|
| 152 | Kids Learning | `#2563EB` | `#F59E0B` | `#EC4899` | `#EFF6FF` | `#0F172A` |
|
|
| 153 | Music Instrument | `#DC2626` | `#9A3412` | `#D97706` | `#FFFBEB` | `#0F172A` |
|
|
| 154 | Parking Finder | `#2563EB` | `#059669` | `#DC2626` | `#F0F9FF` | `#0F172A` |
|
|
| 155 | Public Transit | `#2563EB` | `#0891B2` | `#EA580C` | `#F8FAFC` | `#0F172A` |
|
|
| 156 | Road Trip Planner | `#EA580C` | `#0891B2` | `#D97706` | `#FFF7ED` | `#0F172A` |
|
|
| 157 | VPN & Privacy | `#1E3A5F` | `#334155` | `#22C55E` | `#0F172A` | `#FFFFFF` |
|
|
| 158 | Emergency SOS | `#DC2626` | `#EF4444` | `#2563EB` | `#FFF1F2` | `#0F172A` |
|
|
| 159 | Wallpaper App | `#7C3AED` | `#EC4899` | `#2563EB` | `#FAF5FF` | `#0F172A` |
|
|
| 160 | White Noise | `#475569` | `#334155` | `#4338CA` | `#0F172A` | `#FFFFFF` |
|
|
| 161 | Home Decoration | `#78716C` | `#A8A29E` | `#D97706` | `#FAF5F2` | `#0F172A` |
|
|
|
|
## E-Commerce / Retail
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 3 | E-commerce | `#059669` | `#10B981` | `#EA580C` | `#ECFDF5` | `#064E3B` |
|
|
| 4 | E-commerce Luxury | `#1C1917` | `#44403C` | `#A16207` | `#FAFAF9` | `#0C0A09` |
|
|
| 34 | Beauty/Spa | `#EC4899` | `#F9A8D4` | `#8B5CF6` | `#FDF2F8` | `#831843` |
|
|
| 35 | Luxury Brand | `#1C1917` | `#44403C` | `#A16207` | `#FAFAF9` | `#0C0A09` |
|
|
| 36 | Restaurant | `#DC2626` | `#F87171` | `#A16207` | `#FEF2F2` | `#450A0A` |
|
|
| 54 | Brewery/Winery | `#7C2D12` | `#B91C1C` | `#A16207` | `#FEF2F2` | `#450A0A` |
|
|
| 63 | Bakery/Cafe | `#92400E` | `#B45309` | `#92400E` | `#FEF3C7` | `#78350F` |
|
|
| 95 | Food Delivery | `#EA580C` | `#F97316` | `#2563EB` | `#FFF7ED` | `#0F172A` |
|
|
| 97 | Recipe App | `#9A3412` | `#C2410C` | `#059669` | `#FFFBEB` | `#0F172A` |
|
|
| 106 | Grocery List | `#059669` | `#10B981` | `#D97706` | `#ECFDF5` | `#0F172A` |
|
|
|
|
## Finance / Banking
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 7 | Financial Dashboard | `#0F172A` | `#1E293B` | `#22C55E` | `#020617` | `#F8FAFC` |
|
|
| 14 | Fintech/Crypto | `#F59E0B` | `#FBBF24` | `#8B5CF6` | `#0F172A` | `#F8FAFC` |
|
|
| 42 | Banking/Finance | `#0F172A` | `#1E3A8A` | `#A16207` | `#F8FAFC` | `#020617` |
|
|
| 43 | Online Course | `#0D9488` | `#2DD4BF` | `#EA580C` | `#F0FDFA` | `#134E4A` |
|
|
| 91 | Personal Finance | `#1E40AF` | `#3B82F6` | `#059669` | `#0F172A` | `#FFFFFF` |
|
|
| 104 | Appointment Booking | `#0284C7` | `#0EA5E9` | `#059669` | `#F0F9FF` | `#0F172A` |
|
|
|
|
## Health / Medical
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 9 | Healthcare App | `#0891B2` | `#22D3EE` | `#059669` | `#ECFEFF` | `#164E63` |
|
|
| 23 | Mental Health | `#8B5CF6` | `#C4B5FD` | `#059669` | `#FAF5FF` | `#4C1D95` |
|
|
| 58 | Medical Clinic | `#0891B2` | `#22D3EE` | `#16A34A` | `#F0FDFA` | `#134E4A` |
|
|
| 59 | Pharmacy | `#15803D` | `#22C55E` | `#0369A1` | `#F0FDF4` | `#14532D` |
|
|
| 60 | Dental Practice | `#0EA5E9` | `#38BDF8` | `#0EA5E9` | `#F0F9FF` | `#0C4A6E` |
|
|
| 61 | Veterinary | `#0D9488` | `#14B8A6` | `#EA580C` | `#F0FDFA` | `#134E4A` |
|
|
| 94 | Habit Tracker | `#D97706` | `#F59E0B` | `#059669` | `#FFFBEB` | `#0F172A` |
|
|
| 98 | Meditation App | `#7C3AED` | `#8B5CF6` | `#059669` | `#FAF5FF` | `#0F172A` |
|
|
| 100 | Diary & Journal | `#92400E` | `#A16207` | `#6366F1` | `#FFFBEB` | `#0F172A` |
|
|
| 134 | Plant Care Tracker | `#15803D` | `#059669` | `#D97706` | `#F0FDF4` | `#0F172A` |
|
|
| 141 | Yoga & Stretching | `#6B7280` | `#78716C` | `#0891B2` | `#F5F5F0` | `#0F172A` |
|
|
| 143 | Calorie Counter | `#059669` | `#10B981` | `#EA580C` | `#ECFDF5` | `#0F172A` |
|
|
| 144 | Period Tracker | `#BE185D` | `#EC4899` | `#7C3AED` | `#FDF2F8` | `#0F172A` |
|
|
| 142 | Sleep Tracker | `#4338CA` | `#6366F1` | `#7C3AED` | `#0F172A` | `#FFFFFF` |
|
|
|
|
## Entertainment / Creative
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 11 | Creative Agency | `#EC4899` | `#F472B6` | `#0891B2` | `#FDF2F8` | `#831843` |
|
|
| 13 | Gaming | `#7C3AED` | `#A78BFA` | `#F43F5E` | `#0F0F23` | `#E2E8F0` |
|
|
| 45 | Music Streaming | `#1E1B4B` | `#4338CA` | `#22C55E` | `#0F0F23` | `#F8FAFC` |
|
|
| 46 | Video Streaming | `#0F0F23` | `#1E1B4B` | `#E11D48` | `#000000` | `#F8FAFC` |
|
|
| 66 | News/Media | `#DC2626` | `#EF4444` | `#1E40AF` | `#FEF2F2` | `#450A0A` |
|
|
| 67 | Magazine/Blog | `#18181B` | `#3F3F46` | `#EC4899` | `#FAFAFA` | `#09090B` |
|
|
| 76 | Sports Team | `#DC2626` | `#EF4444` | `#DC2626` | `#FEF2F2` | `#7F1D1D` |
|
|
| 78 | Theater/Cinema | `#1E1B4B` | `#312E81` | `#CA8A04` | `#0F0F23` | `#F8FAFC` |
|
|
| 122 | Card & Board Game | `#15803D` | `#166534` | `#D97706` | `#0F172A` | `#FFFFFF` |
|
|
| 123 | Idle & Clicker | `#D97706` | `#F59E0B` | `#7C3AED` | `#FFFBEB` | `#0F172A` |
|
|
| 124 | Word & Crossword | `#15803D` | `#059669` | `#D97706` | `#FFFFFF` | `#0F172A` |
|
|
| 125 | Arcade & Retro | `#DC2626` | `#2563EB` | `#22C55E` | `#0F172A` | `#FFFFFF` |
|
|
| 126 | Photo Editor | `#7C3AED` | `#6366F1` | `#0891B2` | `#0F172A` | `#FFFFFF` |
|
|
| 127 | Short Video Editor | `#EC4899` | `#DB2777` | `#2563EB` | `#0F172A` | `#FFFFFF` |
|
|
| 128 | Drawing Canvas | `#7C3AED` | `#8B5CF6` | `#0891B2` | `#1C1917` | `#FFFFFF` |
|
|
| 129 | Music Creation | `#7C3AED` | `#6366F1` | `#22C55E` | `#0F172A` | `#FFFFFF` |
|
|
| 130 | Meme & Sticker Maker | `#EC4899` | `#F59E0B` | `#2563EB` | `#FFFFFF` | `#0F172A` |
|
|
| 131 | AI Photo & Avatar | `#7C3AED` | `#6366F1` | `#EC4899` | `#FAF5FF` | `#0F172A` |
|
|
|
|
## Travel / Events
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 38 | Travel/Tourism | `#0EA5E9` | `#38BDF8` | `#EA580C` | `#F0F9FF` | `#0C4A6E` |
|
|
| 39 | Hotel/Hospitality | `#1E3A8A` | `#3B82F6` | `#A16207` | `#F8FAFC` | `#1E40AF` |
|
|
| 40 | Wedding Planning | `#DB2777` | `#F472B6` | `#A16207` | `#FDF2F8` | `#831843` |
|
|
| 65 | Airline | `#1E3A8A` | `#3B82F6` | `#EA580C` | `#EFF6FF` | `#1E40AF` |
|
|
| 156 | Road Trip Planner | `#EA580C` | `#0891B2` | `#D97706` | `#FFF7ED` | `#0F172A` |
|
|
| 18 | Event Management | `#7C3AED` | `#A78BFA` | `#EA580C` | `#FAF5FF` | `#4C1D95` |
|
|
| 137 | Mood Tracker | `#7C3AED` | `#6366F1` | `#D97706` | `#FAF5FF` | `#0F172A` |
|
|
|
|
## Tech / Developer
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 7 | Analytics Dashboard | `#1E40AF` | `#3B82F6` | `#D97706` | `#F8FAFC` | `#1E3A8A` |
|
|
| 18 | AI/Chatbot Platform | `#7C3AED` | `#A78BFA` | `#0891B2` | `#FAF5FF` | `#1E1B4B` |
|
|
| 20 | NFT/Web3 | `#8B5CF6` | `#A78BFA` | `#FBBF24` | `#0F0F23` | `#F8FAFC` |
|
|
| 24 | Smart Home/IoT | `#1E293B` | `#334155` | `#22C55E` | `#0F172A` | `#F8FAFC` |
|
|
| 25 | EV/Charging | `#0891B2` | `#22D3EE` | `#16A34A` | `#ECFEFF` | `#164E63` |
|
|
| 27 | Podcast Platform | `#1E1B4B` | `#312E81` | `#F97316` | `#0F0F23` | `#F8FAFC` |
|
|
| 80 | Cybersecurity | `#00FF41` | `#0D0D0D` | `#FF3333` | `#000000` | `#E0E0E0` |
|
|
| 81 | Developer IDE | `#1E293B` | `#334155` | `#22C55E` | `#0F172A` | `#F8FAFC` |
|
|
| 82 | Biotech / Life Sciences | `#0EA5E9` | `#0284C7` | `#059669` | `#F0F9FF` | `#0C4A6E` |
|
|
| 83 | Space Tech | `#F8FAFC` | `#94A3B8` | `#3B82F6` | `#0B0B10` | `#F8FAFC` |
|
|
| 85 | Quantum Computing | `#00FFFF` | `#7B61FF` | `#FF00FF` | `#050510` | `#E0E0FF` |
|
|
| 86 | Biohacking / Longevity | `#FF4D4D` | `#4D94FF` | `#059669` | `#F5F5F7` | `#1C1C1E` |
|
|
| 87 | Drone Fleet Manager | `#00FF41` | `#008F11` | `#FF3333` | `#0D1117` | `#E6EDF3` |
|
|
| 88 | Generative Art | `#18181B` | `#3F3F46` | `#EC4899` | `#FAFAFA` | `#09090B` |
|
|
| 89 | Spatial Computing OS | `#FFFFFF` | `#E5E5E5` | `#FFFFFF` | `#000000` | `#999999` |
|
|
| 90 | Sustainable Energy | `#059669` | `#10B981` | `#059669` | `#ECFDF5` | `#064E3B` |
|
|
| 92 | Chat & Messaging | `#2563EB` | `#6366F1` | `#059669` | `#FFFFFF` | `#0F172A` |
|
|
| 93 | Notes & Writing | `#78716C` | `#A8A29E` | `#D97706` | `#FFFBEB` | `#0F172A` |
|
|
| 96 | Ride Hailing | `#1E293B` | `#334155` | `#2563EB` | `#0F172A` | `#FFFFFF` |
|
|
| 140 | Running & Cycling GPS | `#EA580C` | `#F97316` | `#059669` | `#0F172A` | `#FFFFFF` |
|
|
| 151 | Coding Challenge | `#22C55E` | `#059669` | `#D97706` | `#0F172A` | `#FFFFFF` |
|
|
| 110 | Calendar & Scheduling | `#2563EB` | `#3B82F6` | `#059669` | `#F8FAFC` | `#0F172A` |
|
|
|
|
## Education / Knowledge
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 10 | Educational App | `#4F46E5` | `#818CF8` | `#EA580C` | `#EEF2FF` | `#1E1B4B` |
|
|
| 29 | Micro-Credentials | `#0369A1` | `#0EA5E9` | `#A16207` | `#F0F9FF` | `#0C4A6E` |
|
|
| 43 | Online Course | `#0D9488` | `#2DD4BF` | `#EA580C` | `#F0FDFA` | `#134E4A` |
|
|
| 78 | Language Learning | `#4F46E5` | `#818CF8` | `#16A34A` | `#EEF2FF` | `#312E81` |
|
|
| 79 | Coding Bootcamp | `#0F172A` | `#1E293B` | `#22C55E` | `#020617` | `#F8FAFC` |
|
|
| 103 | Flashcard & Study | `#7C3AED` | `#8B5CF6` | `#059669` | `#FAF5FF` | `#0F172A` |
|
|
| 152 | Kids Learning | `#2563EB` | `#F59E0B` | `#EC4899` | `#EFF6FF` | `#0F172A` |
|
|
|
|
## Services / Local Business
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 36 | Real Estate | `#0F766E` | `#14B8A6` | `#0369A1` | `#F0FDFA` | `#134E4A` |
|
|
| 40 | Legal Services | `#1E3A8A` | `#1E40AF` | `#B45309` | `#F8FAFC` | `#0F172A` |
|
|
| 41 | Insurance | `#0369A1` | `#0EA5E9` | `#16A34A` | `#F0F9FF` | `#0C4A6E` |
|
|
| 55 | Home Services | `#1E40AF` | `#3B82F6` | `#EA580C` | `#EFF6FF` | `#1E3A8A` |
|
|
| 56 | Childcare/Daycare | `#F472B6` | `#FBCFE8` | `#16A34A` | `#FDF2F8` | `#9D174D` |
|
|
| 57 | Senior Care | `#0369A1` | `#38BDF8` | `#16A34A` | `#F0F9FF` | `#0C4A6E` |
|
|
| 62 | Florist/Plant Shop | `#15803D` | `#22C55E` | `#EC4899` | `#F0FDF4` | `#14532D` |
|
|
| 50 | Agriculture/Farm Tech | `#15803D` | `#22C55E` | `#A16207` | `#F0FDF4` | `#14532D` |
|
|
| 51 | Construction/Arch | `#64748B` | `#94A3B8` | `#EA580C` | `#F8FAFC` | `#334155` |
|
|
| 52 | Automotive | `#1E293B` | `#334155` | `#DC2626` | `#F8FAFC` | `#0F172A` |
|
|
| 53 | Photography Studio | `#18181B` | `#27272A` | `#F8FAFC` | `#000000` | `#FAFAFA` |
|
|
| 55 | Coworking Space | `#F59E0B` | `#FBBF24` | `#2563EB` | `#FFFBEB` | `#78350F` |
|
|
| 73 | Newsletter Platform | `#0369A1` | `#0EA5E9` | `#EA580C` | `#F0F9FF` | `#0C4A6E` |
|
|
| 74 | Church/Religious | `#7C3AED` | `#A78BFA` | `#A16207` | `#FAF5FF` | `#4C1D95` |
|
|
| 77 | Museum/Gallery | `#18181B` | `#27272A` | `#18181B` | `#FAFAFA` | `#09090B` |
|
|
|
|
## Social / Community
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 15 | Social Media App | `#E11D48` | `#FB7185` | `#2563EB` | `#FFF1F2` | `#881337` |
|
|
| 21 | Remote Work Tool | `#6366F1` | `#818CF8` | `#059669` | `#F5F3FF` | `#312E81` |
|
|
| 23 | Mental Health | `#8B5CF6` | `#C4B5FD` | `#059669` | `#FAF5FF` | `#4C1D95` |
|
|
| 28 | Dating App | `#E11D48` | `#FB7185` | `#EA580C` | `#FFF1F2` | `#881337` |
|
|
| 71 | Membership/Community | `#7C3AED` | `#A78BFA` | `#16A34A` | `#FAF5FF` | `#4C1D95` |
|
|
| 48 | Marketplace P2P | `#7C3AED` | `#A78BFA` | `#16A34A` | `#FAF5FF` | `#4C1D95` |
|
|
| 47 | Job Board/Recruiting | `#0369A1` | `#0EA5E9` | `#16A34A` | `#F0F9FF` | `#0C4A6E` |
|
|
| 49 | Logistics/Delivery | `#2563EB` | `#3B82F6` | `#EA580C` | `#EFF6FF` | `#1E40AF` |
|
|
| 22 | Pet Tech | `#F97316` | `#FB923C` | `#2563EB` | `#FFF7ED` | `#9A3412` |
|
|
| 26 | Subscription Box | `#D946EF` | `#E879F9` | `#EA580C` | `#FDF4FF` | `#86198F` |
|
|
|
|
## Utility / Tools
|
|
|
|
| # | Продукт | Primary | Secondary | Accent | Background | Foreground |
|
|
|---|---------|---------|-----------|--------|------------|------------|
|
|
| 1 | SaaS (General) | `#2563EB` | `#3B82F6` | `#EA580C` | `#F8FAFC` | `#1E293B` |
|
|
| 5 | Financial Dashboard | `#0F172A` | `#1E293B` | `#22C55E` | `#020617` | `#F8FAFC` |
|
|
| 8 | Healthcare App | `#0891B2` | `#22D3EE` | `#059669` | `#ECFEFF` | `#164E63` |
|
|
| 12 | Gaming | `#7C3AED` | `#A78BFA` | `#F43F5E` | `#0F0F23` | `#E2E8F0` |
|
|
| 32 | Beauty/Spa | `#EC4899` | `#F9A8D4` | `#8B5CF6` | `#FDF2F8` | `#831843` |
|
|
| 33 | Luxury Brand | `#1C1917` | `#44403C` | `#A16207` | `#FAFAF9` | `#0C0A09` |
|
|
| 37 | Fitness/Gym | `#F97316` | `#FB923C` | `#22C55E` | `#1F2937` | `#F8FAFC` |
|
|
| 99 | Weather App | `#0284C7` | `#0EA5E9` | `#F59E0B` | `#F0F9FF` | `#0F172A` |
|
|
| 107 | Timer & Pomodoro | `#DC2626` | `#EF4444` | `#059669` | `#0F172A` | `#FFFFFF` |
|
|
|
|
---
|
|
|
|
## Tailwind Config
|
|
|
|
Копируйте токены в Tailwind config:
|
|
|
|
```js
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Пример для SaaS (General)
|
|
primary: '#2563EB',
|
|
'primary-fg': '#FFFFFF',
|
|
secondary: '#3B82F6',
|
|
accent: '#EA580C',
|
|
background: '#F8FAFC',
|
|
foreground: '#1E293B',
|
|
card: '#FFFFFF',
|
|
cardfg: '#1E293B',
|
|
muted: '#64748B',
|
|
'muted-fg': '#64748B',
|
|
border: '#E2E8F0',
|
|
destructive: '#DC2626',
|
|
'destructive-fg': '#FFFFFF',
|
|
ring: '#2563EB',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## CSS Variables
|
|
|
|
```css
|
|
/* SaaS (General) */
|
|
:root {
|
|
--primary: #2563EB;
|
|
--on-primary: #FFFFFF;
|
|
--secondary: #3B82F6;
|
|
--accent: #EA580C;
|
|
--background: #F8FAFC;
|
|
--foreground: #1E293B;
|
|
--card: #FFFFFF;
|
|
--card-foreground: #1E293B;
|
|
--muted: #64748B;
|
|
--muted-foreground: #64748B;
|
|
--border: #E2E8F0;
|
|
--destructive: #DC2626;
|
|
--destructive-foreground: #FFFFFF;
|
|
--ring: #2563EB;
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
/* Пример Financial Dashboard */
|
|
--background: #020617;
|
|
--foreground: #F8FAFC;
|
|
--card: #0E1223;
|
|
--card-foreground: #F8FAFC;
|
|
--muted: #1A1E2F;
|
|
--muted-foreground: #94A3B8;
|
|
--border: #334155;
|
|
}
|
|
```
|
|
|
|
## Quick Color Lookup by Vibe
|
|
|
|
| Vibe | Primary | Accent | Background |
|
|
|------|---------|--------|------------|
|
|
| **Trust & Professional** | `#2563EB` / `#0F172A` | `#EA580C` / `#059669` | `#F8FAFC` |
|
|
| **Luxury & Premium** | `#1C1917` | `#A16207` | `#FAFAF9` |
|
|
| **Energy & Action** | `#F97316` / `#EA580C` | `#059669` | `#FFF7ED` |
|
|
| **Calm & Health** | `#0891B2` / `#059669` | `#059669` | `#ECFEFF` |
|
|
| **Creative & Bold** | `#EC4899` / `#7C3AED` | `#0891B2` / `#F43F5E` | `#FDF2F8` |
|
|
| **Dark & Tech** | `#1E293B` / `#0F172A` | `#22C55E` / `#00FF41` | `#0F172A` |
|
|
| **Warm & Cozy** | `#92400E` / `#9A3412` | `#D97706` | `#FFFBEB` |
|
|
| **Playful & Fun** | `#EC4899` / `#6366F1` | `#F97316` / `#F59E0B` | `#FDF2F8` |
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- **WCAG 3:1**: Многие акцентные цвета адаптированы для контраста 3:1 с фоном (примечания в CSV).
|
|
- **Destructive** почти всегда `#DC2626` (Tailwind red-600) для консистентности.
|
|
- **Ring** = Primary (для focus rings).
|
|
- Все 161 системы используют одинаковую структуру токенов — легко переключать.
|