How design tokens work

Variables that capture UI styling decisions–such as color or font size–using a consistent naming structure to convey purpose and intent.

Help and support

If you have any questions, concerns, or feedback, and if this document has not answered something specific, please reach out to Desktop Theme Reviewers or Reusable Components Reviewers.

The Acorn Engineering team can be found on Matrix at #reusable-components, and theme reviewers can be found at #fx-theme-reviewers. You're also welcome to request info from any of us on Bugzilla.

Tag us on your Phabricator patch via #desktop-theme-reviewers and #reusable-components-reviewers.

Attend an Office Hours session if you’d like to get some live help.

Common concerns

“I’m a developer and a design I’m implementing doesn’t match a design token.”

Please reach out on our Slack channel or attend Office Hours. We can help you move forward.

“I’m a designer and I need a design token that doesn’t exist.”

See “Requesting a design token” right below.

Requesting a design token

When designing or developing, if you run into a pattern that could be extracted into a reusable property, then reach out to propose a token. We’d love to hear your contribution ideas.

If this pattern is only occurring throughout the feature you are working on, then consider creating a local custom property. For example, the Sidebar feature has unique properties defined in its sidebar.css file’s :root.