# Design Tokens

When referring to these values, **ALWAYS** use the theme as the source of
truth. Put away your eye dropper, your pixel ruler, etc.

## Colors

![colors](https://i.imgur.com/OqbeO3C.png)

colors can be accessed like this:

```js
<View sx={{ backgroundColor: 'red' }}>
  <Text color="white">
    This text will be to correct white and have a background color of red.
  </Text>
</View>
```

<Text color="gray.2">
  This text will be a dark-ish gray, as definied by the `colors.gray` object
</Text>
```

When a color is mentioned with an index, think of it as an array of shades,
with zero being the darkest and each number greater than 0 increasing in
lightness.

Most of the colors are not abstracted - their name describes the color rather
than intent. The exception to this is "error", "warning", and "success". These
should be used _only_ in those contexts and should not be relied upon in any
other way.