We (@americanrefugee and @janogarcia) have been iterating lately on how we apply color to components and containers’ borders and the more generic dividers, for better visual hierarchy and underlying logic.
800: interactive primary (text fields, radio, checkbox, toggle, slider... accessible border for controls that rely exclusively on its shape/outline)
400: interactive tertiary (quick actions, and other overlaid buttons such as the editable avatar)
400: dividers primary (default divider, can also be used for generic containers up to subtle secondary background)
300: dividers secondary (areas with high-density of dividers such as lists, can also be as a thin divider/background when nested in secondary background containers)
Platform
All.
# Design phase
- [ ] Tokens are added to Tokens Studio
- [ ] Tokens are published to Compound Styles Figma library
- [ ] Tokens are made available to Themer if necessary
- [ ] Tokens shareout for designers
# Development phase
- [ ] Tokens are generated for the target platforms
Context
We (@americanrefugee and @janogarcia) have been iterating lately on how we apply color to components and containers’ borders and the more generic dividers, for better visual hierarchy and underlying logic.
Platform
All.