ColivingLiguria Color Palette

SINGLE SOURCE OF TRUTH: colors.ts in this folder. DEFAULT: Dark Mode is primary. Light Mode is the adaptation.

---

Color Definition File

All colors are defined in colors.ts (in this same folder).

// Import in quartz.config.ts:
import { quartzColors } from "./content/System/AI-Website-Build-Guide/Frontend/Style-Guidelines/colors"
 
// Use:
colors: quartzColors

---

Semantic Color Roles

Role	CSS Variable	Dark Mode	Light Mode
Background	var(--light)	0F0E0B	F7F5F3
Alt Background	var(--lightgray)	26231E	E5E0D8
Primary Text	var(--dark)	F0ECE6	2C2A24
Secondary Text	var(--gray)	857F75	948C84
Tertiary Text	var(--darkgray)	D6D1C9	4E4B42
Primary Action	var(--secondary)	8FA876	4A6741
Accent	var(--tertiary)	D4A373	A67B5B

---

Chart Colors

Role	Hex
Accent	D4A373
Success	34D399
Error	F87171
Warning	FBBF24
Info	60A5FA

---

Brand Colors

Name	Hex
WhatsApp	25D366
Gmail	EA4335

---

Rules

• ✅ Use CSS variables: var(--dark), var(--secondary)
• ✅ Use var(--light) for backgrounds
• ✅ Test BOTH dark and light modes
• ❌ Never hardcode hex values
• ❌ Never use pure white/black

---

How to Change Colors

1. Edit colors.ts in this folder
2. Update this documentation
3. Run CL-sync
4. Test in BOTH modes