Refine By

Design Tokens

Design Tokens defines the common hard coded design values (colors, typography, spacings, etc) that can be shared across apps for scalability and consistency. They should be used in place of hard-coded values for flexibility, maintainability, and unity across all experiences.

Other open source tools to transform jSON to another format:

More tokens coming soon…

For One Hero Web, color tokens are available to consume under @dx-osc-ui/theme.
For other channels, you can reach the color only jSON file here.

*Color contrast results are calculated by hexadecimal value against a pure white background and are for reference only.
AA = normal font size/weight. AALarge = 20px and bold or 24px regular.
Check with your A11y team member for specific questions.

Solid Colors Values A11y Availability
Background Colors Values A11y Availability

Use the tokens below for the available spacing units to use on the web.

Spacings Example Values