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

Colors

The different weights of greys and colours used throughout the website.

Black
#101113
Dark Grey
#404143
Grey
#535d66
Light Grey
#a5afb8
Soft Grey
#c3cacf
Back Grey
#f3f5f9
Hard Green
#09630e
Dark Green
#159418
Green
#3ac63f
Light Green
#6ddb6e
Soft Green
#9de79e
Back Green
#e4fce4
Hard Lime
#87c700
Lime
#c4f34d
Soft Lime
#dcf78f

Buttons

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

Primary
Sign Up
Secondary
Learn more

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.