Typography

All the typography style elements used throughout your website.

Heading

This is the standard heading. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Heading
Is Display
Is Rework

This is the heading display. Lorem ipsum dolor sit.

Heading
Style H1

This is the heading style H1

Heading
Style H2

This is the heading style H2

Heading
Style H3

This is the heading style H3

Heading
Style H4

This is the heading style H4

Heading
Style H5

This is the heading style H5

Heading
Style H6

This is the heading style H6

Large Text

This is large text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Big Text

This is big text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Big Text
Is Bold

This is big text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Body Text

This is body text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Body Text
Is Bold

This is body text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Small Text

This is small text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Small Text
Is Bold

This is small text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Tiny Text

This is tiny text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Tiny Text
Is Bold

This is tiny text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu

Some Text Class
Is Muted

Apply this global class to all text elements that should be faded

Some Text Class
Muted 80

Apply this global class to all text elements that should be faded

Number

500+

font-rework-bold

I am using Rework Bold

Refer to Typography System to know the usage rule
Go Arrow

Colors

All the color swatches variations used throughout your website.

Spacing

All the spacing & gap variations used throughout your website.

4px
8px
16px
24px
32px
48px
64px
80px

Buttons

All the button variations used throughout your website.

Button
Button text here
Button
Has Outline
Button text here
Button
Has Dark Outline
Button text here
Button text here
Button
Hover Outline
Button text here
Text Link
Text Link
Icon Link
LEARN MORE
Icon Link
Is Category

Leadership

Slider Button
Slider Arrow

Labels

All the eyebrow variations used throughout your website.

Label
From the field
Flex
Madrid, Spain

Icons

All the icon variations used throughout your website.

Dashboard Icons

More icons

Website Icons

Structure

Defined and flexible core structure we can use on all pages.

Container - 12 columns
Container - 10 columns
Container - 8 columns
Container - 6 columns
Container
Container
Container
Container
Grid
Grid
Has Three Columns
Grid
Has Four Columns
Flex
Flex
Is Centered
Flex
Has Wrap
Buttons Group
Side by Side Images

HTML Tags

HTML tags define default text styles.

H1

This is the heading style H1.

H2

This is the heading style H2.

H3

This is the heading style H3.

H4

This is the heading style H4.

H5
This is the heading style H5.
H6
This is the heading style H6.
P

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, unc ut sem vitae risus tristique posuere.

Block quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Link
Link
All Unordered Lists

  • This is a list item

  • This is a list item

  • This is a list item

    • This is a sub-list item

    • This is a sub-list item

    • This is a sub-list item

All Ordered Lists

  1. This is a list item

  2. This is a list item

  3. This is a list item

    • This is a sub-list item

    • This is a sub-list item

    • This is a sub-list item