QDash Design System · Color v1.0
Royal
Night
The official QDash color system. Every token, rule, and usage guideline your team needs — so the right color always lands in the right place. Dark-first, WCAG-checked, built for nightlife. The whole system in one line: Amber is the action. Gold is the price.
01
The 60 · 30 · 10 Rule
Every screen follows this split. No exceptions.
⚠️ Amber, Gold, and Blue are not accent colors. They are functional signals — each has exactly one job. Amber is the action. Gold is the price. Blue is status. They appear only in their designated contexts and never compete with the 10% Violet. Cards recede (canvas is the darkest layer); they are defined by their hairline border, not a bright fill.
02
Core Palette
Hover to see stop number. Click to copy hex.
Royal Violet — Brand Primary
0
50
100
200
300
400
★500
600
700
800
900
950
Electric Amber — CTA / Action
0
50
100
200
300
400
★500
600
700
800
900
950
VIP Gold — Price / Premium
0
50
100
200
300
400
★500
600
700
800
900
950
Background — Royal Night → Light
★50
★0
200
300
400
500
600
700
800
900
950
03
Semantic Color Roles
Each color has exactly one job. Amber is the action; gold is the price.
⬡
Royal Violet
#8B5CF6 brand · #7C3AED fill · #A78BFA label
Tab bar active state · Button fills · Selection rings · Paid/confirmed badges · Any selected state
White on #7C3AED fill: 5.7:1 AA ✓
◈
Electric Amber
#FB6514
The ONE action — single hero CTA + floating cart bar. Repeated list adds use a violet ghost button, never amber.
Dark text on fill: 6.55:1 AA ✓
★
VIP Gold
#FACC15
Prices and amounts (₹999) · VIP table badges · Premium event labels · Skip-queue passes
On canvas: 12.9:1 AA ✓
ℹ
Soft Blue
#93C5FD
Order status labels · Prep time countdowns · Confirmation states · Informational only — not for actions
On canvas: 10.9:1 AA ✓
✕
Error Red
#F87171
Form validation errors · Payment failure states · Destructive action confirmations only
Semantic only
✓
Success Green
#34D399
Payment confirmed · QR code valid · Order placed · PAID badge · Any successful completion state
Semantic only
04
WCAG Contrast Reference
Min 4.5:1 for text · 3:1 for UI components
| Color | Pair | Ratio | Usage | |
|---|---|---|---|---|
Violet fill #7C3AED | White label on fill | 5.7:1 ✓ | Button label, active tab text | |
Violet label #A78BFA | On canvas #0A0A12 | 7.25:1 ✓ | Nav icons, tab labels, links | |
Amber CTA #FB6514 | Dark text on fill | 6.55:1 ✓ | The one hero CTA, the cart bar | |
Amber CTA #FB6514 | On canvas #0A0A12 | 7.1:1 ✓ | Urgency text / icons on background | |
VIP Gold #FACC15 | On canvas #0A0A12 | 12.9:1 ✓ | Prices, premium tier labels | |
VIP Gold #FACC15 | On card #13111F | 12.1:1 ✓ | Price inside event cards | |
Soft Blue #93C5FD | On canvas #0A0A12 | 10.9:1 ✓ | Order status, timer text | |
Primary text #ECE6F7 | On canvas #0A0A12 | 16.2:1 ✓ | All primary body text, headings | |
Primary text #ECE6F7 | On card #13111F | 15.1:1 ✓ | Text inside all card components |
05
Component Color Usage
Live, themable examples of every key component.
Buttons
Amber = the ONE action · Violet = navigate · Ghost = repeated list add
Cart Bar + Stepper
LIIT
₹10
1
Stepper = Indigo · Cart bar = Amber · Price = Gold
Badges & Status Pills
PAIDVIPLIVE2 spots left8 min
Violet=confirmed · Gold=premium · Green=success · Amber=urgency · Blue=info
Order Status
Your order is being prepared
Est. 8 min · Table 12
Blue = informational status. Never use amber or gold here.
Event Card
🎧
Neon Nights · Trilogy
2 spots left
₹999
Thumb bg = Indigo dim · Price = Gold · Urgency = Amber badge
Navigation Bar
Active = Violet label #A78BFA · Inactive = Tertiary #6B6590
06
Typography
Montserrat everywhere. Roboto Mono only for dense, aligned numbers.
Primary · display + body
Montserrat
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789 ₹
abcdefghijklmnopqrstuvwxyz 0123456789 ₹
Used for everything visible — hero titles, section headings, card names, body, labels and prices. Geometric, confident, and bold at heavy weights — exactly the energy a nightlife app wants. It is the typeface of the whole UI, so the color system and the type system share one voice.
Support · numeric only
Roboto Mono
0123456789 ₹1,248
#1919 · 6.95:1 · 8 min
#1919 · 6.95:1 · 8 min
Reserved for dense numerics — order numbers, contrast ratios, hex values, timers, and any column of figures that must align. Its fixed-width tabular digits keep prices and codes from jittering as they update. Never used for prose or headings.
Aa
400 Regular
Aa
500 Medium
Aa
600 Semibold
Aa
700 Bold
Aa
800 Extrabold
Aa
900 Black
Nights Made Easy
All Restaurants
Neon Nights · Trilogy
Kitty Su · Worli · 10 PM onwards · Doors open at 9
MENU · SIGNATURE COCKTAILS
₹999
Order #1919 · 6.95:1 · ₹1,248
07
Rules for the Team
The rules that hold the system together. Print this out.
✓ Do
Use Amber for the one hero action. The single most important transactional button on a screen, plus the floating cart bar. One amber element per screen — amber means "the action".
✗ Don't
Never make every list "+ Add" button amber. A column of amber slabs pushes amber past 10% and breaks the 60·30·10 rule. Repeated row adds are a quiet violet ghost button (outline). Amber stays for the cart bar.
✓ Do
Use Gold exclusively for prices and premium tier. ₹999 on an event card, the "VIP" badge, a skip-queue pass — all gold. If it's not money or premium status, it's not gold.
✗ Don't
Never use two accent colors on the same component. The stepper buttons are Violet (selecting). The cart bar is Amber (transacting). They never swap, mix, or share.
✓ Do
White text on Violet fills (#7C3AED). The fill is dark enough — white at 5.7:1 passes WCAG AA. Use white or #ECE6F7 for the label/icon on violet buttons.
✗ Don't
Never put the violet fill #7C3AED directly as text on the dark canvas. It's only 3.5:1 — fails AA for normal text. Always use the lighter #A78BFA for any text/icon on dark backgrounds.
✓ Do
Dark text on Amber buttons. Use #0A0A12 for the label on any amber CTA — a 6.95:1 ratio. Never use white text on amber; it only reaches 3.0:1, which fails for normal text.
✗ Don't
Never use a light-mode white background as the default. QDash is dark-first. The canvas is #0A0A12. Light mode exists as an option, but dark must be what users land on first.
✓ Do
Never use Red for urgency. "2 spots left" is amber. "Sold out" is muted grey. Red is reserved for actual errors and failures only — a payment failing, a card declined.
✗ Don't
Never recolor the logo Q. The Q is VIP Gold #FACC15 in BOTH light and dark mode. Never violet, never flipped. Only the "Dash" wordmark changes (off-white on dark, navy on light).
08
CSS Custom Properties
Click any row to copy the variable name.
Core Design TokensUse these in component code, not raw hex values
--bg-canvas
10 10 18
#0A0A12
--bg-card
19 17 31
#13111F
--bg-raised
26 24 48
#1A1830
--bg-border
42 39 64
#2A2740
--indigo-brand
139 92 246
#8B5CF6
--indigo
124 58 237
#7C3AED
--indigo-label
129 140 248
#A78BFA
--amber
251 101 20
#FB6514
--gold
250 204 21
#FACC15
--logo-q
250 204 21
#FACC15
--blue
147 197 253
#93C5FD
--text-primary
236 230 247
#ECE6F7
--text-secondary
155 148 196
#9B94C4
--text-tertiary
107 101 144
#6B6590
--text-on-amber
10 10 18
#0A0A12
--error
248 113 113
#F87171
--success
52 211 153
#34D399
09
Logo & Brand Colors
Locked. The Q is always gold; only the wordmark flips.
Locked — confirmed by product team
The Q mark is VIP Gold #FACC15 on every background, light or dark. The "Dash" wordmark is off-white #ECE6F7 on dark surfaces and deep navy #1A375D on light surfaces. The splash and app-icon background is the near-black canvas #0A0A12.
✕ Violet (#8B5CF6) is never used in the logo, wordmark, or app icon. Not on any background. Not ever.
Q mark--logo-q
VIP Gold. Identical in BOTH light and dark mode — never recolored, never flipped.
"Dash" — on dark--logo-wordmark
Softened off-white. In-app, splash, onboarding, dark marketing.
"Dash" — on light--logo-wordmark
Deep navy. Light marketing, website, print, documents.
Splash / icon bg--bg-canvas
Near-black canvas. Dark-first branding, gold Q on top.
In-app / dark mode
Gold Q · #ECE6F7 "Dash"
Marketing / light bg
Gold Q · #1A375D "Dash"
Your night. Upgraded.
Splash screen
#0A0A12 bg · stacked lockup
App icon
#0A0A12 bg · gold Q only