Grid

1
2
AUTO

Text Colors

Default - Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Light-Blue / Hover - Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Blue-Dark / Active - Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Grey / Disabled - Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Hint / Help - Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Success / Valid - Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Warning - Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Danger / Valid - Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Shadow Text & Button

Title

Paragraph

List

  • List Item 1
  • List Item 2
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae veniam debitis blanditiis nisi, voluptatem non praesentium corporis accusantium nihil, magnam quisquam! Consequuntur corrupti fuga dolorem. Laudantium deserunt voluptatibus inventore.
  • List Item 1
  • List Item 2
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, nemo vero. Ex amet beatae veniam veritatis vitae, labore saepe sed earum. Omnis repellendus, voluptates doloremque necessitatibus alias mollitia accusamus commodi!
  1. List Item 1
  2. List Item 2
  3. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fuga, quod nobis id neque sit dolor debitis explicabo quisquam cum iure, quia temporibus velit? Ipsa aut aliquam tempore repudiandae vero.
  • List Item 1
  • List Item 2
  • Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fuga, quod nobis id neque sit dolor debitis explicabo quisquam cum iure, quia temporibus velit? Ipsa aut aliquam tempore repudiandae vero.
  • List Item 1
  • List Item 2
  • Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima fuga, quod nobis id neque sit dolor debitis explicabo quisquam cum iure, quia temporibus velit? Ipsa aut aliquam tempore repudiandae vero.

Border & Radius

Blue / None
Normal / Small
Hover / Normal
Active / Large
Valid / Rounded
Invalid / Rounded
Warning / Rounded
Disabled / Rounded

Typography

Display

Display-2

Display

Display-2

Title 1

Title 2

Title 3

Title 4

Title 5

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5

lead-text

block-text

normal

small-text

x-small-text

bold

Link

Table

ID Name
1 Tony Stark

Form

This username is available

This username is available

This username is available

This username is available

This username is available

This username is available

Button

Colors

Modifiers

Colors

1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6