Design tokens Design system

Name and manage shared values.

7 checks · 3 content groups

Checklist contents

Review progress

Structure and meaning

Compare information and presentation in context of use.

Separating value and purposeDistinguish primitive values from role-based variables and component-specific variables.Change the light interface to dark and then check the component states. Use names for purposes such as secondary text or borders; Avoid letting each screen choose a similar color.Example Update dates, input box suggestions, and comments all use the “text-muted” token; Token exchange will update all three according to the same rules.Naming has rulesUse a name that reflects its use, status, and scope so that others can guess how it will be used.Role names such as warning background color are more durable than value names such as yellow-200; keep the same name order for the whole system.Record how to use each variableGive suitable examples and state cases where that variable should not be used.Each variable needs an example of correct use and a warning for incorrect use; clearly state the ingredient's individual variables are not product-wide selections.

Interaction and usability

Try the operation, change the status and continue working.

Check out the interfacesUse a consistent role when changing light or dark and check the contrast of each state.A role name should retain meaning through light/dark; does not require the component to know which color code belongs to each interface.Keep design and code in syncCompare names and values between design documents and components in use.Choose a primary data source and check for bias automatically; Same name but different value is still a synchronization error.Shared change trackingRecord the reason, scope of influence and conversion method when changing or removing a variable.Record the replacement variable and the conversion range when removing the old variable; Check dependencies before releasing new values.

Complete the experience

Check for details that are easy to miss when putting the design into use.

Assign ownership and a process for adding tokensState who reviews new tokens, when existing tokens should be reused, and how overlapping meanings are resolved.A request to add a variable should include the use cases and reasons for not using an existing role; Avoid having each group create its own color palette.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Check if the value is called by role

Change the light interface to dark and then check the component states. Use names for purposes such as secondary text or borders; Avoid letting each screen choose a similar color.

EXAMPLES

Usage examples

Common secondary font color

Update dates, input box suggestions, and comments all use the “text-muted” token; Token exchange will update all three according to the same rules.