Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Our DifferenceAbout Us Contact Resource Library Support Basics Houston

The Basics Houston

Style Guide

Color Palette

Brand Colors Interface Colors

Typography

Typefaces & Hierarchy Ordered Lists Unordered Lists Links

Assets

Logos Icons Patterns

UI Components

Color Palette

Brand Colors

Orange
#f58022‍

Yellow
#fdb813

Green
#9db861

Teal
#00a0af

Lavendar
#a59bbd

Purple
#5a3f98

Interface Colors

Slate
#4d597c

Gray
#a6acbd

Off-White
#f9f9f9

White
#FFFFFF

Typography

Typefaces and Hierarchy

Aa

Catamaran

Aa

Gotham

Aa

Verveine

Style

Weight

Size / Height

Letter Spacing

Usage

Style

H1

Weight

Bold 700

Size / Height

45px / 55px

Letter Spacing

Auto

Usage

Page headers

Style

H2

Weight

Bold 700

Size / Height

32px / 42px

Letter Spacing

Auto

Usage

Page Sections

Style

H3

Weight

Medium 500

Size / Height

21px / 31px

Letter Spacing

Auto

Usage

Paragraph headers

Style

H4

Weight

Bold 700

Size / Height

14px / 20px

Letter Spacing

1px

Usage

Subheaders, buttons

Style

Paragraphs

Weight

Normal 400

Size / Height

16px / 26px

Letter Spacing

Auto

Usage

Paragraphs, lists, links

Style

Arrow Links

Weight

Normal 400

Size / Height

25px / 35px

Letter Spacing

Auto

Usage

Arrow links

H1

Bold 700

45px / 55px

Auto

Page Headers

H2

Bold 700

32px / 42px

Auto

Section Headers

H3

Medium 500

21px / 31px

Auto

Paragraph Headers

H4

Bold 700

14px / 20px

1PX

Subheaders
Buttons

Paragraphs

Normal 400

16px / 26px

Auto

Paragraphs
Lists
Links

Arrow Links

Normal 400

25px / 35px

Auto

Arrow Links

Ordered Lists

Ordered example
Ordered example
Ordered example

UnOrdered Lists

Unordered example
Unordered example
Unordered example

Links

Arrow Link Example

Text Link Example

Assets

Logos

Icons

Patterns

UI Components

Buttons

Stay Healthy

Tweets From the Houston Health Department