Hero Palette

Status: stable Scope: DFT chart-library hero categorical palette Source: M1 chart-library planning

This document records the current stable DFT hero palette, now named hero-6, and the reasoning that produced it.

Current Palette

The current stable six-color hero palette is:

1. hero-blue #2768a3
2. light-gray #acb7c2
3. gray #929aa6
4. brown #a68d72
5. beige #b8a593
6. sand #c7a987

hero-blue#2768a3

light-gray#acb7c2

gray#929aa6

brown#a68d72

beige#b8a593

sand#c7a987

Definition

hero-6 is a "hero blue versus neutrals" palette.

Its design logic is:

• one strong blue hero color
• all support colors belong to the gray/brown family only
• the hero blue is the darkest swatch in the palette
• support colors occupy lighter and less saturated perceptual bands
• the first support mini-group is gray, then the palette moves into browns

Architecture

The palette was built around a clear perceptual split:

• primary contrast: saturation
• secondary contrast: lightness

That means the blue hero wins because it is both:

• the most saturated color in the set
• the darkest color in the set

The support colors are not trying to behave like fully independent headline category hues. They are a neutral field designed to let the hero color pop.

Selection Rules

These rules were used while refining hero-6:

• The hero blue must be darker than every support color.
• Support colors must remain visually distinct from the hero both by saturation and by lightness.
• The palette should use only grays and browns after the hero color.
• The support colors should be lighter than the hero, but not so light that they disappear on gray-025 #FAFAFA.
• The lightest support colors should stay around a 2.0:1 contrast ratio or better against the gray-025 surface.
• Grays should read clearly as gray, not as disguised blue.
• Browns should read as warm neutrals, not as orange category colors.

Ordering Logic

The order is intentional:

1. hero-blue
2. light-gray
3. gray
4. brown
5. beige
6. sand

Why this order:

• the strongest hero/non-hero contrast is established immediately
• the neutral support field begins with one family first, not a gray/brown mix
• the support band then warms gradually into the brown run
• the later colors can become softer because they are expected to be used less

Refinement Notes

Several useful decisions emerged during refinement:

• Reusing colors directly from the ten-color default palette was not enough. The hero palette needed its own support bands.
• A three-gray support run became too compressed and visually mushy. The final structure works better as two grays followed by three browns.
• The hero blue needed to get slightly darker than the single-series blue candidate, which led to #2768a3.
• The lighter gray was intentionally pushed close to the floor to create a stronger sense of separation from the hero.
• The final brown was then nudged slightly darker from #ccaf8b to #c7a987 so it stayed distinct from light-gray while still reading as sand.

Accessibility Posture

This palette uses the same local Leonardo-style workflow used for the default palette:

1. simulate common vision conditions
2. compare simulated colors with CIEDE2000
3. use a practical floor on the actual gray-025 background

For hero-6, the working floor is:

• absolute minimum support contrast on gray-025: about 2.0:1
• more comfortable support band: about 2.2:1-3.0:1
• hero color: substantially stronger than the supports

This palette is not trying to maximize pairwise equality among all six slots. Its purpose is to make slot 1 win clearly while the remaining five slots stay usable and coherent.

Archived Alternate Draft

An alternate draft, hero-vs-warms, is intentionally preserved as a research note rather than an active roadmap item.

Current preserved draft:

1. #2768a3
2. #c9954f
3. #d98d67
4. #c89d7d
5. #c8ab84
6. #b8995f

Current posture:

• keep the draft and its reasoning in docs
• do not treat it as an active milestone task
• revisit only if a later palette need makes this architecture strategically useful