Colors

Typography

FONT STYLES


Aa
Matter Regular
Aa
Matter SemiBold

HEADING STYLES


Desktop

Mobile

Heading 1
70px/70px

Matter Regular

Heading 1
48px/48px

Matter Regular


Heading 2
50px/60px

Matter Regular

Heading 2
36px/43px

Matter Regular


Heading 3
36px/45px

Heading 3
28px/35px


Heading 4
30px/37px

Heading 4
24px/30px


Heading 5
20px/25px

Heading 5
20px/25px


Paragraph
16px/20px

Matter Regular

Paragraph
16px/20px

Matter Regular


Paragraph large
20px/24px

Matter Regular

Paragraph large
18px/20px

Matter Regular


Paragraph small
14px/18px

Matter Regular

Paragraph small
14px/17px

Matter Regular


Paragraph extra-small
11px/15px

Matter Regular

Paragraph extra-small
10px/14px

Matter Regular


Matter Regular

Matter Regular


TEXT COLOR COMBINATIONS


09 August 2022

Set 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scelerisque integer nisl bibendum habitant rhoncus odio.

Body Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation link inside copy ut aliquip ex ea commodo consequat.

09 August 2022

Set 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scelerisque integer nisl bibendum habitant rhoncus odio.

Body Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation link inside copy ut aliquip ex ea commodo consequat.

09 August 2022

Set 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scelerisque integer nisl bibendum habitant rhoncus odio.

Body Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation link inside copy ut aliquip ex ea commodo consequat.

09 August 2022

Set 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scelerisque integer nisl bibendum habitant rhoncus odio.

Body Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation link inside copy ut aliquip ex ea commodo consequat.

LISTS


Desktop - Unordered bullet lists

Body Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    This is two lines ipsum dolor sit amet.

Desktop - Ordered number lists

Body Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  2. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  3. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  4. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    This is two lines ipsum dolor sit amet.

Desktop - Ordered number lists (Panel background)

Body Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  2. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  3. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  4. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    This is two lines ipsum dolor sit amet.

Mobile - Unordered bullet lists

Body Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    This is two lines ipsum dolor sit amet.

Mobile - Ordered number lists

Body Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  2. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  3. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  4. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    This is two lines ipsum dolor sit amet.

Mobile - Ordered number lists (Panel background)

Body Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  2. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  3. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  4. Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    This is two lines ipsum dolor sit amet.

BLOCK QUOTES


Desktop - Citation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna urna, congue accumsan eros dui, pharetra.
N.E Pearson

Mobile - Citation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna urna, congue accumsan eros dui, pharetra.
N.E Pearson

Desktop - Citation (panel background)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna urna, congue accumsan eros dui, pharetra. N.E Pearson

Mobile - Citation (panel background)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna urna, congue accumsan eros dui, pharetra. N.E Pearson

Desktop - Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna urna, congue accumsan eros dui, pharetra.

Mobile - Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna urna, congue accumsan eros dui, pharetra.

Desktop - Quote (panel background)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna urna, congue accumsan eros dui, pharetra.

Mobile - Quote (panel background)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna urna, congue accumsan eros dui, pharetra.

HR (HORIZONTAL RULES)


Thin - 1px


Medium - 2px


Thick - 4px


Thin - 1px


Medium - 2px


Thick - 4px


Controls

PRIMARY BUTTONS


Big

Small

Idle
Hover
Pressed
Disabled
Icon right
Icon left

SECONDARY BUTTONS


Big

Small

Idle
Hover
Pressed
Disabled
Icon right
Icon left

TEXT BUTTONS


Big

Small

Idle
Hover
Pressed
Disabled
Icon right
Icon left

FAB


Idle
Hover
Pressed
Disabled

SET COLOR COMBINATIONS


Color set 1 – Set-1

Color set 2 – Set-2

Color set 3 – Set-3

Color set 4 – Set-4

SOCIAL BUTTONS


Idle
Hover
Pressed
Disabled

Stylistic Features

Shadow


Idle
Buttons
Fab
Cards
Hover

BORDER RADIUS


Buttons
Cards

Inputs

FORM FIELDS


Input fields
Idle
Hover
Input
Active
Disabled
Error
This field is required
Verify
Search fields
Idle
Hover
Active
Disabled
Open hover
Text fields
Text box Idle
Text box Hover
Text box Input
Text box Active
Text box Disabled
Text box Error
This field is required
Text box Verify
Dropdowns
Idle
Hover
Active
Disabled
Drag areas - files
Drag files area idle
Uploading...
Done.

Error: Please upgrade your browser to upload files.

Try again
Drag areas - images
Drag image area idle
Uploading...
Done.

Error: Please upgrade your browser to upload files.

Try again

SET COLOR VARIATIONS


Set 1 – Set 1
This field is required
Set 2 – Set 2
This field is required
Set 3 – Set 3
This field is required
Set 4 – Set 4
This field is required

CHECK BOXES


Checked
Unchecked
Idle
Hover
Disabled

QUANTITY COUNTER


Idle
Hover
Focus
Disabled

RADIO BUTTONS


Checked
Unchecked
Idle
Hover
Disabled

CALENDAR


Selected
January
2020
S M T W T F S

TOGGLES


On
Off
Idle
Hover
Disabled

