# Design Tokens for Developers
Delegating responsibility of design back to designers 
---
Hi 👋, my name is Donnie D'Amato and I'm a Design Systems ~~Addict~~ ~~Antagonist~~ Architect.   ## Goals 🎯
- [ ] Define design tokens
- [ ] Demonstrate benefits
- [ ] Recommendations ## **Design Tokens**
They're _basically_ variables ### Design Token
"Background color of primary buttons"
(intent)
---
### CSS Custom Property
`--button-primary-bgcolor`
(implementation) ## Design Tokens are meant to support _expressive_ changes ### Expressive
```css
button {
color: var(--color);
}
```
---
### Functional
```css
button {
flex: var(--flex);
}
```  ## form _follows_ function ## YAML
Yet Another Markup Language
```yaml
tokens:
$action_primary_backgroundColor: '#FF5A5F'
$action_primary_foregroundColor: '#EEEEEE'
$action_primary_borderColor: '#FF5A5F'
``` ### JSON
```json
{
"tokens": {
"name": "blue"
}
}
```
---
### YAML
```yaml
# Here's a comment
tokens:
name: blue
``` ```yaml
tokens:
action:
primary:
backgroundColor: blue
```
## VS
```yaml
tokens:
action_primary_backgroundColor: blue
``` ```js
action.primary.backgroundColor
```
## VS
```css
action-primary-backgroundColor
```
## VS
```js
action_primary_backgroundColor
``` ## Interoperable Tokens
**`tokens.$action_primary_backgroundColor`** ### JSX
```jsx
import tokens from './_tokens.module.scss';
function PrimaryButton(props) {
return (
<button
{...props}
style={{
backgroundColor: tokens.$action_primary_backgroundColor
}}/>
);
}
``` ### Sass
```scss
@use '../tokens.module';
button.primary {
background-color: tokens.$action_primary_backgroundColor;
}
```  ### `button.css`
```css
button.primary {
background-color: var(--🔒action_primary_backgroundColor);
color: var(--🔒action_primary_foregroundColor);
border-color: var(--🔒action_primary_borderColor);
}
```
(authored using Interoperable Tokens) ### Emojis 🤝 CSS Variables
- A single character can convey ideas better than multiple characters
- Stands out as different from other variables
- Suggests they are not meant to be typed out by hand
(example from [system.damato.design](https://system.damato.design))
---
 ## YAML
Yet Another Markup Language
```yaml
tokens:
$action_primary_backgroundColor: '#FF5A5F'
$action_primary_foregroundColor: '#EEEEEE'
$action_primary_borderColor: '#FF5A5F'
``` ### `theme.css`
```css
:root {
--🔒action_primary_backgroundColor: #FF5A5F;
--🔒action_primary_foregroundColor: #EEEEEE;
--🔒action_primary_borderColor: #FF5A5F;
}
```
(generated from the `tokens.yaml`) 
---
 ## Goals 🎯
- [x] Define design tokens
- [x] Demonstrate benefits
- [x] Recommendations ## Missing pieces 🧩
- [ ] Naming considerations
- [ ] Delivering multiple expressions
- [ ] Improving the authoring experience
- [ ] Mise en Mode ([mode.place](https://mode.place)) ## Thank you 🙏
[donnie.damato.design](https://donnie.damato.design)
(available for professional consulting)
---
