---
# System prepended metadata

title: Design System
tags: [design]

---

---
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

