05 · Color

The palette and how to use it.

Seven color ramps built on OKLCH. Two primary colors define the brand. Red provides accent. Four supporting colors complete the system for data, UI, and extended applications.

05.1

Overview

Not every color is equal. Neutral and Green carry the brand. Red accents. The rest supports.

Green

Neutral

Green 20%

Neutral 75%

Red 5%

05.2

Primary palette

Three colors define the brand. Green leads, Neutral carries, Red accents.

Green

Primary

The brand accent. Primary actions, success states, the Bars Shield, and any surface that needs to say 'this is BARS.' Green is both the identity color and the primary semantic token.

500

Neutral

Primary

The foundation. Text, surfaces, borders, UI chrome. Gray carries 60-80% of any composition. Its cool tint gives depth without competing with green.

600

Red

Accent

The accent. Destructive actions, error states, the red card, and high-emphasis callouts. Used sparingly. When red appears, it means something.

500

Recommended ratios

How much of each color to use

These percentages set a tone, not a rigid rule. The default composition works for most surfaces.

Default

The standard composition for most brand surfaces. Neutral dominates, green signals brand and action, red provides selective emphasis.

Neutral 75%

Surfaces, text, borders

Green 20%

Primary actions, brand marks, success

Red 5%

Emphasis, destructive, the card

Brand-forward

For hero sections, presentations, and marketing surfaces where the brand needs to lead.

Green 60%

Background surfaces, brand immersion

Neutral 30%

Text, containers, breathing room

White 10%

Text on green, contrast

05.3

Secondary palette

Available for data visualization, UI states, and extended applications. No specific use cases assigned yet. Use when the primary palette isn't enough.

Yellow

Supporting

Warning states, caution indicators, coaching context.

500

Blue

Supporting

Informational states, links, secondary data series.

500

Orange

Supporting

Chart accent, secondary emphasis.

500

Purple

Supporting

Accent, chart series, special callouts.

500

Recommended ratios

When secondary colors enter the mix

Dashboards, charts, and data surfaces where multiple hues are needed.

Data and dashboards

When multiple hues are needed for charts, status indicators, and data visualization.

Neutral 65%

Chrome, axes, labels

Green 10%

Success, positive trends

Red 10%

Alerts, negative trends

Supporting 15%

Blue, yellow, orange, purple as chart series

05.4

Semantic tokens

How raw colors map to roles. Downstream designers and engineers reference these, not the raw ramps.

Token	Value	Use
--primary	green.500	Primary actions, brand surfaces
--success	green.500	Success states (same as primary)
--destructive	red.500	Destructive actions, errors, red card
--warning	yellow.500	Warnings, caution
--info	blue.500	Informational messages
--accent	purple.500	Accent, special callouts

05.5

Accessibility

Every color pairing used for text must pass WCAG AA (4.5:1 for body, 3:1 for large text). Click any swatch above to copy its hex and test pairings.

Safe text combinations

gray-950 on whiteBody text

green-700 on whiteBrand links

white on gray-950Dark mode body

red-500 on whiteError text