ColivingLiguria Color Palette

SINGLE SOURCE OF TRUTH: Admin_CL/Standards/Image/Palette/base_palette.sql DEFAULT: Dark Mode is primary. Light Mode is the adaptation.

---

Color Definition File

All colors are programmatically generated and injected. The local colors.ts in this folder imports from:

import { Palette } from "../../../../../quartz/styles/injected_from_palette/palette"

The website’s global configuration in quartz.config.ts directly binds these tokens:

import { Palette } from "./quartz/styles/injected_from_palette/palette"

---

Semantic Color Roles

Role	CSS Variable	Dark Mode (Token)	Light Mode (Token)	Description
Background	var(--light)	#111111 (EB0)	#F2F0E6 (AL0)	Primary page background
Alt Background	var(--lightgray)	#202020 (EB1)	#eaeaea (MA1)	Section/card backgrounds
Primary Text	var(--dark)	#F2F0E6 (AL0)	#303030 (EB2)	Headings and primary body copy
Secondary Text	var(--gray)	#C4B8A8 (SB0)	#5C6080 (SG0)	Captions and metadata copy
Tertiary Text	var(--darkgray)	#d6d6d6 (MA3)	#4e4e4e (EB4)	Borders, lines, and system copy
Primary Action	var(--secondary)	#63b863 (SP5)	#2E3B2E (SP0)	CTAs, links, and highlights
Accent	var(--tertiary)	#f8d9c3 (LN5)	#7c3b0e (LN1)	Accent highlights and tags

---

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 base_palette.sql in Admin_CL/Standards/Image/Palette/
2. Run the SSoT generator:

   python Admin_CL/Standards/Image/Palette/generate_palette.py

3. Run the compliance audit to check for hardcoded overrides:

   python Admin_CL/SKILL/SKILL_Website_Design/agents/Website_Palette_Checker/tools/check_palette_compliance.py

4. Verify the build and deploy:

   ./CL-sync