01. Colors
Brand Colors
Primary
#141361
Secondary
#86ead4
Accent
#ff5252
Status Colors
Info
#0090ff
Success
#30a46c
Warning
#ffe629
Error
#e5484d
Black Colors
Black
#000000
A12
#000000f2
A11
#000000e5
A10
#000c
A9
#000000b2
White
#FFFFFF
Gray Colors
Gray 12
#202020
Gray 11
#646464
Gray 10
#838383
Gray 9
#8d8d8d
Gray 8
#bbbbbb
Gray 7
#cecece
Gray 6
#d9d9d9
Gray 5
#e0e0e0
Gray 4
#e8e8e8
Gray 3
#f0f0f0
Gray 2
#f9f9f9
Gray 1
#fcfcfc
02. Typography
Aa
Heading
Headings use a compact line height of 1.1x the font size for clear hierarchy and visual impact.
Kumbh Sans
Google Fonts
Jumbo
| Name | Font size | Font class |
|---|---|---|
Heading 1 | 3.75rem | text-6xl |
Heading 2 | 2.25rem | text-4xl |
Heading 3 | 1.875rem | text-3xl |
Heading 4 | 1.5rem | text-2xl |
Heading 5 | 1.25rem | text-xl |
Heading 6 | 1.125rem | text-lg |
Aa
Body
Body text is styled with a relaxed line height of 1.4x the font size to enhance readability.
Kumbh Sans
Google Fonts
| Name | Font size | Font class |
|---|---|---|
Large text bold | 1.25rem | text-xl |
Large text regular | ||
Medium text bold | 1.25rem | text-lg |
Medium text regular | ||
Normal text bold | 1rem | text-base |
Normal text regular | ||
Small text bold | 1rem | text-sm |
Small text regular |
03. Iconography
Lucide Icons
https://lucide.dev/
Icon Design Principles
Size: Use a 24x24 pixels canvas for consistency.
Padding: Maintain a 1-pixel padding within the canvas.
Stroke: Set stroke width to 2 pixels for clarity.
Iconsets
04. Layout System
Mobile sm
Defaults
- Minimum width
- 640px
- Selector
- sm
- Gap
- 16px
- Padding
- 24px
Tablet md
Defaults
- Minimum width
- 768px
- Selector
- md
- Gap
- 20px
- Padding
- 32px
Desktop lg
Defaults
- Minimum width
- 1024px
- Selector
- lg
- Gap
- 24px
- Padding
- 48px
Large Desktop xl
Defaults
- Minimum width
- 1280px
- Selector
- xl
- Gap
- 28px
- Padding
- 64px
XL Desktop 2xl
Defaults
- Minimum width
- 1536px
- Selector
- 2xl
- Gap
- 32px
- Padding
- 80px
05. Spacing
| Name | Pixel | Preview |
|---|---|---|
0 | 0px | |
px | 1px | |
0.5 | 0.125rem | |
1 | 0.25rem | |
1.5 | 0.375rem | |
2 | 0.5rem | |
2.5 | 0.625rem | |
3 | 0.75rem | |
3.5 | 0.875rem | |
4 | 1rem | |
5 | 1.25rem | |
6 | 1.5rem | |
7 | 1.75rem | |
8 | 2rem | |
9 | 2.25rem | |
10 | 2.5rem | |
11 | 2.75rem | |
12 | 3rem | |
14 | 3.5rem | |
16 | 4rem | |
20 | 5rem | |
24 | 6rem | |
28 | 7rem | |
32 | 8rem | |
36 | 9rem | |
40 | 10rem | |
44 | 11rem | |
48 | 12rem | |
52 | 13rem | |
56 | 14rem | |
60 | 15rem | |
64 | 16rem | |
72 | 18rem | |
80 | 20rem | |
96 | 24rem |
04. Textfields
Simple Input field underline
Helper text
Input Variants
- underline (default)
- solid
Usage
Simple [placeholder]
Helper text
Field with Icon [icon]
Helper text
Status
Error message
Warning message
Success message
Info message
Text Area Multi-line input field.
Simple usage
Usage [required, icon, helperText]
Helper text
Usage [required, status=error]
Error message
Usage [required, status=warning]
Warning message
Usage [required, status=success]
Success message
Usage [required, status=info]
Info message
07. Selectors
Select
Checkbox/Radio/Toggle
Pin
Date picker
08. Buttons
Disabled
High Contrast
Colors and Variants
| base | primary | secondary | accent | success | info | error | warning | |
|---|---|---|---|---|---|---|---|---|
| solid | ||||||||
| soft | ||||||||
| surface | ||||||||
| outline | ||||||||
| ghost |
Button sizes
xs
sm
md
lg
xl
Status buttons with icon
success
info
error
warning
Rounded corners
none
sm
md
base
lg
xl
2xl
3xl
full
09. Base Components
File Upload
File Input
File button
File upload progress
favicon.png
44 KB
Banner Discount
Banner title
Banner body or description with extras.
Accordion
Alerts
Default Alert
Bordered with status
Title
Body text with status success
footer
Title
Body text with status info
footer
Title
Body text with status error
footer
Title
Body text with status warning
footer
Avatar
Simple
Sizes
Square
Card
Amelia Wilson
Business Consultant
Badges
Variants and Colors