Style Guide

A guide to the styles and components used in Flock.

Colors

Primaries and grays controlled by the Global Swatch feature.
Primary
#76e691
Pastel 1
#76e691
Pastel 2
#f3e7ff
Pastel 3
#e1c3ff
Pastel 4
#fcd302
Dark
#0f0f0f
Dark 2
#0f0f0f
White
Light Background
#FAFDFA
Grey (default)
#F3F2EE
Light Border
#e5e7eb
Light Border
#e5e7eb

Typography

Headings, body and other common text elements.
Display

Heading One

Heading Two

Heading Three

Heading Four

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

Buttons

Component, text style and size variations
Small
Small
Button
Button
Outline
Outline
Icon Button
Icon Button
Large Button
Large Button

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
This is some text inside of a div block.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form Selectables

Styling for checkboxes, selects and radios.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Vi bruker informasjonskapsler (cookies) på våre nettsider