TiQ Webflow Style Guide

Colors

Primary color

Primary 1

#563AFF

Secondary colors

Bright Purple

Color 1

#7D42FB

Dark Purple

Color 2

#FF4267

Color 3

#2FF2B8

Color 4

#FFCD42

Neutral colors

900

Neutral 900

#342C37

700

Neutral 700

#4A4566

500

Neutral 500

#ADA1B3

300

Neutral 300

#D6D0D9

100

Neutral 100

#F9F7FA

000

White

#FFFFFF

System colors

500

Green 500

#1ABC9C

200

Green 200

#00E5B8

400

Red 600

#B43944

300

Red 300

#DF7C85

200

Tan 200

#F4DCBB

100

Tan 100

#FEF5E0

Typography

Display headings

Display 1

Nunito Light

96px / 1.2em

We make growing a therapy practice go from impossible to inevitable.

Display 2

Nunito 64px Extrabold

64px / 1.2em

We make growing a therapy practice go from impossible to inevitable.

Display 3

Nunito 48px Light

48px / 1.2em

We make growing a therapy practice go from impossible to inevitable.

Regular Headings

Heading H1

Nunito 48px Semibold

48px / 1.2em

We make growing a therapy practice go from impossible to inevitable.

Heading H2

Nunito 36px Semibold

36px / 1.2em

We make growing a therapy practice go from impossible to inevitable.

Heading H3

Nunito 24px Semibold

24px / 1.2em

We make growing a therapy practice go from impossible to inevitable.

Body

Body Large

Nunito 24px Normal

24px / 1.4em

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 cursu.

Body Default

Nunito 18px Normal

18px / 1.4em

Body Small

Nunito 14px Normal

14px / 1.4em

Text single

400

Clarity City Regular

Clarity City Medium

Clarity City Bold

24px / 1.083em

Lorem ipsum dolor sit amet consectetur

300

Clarity City Regular

Clarity City Medium

Clarity City Bold

20px / 1.1em

Lorem ipsum dolor sit amet consectetur

200

Clarity City Regular

Clarity City Medium

Clarity City Bold

18px / 1.111em

Lorem ipsum dolor sit amet consectetur

100

Clarity City Regular

Clarity City Medium

Clarity City Bold

16px / 1.125em

Lorem ipsum dolor sit amet consectetur

Rich Text

Text Bold

Nunito

Lorem ipsum dolor sit amet consectetur

Text Link

Nunito

Lorem ipsum dolor sit amet consectetur

Bullet List

Nunito

Lorem ipsum dolor sit amet consectetur
Posuere enim mi pharetra neque proin dic
Mauris aliquet faucibus iaculis dui vitae ullamco

Numbered List

Nunito

Lorem ipsum dolor sit amet consectetur
Posuere enim mi pharetra neque proin dic
Mauris aliquet faucibus iaculis dui vitae ullamco

Blockquote

Nunito

28px / 1.571em

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Image & Caption

Text Uppercase

Nunito

Lorem ipsum dolor sit amet consectetur

Text Strikethrough

Nunito

Lorem ipsum dolor sit amet consectetur

Text Underline

Nunito

Lorem ipsum dolor sit amet consectetur

Shadows

General shadows

Shadow 01

Shadow 02

Shadow 03

Button shadows

Button color 01

Button color 02

Button color 03

Button white 01

Button white 02

Button white 03

Buttons

Primary buttons

Small

Button Small

Default

Button Default

Default

Button Default

Small

Button Small

Default

Button Default

Default

Button Default

Secondary buttons

Small

Button Small

Default

Button Default

Default

Button Default

Small

Button Small

Default

Button Default

Default

Button Default

Primary circle buttons



Secondary circle buttons



Download Apps buttons

Links

Badges

Primary badges

Small

Badge Small

Default

Badge Default

Small

Badge Small

Default

Badge Default

Small

Badge Small

Default

Badge Default

Secondary badges

Small

Badge Small

Default

Badge Default

Small

Badge Small

Default

Badge Default

Small

Badge Small

Default

Badge Default