Color Palette

ColivingLiguria Color Palette

SINGLE SOURCE OF TRUTH: All colors in the project are defined HERE and only here. When you need a color, reference this file. When colors change, update this file.

Core Palette

Light Mode

Name	CSS Variable	Hex	RGB	Usage
Light	var(--light)	#F7F5F3	rgb(247,245,243)	Page backgrounds
Light Gray	var(--lightgray)	#E5E0D8	rgb(229,224,216)	Alt backgrounds, borders
Gray	var(--gray)	#948C84	rgb(148,140,132)	Body text, icons
Dark Gray	var(--darkgray)	#4E4B42	rgb(78,75,66)	Secondary headings
Dark	var(--dark)	#2C2A24	rgb(44,42,36)	Primary text, headings

Dark Mode

Name	CSS Variable	Hex	RGB	Usage
Light	var(--light)	#0F0E0B	rgb(15,14,11)	Page backgrounds
Light Gray	var(--lightgray)	#26231E	rgb(38,35,30)	Alt backgrounds, borders
Gray	var(--gray)	#857F75	rgb(133,127,117)	Body text, icons
Dark Gray	var(--darkgray)	#D6D1C9	rgb(214,209,201)	Secondary headings
Dark	var(--dark)	#F0ECE6	rgb(240,236,230)	Primary text, headings

---

Accent Colors

Secondary (Primary Actions)

Mode	Hex	RGB	Usage
Light	#4A6741	rgb(74,103,65)	Deep Moss Green - Buttons, CTAs, active states
Dark	#8FA876	rgb(143,168,118)	Light Moss/Sage - Buttons, CTAs

Tertiary (Accents)

Mode	Hex	RGB	Usage
Light	#A67B5B	rgb(166,123,91)	Raw Sienna/Clay - Hover states, highlights
Dark	#D4A373	rgb(212,163,115)	Buff/Sandstone - Hover states, highlights

Highlight (Text Selection)

Mode	Value	Usage
Light	rgba(166, 123, 91, 0.15)	Text selection, subtle backgrounds
Dark	rgba(212, 163, 115, 0.15)	Text selection, subtle backgrounds

---

Brand Colors (Fixed - Same in Both Modes)

Name	CSS Variable	Hex	RGB	Usage
WhatsApp	var(--whatsapp)	#25D366	rgb(37,211,102)	WhatsApp buttons, contact links
Gmail	var(--gmail)	#EA4335	rgb(234,67,53)	Email buttons, Gmail links
Instagram	var(--instagram)	Gradient	linear-gradient(45deg, #F58529, #DD2A7B, #8134AF)	Instagram buttons

---

Chart & Dashboard Colors

For data visualizations and dashboards:

Name	Hex	Usage
Gold	#D4A373	Primary accent, positive values
Gold Dim	#B08968	Secondary elements
Gold Muted	#8B7355	Tertiary elements
Green	#34D399	Success, low risk, approved
Red	#F87171	Error, high risk, danger
Purple	#A78BFA	Special status, pending
Blue	#60A5FA	Informational, neutral

Dashboard Backgrounds

Name	Hex	Usage
BG Dark	#0a0a0a	Main dashboard background
Card BG	#111111	Glass card background
Border	#1a1a1a	Card borders, dividers
Text	#E8DFD8	Primary dashboard text
Text Muted	#A8A29E	Secondary text, labels
Text Dim	#57534E	Tertiary text, hints

---

Light ↔ Dark Mode Correspondence

This table shows how each variable transforms:

Variable	Light Mode	Dark Mode	Transformation
--light	F7F5F3 (Warm Alabaster)	0F0E0B (Deep Earth Black)	Background inverts
--lightgray	E5E0D8 (Light Sand)	26231E (Dark Soil)	Neutral warm → dark warm
--gray	948C84 (Stone)	857F75 (Warm Stone)	Stays warm gray
--darkgray	4E4B42 (Bark)	D6D1C9 (Bone)	Dark → light
--dark	2C2A24 (Deep Peat)	F0ECE6 (Off-White)	Text color inverts
--secondary	4A6741 (Deep Moss)	8FA876 (Light Moss)	Green adapts
--tertiary	A67B5B (Raw Sienna)	D4A373 (Buff)	Clay adapts

---

Usage Rules

✅ DO

• Always use CSS variables: var(--dark), var(--secondary)
• Use var(--light) for backgrounds (never pure white)
• Test BOTH light and dark modes before publishing
• Check text contrast against backgrounds

❌ DON’T

• Never use hardcoded hex codes in components
• Never use #FFFFFF or #000000
• Never use named colors like red, blue, green
• Never create custom colors without adding them here first

---

Technical Implementation

Colors are defined in quartz.config.ts (Lines 30-63). CSS variables are auto-generated.

/* Usage in SCSS/CSS */
.my-element {
  background: var(--secondary);  /* Auto-adapts to mode */
  color: var(--dark);            /* Auto-adapts to mode */
  border: 1px solid var(--lightgray);
}

/* Usage in TSX (inline) */
<div style={{ background: 'var(--secondary)', color: 'var(--dark)' }}>
  Content
</div>