Style Guide

Typography

Headings

Heading / H1

This Is an H1 Piece of Text

Heading / H2

This Is an H2 Piece of Text

Heading / H3

This Is an H3 Piece of Text

Heading / H4

This Is an H4 Piece of Text

Heading / H5

This Is an H5 Piece of Text

Heading / H6

This Is an H6 Piece of Text

Text / Paragraphs

Font Size / XL / Regular

I'm baby glossier truffaut solarpunk bushwick ascot. Butcher quinoa echo park, knausgaard helvetica tonx subway tile poutine hashtag art party brunch fam pinterest.

Font Size / XL / Semibold

I'm baby glossier truffaut solarpunk bushwick ascot. Butcher quinoa echo park, knausgaard helvetica tonx subway tile poutine hashtag art party brunch fam pinterest.

Font Size / L / Regular

I'm baby glossier truffaut solarpunk bushwick ascot. Butcher quinoa echo park, knausgaard helvetica tonx subway tile poutine hashtag art party brunch fam pinterest.

Font Size / L / Semibold

I'm baby glossier truffaut solarpunk bushwick ascot. Butcher quinoa echo park, knausgaard helvetica tonx subway tile poutine hashtag art party brunch fam pinterest.

Font Size / M / Regular

I'm baby glossier truffaut solarpunk bushwick ascot. Butcher quinoa echo park, knausgaard helvetica tonx subway tile poutine hashtag art party brunch fam pinterest.

Font Size / M / Semibiold

I'm baby glossier truffaut solarpunk bushwick ascot. Butcher quinoa echo park, knausgaard helvetica tonx subway tile poutine hashtag art party brunch fam pinterest.

Font Size / S / Regular

I'm baby glossier truffaut solarpunk bushwick ascot. Butcher quinoa echo park, knausgaard helvetica tonx subway tile poutine hashtag art party brunch fam pinterest.

Font Size / S / Semibold

I'm baby glossier truffaut solarpunk bushwick ascot. Butcher quinoa echo park, knausgaard helvetica tonx subway tile poutine hashtag art party brunch fam pinterest.

Font Size / XS / Regular

I'm baby glossier truffaut solarpunk bushwick ascot. Butcher quinoa echo park, knausgaard helvetica tonx subway tile poutine hashtag art party brunch fam pinterest.

Font Size / XS / Semibold

I'm baby glossier truffaut solarpunk bushwick ascot. Butcher quinoa echo park, knausgaard helvetica tonx subway tile poutine hashtag art party brunch fam pinterest.

Button / Bold

Button

Button / Medium

Button

Label

Label

Text / Text Links

Text Link / Default

Text Link

Text Link / Hover

Text Link

Text Link

Text Link / Current

Text Link

Colors

Brand

Olive

Goldenrod

Gradient

Neutrals

White

Cream

Grey

Dark

Opacity Values

White 50%

Dark 20%

Dark 65%

Spacing & Sizing

Spacing Scale

  • 1px

  • 2px

  • 4px

  • 8px

  • 12px

  • 16px

  • 24px

  • 32px

  • 48px

  • 64px

  • 80px

  • 96px

  • 120px

  • 160px

Horizontal Padding (Left & Right)

Desktop - 80px

Tablet - 40px

Phone - 20px

Desktop

80px left & right

Tablet

40px left & right

Phone

20px left & right

Vertical Padding (Top & Bottom)

XL - 160px

L - 120px

M - 80px

S - 64px

XS - 40px

XL

160px top & bottom

L

120px top & bottom

M

80px top & bottom

S

64px top & bottom

XS

40px top & bottom

UI Elements

Buttons

Primary

Let’s talk

Tone

Let’s talk

Outline

Let’s talk

Icons

Phosphor icons

S - 24x24

Default - 32x32

M - 40x40

L - 64x64