Overview
Acorn colors are inspired by the Firefox brand, but created for the browser’s user interface design.
Accent Primary
Accentuates inputs and link styles. For example, Link Color and Focus Outline Color point directly to Accent Primary.
The accent color comes with hover and active companion shades for interactive states needs.
Background
We provide 4 feedback colors: information, success, critical, and warning.
They show up primarily as background colors on message bars, although they may also separately be used outside of this component.
Message Bar example using information background color |
Icon
Like backgrounds, we provide 4 feedback icon colors: information, success, critical, and warning. They pair well with the background colors.
Message Bar example using icon and background color success |
Link
|
Outline
Form validation example utilizing outline color error |
Text
Resources
Storybook
Access our Storybook to learn about how design tokens work in our codebase. There you can also check out our tokens table which contains live previews of tokens in light, dark, and high contrast mode.
Requests and contributions
You can file a bug under Toolkit > Themes if you want to request or contribute a new token.
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
April 3, 2025 |
1.0.0 |
Introduced new color docs. |