CleverCloud / clever-components

Collection of Web Components by Clever Cloud
https://www.clever-cloud.com/doc/clever-components/
Apache License 2.0
221 stars 20 forks source link

[meta] Design Tokens #398

Open florian-sanders-cc opened 2 years ago

florian-sanders-cc commented 2 years ago

As the team and the project grow, we need to define design tokens so that we can build a consistent and easy to maintain design system.

List of design tokens we need to define (from the most to less critical) :

    • [x] Colors
      • Background-colors
      • Element / Foreground-colors
      • Text-colors
      • Gradients
    • [ ] Typography
      • Font families
      • Font size
      • Font styles & letter case
      • Line height
    • [ ] Sizes
      • Spacers
      • Padding / Inset
      • Common Sizes for icons, etc.
    • [x] Border styles
    • [ ] Elevation / shadow
    • [ ] Opacity
    • [ ] Motion
      • Timing / Duration / delay
      • Curves
    • [x] Icons

This list is a trimmed down version of what can be found in the very thorough Naming Tokens in Design Systems article by Nathan Curtis.

hsablonniere commented 2 years ago

This list is good :+1: