Design Tokens
===

Design tokens are the visual "atoms" of our design system—specifically, they are named entities (SCSS variables, in our case) that store a discrete design attribute, like a hex color. We use them in place of hard-coded values in order to maintain scalable, consistent visual systems across our interfaces. 

Use them in your SCSS by importing the core tokens partial:

```scss
@import '../styles/core.scss';
```

### UI Colors

```jsx noeditor
import { ColorSwatch } from '../../../docs/lib/blocks';
import Flex from '@ui/components/Flex';
import colors from '../core.scss';

const cap = str => str.charAt(0).toUpperCase() + str.substring(1);

<Flex justify="flex-start" style={{flexWrap: 'wrap', alignLast: 'flex-start'}}>
  {Object.keys(colors).map(key => (
    <ColorSwatch
      hex={colors[key]}
      label={<b><code>{key}</code></b>}
      style={{flex: '0 33%', margin: 0, padding: '.5em', boxSizing: 'border-box'}}
      />
  ))}
</Flex>
```

Our color tokens are stored in an SCSS key-value map. Use them like this:

```scss
.MyElement {
  color: get(color 'slate');
}
```

### Typography

| SCSS Variable | Font Family |
|:--------------|:------------|
| **`$sans`**<br>_for paragraph text, etc; the base font._ | `Proxima Nova, Avenir, [system fallbacks], sans-serif` |
| **`$mono`**<br>_for code text and blocks._ | `Menlo, Monaco, Courier, monospace` |

```scss
.MyElement {
  &-codeSample { font-family: get(font 'mono') }
}
```