Design System

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo.

Typography

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

h1

Emerald is a gemstone.

h2

Emerald is a gemstone.

h3

Emerald is a gemstone.

h4

Emerald is a gemstone.

h5
Emerald is a gemstonE.
Paragraph

Emerald is a gemstone and a variety of the mineralberyl colored green by trace amounts of chromium and sometimes vanadium.

Beryl has a hardness of 7.5–8 on the Mohs scale. Most emeralds are highly included, so their toughness is classified as generally poor.

Small Paragraph

Emerald is a gemstone and a variety of the mineralberyl colored green by trace amounts of chromium and sometimes vanadium. Beryl has a hardness of 7.5–8 on the Mohs scale. Most emeralds are highly included, so their toughness is classified as generally poor.

Quote
Emerald is a gemstone and a variety of the mineralberyl colored green by trace amounts of chromium and sometimes vanadium.
List
  • Toughness is classified as generally poor
  • A variety of the mineralberyl
  • Colored green by trace amounts of chromium
Rich Text

Emerald is a gemstone.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Here is another title example.

  • Lorem ipsum
  • Lorem ipsum

More about emeralds

Buttons

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

Primary
Sign Up
Secondary
Learn more
disabled
Get in touch
Primary default
Sign Up
Secondary default
Learn more
Outline default
Get in touch
disabled default
Get in touch
Primary LARGE
Sign Up
Secondary LARGE
Learn more
Outline LARGE
Get in touch
disabled
Get in touch

Grid

The 12 column grid system to make it easy to align sections across different screen sizes.

1 Col
2 Col
3 Col
4 Col
5 Col
6 Col
7 Col
8 Col
9 Col
10 Col
11 Col
12 Col

Spacers

Spacer elements using the 8-pt grid to give sections more room to breathe.

16 px
24 px
32 px
48 PX
64 PX
80 PX
96 PX
128 PX

Icons

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

55px
Sitemap Icon

Forms

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

Cancel
Thank you! Your message has been received!
Oops! Something went wrong. Please fill in the required fields and try again.

Tabs

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

© 2020 Nikolai Bain. Powered with Webflow.