CSS Variables Usage

CSS Variables - Proper Usage

Complete guide to using our centralized color system.

✅ Available CSS Variables

All variables are defined in quartz.config.ts and automatically generated for both light and dark modes.

Core Palette

var(--light)          /* Background color */
var(--lightgray)      /* Secondary backgrounds, borders */
var(--gray)           /* Body text, icons */
var(--darkgray)       /* Headers, strong text */
var(--dark)           /* Primary text */
var(--secondary)      /* Primary buttons (Deep Moss/Sage) */
var(--tertiary)       /* Accents, hover states (Clay/Buff) */
var(--highlight)      /* Subtle backgrounds (15% opacity) */
var(--textHighlight)  /* Code/text highlighting */

Brand Colors

var(--whatsapp)       /* WhatsApp green #25D366 */
var(--gmail)          /* Gmail red #EA4335 */
var(--instagram)      /* Instagram gradient */

Utility

var(--imagePlaceholder)  /* Image loading backgrounds */

---

Common Use Cases

Backgrounds

/* ✅ CORRECT - Auto-adapts to dark mode */
background: var(--light);          /* Main page background */
background: var(--lightgray);      /* Cards, boxes */
background: var(--highlight);      /* Subtle highlights */
 
/* ❌ WRONG - Hardcoded, breaks dark mode */
background: white;
background: #F7F5F3;

Text Colors

/* ✅ CORRECT */
color: var(--dark);         /* Primary text */
color: var(--darkgray);     /* Headers */
color: var(--gray);         /* Muted text */
 
/* ❌ WRONG */
color: black;
color: #2C2A24;

Borders

/* ✅ CORRECT */
border: 1px solid var(--lightgray);
border-left: 4px solid var(--secondary);
border-left: 4px solid var(--tertiary);
 
/* ❌ WRONG */
border: 1px solid #E5E0D8;
border-left: 4px solid #4A6741;

Buttons

/* ✅ CORRECT - Primary button */
.button-primary {
  background: var(--secondary);
  color: white;
  border: none;
}
 
/* ✅ CORRECT - Secondary button */
.button-secondary {
  background: transparent;
  color: var(--secondary);
  border: 2px solid var(--secondary);
}
 
/* ✅ CORRECT - Brand button */
.whatsapp-button {
  background: var(--whatsapp);
  color: white;
}
 
/* ❌ WRONG - Hardcoded */
.button {
  background: #4A6741;
  color: #FFFFFF;
}

---

Inline Styles (HTML/TSX)

<!-- ✅ CORRECT -->
<div style="background: var(--lightgray); color: var(--dark);">
 
<!-- ✅ CORRECT - Multiple properties -->
<a href="..." style="text-decoration: none; color: white; background: var(--secondary); padding: 1rem; border-radius: 8px;">
 
<!-- ❌ WRONG -->
<div style="background: white; color: black;">
<div style="background: #F7F5F3;">

---

How Colors Transform (Light → Dark)

Variable	Light Mode	Dark Mode
var(--light)	Warm Alabaster F7F5F3	Deep Earth Black 0F0E0B
var(--lightgray)	Light Sand E5E0D8	Dark Soil 26231E
var(--gray)	Stone 948C84	Warm Stone 857F75
var(--darkgray)	Bark 4E4B42	Bone D6D1C9
var(--dark)	Deep Peat 2C2A24	Off-White F0ECE6
var(--secondary)	Deep Moss Green 4A6741	Light Sage 8FA876
var(--tertiary)	Raw Sienna A67B5B	Buff D4A373
var(--whatsapp)	25D366	25D366 (same)
var(--gmail)	EA4335	EA4335 (same)

Note: Brand colors (--whatsapp, --gmail, --instagram) remain identical across modes for brand consistency.

---

❌ Common Mistakes

1. Using white instead of var(—lightgray)

/* ❌ WRONG - Pure white breaks dark mode */
background: white;
background: #FFFFFF;
 
/* ✅ CORRECT - Adapts to dark mode */
background: var(--lightgray);

2. Hardcoding hex values

/* ❌ WRONG */
color: #4A6741;
border: 1px solid #E5E0D8;
 
/* ✅ CORRECT */
color: var(--secondary);
border: 1px solid var(--lightgray);

3. Not using brand variables

/* ❌ WRONG */
.whatsapp-btn { background: #25D366; }
 
/* ✅ CORRECT */
.whatsapp-btn { background: var(--whatsapp); }

---

Verification Checklist

Before committing code, check:

• No hardcoded white or black
• No hardcoded hex colors (#…)
• All colors use var(--colorname)
• Tested in both light AND dark modes
• Brand colors use brand variables
• Background uses var(--lightgray) not white

---

Where Colors Are Defined

Single Source of Truth: quartz.config.ts (Lines 30-63)

To change ANY color site-wide, edit quartz.config.ts only. Changes automatically propagate to all pages.

Type Definitions: theme.ts (ColorScheme interface)