# Sona8 design system

> The Sona8 brand: claim, colour, type, logo, components and voice. Read brand.md first.

## Files
- [brand.md](https://sona8.com/design/brand.md): the full rules in one file
- [tokens.css](https://sona8.com/design/tokens.css): CSS custom properties
- [tokens.json](https://sona8.com/design/tokens.json): the same tokens as JSON
- [Kit](https://sona8.com/design/sona8-design-kit.zip): brand.md, tokens and logo SVGs in one zip

## Pages
- [Overview](https://sona8.com/design)
- [Brand](https://sona8.com/design/brand)
- [Colours](https://sona8.com/design/colors)
- [Typography](https://sona8.com/design/typography)
- [Logo](https://sona8.com/design/logo)
- [Components](https://sona8.com/design/components)
- [Files](https://sona8.com/design/docs)

## Logo
- [sona8-logo-black.svg](https://sona8.com/assets/logo/sona8-logo-black.svg)
- [sona8-logo-black.png](https://sona8.com/assets/logo/sona8-logo-black.png)
- [sona8-logo-white.svg](https://sona8.com/assets/logo/sona8-logo-white.svg)
- [sona8-logo-white.png](https://sona8.com/assets/logo/sona8-logo-white.png)
- [sona8-logo-purple.svg](https://sona8.com/assets/logo/sona8-logo-purple.svg)
- [sona8-logo-purple.png](https://sona8.com/assets/logo/sona8-logo-purple.png)
- [sona8-icon-black.svg](https://sona8.com/assets/logo/sona8-icon-black.svg)
- [sona8-icon-black.png](https://sona8.com/assets/logo/sona8-icon-black.png)
- [sona8-icon-white.svg](https://sona8.com/assets/logo/sona8-icon-white.svg)
- [sona8-icon-white.png](https://sona8.com/assets/logo/sona8-icon-white.png)
- [sona8-icon-purple.svg](https://sona8.com/assets/logo/sona8-icon-purple.svg)
- [sona8-icon-purple.png](https://sona8.com/assets/logo/sona8-icon-purple.png)