Style Guide

Wordmark, brand colors, neutrals, spectrum, type and buttons.

Brands we work with
KCNAll Things PeopleJM GroupAl-AmmaryElite EngineeringGardeniaVerdaflowAutomatic3S Fintech
KCNAll Things PeopleJM GroupAl-AmmaryElite EngineeringGardeniaVerdaflowAutomatic3S Fintech
Wordmark
Words & Colors
Black on light
Words & Colors
White on dark
Favicon
Words & Colors favicon
Favicon
Words & Colors favicon at tab size
Tab size
Brand
Brand 700
#1c26e6
Brand 800
#1a24b9
Brand 400
#6a8cff
Brand 100
#dae9ff
Brand 50
#ebf2ff
Neutrals
Black
#000000
Gray 950
#262626
Gray 900
#3d3d3d
Gray 700
#4f4f4f
Gray 500
#6d6d6d
Gray 400
#888888
Gray 200
#d1d1d1
Gray 100
#e7e7e7
Gray 50
#f6f6f6
White
#ffffff
Spectrum
Indigo
#4338ca
Cyan
#06b6d4
Green
#22c55e
Yellow
#ffd400
Pink
#fb7185
Purple
#8b5cf6
Main gradient
Typography

Heading 1

Font

Poppins

Weight

Semi Bold

Size

64px

Heading 2

Font

Poppins

Weight

Medium

Size

44px

Heading 3

Font

Poppins

Weight

Medium

Size

32px

Heading 4

Font

Poppins

Weight

Semi Bold

Size

24px
Heading 5

Font

Poppins

Weight

Semi Bold

Size

20px
Heading 6

Font

Poppins

Weight

Medium

Size

18px
Body

Font

Poppins

Weight

Medium

Size

16px
Do's
Words & Colors
Black wordmark on light
Words & Colors
White wordmark on dark

Heading

Poppins · Gray 950
Get In Touch
Black CTA, white type, arrow
Main gradient
Get In Touch
Brand 700 CTA
Don'ts
Get In Touch
Don’t make the CTA lime

Heading

Don’t track headings this wide
Words & Colors
Don’t drop-shadow the lockup