Color
Color
Philosophy · Primary purple · Gold signal · 6-tint card system · Dark surfaces · Neutrals · Functional colors · Accessibility · Component mapping · Do's & don'ts
Color at Corbez is semantic first. Every color carries a meaning — one job, one feeling. Purple is identity. Gold is earned access. Green is results. Color isn't decoration; it is communication.
This page is the single source of truth for every color decision in the Corbez design system — from hero backgrounds to dashboard status badges to card tints to pass card accents. When in doubt, come here first.
Primary purple
Purple is Corbez. One deep authoritative brand color: #2E1065 (primary DEFAULT = primary-950). WCAG AAA on white. Used for every solid fill — hero backgrounds, buttons, active states, logo. Lighter shades 25–400 are surface tints only.
Dawn
#F8F5FF
primary-25
16.8:1 on #2E1065 · AAA
Mist
#EDE9FF
primary-100
14.2:1 on #2E1065 · AAA
Haze
#DDD6FE
primary-200
12.1:1 on #2E1065 · AAA
Lavender
#A78BFA
primary-400 / light
7.3:1 on #2E1065 · AAA
Mid Violet
#7C3AED
primary-600
5.2:1 on white · AA
Active Violet
#6D28D9
primary-700
7.1:1 on white · AAA
Deep Ink
#2E1065
primary-950
16.8:1 on white · AAA
When to use each shade
- 25–200 — Tinted surfaces, card backgrounds, icon badge fills, hover states on light UI
- 400 — Subtle decorative accents, disabled state highlights
- 600–700 — Mid-violet for decorative tints and gradient endpoints only
- DEFAULT / 950 — The Corbez mark. Everything: hero backgrounds, CTA fills, active states, footer, logo fill (#2E1065)
Gold — the access signal
Gold is Corbez's secondary brand color. It signals membership, earned access, and recognition. It is the color of the pass card accent, the verified badge, and the 'you are known here' moment. Never use gold for generic success states — green owns success. Gold means you belong.
Gold Tint
#FDF5E6
gold.tint
Gold Light
#E8D5A3
gold.light
Champagne Gold
#C9A96E
gold DEFAULT
2.2:1 on white · Decorative
Gold Muted
#A88A52
gold.muted
3.8:1 on white · AA (large)
Gold Dark
#8B6F3A
gold.dark
5.1:1 on white · AA
“
New people started coming in for lunch. They scan their Corbez Pass, that is it.
Ahad
Owner · Italian Pizzeria
gold.tint bg · text-gold quote mark
Pass card — gold accent line
Corbez Pass
Verified Member
Access active
Gold accessibility rules
gold.DEFAULT (#C9A96E) has only 2.2:1 on white — use it decoratively only (quote marks, accent lines, dot indicators). For readable text use gold.dark (#8B6F3A) which reaches 5.1:1 on white and 4.1:1 on gold.tint (WCAG AA). Never use gold as body text color on a white surface.
6-tint card system
Every colored card, badge, metric, and tinted surface uses one of these six families — Purple, Pink, Green, Peach, Teal, and Gold. Each color carries a fixed semantic meaning. Rotate them intentionally across layouts for visual rhythm. Never repeat adjacent cards in the same family.
Aa
Purple — Identity
Platform, brand, getting started, step 1
'Claim your pass' metric, step 1 of any journey, brand satisfaction stats
Aa
Pink — People
Trust, relationships, personal stories, community
Employee testimonials, user counts, 'who joined' moments
Aa
Green — Results
Savings, growth, success, completion, step 3
'30% cost reduction', revenue metrics, verified states
Aa
Peach — Warmth
Welcome, barrier-free, approachable, onboarding
'$0 for employees', free tier callout, merchant welcome
Aa
Teal — Knowledge
Data, analytics, resources, information
'98% satisfaction' from surveys, analytics metrics, knowledge base
Aa
Gold — Recognition
Earned access, membership, loyalty, 'you are known here'
Merchant earned-loyalty stories, pass card moments, verified member
| Family | Card bg token | Text token | Light variant |
|---|---|---|---|
| Purple | bg-primary-200 | text-primary-700 | bg-primary-100 |
| Pink | bg-accent-pink-tint | text-accent-pink | bg-accent-pink-tint-light |
| Green | bg-accent-green-tint | text-accent-green | bg-accent-green-tint-light |
| Peach | bg-accent-peach-tint | text-accent-peach | bg-accent-peach-tint-light |
| Teal | bg-accent-teal-tint | text-accent-teal | bg-accent-teal-tint-light |
| Gold | bg-gold-tint | text-gold-dark (body) · text-gold (decorative) | border-gold-light |
Dark surfaces
Dark surfaces anchor our brand authority. primary-950 is the canonical dark brand surface — used for heroes, footers, and deep sections. The navy family exists for legacy compatibility (navbar, dashboard shells). New dark surfaces should use primary-950.
Deep Brand
#2E1065
primary-950
Shell Navy
#231A32
navy DEFAULT
Dark Navy
#1A1228
navy.dark
Credential Ink
#0A0914
navy.deep
The seam rule
Adjacent dark surfaces must use the same token or a visually seamless pairing. navy DEFAULT (#231A32) next to primary-950 (#2E1065) creates a visible seam — they are different dark purples. When hero meets navbar, both must be primary-950 to appear as one continuous surface.
Neutrals — ink & surface
Neutral colors form the backbone of every layout. The ink scale handles all body text. The surface scale handles page and card backgrounds. These are not 'boring' colors — they make the brand colors sing.
Ink scale (text)
High-emphasis headlines
ink.strong · #0F0E1A
19.5:1 on white · AAA
Body text
ink DEFAULT · #32313B
13.1:1 on white · AAA
Secondary, captions
ink.muted · #6B7280
5.4:1 on white · AA
Tinted brand-adjacent text
ink.light · #4D3E78
7.8:1 on white · AAA
Surface scale (backgrounds)
Page background — warm off-white
surface DEFAULT · #FCF9F5
Cards, modals — pure white
surface.raised · #FFFFFF
Dividers, card borders
surface.border · #E4E0D9
Functional colors
Functional colors communicate system state. They are not part of the brand palette — they carry fixed meanings across every interface and must not be repurposed.
Success / Active
#25A871
accent.green
3.1:1 on white · AA (large)
Error / Destructive
#E14F4C
accent.red
4.1:1 on white · AA
Warning / Pending
#E88B5A
accent.peach
2.9:1 on white · Decorative
Star ratings only
#E49307
accent.yellow
2.4:1 on white · Decorative
| State | Badge background | Badge text |
|---|---|---|
| ACTIVE / VERIFIED | bg-accent-green-tint | text-accent-green |
| PENDING / TRIAL | bg-accent-peach-tint | text-accent-peach |
| SUSPENDED / PAUSED | bg-primary-100 | text-primary-800 |
| EXPIRED / CANCELLED | bg-surface | text-ink-muted |
| ERROR / FAILED / BANNED | bg-accent-red/10 | text-accent-red |
Accessibility — WCAG contrast
Every text pairing in the Corbez system must meet WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text and UI components). We target AAA where possible. Use this table before shipping any new color combination.
| Pairing | Ratio | Level | Use |
|---|---|---|---|
| ink.strong on surface | 19.5:1 | AAA | Headlines, display type |
| ink DEFAULT on surface | 13.1:1 | AAA | Body text everywhere |
| ink.muted on surface | 5.4:1 | AA | Captions, secondary labels |
| primary-950 on white | 16.8:1 | AAA | Dark hero sections |
| primary-600 on white | 5.2:1 | AA | Link text in body copy, hover on dark |
| primary-700 on primary-100 | 4.8:1 | AA | Purple tint card text |
| primary DEFAULT / 950 on white | 16.8:1 | AAA | Hero fills, CTA buttons, active states, logo |
| accent-green on white | 3.1:1 | AA (large) | Large metric numbers on tint cards |
| gold.dark on white | 5.1:1 | AA | Gold card body text |
| gold.dark on gold.tint | 4.1:1 | AA | Gold card readable labels |
| gold DEFAULT on gold.tint | 2.2:1 | Decorative | Quote marks, accent lines ONLY |
| white on primary-950 | 16.8:1 | AAA | Dark section text |
| white on primary-600 | 5.2:1 | AA | White text on dark sections |
| accent-red on white | 4.1:1 | AA | Error messages, destructive actions |
Component color mapping
Every component has a canonical color assignment. This prevents color drift across the product — the same component always uses the same color family regardless of context.
Testimonial cards
- ·Earned loyalty / merchant stories → Gold tint
- ·Personal employee stories → Pink tint
- ·Brand identity / viral moments → Purple tint
- ·Savings / results metrics → Green tint
- ·Data / survey metrics → Teal tint
- ·Free pricing / welcome → Pink Light tint
Dashboard status badges
- ·ACTIVE / VERIFIED → Green tint + green text
- ·PENDING / TRIAL → Peach tint + peach text
- ·SUSPENDED / PAUSED → Purple light + purple-800
- ·EXPIRED / CANCELLED → Surface + ink-muted
- ·ERROR / FAILED → Red/10 + red text
How it works steps
- ·Step 1 (start / claim) → Purple
- ·Step 2 (middle / scan) → Pink or Teal
- ·Step 3 (result / enjoy) → Green
CTA buttons
- ·Primary on light surface → bg-ink-strong, white text
- ·Primary on branded card → bg-primary-950, white text
- ·Secondary on dark → white/8 border border-white/30 text-white
- ·Destructive → accent-red bg, white text
- ·Secondary on light → border-primary-950/25 text-ink hover:text-primary-950
Pass card
- ·Background → gradient-pass (navy.deep base)
- ·Accent line → gold.light
- ·Status dot → gold DEFAULT
- ·Verified text → gold.light
- ·QR code area → white on navy.surface
Navigation
- ·Landing navbar → primary-950 bg (matches hero seamlessly)
- ·Dashboard sidebar → navy DEFAULT
- ·Active nav item → bg-primary-950/8 text-primary-950
- ·Active tab underline → border-primary-950
Do's and don'ts
Color discipline is brand discipline. These rules prevent the visual dilution that happens when color is used without intention.
Do
Use color semantically — purple for identity, green for results, gold for earned recognition.
Use the exact token names from tailwind.config.ts. Never use raw hex values in components.
Target WCAG AA (4.5:1) for all body text, AA (3:1) for large text and UI components.
Alternate tint families in adjacent card grids — no two neighboring cards may share the same color family.
Use primary-950 for the navbar so it merges seamlessly with the hero background.
Use gold.dark for readable text inside gold-tinted areas (not gold DEFAULT).
Reserve accent-yellow exclusively for star ratings. For all other golden moments, use the gold family.
Don't
Don't use orange-tint or yellow-tint for card backgrounds — both are legacy tokens. Use peach-tint or gold-tint instead.
Don't use raw Tailwind colors (purple-100, indigo-700, orange-50) — always use brand tokens.
Don't put gold DEFAULT as body text on white — it fails WCAG at 2.2:1. Use gold.dark instead.
Don't use more than two color families on a single card surface — pick one and let it breathe.
Don't repurpose functional colors semantically (red for warning, yellow for emphasis). They have one job.
Don't use gradients on card tints — flat color with generous padding is the system.
Don't use bg-ink-strong (near-black) as a CTA button on a white card that sits on a dark branded surface — use bg-primary-950 instead so the button connects to the brand.
Next
Language →