Abstract

This document is the single source of truth for all ColivingLiguria colors. These colors are centrally managed in quartz.config.ts and automatically applied across the website, software applications, and should be used as reference for all physical design (renovations, materials, signage). Light and Dark modes are fully specified with exact RGB/Hex codes.

ColivingLiguria Comprehensive Color Palette

🎨 Centralized Color Management

Technical Implementation: All colors are defined in quartz.config.ts (Lines 30-63) and automatically generate CSS variables.

Scope of Application:

✅ Website (Light & Dark modes)
✅ Web Applications
✅ Mobile Apps
✅ Design Software (Figma, Adobe, etc.)
✅ Physical Renovations (paint colors, materials)
✅ Branding & Marketing Materials

Light Mode Palette (Day)

Used for: Website daytime view, bright app interfaces, sunlit interior spaces.

Color Name	Description	Hex Code	RGB Code	CSS Variable	Dark Mode Correspondence
Light	Warm Alabaster	`#F7F5F3`	`rgb(247, 245, 243)`	`--light`	→ Deep Earth Black
Light Gray	Light Sand	`#E5E0D8`	`rgb(229, 224, 216)`	`--lightgray`	→ Dark Soil
Gray	Stone	`#948C84`	`rgb(148, 140, 132)`	`--gray`	→ Warm Stone
Dark Gray	Bark / Dark Olive	`#4E4B42`	`rgb(78, 75, 66)`	`--darkgray`	→ Bone / Light Sand
Dark	Deep Peat	`#2C2A24`	`rgb(44, 42, 36)`	`--dark`	→ Off-White
Secondary	Deep Moss Green	`#4A6741`	`rgb(74, 103, 65)`	`--secondary`	→ Light Moss / Sage
Tertiary	Raw Sienna / Clay	`#A67B5B`	`rgb(166, 123, 91)`	`--tertiary`	→ Buff / Sandstone
Highlight	Clay Highlight	`rgba(166, 123, 91, 0.15)`	`rgba(166, 123, 91, 0.15)`	`--highlight`	→ Sandstone Highlight

Brand Colors (Consistent Across Modes)

Color Name	Description	Hex Code	RGB Code	CSS Variable	Usage
WhatsApp	WhatsApp Green	`#25D366`	`rgb(37, 211, 102)`	`--whatsapp`	Contact buttons, WhatsApp links
Gmail	Gmail Red	`#EA4335`	`rgb(234, 67, 53)`	`--gmail`	Email buttons, Gmail links
Instagram	Instagram Gradient	`linear-gradient(45deg, #F58529, #DD2A7B, #8134AF)`	Gradient	`--instagram`	Instagram buttons, social links

Utility Colors

Color Name	Description	Hex Code	RGB Code	CSS Variable	Usage
Image Placeholder	Light Sand	`#E5E0D8`	`rgb(229, 224, 216)`	`--imagePlaceholder`	Loading states, image backgrounds

Dark Mode Palette (Night)

Used for: Website nighttime view, dark app interfaces, cozy/dim interior moods.

Color Name	Description	Hex Code	RGB Code	CSS Variable	Light Mode Source
Light	Deep Earth Black	`#0F0E0B`	`rgb(15, 14, 11)`	`--light`	← Warm Alabaster
Light Gray	Dark Soil	`#26231E`	`rgb(38, 35, 30)`	`--lightgray`	← Light Sand
Gray	Warm Stone	`#857F75`	`rgb(133, 127, 117)`	`--gray`	← Stone
Dark Gray	Bone / Light Sand	`#D6D1C9`	`rgb(214, 209, 201)`	`--darkgray`	← Bark / Dark Olive
Dark	Off-White	`#F0ECE6`	`rgb(240, 236, 230)`	`--dark`	← Deep Peat
Secondary	Light Moss / Sage	`#8FA876`	`rgb(143, 168, 118)`	`--secondary`	← Deep Moss Green
Tertiary	Buff / Sandstone	`#D4A373`	`rgb(212, 163, 115)`	`--tertiary`	← Raw Sienna / Clay
Highlight	Sandstone Highlight	`rgba(212, 163, 115, 0.15)`	`rgba(212, 163, 115, 0.15)`	`--highlight`	← Clay Highlight

