SiteKB/Дизайн/Дизайн-система.md

45 lines
3.2 KiB
Markdown
Raw Normal View History

# Дизайн-система [ORUDO.RU](https://orudo.ru)
***
## Шрифт
---
`Описание шрифтов для сайта`
## Цвета
---
| Тип | HEX | Превью |
| ------------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Background** *(Light)* | \#ECEFF4 | <div style="width: 50px; height: 50px; background-color: #ECEFF4;"></div> |
| **Text** *(Light)* | \#092F27 | <div style="width: 50px; height: 50px; background-color: #092f27;"></div> |
| **Text (Dim)** *(Light)* | \#06231D | <div style="width: 50px; height: 50px; background-color: #06231d;"></div> |
| **Background** *(Dark)* | \#2E3440 | <div style="width: 50px; height: 50px; background-color: #2e3440;"></div> |
| **Text** *(Dark)* | \#ECEFF4 | <div style="width: 50px; height: 50px; background-color: #FFFFFF;"></div> |
| **Text (Dim)** *(Dark)* | \#D8DEE9 | <div style="width: 50px; height: 50px; background-color: #d8dee9;"></div> |
| **Primary** | \#1B695B | <div style="width: 50px; height: 50px; background-color: #1b695b;"></div> |
| **Primary** *(Shade)* | \#2F7E6F | <div style="width: 50px; height: 50px; background-color: #2f7e6f;"></div> |
| **Primary** *(Gradient)* | \#1B695B<br>\#2F7E6F | <div style="width: 50px; height: 50px; background: linear-gradient(to bottom, rgba(27, 105, 91, 1) 0%, rgba(47, 126, 111, 1) 100%);"></div> |
| **Secondary** | \#4EB189 | <div style="width: 50px; height: 50px; background-color: #4eb189;"></div> |
| **Secondary** *(Shade)* | \#6FC6A3 | <div style="width: 50px; height: 50px; background-color: #6fc6a3;"></div> |
| **Accent** | \#247B59 | <div style="width: 50px; height: 50px; background-color: #247b59;"></div> |
![[Colors_Background.svg]]
![[Colors_Text.svg]]
![[Colors.svg]]
## Компоненты:
---
### Primary Button
---
`Прикрепить макет`
### Secondary Button
---
`Прикрепить макет`
### Tertiary Button
---
`Прикрепить макет`
### Site Widget
---
`Прикрепить макет`
### Social Widget
---
`Прикрепить макет`