Style Guide

Action
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Primary
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Secondary
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Accent
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Base
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
Shade
ultra-light
light
medium
dark
ultra-dark
trans-10
trans-20
trans-40
trans-60
trans-80
trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90
light-trans-10
light-trans-20
light-trans-40
light-trans-60
light-trans-80
light-trans-90

Typography

Headline (h1)

Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.

Headline (h2)

Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.

Headline (h3)

Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.

Headline (h4)

Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
Headline (h5)
Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
Headline (h6)
Non rerum dolor in distinctio praesentium ut dolore dignissimos. Est quia autem quo similique laboriosam quo molestias consequuntur in dicta consequatur et consequatur labore sed ducimus quia. Ex distinctio quasi officia quidem eos earum cumque quo dolorem repudiandae in enim sequi a consequuntur enim. Ad quia sequi hic ipsa voluptatem sed ratione atque 33 quia expedita sit amet voluptatum et quasi ipsum.
text--xxl
text--xxl
text--m
text
text--s
text--xs

    Card Heading

    This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.
    button

    Card Heading

    This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.
    button

    Card Heading

    This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.
    button
    chevron-down linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram