Skip to content
Skip design navigation
Etesie Alpha
Loading account
← Back to the color picker
Colors · Learn · Guide

Color roles

A color role describes a job, not a fixed hex. Material calls the main action role md.sys.color.primary; your theme decides which color resolves there in light and dark schemes.

Every family, live from your themelightdark scheme

Primary

The hero — most important actions & elements.

primary
on-primary
primary-container
on-primary-container

Secondary

Supporting accents that never compete with primary.

secondary
on-secondary
secondary-container
on-secondary-container

Tertiary

A contrasting balance color — at your discretion.

tertiary
on-tertiary
tertiary-container
on-tertiary-container

Error

Static semantics — never follows your source color.

error
on-error
error-container
on-error-container

Surface

Six neutral steps — elevation without shadows.

surface-dim
surface
surface-container-lowest
surface-container-low
surface-container
surface-container-high
surface-container-highest

Content & outline

Text, icons and borders on any surface step.

on-surface
on-surface-variant
outline
outline-variant

Status

et— Etesie extension

Where Material stops at error, Etesie continues the pattern.

success
success-container
warning
warning-container
info
info-container

Brand

et— Etesie extension

Your exact brand colors, unchanged and the same in light and dark.

brand
on-brand
The four patterns to remember
X vs onX

Every fill ships with a matching content color. Use them as a pair, always.

X vs XContainer

The accent and its soft container — full strength vs. a calm fill of the same hue.

surface vs surfaceContainer*

Neutral steps replace shadows: the higher the step, the more the element floats.

outline vs outlineVariant

Functional borders must clear 3:1; decorative hairlines don’t have to.