Background
In order to build our design system on top of a solid visual foundation that enables the application of consistent, predefined styles, we need to consolidate and document its articulating design guidelines. Visual guidelines have a strong impact on design tokens (T293127), since tokens names and values are directly dictated by said principles.
User stories
As a designer, I need to have access to the foundational visual principles of the system, so I'm able to reproduce systematic decisions related to colors, spacing, typography, etc. when designing components and creating other system-compliant designs.
Conditions of Satisfaction
All the visual guidelines of the design system are consolidated and documented in the Figma library.
Design spec
Done
Consolidate and document in Figma the system's tokens for:
- Color (T296995)
- Font (T296998)
- Sizing scale (T297000)
- Opacity (T297001)
- Box Shadow (T297003)
- Border (T300562)
- Motion (animation & transition) T304443
- Breakpoints T303522
-
Grids T298198Grid will not be part of our code tokens so removing from here - Cursor
- T302181: Define the system's cursors Initial addition
- T306396: Extend the system's cursors
Notes
It still needs to be decided whether we also want to document the system's visual principles in an external resource (whether that would be the system's demo page or the Design style guide).
Defining a Layout grid for the system (see T90687) is out of scope for this particular task due to its blocking complexity.