SLIDERS


Idle
Hover
Pressed
Disabled
Disabled empty

Navigation

TEXT LINK: PARAGRAPH


Idle

Facilisi lorem Link facilisis arcu arcu et.

Facilisi lorem Link facilisis arcu arcu et.

Hover

Facilisi lorem Link facilisis arcu arcu et.

Facilisi lorem Link facilisis arcu arcu et.

PAGINATION: DOTS


Idle

Hover

Active

Example

PAGINATION: NUMBERS


Idle

Hover

Active

Example

TABS


Idle

Hover

Pressed

ARROW BUTTONS


Idle

Hover

Pressed

Disabled

PROGRESS INDICATOR


First

Middle

Last

Future
Current
Past / Seen
Example

BREADCRUMBS


First step idle

First step hover

Middle Step Idle

Middle Step hover

Final location

Example

Content

ACCORDIONS


Closed Idle

Text

Expanded text expanded text expanded text

Closed Hover

Text

Expanded text expanded text expanded text

Closed Pressed

Text

Expanded text expanded text expanded text

Open Idle

Text

Expanded text expanded text expanded text

Open Hover

Text

Expanded text expanded text expanded text

Open Pressed

Text

Expanded text expanded text expanded text

TOOLTIPS LARGE


Tip point

Down

This is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip:

Up

This is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip:

Left

This is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip:

Right

This is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip: this is a tooltip:

TOOLTIPS SMALL


Outlined

Filled

Down

Tooltip

Tooltip

Up

Tooltip

Tooltip

Left

Tooltip

Tooltip

Right

Tooltip

Tooltip

PLACEHOLDERS


Icon image placeholder

Image Placeholder

Picture placeholder

Image Placeholder

Avatar icon placeholder

Graph placeholders
Donut placeholder
Gallery Placeholder
Map Placeholder

LOADERS


0%

50%

100%

Circular large

Circular small

NOTIFICATIONS


Standard notification

Notification title

Notification text notification text notification text notification text notification text notification text notification text notification text notification text

Warning notification

Notification title

Notification text notification text notification text notification text notification text notification text notification text notification text notification text

Info notification

Notification title

Notification text notification text notification text notification text notification text notification text notification text notification text notification text

Success notification

Notification title

Notification text notification text notification text notification text notification text notification text notification text notification text notification text

VIDEO PLAYER


Timeline

Video bar

Video placeholder

Full video player

TABLES: FILL


Table column title fill

Column Title

Table row fill (odd)

Row color 1

Table row fill (even)

Row color 2

Column fill expandable

TABLES: OUTLINE


Table column title outline

Column Title

Table row outline

Row

Column outline expandable

Modules

TEXT BLOCK


Desktop-Left

Desktop-Right

Desktop-Center

HERO


Image right

Hero center image

Hero center

WYSIWYG Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button text

CTA


CTA Center

CTA Narrow

Ready to get started?

Sign up or contact us

CTA Form

Try it out for free

SOCIAL


Social Proof logos

Companies

Image Placeholder
Image Placeholder
Image Placeholder
Image Placeholder
Image Placeholder
Image Placeholder

FEATURE


Feature Split Left

Feature that is amazing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image Placeholder

Feature Split Right

Image Placeholder

Feature that is amazing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Feature List Left

Feature that is amazing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Image Placeholder

Feature List Right

Image Placeholder

Feature that is amazing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Body Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Feature Quote Left

Your Best Value Proposition

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna urna, congue accumsan eros dui, pharetra. N.E Pearson

Image Placeholder

Feature Quote Right

Image Placeholder

Your Best Value Proposition

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna urna, congue accumsan eros dui, pharetra. N.E Pearson

Cards


Label + Title

Label + Title + Buttons

Label + Title + Subtext

Label + Title + Subtext + Buttons

Copy

Risus, nec habitasse suspendisse a nec vulputate ut.

Risus, nec habitasse suspendisse a nec vulputate ut.

Copy + Media

Risus, nec habitasse suspendisse a nec vulputate ut.

Risus, nec habitasse suspendisse a nec vulputate ut.

Feature

Square

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Card Listing


Label + Title + Subtext + Buttons

Image Placeholder

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Label + Title + Subtext + Buttons

Image Placeholder

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Label + Title + Subtext + Buttons

Image Placeholder

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Label + Title + Subtext + Buttons

Image Placeholder

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Label + Title + Subtext + Buttons

Image Placeholder

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Label + Title + Subtext + Buttons

Image Placeholder

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Label + Title + Subtext + Buttons

Image Placeholder

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Label + Title + Subtext + Buttons

Image Placeholder

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Category

Card Title

Risus, nec habitasse suspendisse a nec vulputate ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Overlays / Modals


Opened State

Filters


Accordion


Accordion contracted — Desktop

Text

Expanded text expanded text expanded text

Text

Expanded text expanded text expanded text

Text

Expanded text expanded text expanded text

Accordion expanded — Desktop

Text

Expanded text expanded text expanded text

Text

Expanded text expanded text expanded text

Text

Expanded text expanded text expanded text

LOGIN


Tabs


Your Best Value Proposition

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image Placeholder

Your Best Value Proposition

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image Placeholder

Your Best Value Proposition

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Image Placeholder

Testimonial