Colors

Main

Primary
Primary light
Primary dark
Secondary
Secondary light
Secondary dark

Functional

Info
Success
Warning
Danger
Black
White
Dark
Light

Shades

Black bis
Black ter
Grey darker
Grey dark
Grey
Grey light
Grey lighter
White ter
White bis

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Rich text

This is a default paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus eget tellus nec fermentum. Cras suscipit tempor nulla, non consectetur turpis tempor eget. Etiam sollicitudin finibus nulla, vitae tincidunt nibh aliquam vel. Nullam ut egestas risus. Suspendisse volutpat tellus ullamcorper ligula lacinia finibus. Proin lacinia leo at libero tempus porta.

This is a justified paragraph. Pellentesque ut suscipit tortor. Fusce vestibulum dapibus tristique. Pellentesque nec magna rutrum, laoreet dui ac, pharetra est. Aliquam erat volutpat. Vivamus viverra lorem at risus fermentum, ac convallis arcu venenatis. Donec vestibulum, lorem non mattis scelerisque, nisi magna euismod est, a porttitor dolor dolor in lacus.

This is left aligned text.

This is center aligned text.

This is right aligned text.

This is a link.

This is a bold text.

This is an italic text.

This is an underlined text.

  1. Item 1
  2. Item 2
  3. Item 3
  • Item A
  • Item B
  • Item C

Buttons

Types

States


Forms

Options and examples

This username is available

This email is invalid

Checkbox input
Radio input
Switch input

Contact form example with form validation

Slider example