Nuevo Foundation Workshops

Navigation:

The Nuevo Foundation color palette keeps every workshop visually consistent with our brand. Use these colors anywhere you add visual styling — CSS demos, mini-games, embedded HTML, diagrams.

Official brand colors

Emphasis
#36374d

Cyan
#00bed5

Red
#e13126

Coral
#e96469

Yellow
#fcb415

Blush
#fbe6e0

Extended accent colors

Designer-curated extras from our Canva system. Use for illustrations, badges, decorative accents, or whenever a workshop needs a wider color story than the core 6 brand colors.

Green
#78e08f

Orange
#f19066

Cream
#f7f1e3

Neutrals

White, grays, and black for backgrounds, borders, body text, and shadows.

White
#ffffff

Gray 50
#e6e6e6

Gray 100
#d3d2d2

Gray 200
#bcbdc1

Gray 500
#737474

Gray 700
#505150

Black
#231f20

Full palette reference

Brand colors

Color	Hex	CSS variable	Common uses
Emphasis (dark)	`#36374d`	`--nuevo-emphasis`	Body text, headings, primary UI
Cyan accent	`#00bed5`	`--nuevo-cyan`	Links, secondary highlights, info
Red accent	`#e13126`	`--nuevo-red`	Primary buttons (dark stop), errors
Coral accent	`#e96469`	`--nuevo-coral`	Primary buttons (light stop), warm highlights
Yellow accent	`#fcb415`	`--nuevo-yellow`	Focus rings, callouts, badges
Blush accent	`#fbe6e0`	`--nuevo-blush`	Page backgrounds, soft borders, subtle callouts

Extended accent colors

Designer-curated extras from our Canva system. Use for illustrations, badges, decorative accents, or whenever a workshop needs a wider color story than the core 6 brand colors.

Color	Hex	CSS variable	Common uses
Green	`#78e08f`	`--nuevo-green`	Success states, nature themes
Orange	`#f19066`	`--nuevo-orange`	Warm callouts, energy themes
Cream	`#f7f1e3`	`--nuevo-cream`	Warm page backgrounds, paper textures

Neutrals

Color	Hex	CSS variable
White	`#ffffff`	`--nuevo-white`
Gray 50	`#e6e6e6`	`--nuevo-gray-50`
Gray 100	`#d3d2d2`	`--nuevo-gray-100`
Gray 200	`#bcbdc1`	`--nuevo-gray-200`
Gray 500	`#737474`	`--nuevo-gray-500`
Gray 700	`#505150`	`--nuevo-gray-700`
Black	`#231f20`	`--nuevo-black`

How to use them

Option 1: CSS variables (recommended)

The palette is exposed as CSS custom properties in static/css/nuevo-palette.css, which is automatically available on every workshop page.

.my-button {
  background: var(--nuevo-coral);
  color: var(--nuevo-white);
}

.my-callout {
  background: var(--nuevo-blush);
  border-left: 4px solid var(--nuevo-coral);
  color: var(--nuevo-emphasis);
}

Option 2: Hex values

If you’re writing standalone workshop code (e.g. files in workshopcode/) that students will open outside Hugo, paste the hex values directly:

background: linear-gradient(135deg, #e96469, #e13126);

Example: a Nuevo-themed button

.pick-btn {
  background: linear-gradient(135deg, var(--nuevo-coral), var(--nuevo-red));
  color: var(--nuevo-white);
  border: none;
  border-radius: 999px;
  padding: 1rem 2rem;
  box-shadow: 0 8px 20px rgba(225, 49, 38, 0.35);
}

.pick-btn:focus-visible {
  outline: 3px solid var(--nuevo-yellow);
  outline-offset: 3px;
}

See the JavaScript: Korean Snack Picker Game workshop for a complete real-world example.

Accessibility & contrast

Always check color contrast before shipping. The WCAG 2.1 AA standard requires:

4.5:1 for normal text
3:1 for large text (18pt+ or 14pt+ bold) and UI components

Verified combinations

Foreground	Background	Ratio	Verdict
`#36374d` Emphasis	`#ffffff` White	12.5:1 ✅	Use freely for body text
`#36374d` Emphasis	`#fbe6e0` Blush	10.2:1 ✅	Use freely for body text
`#ffffff` White	`#36374d` Emphasis	12.5:1 ✅	Use freely for body text
`#ffffff` White	`#e13126` Red	5.0:1 ✅	Use for buttons, large text
`#ffffff` White	`#e96469` Coral	3.4:1 ⚠️	Large text and UI only
`#e13126` Red	`#ffffff` White	5.0:1 ✅	Use for links, large text
`#00bed5` Cyan	`#ffffff` White	2.3:1 ❌	Decorative only, never body text
`#fcb415` Yellow	`#36374d` Emphasis	8.2:1 ✅	Use for badges, focus rings

Rules of thumb

Body text → always #36374d on a light background (white, blush, or pale gray)
Buttons → #ffffff on the coral-to-red gradient is safe
Cyan → use for decorative accents only (icons, focus rings, dividers), never body text on white
Yellow → great for focus rings and badges; pair with dark text on yellow, not yellow text on white

When in doubt, run your combo through WebAIM’s Contrast Checker .

Where this palette lives

CSS variables: static/css/nuevo-palette.css (loaded on every page)
Reference page: this file
Quick reference in the new-workshop guide: Creating a new workshop, Nuevo Foundation color palette section
Real workshop using it: JavaScript: Korean Snack Picker Game