Fxtrot UI

Palette #

The system for color naming is taken from Material Design 3 Color System. The default theme palette is generated using Material Theme Builder.

Primary #

The primary key color is used to derive roles for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.

primaryhsl(202 100% 30.6%)
on-primaryhsl(0 0% 100%)
primary-containerhsl(212 100% 90%)
on-primary-containerhsl(206 100% 10%)

Secondary #

The secondary key color is used for less prominent components in the UI such as filter chips, while expanding the opportunity for color expression.

secondaryhsl(227 43% 46%)
on-secondaryhsl(0 0% 100%)
secondary-containerhsl(231 100% 93%)
on-secondary-containerhsl(224 100% 16%)

Tertiary #

The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element.

tertiaryhsl(328 95.8% 37.1%)
on-tertiaryhsl(0 0% 100%)
tertiary-containerhsl(343 100% 92.5%)
on-tertiary-containerhsl(333 100% 12.2%)

Neutral #

The neutral key color is used to derive the roles of surface and background, as well as high emphasis text and icons.

The neutral variant key color is used to derive medium emphasis text and icons, surface variants, and component outlines.

backgroundhsl(202 100% 99.9%)
on-backgroundhsl(0 0% 10.6%)
surfacehsl(222 100% 99.8%)
on-surfacehsl(0 0% 10.6%)
surface-varianthsl(217 5% 90%)
on-surface-varianthsl(215 6% 40%)
outlinehsl(217 5% 47%)

Error #

A semantic color role for error.

errorhsl(340 71% 41%)
on-errorhsl(0 0% 100%)
error-containerhsl(351 100% 93%)
on-error-containerhsl(341 100% 13%)

Success #

A semantic color role for success.

successhsl(167 100% 21%)
on-successhsl(0 0% 100%)
success-containerhsl(162 90% 73%)
on-success-containerhsl(165 94% 6%)