import { Meta } from "@storybook/addon-docs";
# Colors
Colors play one of the major roles in UI design. We've set a wide range of default colors to be used in building an accessible and useable interface for your applications.
When starting a design for your application it's a good idea to start of with neutral colors and add primary, secondary etc. down the line when defining a "personality" for your application, this forces font sizing, constrast, spacing etc to define the hierarchy.. This practice helps build a cleaner interface with good hierarchy.
Each opposite end of the colors are [WCAG AA compliant](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
## Using color tokens
TipColors are defined as CSS Custom properties,
to use them, use: var(--primary-500) as the CSS property value.
```
color: var(--black);
background-color: var(--neutral-100);
border: 1px solid var(--black);
```
---
Base
neutral
--neutral-50
--neutral-100
--neutral-200
--neutral-300
--neutral-400
--neutral-500
--neutral-600
--neutral-700
--neutral-800
--neutral-900
Primary
--primary-50
--primary-100
--primary-200
--primary-300
--primary-400
--primary-500
--primary-600
--primary-700
--primary-800
--primary-900
secondary
--secondary-50
--secondary-100
--secondary-200
--secondary-300
--secondary-400
--secondary-500
--secondary-600
--secondary-700
--secondary-800
--secondary-900
tertiary
--tertiary-50
--tertiary-100
--tertiary-200
--tertiary-300
--tertiary-400
--tertiary-500
--tertiary-600
--tertiary-700
--tertiary-800
--tertiary-900
success
--success-50
--success-100
--success-200
--success-300
--success-400
--success-500
--success-600
--success-700
--success-800
--success-900
warning
--warning-50
--warning-100
--warning-200
--warning-300
--warning-400
--warning-500
--warning-600
--warning-700
--warning-800
--warning-900
danger
--danger-50
--danger-100
--danger-200
--danger-300
--danger-400
--danger-500
--danger-600
--danger-700
--danger-800
--danger-900