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

16 September 2024

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.

16 September 2024

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.

16 September 2024

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.

16 September 2024

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 Idle
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.

TEXT LINK: FOOTER

Idle

Link

Link

Hover

Link

Link

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

Breadcrumb

First step hover

Breadcrumb

Middle Step Idle

Breadcrumb

Middle Step hover

Breadcrumb

Final location

Breadcrumb

Example

Breadcrumb Breadcrumb Breadcrumb

SOCIAL

Facebook

Twitter

LinkedIn

RSS

Mail

Idle

Facebook
Twitter
LinkedIn
RSS
Email

Hover

Facebook
Twitter
LinkedIn
RSS
Email

Clicked

Facebook
Twitter
LinkedIn
RSS
Email

Desktop

Mobile

Collapsible default

Share

Collapsible open

Share

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

TOP NAV

Logo Left

Logo Middle

Logo Right

TOP NAV MINIMAL

Logo Left

Logo Middle

Logo Right

FOOTER

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

Sign up
Contact us

CTA Form

Try it out for free

Submit

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

Image Placeholder

Category

Card Title

Nec ullamcorper sit amet risus nullam eget felis. Amet risus nullam eget felis. Amet nulla facilisi morbi tempus iaculis.

Button Button

Square

Image Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Button text

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.

Image Placeholder

Category

Card Title

Nec ullamcorper sit amet risus nullam eget felis. Amet risus nullam eget felis. Amet nulla facilisi morbi tempus iaculis.

Button Button
Image Placeholder

Category

Card Title

Nec ullamcorper sit amet risus nullam eget felis. Amet risus nullam eget felis. Amet nulla facilisi morbi tempus iaculis.

Button Button
Image Placeholder

Category

Card Title

Nec ullamcorper sit amet risus nullam eget felis. Amet risus nullam eget felis. Amet nulla facilisi morbi tempus iaculis.

Button Button
Image Placeholder

Category

Card Title

Nec ullamcorper sit amet risus nullam eget felis. Amet risus nullam eget felis. Amet nulla facilisi morbi tempus iaculis.

Button Button

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.

Image Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Button text
Image Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Button text
Image Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Button text
Image Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Button text
Image Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Button text
Image Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Button text

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