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

Optimer keeps you focused.

h2

Optimer keeps you focused.

h3

Optimer keeps you focused.

h4

Optimer keeps you focused.

h5
Optimer keeps you focused.
h6
Optimer keeps you focused.
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.

Bold

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

Italics

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

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
Numbered List
  • Toughness is classified as generally poor
  • A variety of the mineralberyl
  • Colored green by trace amounts of chromium
Rich Text

Optimer keeps you focused.

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 Optimer

An example of an image with caption

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
Soft Grey
#c3cacf
Hard Blue
#0736b2
Dark Blue
#0b42d5
Blue
#245fff
Light Blue
#4c7cff
Soft Blue
#6b9fff
Pale Blue
#b2cdff

Buttons

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

Primary
Sign Up
Secondary
Learn more
Outline
Get in touch
Grey
Cancel
Disabled
Not Available

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

Forms

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

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

Form Success and Error

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

Success! Check your email.
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.