This repository contains the design guidelines which all frontend applications and components in Umbrlla must follow.
For all copy text, the Geomanist font must be used.
| Name | Value |
|---|---|
| font-small | 14px |
| font-regular | 16px |
| font-medium | 18px |
| font-large | 24px |
| font-xlarge | 32px |
Note: May be subject to change.
| Name | Hex | RGB | Preview |
|---|---|---|---|
| primary | #3EACA8 | rgb(62,172,168) | |
| secondary | #A2D4AB | rgb(162,212,171) | |
| dark | #403B3B | rgb(64,59,59) | |
| dark-alt | #BBBBBB | rgb(187,187,187) | |
| light | #F4F4F4 | rgb(244,244,244) |
Values for spacing apply to both margins and padding.
Note: May be subject to change.
| Name | Value |
|---|---|
| spacing-xsmall | 2px |
| spacing-small | 4px |
| spacing-medium | 8px |
| spacing-large | 16px |
| spacing-xlarge | 32px |
| spacing-2xlarge | 64px |
| spacing-jumbo | 128px |
Values for shadows will follow the guidelines set by Tailwind CSS, which can be found here.