Brand Colors (Consistent Across Modes)

Color Name	Description	Hex Code	RGB Code	CSS Variable	Usage
WhatsApp	WhatsApp Green	`#25D366`	`rgb(37, 211, 102)`	`--whatsapp`	Contact buttons, WhatsApp links
Gmail	Gmail Red	`#EA4335`	`rgb(234, 67, 53)`	`--gmail`	Email buttons, Gmail links
Instagram	Instagram Gradient	`linear-gradient(45deg, #F58529, #DD2A7B, #8134AF)`	Gradient	`--instagram`	Instagram buttons, social links

Utility Colors

Color Name	Description	Hex Code	RGB Code	CSS Variable	Usage
Image Placeholder	Dark Soil	`#26231E`	`rgb(38, 35, 30)`	`--imagePlaceholder`	Loading states, image backgrounds

Light ↔ Dark Mode Correspondences

Understanding how colors transform between modes:

Light Mode Color	Dark Mode Equivalent	Transformation
Warm Alabaster `#F7F5F3`	Deep Earth Black `#0F0E0B`	Background inverts to deep dark
Light Sand `#E5E0D8`	Dark Soil `#26231E`	Neutral warm to dark warm
Stone `#948C84`	Warm Stone `#857F75`	Remains warm gray
Bark `#4E4B42`	Bone `#D6D1C9`	Dark header → light header
Deep Peat `#2C2A24`	Off-White `#F0ECE6`	Primary text inverts
Deep Moss Green `#4A6741`	Light Moss / Sage `#8FA876`	Dark green → light green
Raw Sienna `#A67B5B`	Buff / Sandstone `#D4A373`	Warm clay stays warm
Clay Highlight (15%)	Sandstone Highlight (15%)	Opacity consistent

Brand colors remain IDENTICAL in both modes for brand consistency.

CSS Variables Reference

For developers using the Quartz codebase or custom applications:

/* Automatically generated from quartz.config.ts */
 
/* Core Palette - Auto-adapting */
--light              /* Background color */
--lightgray          /* Secondary backgrounds, borders */
--gray               /* Body text, icons */
--darkgray           /* Headers, strong text */
--dark               /* Primary text */
--secondary          /* Primary buttons, active states, deep moss/sage */
--tertiary           /* Hover states, accents, clay/buff */
--highlight          /* Text selection, subtle backgrounds */
--textHighlight      /* Code/text highlighting */
 
/* Brand Colors - Consistent */
--whatsapp           /* WhatsApp green #25D366 */
--gmail              /* Gmail red #EA4335 */
--instagram          /* Instagram gradient */
 
/* Utility */
--imagePlaceholder   /* Image loading backgrounds */

Usage Example:

.my-element {
  background: var(--secondary);  /* Automatically Deep Moss (light) or Sage (dark) */
  color: var(--dark);            /* Automatically Deep Peat (light) or Off-White (dark) */
  border: 1px solid var(--tertiary);
}
 
.whatsapp-button {
  background: var(--whatsapp);   /* Always WhatsApp green */
}

For Physical Design & Renovations

When selecting paint colors, materials, or furnishings for ColivingLiguria spaces:

Primary Palette (Walls, Large Surfaces)

Light Spaces: Warm Alabaster #F7F5F3 or Light Sand #E5E0D8
Dark/Cozy Spaces: Dark Soil #26231E or Deep Earth Black #0F0E0B

Accent Colors (Furniture, Textiles, Details)

Green Elements: Deep Moss Green #4A6741 (cushions, plants, logo)
Earth Tones: Raw Sienna / Clay #A67B5B (terracotta, wood, copper)
Neutral Accents: Stone #948C84, Bark #4E4B42

Material Selection

Wood: Match Raw Sienna rgb(166, 123, 91)
Metal: Copper/Bronze matching Clay tones
Textiles: Deep Moss Green velvet, Light Sand linen
Stone: Warm Stone rgb(133, 127, 117) for flooring

For Design Software (Figma, Adobe, etc.)

Import these exact codes into your design system:

Figma Color Styles

Light Mode:
Background / Light:        #F7F5F3
Surface / Light Gray:      #E5E0D8  
Text Body / Gray:          #948C84
Text Header / Dark Gray:   #4E4B42
Text Primary / Dark:       #2C2A24
Button Primary / Secondary: #4A6741
Accent / Tertiary:         #A67B5B

