back to palettes
Color lane

Civic Aurora Tonal

A precise adaptive enterprise palette: quiet green-slate surfaces, a deep teal primary, violet depth accents, and amber state warmth for 2026 tonal UI systems.

Signature · the star
primary accentCivic aurora teal · #006b5f
Protocol violet · #6e5cc2
Warm state amber · #c96a28
Neutrals · the ground
bg
#f6faf8
surface
#ffffff
text
#14201d
muted
#64736e
border
#d7e1dc
Semantic · functional accessory
success
warning
error
info
Ramps
accent
neutral
Download .css
Do
  • · Use the teal accent as the single primary action color; pair it with #ffffff on filled controls.
  • · Build adaptive depth with neutral containers: 50/100/200 in light mode and 950/900/800 in dark mode.
  • · Use violet for focus, selection history, and advanced/productivity accents, never as a competing primary CTA.
  • · Use warm amber only for attention states, chart contrast, and time-sensitive notices.
  • · Render state layers by mixing accent at 8%, 12%, and 16% over the active surface.
Don't
  • · Do not use muted text for body copy on bg or surface.
  • · Do not place teal.300 or amber.300 behind white text; use 700+ tones for filled text-bearing surfaces.
  • · Do not combine all signature hues in one control cluster; reserve multi-hue use for charts and proof gradients.
  • · Avoid pure #000 backgrounds; dark mode should stay green-black and layered.
try it

remix with this palette

Drop Civic Aurora Tonal onto any UI language and swap the art style — the preview recolors live.

UI language
Palette · fixed
Civic Aurora Tonal
Art style
Landing Page
no composition
live preview · recolored + filled