Styles & Things

You're a curious one! Here's a page I build for all my sites to have design decisions and styles documented.

You're a curious one! Here's a page I build for all my sites to have design decisions and styles documented.

Color

Solids

Neutral

50

Brand

50

Neutral

100

Brand

100

Neutral

200

Brand

200

Neutral

300

Brand

300

Neutral

400

Brand

400

Primary

Neutral

500

Brand

500

Neutral

600

Brand

600

Neutral

700

Brand

700

Neutral

800

Brand

800

Neutral

900

Brand

900

Neutral

950

Brand

Accent

Transparency & Overlays

Light αlpha

Light

Subdued

Light

Subtle

Light

Strong

Dark αlpha

Dark

Subtle

Dark

Subdued

Dark

Strong

Text Colors

Aa

Text

Subdued

Aa

Text

Subtle

Aa

Text

Strong

Typography

Font

Figtree

Headings

Heading

H1.huge

Hello world!

Heading

H1

Hello world!

Heading

H2

Hello world!

Heading

H3

Hello world!

Heading

H4

Hello world!

Heading

H5

Hello world!

Heading

H6

Hello world!

Body & Text

Body features taller line-heights for improved legibility in paragraphs. Text features shorter line-heights for improved spacing on UI elements.

Text

Large

Sphinx of black quartz, judge my vow.

Body

Large

Sphinx of black quartz, judge my vow.

Text

Medium

Sphinx of black quartz, judge my vow.

Body

Medium

Sphinx of black quartz, judge my vow.

Text

Small

Sphinx of black quartz, judge my vow.

Body

Small

Sphinx of black quartz, judge my vow.

Text

Small

Sphinx of black quartz, judge my vow.

Components

Tags

Extra Small

Extra Small

Extra Small

Extra Small

Small

Small

Small

Small

Medium

Medium

Medium

Medium

Large

Large

Large

Large

Logos