Dark Mode:
Background / Light:        #0F0E0B
Surface / Light Gray:      #26231E
Text Body / Gray:          #857F75
Text Header / Dark Gray:   #D6D1C9
Text Primary / Dark:       #F0ECE6
Button Primary / Secondary: #8FA876
Accent / Tertiary:         #D4A373

Brand (Both Modes):
WhatsApp:                  #25D366
Gmail:                     #EA4335

Version History

Current Version: 2025-12-01
Source of Truth: quartz.config.ts

Changes:

Added Brand Colors (WhatsApp, Gmail, Instagram)
Added Utility Colors (Image Placeholder)
Clarified Light ↔ Dark mode correspondences
Extended applicability to all ColivingLiguria design work

— Italiano sotto —

Abstract

Questo documento è la singola fonte di verità per tutti i colori di ColivingLiguria. Questi colori sono gestiti centralmente in quartz.config.ts e applicati automaticamente al sito web, applicazioni software, e devono essere usati come riferimento per tutto il design fisico (ristrutturazioni, materiali, segnaletica). Modalità Chiara e Scura sono completamente specificate con codici RGB/Hex esatti.

Palette Colori Completa ColivingLiguria

🎨 Gestione Centralizzata dei Colori

Implementazione Tecnica: Tutti i colori sono definiti in quartz.config.ts (Righe 30-63) e generano automaticamente variabili CSS.

Ambito di Applicazione:

✅ Sito Web (Modalità Chiara e Scura)
✅ Applicazioni Web
✅ App Mobile
✅ Software di Design (Figma, Adobe, ecc.)
✅ Ristrutturazioni Fisiche (colori pittura, materiali)
✅ Materiali di Branding & Marketing

[Le tabelle complete sono identiche alla sezione inglese]

Corrispondenze Modalità Chiara ↔ Scura

Come i colori si trasformano tra le modalità:

Colore Modalità Chiara	Equivalente Modalità Scura	Trasformazione
Alabastro Caldo `#F7F5F3`	Nero Terra Profondo `#0F0E0B`	Sfondo si inverte a scuro profondo
Sabbia Chiara `#E5E0D8`	Terreno Scuro `#26231E`	Neutro caldo a scuro caldo
Pietra `#948C84`	Pietra Calda `#857F75`	Rimane grigio caldo
Corteccia `#4E4B42`	Osso `#D6D1C9`	Intestazione scura → chiara
Torba Profonda `#2C2A24`	Bianco Sporco `#F0ECE6`	Testo primario si inverte
Verde Muschio Profondo `#4A6741`	Muschio Chiaro / Salvia `#8FA876`	Verde scuro → verde chiaro
Terra di Siena Cruda `#A67B5B`	Camoscio / Arenaria `#D4A373`	Argilla calda resta calda
Evidenziazione Argilla (15%)	Evidenziazione Arenaria (15%)	Opacità consistente

I colori brand rimangono IDENTICI in entrambe le modalità per coerenza del marchio.

Per Design Fisico & Ristrutturazioni

Quando si selezionano colori di pittura, materiali o arredamento per gli spazi ColivingLiguria:

Palette Primaria (Pareti, Superfici Grandi)

Spazi Luminosi: Alabastro Caldo #F7F5F3 o Sabbia Chiara #E5E0D8
Spazi Scuri/Accoglienti: Terreno Scuro #26231E o Nero Terra Profondo #0F0E0B

Colori Accento (Mobili, Tessuti, Dettagli)

Elementi Verdi: Verde Muschio Profondo #4A6741 (cuscini, piante, logo)
Toni Terra: Terra di Siena Cruda / Argilla #A67B5B (terracotta, legno, rame)
Accenti Neutri: Pietra #948C84, Corteccia #4E4B42

Selezione Materiali

Legno: Abbinare Terra di Siena Cruda rgb(166, 123, 91)
Metallo: Rame/Bronzo abbinati ai toni Argilla
Tessuti: Velluto Verde Muschio Profondo, lino Sabbia Chiara
Pietra: Pietra Calda rgb(133, 127, 117) per pavimenti