---
# System prepended metadata

title: Design system (admin)

---

# Design system (admin)

## Font-family

[Inter](https://fonts.google.com/specimen/Inter?query=inter)

## Font-size

| Class      | font-size / line-height |
| ---------- | ----------------------- |
| text-xs    | 12px      / 16px        |
| text-sm    | 14px      / 20px        |
| text-base  | 16px      / 24px        |
| text-lg    | 18px      / 28px        |
| text-xl    | 20px      / 28px        |
| text-2xl   | 24px      / 32px        |
| text-3xl   | 30px      / 36px        |
| text-4xl   | 36px      / 40px        |
| text-5xl   | 48px      / 48px        |
| text-6xl   | 60px      / 60px        |
| text-7xl   | 72px      / 72px        |
| text-8xl   | 96px      / 96px        |
| text-9xl   | 128px     / 128px       |



## Font-weight

| Class               | font-weight |
| ------------------- | ----------- |
| ~~font-thin~~       | ~~100~~     |
| ~~font-extralight~~ | ~~200~~     |
| font-light          | 300         |
| font-normal         | 400         |
| font-medium         | 500         |
| font-semibold       | 600         |
| font-bold           | 700         |
| ~~font-extrabold~~  | ~~800~~     |
| ~~font-black~~      | ~~900~~     |


## Border-radius

| Class             | border-radius     |
| ----------------- | ----------------- |
| rounded-sm        | 2px               |
| rounded           | 4px               |
| rounded-md        | 6px               |
| rounded-lg        | 8px           |
| rounded-xl        | 12px          |
| rounded-2xl       | 16px          |
| rounded-3xl       | 24px          |
| rounded-full      | 9999px            |


## Box-shadow

| Class            | box-shadow                                                               |
| ---------------- | ------------------------------------------------------------------------ |
| shadow-sm        | 0 1px  2px  0     rgb(0 0 0 / 0.05)                                      |
| shadow           | 0 1px  3px  0     rgb(0 0 0 / 0.1), 0 1px 2px  -1px rgb(0 0 0 / 0.1)     |
| shadow-md        | 0 4px  6px  -1px  rgb(0 0 0 / 0.1), 0 2px 4px  -2px rgb(0 0 0 / 0.1)     |
| shadow-lg    | 0 10px 15px -3px  rgb(0 0 0 / 0.1), 0 4px 6px  -4px rgb(0 0 0 / 0.1) |
| shadow-xl    | 0 20px 25px -5px  rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) |
| shadow-2xl   | 0 25px 50px -12px rgb(0 0 0 / 0.25)                                  |
| shadow-inner     | inset 0 2px 4px 0 rgb(0 0 0 / 0.05)                                      |


## Spacing (px)

4 - 8 - 12 - 16 - 20 - 24 - 28 - 32 - 36 - 40 - 44 - 48 - 56 - 64 - 80 - 96 -
112 - 128 - 144 - 160 - 176 - 192 - 208 - 224 - 240 - 256 - 288 - 320 - 384


## Grayscale

ALL initial designs should be in grayscale. 

Please use spacing, contrast, and size to do all of the heavy lifting. That way, we'll end up with a clearer interface with a strong hierarchy that’s easy to enhance with color later.

![image](https://www.dropbox.com/s/0vmys49cnw1pogx/Screen%20Shot%202022-10-11%20at%2012.40.31%20PM.png?dl=1)


## Responsive break points

min-width: 1280px


