Foundation
Discover the foundational UI elements and layouts, forming the basis for creating cohesive and functional interfaces.
Accent Colors
Vibrant shades tailored to bring attention to key elements and actions.
Living Coral
rgb(239, 89, 79)
Greenery
rgb(67, 168, 110)
Ultra Violet
rgb(167, 121, 232)
Rose Quartz
rgb(227, 110, 115)
Radiant Orchid
rgb(223, 95, 195)
Tangerine Tango
rgb(219, 122, 78)
Emerald
rgb(67, 166, 148)
Honey Gold
rgb(177, 150, 78)
Monaco Blue
rgb(75, 152, 235)
Dark Violet
rgb(201, 114, 252)
Royal Blue
rgb(118, 129, 237)
Neutral Colors
Balanced colors offering understated elegance without overwhelming the design.
neutral.50
rgb(245, 245, 246)
#f5f5f6
neutral.100
rgb(238, 238, 239)
#eeeeef
neutral.200
rgb(231, 232, 232)
#e7e8e8
neutral.300
rgb(219, 220, 221)
#dbdcdd
neutral.400
rgb(200, 202, 203)
#c8cacb
neutral.500
rgb(179, 181, 183)
#b3b5b7
neutral.600
rgb(137, 140, 142)
#898c8e
neutral.700
rgb(114, 117, 120)
#727578
neutral.800
rgb(67, 71, 75)
#43474b
neutral.900
#14191e
#14191e
Shadows
Depth-enhancing shadows, perfect for element distinction and focus.
Elevation
8
Elevation
0
Elevation
6
Elevation
7
Elevation
8
Elevation
9
Elevation
10
Elevation
11
Elevation
12
Elevation
13
Elevation
14
Elevation
15
Elevation
16
Elevation
17
Elevation
18
Elevation
19
Elevation
20
Elevation
21
Elevation
22
Elevation
23
Elevation
24
State Colors
Colors optimized for UI states, enhancing feedback and interactivity.
success.main
rgb(92, 168, 67)
info.main
rgb(68, 157, 218)
warning.main
rgb(208, 132, 67)
error.main
rgb(244, 108, 109)
State Shadows
Dynamic shadows responding to UI states, enriching user interactions.
Elevation
1
Elevation
2
Elevation
3
Elevation
4
Elevation
5
Typography
Expertly curated fonts and styles ensuring readability and brand consistency.
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
caption text
overline text