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

#ea2012

Greenery

#018a3c

Ultra Violet

#894AE0

Rose Quartz

#da3c42

Radiant Orchid

#d427af

Tangerine Tango

#cf4c10

Emerald

#02876f

Honey Gold

#967210

Monaco Blue

#0C74E4

Dark Violet

#B741FB

Royal Blue

#4656E8

Dark Blue

#140085ff

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

Shadows

Depth-enhancing shadows, perfect for element distinction and focus.

Card default elevation

The theme configures all cards with a default elevation=8. The shadow value for this elevation varies depending on the selected layout shell.

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

#248a01

info.main

#037bcd

warning.main

#c05a01

error.main

#F1393B

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