Style Guide

A comprehensive guide to colors, typography, and components to keep your design
consistent and cohesive.

Get Template
Back to home

Color Palette

Neutral [25]
#FAFBFD
Neutral [50]
#E1E4E9
Neutral [100]
#B3B3B3
Neutral [200]
#7A7A7A
Neutral [300]
#6D6D6D
Neutral [400]
#484848
Neutral [500]
#3A3A3A
Neutral [600]
#292929
Neutral [700]
#222222
Neutral [800]
#191919
Neutral [900]
#0A0A0A
Neutral [950]
#010101

Typography

Inter For Headings
Title / H1 Title

Flowscape’s typography ensures clarity and impact.

WEIGHT: MEDIUM / 500
LINE HEIGHT: 62 / 72
LETTER SPACING: -1.24px
Title / H2 Title

Flowscape’s typography ensures clarity and impact.

WEIGHT: MEDIUM / 500
LINE HEIGHT: 56 / 64
LETTER Spacing: -0.55px
Title / H3 Title

Flowscape’s typography ensures clarity and impact.

WEIGHT: MEDIUM / 500
LINE HEIGHT: 48 / 56
LETTER SPACING: -0.48px
Title / H4 Title

Flowscape’s typography ensures clarity and impact.

WEIGHT: MEDIUM / 500
LINE HEIGHT: 40 / 48
LETTER SPACING: -0.4px
Title / H5 Title
Flowscape’s typography ensures clarity and impact.
WEIGHT: MEDIUM / 500
LINE HEIGHT: 32 / 40
LETTER SPACING: -0.16px
Title / H6 Title
Flowscape’s typography ensures clarity and impact.
WEIGHT: MEDIUM / 500
LINE HEIGHT: 24 / 32
LETTER SPACING: 0px
Title / H7 Title
Flowscape’s typography ensures clarity and impact.
WEIGHT: MEDIUM / 500
LINE HEIGHT: 20 / 28
LETTER SPACING: 0px
Inter For Labels
Label / X-Large
This is some text inside of a div block.
WEIGHT: MEDIUM / 500
LINE HEIGHT: 24 / 32
LETTER SPACING: -0.36px
Label / Large
This is some text inside of a div block.
WEIGHT: MEDIUM / 500
LINE HEIGHT: 18 / 24
LETTER SPACING: -0.27px
Label / medium
This is some text inside of a div block.
WEIGHT: MEDIUM / 500
LINE HEIGHT: 16 / 24
LETTER SPACING: -0.17px
Label / Small
This is some text inside of a div block.
WEIGHT: MEDIUM / 500
LINE HEIGHT: 14 / 20
LETTER SPACING: -0.08px
Label / X-Small
This is some text inside of a div block.
WEIGHT: MEDIUM / 500
LINE HEIGHT: 12 / 16
LETTER SPACING: 0px
Inter For Paragraphs
paragraph / X-Large

Flowscape’s typography ensures clarity and impact.

WEIGHT: REGULAR / 400
LINE HEIGHT: 20 / 28
LETTER SPACING: -0.31px
paragraph / Large

Flowscape’s typography ensures clarity and impact.

WEIGHT: REGULAR / 400
LINE HEIGHT: 18 / 24
LETTER SPACING: -0.27px
paragraph / Medium

Flowscape’s typography ensures clarity and impact.

WEIGHT: REGULAR / 400
LINE HEIGHT: 16 / 24
LETTER SPACING: -0.18px
paragraph / Small

Flowscape’s typography ensures clarity and impact.

WEIGHT: REGULAR / 400
LINE HEIGHT: 14 / 20
LETTER SPACING: -0.08px
paragraph / X-Small

Flowscape’s typography ensures clarity and impact.

WEIGHT: REGULAR / 400
LINE HEIGHT: 12 / 16
LETTER SPACING: 0px
Roboto Mono For Subheadings
subheading / Large
This is some text inside of a div block.
WEIGHT: REGULAR / 400
LINE HEIGHT: 16 / 24
LETTER SPACING: 0px
subheading / Medium
This is some text inside of a div block.
WEIGHT: REGULAR / 400
LINE HEIGHT: 14 / 20
LETTER SPACING: 0px
subheading / Small
This is some text inside of a div block.
WEIGHT: REGULAR / 400
LINE HEIGHT: 12 / 16
LETTER SPACING: 0px
subheading / x-Small
This is some text inside of a div block.
WEIGHT: REGULAR / 400
LINE HEIGHT: 11 / 12
LETTER SPACING: 0px

Buttons

Button Primary
Get started
Get started
Get Demo
Button SECONDary
Get started
Get started
Get Demo
Button LINK
Get started
Get started
Get Demo

Input Fields

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Checkboxes & radio

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.