---
tags: design
---

# Design System

A pre-defined design system will be crucial for branding and recognition.

## Necessities

- [Color Palette](#Color-Palette)
- [Logo](#Logo)
- [Component Inventory](#Component-Inventory)
- [Icon Inventory](#Icon-Inventory)
- [Typography](#Typography)
- [Brand Guidelines](#Brand-Guidelines)

## Color Palette

- Grayscale (Base = darktheme ? darkest : lightest)
- Base
- Low
- Mid
- Hi
- Top
- Main
- Primary
- Secondary
- Highlight
- Warning
- Error
- Info
- Gradient
- go nuts lol

## Logo

Will need lots of iteration, might be best to use external designer.

[First Choice for Logo Design](https://dribbble.com/yoga)

## Component Inventory

- Button
- Primary
- Secondary
- Warning
- Error
- Input
- Primary
- Secondary
- Warning
- Error
- Search
- Form
- Charts
- Line
- Bar
- Pie
- Card
- Header
- Body
- Header
- Footer
- Side Bar
- List
- Header
- Item
- Separator
- Text
- Headers 1-6
- Links
- Primary
- Secondary
- Focused
- MotherFuckingDogShitEatingStupid Date Picker :angery:

## Icon Inventory

May be best to use pre-defined for now. MUST be free, open source.

List for inspiration:

- Ant Icon
- Material Community Icon
- Ionicon
- Evil Icon

## Typography

Not sure on this one. Some free fonts, but high quality tend to cost money.

## Brand Guidelines

This can come later but should outline the following:

- How logos may be used
- How name may be used
- How to reach out for more info