State Colors

State colors are the calculated shifts that signal interactivity across every button, link, input, and toggle in a shipping interface. They include the hover state that brightens or deepens the base color, the focus ring that meets accessibility standards without wrecking your layout, the pressed variant that gives tactile feedback, and the disabled version that sits politely in the background without looking like an error. These colors never get invented from scratch. They get pulled as one or two steps up or down your existing anchor, semantic, or neutral scales so the entire palette feels like it belongs together. A strong state system also plans for dark mode from the start so a hover in light theme has its exact counterpart in dark instead of relying on some half baked CSS filter.

This layer sits directly on top of your semantic colors and anchor in the build order. Once the neutrals are locked and the semantic success, warning, and critical families are set you define states by pairing not by pulling new hex values from a color picker. Hover might be anchor 600 if the base is anchor 500. Focus could be a border using the anchor at 30 percent opacity. Disabled often lives in the neutral scale at a step that still passes contrast but reads as inactive. The goal is predictability. A designer or engineer should know what the hover looks like on a success button without opening Figma because the rule is consistent across the system.

State colors are not random new accents created to make the moodboard pop. They are not lazy opacity overlays that turn every interaction into a transparency experiment from the Tailwind playbook of 2020. They are not an afterthought added the night before a pitch deck is due. Most teams blow this by picking five core swatches then inventing state colors on the fly which leads to inconsistent implementations across platforms. The disabled state ends up too light on dark mode. The hover on the critical red feels like it clashes instead of reinforcing the warning. These mistakes happen because the palette was built for marketing slides not for the product teams that ship real code every Tuesday.

State colors are not a place to show off your color theory skills by introducing entirely new hues for pressed states. They are not identical across every brand or every context. What works for a fintech like Stripe would feel too aggressive for a calm tool like Notion. Treating them as generic is just as bad as treating them as pure decoration. The worst version is when a team copies another companys state palette without tuning it to their own neutral temperature. The result always looks slightly wrong like clothes that almost fit but pinch in all the wrong places.

Concrete examples prove how this works in practice. Linear shipped their 2023 product update with one of the tightest state systems in SaaS. Their signature purple anchor at hex 8B5CF6 gets a hover state at a precise 9C6EFF that feels brighter but stays in family. Focus uses a 2px solid border in the same purple tuned to pass WCAG AA on their dark neutral backgrounds. The pressed state shifts down to 7A4BE5 while disabled pulls from neutral scale step 600 a cool gray that still carries the brand but clearly signals inactivity. No new colors were added. Every state is a sibling of the base.

Stripe follows the exact same religion on their payments dashboard. The violet used for primary actions darkens by 8 percent on hover and desaturates slightly on press to give that satisfying click feeling. Their disabled buttons use a neutral gray from their carefully warmed scale instead of a dead #CCCCCC that would fight the brand. Links get an underline state that appears on hover using the anchor violet at full strength. Because these live as design tokens the consistency holds even when the marketing team launches a new campaign page that needs to match the product exactly.

Shopify Polaris documents state colors as first class citizens in their system. The interactive layer includes dedicated tokens for hover, focus, selected, and disabled across every role. A success button in light mode has its hover defined as a specific green shift. The dark mode version uses a parallel green that was planned on day one not reverse engineered later. This approach lets thousands of Shopify apps maintain visual consistency without constant designer intervention.

Vercel applies the same logic in their 2024 dashboard. The red accent on deploy buttons gets a darkened hover that stays readable against their glassmorphic cards. Focus rings use a desaturated version of the red at 40 percent opacity so it never vibrates. Disabled states mix a neutral with a trace of the red instead of killing the brand connection. Apple does this at scale in iOS 18 where system controls pull state variants from semantic blue with exact alpha values tuned for every mode including tinted interfaces. Material Design 3 goes further with tonal palettes that generate state layers algorithmically yet still require hand tuning for brand anchors like the ones used in the YouTube app.

Reach for state colors any time you have an element users can click, tap, or tab into. Define the full set before your first component gets built in code. They are essential for focus management in keyboard navigation and for giving users confidence that the interface is paying attention. Use them consistently so a primary CTA feels related to a subtle link hover. Do not use state colors on purely decorative elements or static copy. Never reach for them as an excuse to expand your anchor set with new hues. If you are only building static images for a pitch deck you can skip the detailed state work but the moment real users touch the product the states become mandatory.

The teams that nail state colors treat them like infrastructure not decoration. They test them across devices, browsers, and user abilities instead of assuming the Figma prototype told the whole story.

Build your state colors as deliberate shifts on your existing scales instead of new inventions and every interaction will reinforce your brand instead of fighting it.