Title

Title

Class: Title
Font-size: 80px
Line-height: 1.3 EM

Script Title

Class: Title
Combo Class: Script Title
Font-size: 80px
Line-height: 1.3 EM

Heading 1

Heading 1

Class: All H1 Headings
Font-size: 38px
Line-height: 1.3 EM

Heading 2

Heading 2

Class: All H2 Headings
Font-size: 32px
Line-height: 1.3 EM

Heading 3

Heading 3

Class: All H3 Headings
Font-size: 24px
Line-height: 1.6 EM

Heading 4

Heading 4

Class: All H4 Headings
Font-size: 18px
Line-height: 1.6 EM
Heading 5
Heading 5
Class: All H5 Headings
Font-size: 14px
Line-height: 1.6 EM
Heading 6
Heading 6
Class: All H6 Headings
Font-size: 12px
Line-height: 1.6 EM

This is a paragraph element. We have some placeholder text here to show what a paragraph looks like.

Class: All Paragraphs
Font-size: 16px
Line-height: 1.6 EM
This is a tex tlink
Class: text-link
Font-size: 16px
Line-height: 1.6 EM
leearn
more
Class: button
Font-size: 14px
Line-height: 1.6 EM
Padding top and bottom: 20px
Padding left and right: 40px
Letter spacing: .3px
Learn
More
Class: outline button white
Combo class: purple button
Font-size: 11px
Line-height: 1.6 EM
Background: Transparent
Border: 2px, solid
Border color: #4738ec
Padding top and bottom:
20px
Padding left and right: 40px
Letter spacing: .3px

Colors

Class: primary-color
Color: #5350ff
Class: secondary-color
Color: #e8f5fd
Class: dark-color
Color: #0e0e0e

Components

Components include things like your navbar, forms and your footer. These are made out of symbol elements because when you update it one place, it updates it across the site for consistency and easy maintenance.

Navbar

The Navbar symbol below can be placed on any page. If you update it in one instance (like below), it will update across the entire website.

It's common to have multiple different navbars. It's also common to move sub-elements outside of the container and removing the container from navbars. If you do this, make sure to add padding on the left and right hand side of the navbar.

Navbars are typically not inside of a container, they usually site inside of a section or above sections. Add the fixed class to it to make the navbar in the fixed position (this will place it at the top of the page and the navbar will stay on the page while you're scrolling).

Class: navbar
Width: 100%
Container max-width: 1200px
Padding top and bottom: 0px
Padding left and right: 0px

Icon from flaticon ➞

Forms

Forms are a critical component on any website, they help your customers and audience to contact your team. It's important to retain form field labels to make your forms accessible.

Input field font size: 16px (16px+ prevents zooming on mobile devices)
Width: 100%

Contact form

Place this anywhere on the website that you'd like your customers to be able to contact you. A common area to place these is inside of footers or in content sections after you've had some sort of call to action.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Sign-up form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Tabs

You can use the tabs element to share tabulated content. These elements are helpful for when you have a lot of content to share with similar hierarchy.

To use the tabs element copy the symbol and paste it. Or use the CMD + K or CTRL + K keyboard shortcut to add in a Tabs symbol.

Once a Tabs symbol is added to your site, press CMD + SHIFT + A to disconnect it from the symbol parent. On Windows, press CTRL + SHIFT + A.

You can add more tabs by selecting a tab, and using the Copy and Paste function via right click or by pressing CMD + C and CMD + V on Mac, or CTRL + C and CTRL + V on Windows.

To navigate to a different tab, press "D" on your keyboard to open settings on the right hand side. Within there, you can select a tab pane and then add content to that tab pane.

This is a heading inside of a tab

This is the content inside of the first tab, you can place anything inside of a tab

This is the content inside of your second tab, you can place anything inside of a tab

This is the content inside of your third tab, you can place anything inside of a tab

This is the content inside of your third tab, you can place anything inside of a tab

Cards

Use these when you have multiple sets of content to display with images.

Card one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Footer

Class: Footer
Width: 100%
Container max-width: 1200px

Icon from flaticon ➞

Extra styles

Here we are defining extra styles like the max-width of our container element, our padding for each breakpoint, and the border radius which we're utilizing.

Keeping these styles consistent in your design is an easy way to keep your site looking professional and responsive across break points. As you define the styles on each breakpoint, update the values below.

Containers on desktop

Class: container
Max-width: 1200px
Padding top and bottom: 140px
Padding left and right: 40px

Containers on tablet

Class: container
Max-width: 100%
Padding top and bottom: 140px
Padding left and right: 40px

Containers on mobile landscape and portrait

Class: container
Max-width: 100%
Padding top and bottom: 60px
Padding left and right: 20px

Border radius used on elements

Border radius: 4px

Surfaces

Surfaces are used to emulate real-world depth at various levels of elevation where a light source is casting a shadow from the surface onto the layer below it. The higher the elevation value, the more diffused the shadow becomes and we have 8 levels to choose from.

surface-L1

surface-L2

surface-L3

surface-L4

surface-L5

surfaceL-6

surface-L7

surface-L8

List

Unordered and ordered lists

#444444

Iconography

A starter set of SVG icons in 16 and 24px sizes.

16px

24px

Images

Starting with four image aspect ratios of landscape, portrait, square and avatar. These images have been placed inside parent DIVs that keep their aspect ratios when the page is resized. There's also a banner version that uses a background image that's been set to "Cover".

Landscape banner

image-landscape-banner with a background image set to "Cover" in 100% wrapper

Landscape

Image Landscape

image-landscape in 100% wrapper

Portrait

Image Portrait

image-portrait in css grid column 1

Square

Image Square

image-square in css grid column 2

Avatar

Image Avatar

image-avatar in 40px wrapper