Home
Work
About
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
Form Label
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
I have read and agree to the
Terms & Conditions
Radio Option
Choose option
First Choice
Second Choice
Third Choice
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
