Simple Design Tokens with CSS Custom Properties. | by George Argyrousis | Bootcamp

Design systems provide axiomatic standards towards all elements comprising a digital product. Designers and developers alike, are responsible for creating a shared vocabulary within such system to effectively communicate key properties and values. These properties are ofter referred to as “Tokens”. A design token carries an explicit value that can be used within a programming language. These tokens can be expressed in CSS declarations as hex codes, pixels, rems, weights etc. When using CSS custom properties, we can store these values in the :root pseudo selector. If better browser support is essential, either use a CSS preprocessor with fallbacks or SCSS in combination with variables. Typography, color and spacing are amongst the most prominent design categories. Each category has its own collection of related atomic attributes expressed as tokens. When composed together, we obtain a collection of attributes that capture the values needed to express our desired result. Some principles

Design systems provide axiomatic standards towards all elements comprising a digital product. Designers and developers alike, are responsible for creating a shared vocabulary within such system to effectively communicate key properties and values. These properties are ofter referred to as “Tokens”. A design token carries an explicit value that can be used within a programming language. These tokens can be expressed in CSS declarations as hex codes, pixels, rems, weights etc. When using CSS custom properties, we can store these values in the :root pseudo selector. If better browser support is e