Color System
Our color system is built on a two-layer model to make it flexible, and easy to maintain. This approach, often called “design tokens,” separates the literal color values (the Palette) from their purpose (the Theme).
Layer 1: The Palette (–palette-…)
These are the raw, abstractly-named colors for the entire brand (e.g., var(–palette-brand-main)). They have no context, they just define the available colors. They are all stored in style.css.
Layer 2: The Theme (–color-…)
These are the semantic, role-based variables we use in the component CSS (e.g., var(–color-primary)). They give a purpose to a palette color. This layer is what allows us to swap between Light and Dark modes so easily.
To style an individual element: Always use a Layer 2 (Theme) variable.
To change the entire brand’s look: You only need to change the Layer 1 (Palette) variables.
These are the raw color values.
| Variable | Value | Description |
--palette-brand-main |
#58180D | Darkest, for headers/buttons |
--palette-brand-main-darker |
#5b0f00 | For sidebar, gradients |
--palette-brand-accent |
#822000 | Lighter, for accents/hovers |
--palette-brand-accent-darker |
#8b1a0f | For gradients |
--palette-brand-highlight |
#C0AD6A | Gold, for special accents |
--palette-bg-page-light |
#fffef9fa | Off-white page background |
--palette-bg-card-light |
#FDF1DC | Cream for cards, tables |
--palette-bg-row-light |
#F5E6D3 | Light tan for alternating rows |
--palette-bg-hover-light |
#F0E0C8 | For table row hover |
--palette-border-light |
#D4C4B0 | Tan border |
--palette-text-main-light |
#2c2c2c | Dark gray body text |
--palette-text-muted-light |
#5a5a5a | Medium gray meta text |
--palette-text-quote-light |
#5a3a2a | Blockquote text |
| Variable | Value | Description |
--palette-brand-main-dark |
#D4A574 | Golden tan, for headers |
--palette-brand-accent-dark |
#E8C5A0 | Light tan, for accents |
--palette-bg-page-dark |
#000000 | Pure black page background |
--palette-bg-card-dark |
#1a1a1a | Dark gray for cards, tables |
--palette-bg-row-dark |
#0f0f0f | Darker black for rows |
--palette-bg-header-start-dark |
#0a0a0a | Gradient start for headers |
--palette-bg-header-end-dark |
#1a1410 | Gradient end for headers |
--palette-border-dark |
#3a3a3a | Dark gray border |
--palette-border-header-dark |
#2a2420 | Dark brown-gray border |
--palette-text-main-dark |
#E8DCC8 | Light cream body text |
--palette-text-muted-dark |
#A09080 | Muted tan meta text |
| Variable | Value | Description |
--palette-neutral-white |
#ffffff | Pure white |
--palette-neutral-gray-100 |
#d4d4d4 | Code text (light) |
--palette-neutral-gray-200 |
#ddd | Light border (light) |
--palette-neutral-gray-300 |
#999 | Light meta text (light) |
--palette-neutral-gray-400 |
#666 | Meta text (light) |
--palette-neutral-gray-500 |
#333333 | Role badge bg (light) |
--palette-neutral-gray-600 |
#1e1e1e | Code bg (light) |
--palette-neutral-gray-700 |
#dad1ca | Statblock modifier (light) |
--palette-alert-info-border |
#3498db | Info border (shared) |
--palette-alert-warning-border |
#f39c12 | Warning border (shared) |
--palette-alert-danger-border |
#e74c3c | Danger border (shared) |
--palette-alert-danger-action |
#c00 | Danger action (shared) |
--palette-alert-danger-action-hover |
#a00 | Danger action hover (shared) |
--palette-alert-success-border |
#27ae60 | Success border (shared) |
--palette-alert-success-action |
#0a0 | Success action (shared) |
This table shows how the semantic variables (what you use in your code) are mapped from the palette.
| Theme Variable | Light Mode Map | Dark Mode Map |
--color-primary |
var(--palette-brand-main) |
var(--palette-brand-main-dark) |
--color-secondary |
var(--palette-brand-accent) |
var(--palette-brand-accent-dark) |
--color-text |
var(--palette-text-main-light) |
var(--palette-text-main-dark) |
--color-text-secondary |
var(--palette-text-muted-light) |
var(--palette-text-muted-dark) |
--color-border |
var(--palette-border-light) |
var(--palette-border-dark) |
--color-bg-page |
var(--palette-bg-page-light) |
var(--palette-bg-page-dark) |
--color-bg-light |
var(--palette-bg-card-light) |
var(--palette-bg-card-dark) |
--color-bg-medium |
var(--palette-bg-row-light) |
var(--palette-bg-row-dark) |
--color-bg-page-container |
var(--palette-bg-hover-light) |
var(--palette-bg-row-dark) |
--color-link |
var(--color-secondary) |
var(--color-primary) |
--color-link-hover |
var(--color-border) |
var(--color-primary) |
--color-btn-text |
var(--color-bg-light) |
var(--color-bg-light) |
--color-btn-hover-text |
var(--color-bg-light) |
var(--color-bg-light) |
--color-card-button-text |
var(--color-bg-light) |
var(--color-bg-light) |
| Theme Variable | Light Mode Map | Dark Mode Map |
--color-table-hover |
var(--palette-bg-hover-light) |
rgba(212, 165, 116, 0.08) |
--color-table-header-text |
var(--color-bg-light) |
var(--color-bg-light) |
--color-blockquote |
var(--palette-text-quote-light) |
var(--color-text-secondary) |
--color-breadcrumb |
var(--palette-neutral-gray-400) |
var(--color-text-secondary) |
--color-breadcrumb-sep |
var(--palette-neutral-gray-300) |
var(--palette-text-muted-light) |
--color-doc-meta |
var(--palette-neutral-gray-400) |
var(--color-text-secondary) |
--color-doc-meta-border |
var(--palette-neutral-gray-200) |
var(--color-border) |
--color-doc-body |
var(--color-text) |
var(--color-text) |
--color-hero-title |
var(--color-text) |
var(--color-text) |
--color-sidebar-bg |
var(--palette-brand-main-darker) |
var(--color-bg-page) |
--color-sidebar-border |
var(--palette-brand-highlight) |
N/A |
--color-nav-hover-light |
var(--color-sidebar-border) |
N/A |
--color-role-badge-bg |
var(--palette-neutral-gray-500) |
transparent |
--color-header-bg-start |
N/A | var(--palette-bg-header-start-dark) |
--color-header-bg-end |
N/A | var(--palette-bg-header-end-dark) |
--color-header-border |
N/A | var(--palette-border-header-dark) |
--color-header-text |
N/A | var(--color-text) |
--color-footer-bg |
N/A | var(--color-header-bg-start) |
--color-footer-border |
N/A | var(--color-header-border) |
--color-nav-hover |
N/A | var(--color-secondary) |
--color-header-overlay |
rgba(0, 0, 0, 0.4) |
rgba(0, 0, 0, 0.2) |
--search-results-shadow |
rgba(0, 0, 0, 0.1) |
rgba(0, 0, 0, 0.4) |
--search-link-hover-bg |
rgba(88, 24, 13, 0.05) |
rgba(232, 197, 160, 0.08) |
| Theme Variable | Light Mode Map | Dark Mode Map |
--generator-intro-bg-start |
var(--palette-brand-main-darker) |
var(--color-header-bg-start) |
--generator-intro-bg-end |
var(--palette-brand-accent-darker) |
var(--color-header-bg-end) |
--generator-toggle-active-bg |
var(--color-primary) |
var(--color-primary) |
--generator-toggle-active-text |
var(--color-bg-light) |
var(--color-bg-light) |
--generator-input-focus-shadow |
rgba(88, 24, 13, 0.1) |
rgba(212, 165, 116, 0.2) |
--generator-table-header-bg |
rgba(88, 24, 13, 0.05) |
rgba(212, 165, 116, 0.08) |
--generator-remove-btn-bg |
var(--palette-alert-danger-action) |
(Inherited) |
--generator-remove-btn-hover |
var(--palette-alert-danger-action-hover) |
(Inherited) |
--generator-markdown-bg |
var(--palette-neutral-gray-600) |
var(--color-header-bg-start) |
--generator-markdown-text |
var(--palette-neutral-gray-100) |
var(--color-text) |
--generator-placeholder-text |
var(--palette-neutral-gray-300) |
var(--palette-text-muted-light) |
--generator-error-bg |
var(--palette-alert-danger-bg-light-alt) |
var(--palette-alert-danger-bg-dark) |
--generator-error-border |
var(--palette-alert-danger-action) |
(Inherited) |
--generator-error-text |
var(--palette-alert-danger-action) |
var(--palette-alert-danger-border) |
--generator-success-bg |
var(--palette-alert-success-bg-light-alt) |
var(--palette-alert-success-bg-dark) |
--generator-success-border |
var(--palette-alert-success-action) |
(Inherited) |
--generator-success-text |
var(--palette-alert-success-action) |
var(--palette-alert-success-border) |
| Theme Variable | Light Mode Map | Dark Mode Map |
--statblock-bg-image |
url('/Guides/assets/images/fieldguide-back.png') |
(Inherited) |
--statblock-page-bg |
var(--palette-neutral-white) |
var(--color-header-bg-start) |
--statblock-body-bg |
#000000 |
var(--color-bg-page) |
--statblock-texture |
url('data:image/png;base64,...') |
none |
--statblock-modifier-bg |
var(--palette-neutral-gray-700) |
rgba(90, 74, 58, 0.3) |
--statblock-box-shadow |
rgba(0, 0, 0, 0.25) |
rgba(0, 0, 0, 0.5) |
--statblock-card-shadow |
rgba(0, 0, 0, 0.2) |
rgba(0, 0, 0, 0.4) |
--statblock-card-hover-shadow |
rgba(0, 0, 0, 0.3) |
rgba(0, 0, 0, 0.6) |
--statblock-image-shadow |
rgba(0, 0, 0, 0.2) |
rgba(0, 0, 0, 0.4) |
--statblock-header-text |
var(--color-bg-light) |
var(--color-bg-light) |
Hawthorne Guild