Colors & Themes

CSS variable-based color system with dark (default) and light mode support

Background

--background

Page background

Dark: #0a0a0aLight: #ffffff

--background-secondary

Cards, sections

Dark: #141414Light: #f4f4f5

--background-elevated

Hover states, elevated surfaces

Dark: #1a1a1aLight: #fafafa

Foreground

--foreground

Primary text

Dark: #ffffffLight: #09090b

--foreground-secondary

Body text, descriptions

Dark: #a1a1aaLight: #52525b

--foreground-muted

Captions, labels

Dark: #71717aLight: #71717a

Accent (Brand Green)

--accent

Primary actions, active states

Dark: #89AB2DLight: #6B8A1E

--accent-hover

Button hover

Dark: #9BBC3DLight: #5A7419

--accent-muted

Subtle accent

Dark: #6B8A1ELight: #89AB2D

--accent-light

Accent backgrounds

Dark: rgba(137,171,45,0.1)Light: rgba(107,138,30,0.1)

--accent-border

Accent borders

Dark: rgba(137,171,45,0.3)Light: rgba(107,138,30,0.3)

Borders

--border

Default borders

Dark: #27272aLight: #e4e4e7

--border-hover

Hover borders

Dark: #3f3f46Light: #d4d4d8

Shadows

--shadow-sm

Subtle elevation

Dark: 0 1px 2px rgba(0,0,0,0.5)Light: 0 1px 2px rgba(0,0,0,0.05)

--shadow-md

Cards, dropdowns

Dark: 0 4px 6px rgba(0,0,0,0.5)Light: 0 4px 6px rgba(0,0,0,0.07)

--shadow-lg

Modals, popovers

Dark: 0 10px 15px rgba(0,0,0,0.5)Light: 0 10px 15px rgba(0,0,0,0.1)

Live Preview

Accent Color

Used for CTAs, active states, links

Elevated Surface

Cards, dropdowns, hover states

Accent Light

Selected states, highlights

Usage

/* In Tailwind classes */
<div className="bg-[var(--background)] text-[var(--foreground)]" />
<div className="border border-[var(--border)] hover:border-[var(--border-hover)]" />
<button className="bg-[var(--accent)] hover:bg-[var(--accent-hover)]" />

/* Theme switching is handled by data-theme attribute */
<html data-theme="light"> /* or "dark" (default) */