Style Guide
1
Intro
2
Colour
3
Typography
4
Interface
5
Layout
6
Animations
Logo
Logo
Colour
color palette
Text
#000000
Purple
#6544FD
Light Purple
#F6EFFF
Turquoise
#D8F6F5
Light Turquoise
#F2F7F6
White
#FFFFFF
Orange
#FF4D00
Peach
#FFD0BC
Light Peach
##fff1eb
Aa
Aa
Aa
Aa
Aa
Aa
Text color
Typography
Typeface(s)
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Primary
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Secondary
Weights
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Display
Headings

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Pellentesque congue luctus egestas sed dictum ultricies erat

Huge

Pellentesque congue luctus egestas sed dictum ultricies

xl

Lorem ipsum dolor sit amet con sectetur adipiscing elit suspe disse varius enim in eros elementum.

lg

Lorem ipsum dolor sit amet con sectetur adipiscing elit suspe disse varius enim in eros elementum.

Main

Lorem ipsum dolor sit amet con sectetur adipiscing elit suspe disse varius enim in eros elementum.

sm

Lorem ipsum dolor sit amet con sectetur adipiscing elit suspe disse varius enim in eros elementum.

xsm

Lorem ipsum dolor sit amet con sectetur adipiscing elit suspe disse varius enim in eros elementum.

tiny

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Richtext
Labels

Label Text

Huge

Label Text

xl

Label Text

lg

Label Text

md

Label Text

sm

Label Text

xsm

Label Text

tiny

Label Text

uppercase
Interface
Links
THEMES
data-theme="Light"
Light Theme

Heading

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 diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text
data-theme="Dark"
Dark Theme

Heading

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 diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text
Links
Read More
Buttons
Primary
Button Text
Button Text
Pills
Pill
Pill
Pill
labeled icon

Insert Label

Insert Label

Insert Label

Icon Buttons
Visual Shells
Brightness 4 Streamline Icon: https://streamlinehq.com
Brightness 4 Streamline Icon: https://streamlinehq.com
Brightness 4 Streamline Icon: https://streamlinehq.com
Brightness 4 Streamline Icon: https://streamlinehq.com
Brightness 4 Streamline Icon: https://streamlinehq.com
Brightness 4 Streamline Icon: https://streamlinehq.com
Brightness 4 Streamline Icon: https://streamlinehq.com
Brightness 4 Streamline Icon: https://streamlinehq.com
Form Elements
form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Submit Buttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Tags
Tag
Tag
Tag
Tag
Tag
Tag
Tag
Tag
Tag
Layout
Containers
page-wrapper
main-wrapper
padding-global
container-xxsmall
container-xsmall
container-medium
container-large
container-xlarge
container-xxlarge
padding-section-small
padding-section-medium
padding-section-large
button-group
page structure
Section Spacing
section spacing
max widht
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-16
PADDING SIZES
padding-0
padding-0.125
padding-0.25
padding-0.5
padding-0.75
padding-1
padding-1.5
padding-2
padding-2.5
padding-3
padding-4
padding-5
padding-6
padding-10
MARGINS SIZES
margin-0
margin-0.125
margin-0.25
margin-0.5
margin-0.75
margin-1
margin-1.5
margin-2
margin-2.5
margin-3
margin-4
margin-5
margin-6
margin-10
spacers
spacer-micro
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
Animations
Containers
sliding animations
Up
0.1 sec
Up
0.2 sec
Up
0.3 sec
Up
0.4 sec
Down
0.1 sec
Down
0.2 sec
Down
0.3 sec
Down
0.4 sec
Left
0.1 sec
Left
0.2 sec
Left
0.3 sec
Left
0.4 sec
Right
0.1 sec
Right
0.2 sec
Right
0.3 sec
Right
0.4 sec
Scale In
0.1 sec
Scale In
0.2 sec
Scale In
0.3 sec
Scale In
0.4 sec
burger menus