# Conda Store Design System
This design system provides guidelines, components, and assets to ensure consistency and quality in our projects.
## Table of Contents
1. [Introduction](#introduction)
2. [Style Guide](#style-guide)
<!-- 3. [Component Documentation](#component-documentation)
- [Button](#button)
- [Form Inputs](#form-inputs)
- [...
4. [Design Tokens](#design-tokens)
5. [Accessibility Guidelines](#accessibility-guidelines)
6. [Design Assets](#design-assets)
7. [Interactive Prototypes](#interactive-prototypes)
8. [Code Implementation](#code-implementation)
9. [Feedback and Contributions](#feedback-and-contributions)
10. [Maintenance](#maintenance) -->
## Introduction
The goal of this design system is to provide a single source of truth for design for conda store and to help streamline the design-development process.
## Style Guide
### Brand Colours
#### Main Colours
| Shade Name | HEX Color Code | RGB | CMYK | PMS | Example Swatch |
| -------------- | ---------------- | --- | ---- | --- | -------------- |
| Dark Green | #40AF2F | 51,168,82 | 75,3,100,0 | 361 C | <div style="width: 30px; height: 30px; background-color: #40AF2F;"></div> |
| Light Green | #A8E29F | 168,226,159 | 26,0,30,11 | 344 C | <div style="width: 30px; height: 30px; background-color: #A8E29F;"></div> |
| Dark Gray | #3C3C3B | 60,60,59 | 0,0,0,79 | 447 C | <div style="width: 30px; height: 30px; background-color: #3C3C3B;"></div> |
| Light Gray | #999FA5 | 153,159,165 | 7,4,0,35 | 422 C | <div style="width: 30px; height: 30px; background-color: #999FA5;"></div> |
| White | #FFFFFF | 255,255,255 | 0,0,0,0 | WHITE | <div style="width: 30px; height: 30px; background-color: #FFFFFF;border: 1px solid #000;"></div> |
#### Accent Colours
| Shade Name | HEX Color Code | RGB | CMYK | PMS | Example Swatch |
| -------------- | ---------------- | --- | ---- | --- | -------------- |
| Orange | #FFAB40 | 255,171,100 | 00,33,75,0 | 804 C | <div style="width: 30px; height: 30px; background-color: #FFAB40;"></div> |
| Red | #FF6640 | 0,60,75,100 | 26,0,30,11 | 171 C | <div style="width: 30px; height: 30px; background-color: #FF6640;"></div> |
### UI Colors
#### Primary (Green)
Primary colour across the theme.
| Shade Name | HEX Color Code | Example Swatch |
| -------------- | -------------------- | --------------- |
| 50 | #D6EEDC | <div style="width: 30px; height: 30px; background-color: #D6EEDC;"></div> |
| 100 | #ADDCBA | <div style="width: 30px; height: 30px; background-color: #ADDCBA;"></div> |
| 200 | #85CB97 | <div style="width: 30px; height: 30px; background-color: #85CB97;"></div> |
| 300 (light) | #5CB975 | <div style="width: 30px; height: 30px; background-color: #5CB975;"></div> |
| 400 | #36AB55 | <div style="width: 30px; height: 30px; background-color: #36AB55;"></div> |
| 500 (main) | #298642 | <div style="width: 30px; height: 30px; background-color: #298642;"></div> |
| 600 | #206532 | <div style="width: 30px; height: 30px; background-color: #206532;"></div> |
| 700 (dark) | #144321 | <div style="width: 30px; height: 30px; background-color: #144321;"></div> |
| 800 | #0A2210 | <div style="width: 30px; height: 30px; background-color: #0A2210;"></div> |
| 900 | #051108 | <div style="width: 30px; height: 30px; background-color: #051108;"></div> |
| **Contrast Text Color** | #FFFFFF | <div style="width: 30px; height: 30px; background-color: #FFFFFF;border: 1px solid #000;"></div> |
#### Secondary (Grey)
Secondary colour across the theme.
| Shade Name | HEX Color Code | Example Swatch |
| -------------- | -------------------- | --------------- |
| 50 | #F7F8F8 | <div style="width: 30px; height: 30px; background-color: #F7F8F8;"></div> |
| 100 | #E1E3E4 | <div style="width: 30px; height: 30px; background-color: #E1E3E4;"></div> |
| 200 | #C3C7CB | <div style="width: 30px; height: 30px; background-color: #C3C7CB;"></div> |
| 300 (light) | #A6ACB2 | <div style="width: 30px; height: 30px; background-color: #A6ACB2;"></div> |
| 400 | #90969C | <div style="width: 30px; height: 30px; background-color: #90969C;"></div> |
| 500 (main) | #5B5F63 | <div style="width: 30px; height: 30px; background-color: #5B5F63;"></div> |
| 600 | #44474A | <div style="width: 30px; height: 30px; background-color: #44474A;"></div> |
| 700 (dark) | #3C3C3B | <div style="width: 30px; height: 30px; background-color: #3C3C3B;"></div> |
| 800 | #242628 | <div style="width: 30px; height: 30px; background-color: #242628;"></div> |
| 900 | #1A1C1D | <div style="width: 30px; height: 30px; background-color: #1A1C1D;"></div> |
| **Contrast Text Color** | #FFFFFF | <div style="width: 30px; height: 30px; background-color: #FFFFFF;border: 1px solid #000;"></div> |
#### Accent (Purple)
Accent colour across the theme.
| Shade Name | HEX Color Code | Example Swatch |
| -------------- | -------------------- | --------------- |
| 50 | #E7E0F0 | <div style="width: 30px; height: 30px; background-color: #E7E0F0;"></div> |
| 100 | #D0C0E5 | <div style="width: 30px; height: 30px; background-color: #D0C0E5;"></div> |
| 200 | #B9A1DA | <div style="width: 30px; height: 30px; background-color: #B9A1DA;"></div> |
| 300 (light) | #A78BD0 | <div style="width: 30px; height: 30px; background-color: #A78BD0;"></div> |
| 400 | #8966C2 | <div style="width: 30px; height: 30px; background-color: #8966C2;"></div> |
| 500 (main) | #6643A8 | <div style="width: 30px; height: 30px; background-color: #6643A8;"></div> |
| 600 | #55309D | <div style="width: 30px; height: 30px; background-color: #55309D;"></div> |
| 700 (dark) | #3B216E | <div style="width: 30px; height: 30px; background-color: #3B216E;"></div> |
| 800 | #2F1957 | <div style="width: 30px; height: 30px; background-color: #2F1957;"></div> |
| 900 | #231240 | <div style="width: 30px; height: 30px; background-color: #231240;"></div> |
| **Contrast Text Color** | #FFFFFF | <div style="width: 30px; height: 30px; background-color: #FFFFFF;border: 1px solid #000;"></div> |
#### Foundation (Purple)
Base black and white colours for the system.
| Shade Name | HEX Color Code | Example Swatch |
| -------------- | -------------------- | --------------- |
| White | #FFFFFF | <div style="width: 30px; height: 30px; background-color: #FFFFFF;border: 1px solid #000;"></div> |
| Black | #000000 | <div style="width: 30px; height: 30px; background-color: #000000;"></div> |
#### Semantic Colors
Foregrounds (text and icons), backgrounds, and borders that highlight affordance or the meaning of elements in the UI.
| Shade Name | HEX Color Code | Example Swatch |
| -------------- | -------------------- | --------------- |
| Error | #D72D47 | <div style="width: 30px; height: 30px; background-color: #D72D47;"></div> |
| Warning | #F66A0A | <div style="width: 30px; height: 30px; background-color: #F66A0A;"></div> |
| Success | #00843F | <div style="width: 30px; height: 30px; background-color: #00843F;"></div> |
| Info | #276BE9 | <div style="width: 30px; height: 30px; background-color: #276BE9;"></div> |
## Typography
Sign in with Wallet
Connect another wallet