Style Guide

An overview of all base components used in Instance.

Colors

Primaries and grays controlled by the Global Swatch feature.
Grey 1
#121212
Grey 2
#272727
Grey 3

#595959
Grey 4
#E0E0E0
Grey 5
#F4F4F4
White 1
#ffffff
White 2
rgba(255,255,255,.65)
White 3
rgba(255,255,255,.2)

Typography

Headings, body and other common text elements.
Display
highlighted

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Extra Large Text
Large Text    Large Link
Body Text    Body Link
Small Text    Small Link
Small Text    Small Link
Link

Buttons

Component, text style and size variations
Get Started Now
Small

icons - interface

Various icons used throughout the interface.

Icons - social

Icons for popular social media brands.

Icons - Decorative

Sourced from the Material Icons kit.

badges

Add these little buggers to more complex components to add extra information.
Badge Text
Badge Text

Form Inputs

General style and state variations for text inputs.
Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
Hint text for the input above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form Selectables

Styling for checkboxes, selects and radios.
Checkbox, Radio & Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
A group of absolute weirdos from all over the world that were brought together by destiny to create this awesome company!
© Copyright Cirqus OÜ