Value
The raw data assigned to a token. A value is the final output applied to a presentational property of an element in the interface.
Example
Section titled “Example”#F44336
24pt
16px
0.5rem
Values can be assigned directly to an element’s properties (hard-coded), or indirectly through a token.
A value written directly into an interface without the use of a token is a hard-coded value. While simpler in the short term, hard-coded values make it difficult to update presentations consistently because each instance must be found and changed individually.
/* hard-coded */
button {
background-color: #F44336;
}
/* using a token */
button {
background-color: var(--action-primary-bgColor);
}