Epic CSS / Documentation

Colors and palettes

Choose colors by their role in your design. Text and background utilities are separate, so one palette can change the appearance of the same markup.

Text and backgrounds

Primary text on the primary background.

This paragraph inherits the body text color.

<div class="clr-primary-bg p-24 border-r-16">
  <p class="clr-primary">Primary text on the primary background.</p>
  <p>This paragraph inherits the body text color.</p>
</div>

Secondary text on the secondary background.

White text stays white when the palette changes.

<div class="clr-secondary-bg p-24 border-r-16">
  <p class="clr-secondary">Secondary text on the secondary background.</p>
  <p class="clr-white">White text stays white when the palette changes.</p>
</div>

Utility	Sass palette value	Changes
`clr-body-bg`	`$clr-body-bg`	Background color
`clr-primary`	`$clr-primary`	Text color
`clr-primary-bg`	`$clr-primary-bg`	Background
`clr-secondary`	`$clr-secondary`	Text color
`clr-secondary-bg`	`$clr-secondary-bg`	Background
`clr-white`	`$clr-white`	Text color

Switch a palette

Overrides depend on the library declaring fallback colors with !default. This site's local Sass supports that. npm 0.14.0 overwrites earlier assignments; the published 0.14.1 patch fixes this. Upgrade the starter dependency and lockfile to that release before relying on these overrides. Corporate registries may take time to expose a new release.

In the Eleventy theme or this site's src/my-epic-css/_custom.scss, comment out the eight assignments in the active palette, then uncomment the eight assignments in another palette. Keep one complete palette active. Sass compiles the chosen values into CSS; this does not create a runtime light/dark switch.

// Example light palette
$clr-body: #1e1e1e;
$clr-body-bg: #f4f6fa;
$clr-primary: #0067b8;
$clr-primary-light: #4f9eea;
$clr-primary-bg: #dceeff;
$clr-secondary: #7a7574;
$clr-secondary-bg: #ececec;
$clr-white: #ffffff;

$clr-body sets the base text color. $clr-primary-light sets the accent on main a.clr-underline:hover. There are no standalone clr-body or clr-primary-light utilities. Changing a palette updates existing declarations, rather than generating new color class names.

Run npm start to preview palette changes. Check text, links, hover states, code blocks, and both callouts above. White text can disappear on a light surface: keep it on a sufficiently dark background or use an appropriate semantic text color. The example palettes are starting points; their names do not guarantee contrast for every combination.

Stop the development server, then run npm run build to compile Sass, filter CSS using literal source classes, and generate the production site. Run npm run validate for the same check with temporary output and restored CSS files. Always preview important pages after filtering, especially if class names are assembled dynamically.