HubSpot Design System Reference

Enterprise CRM Platform

HubSpot Design System

Modern, accessible, and enterprise-grade — tokens and components that power the world's leading customer relationship management platform.

24 Color tokens 8 Type styles 4 Shadow levels 6 Radius tokens Lato + Playfair

Foundation

Color Tokens

The full color palette extracted from HubSpot's design system, including brand primaries, interactive states, neutrals, and surfaces.

HubSpot Orange

#FF4800

Primary CTA · Brand accent · Actions

Orange Dark

#C93700

Hover state · Active CTA · Deepened

Teal Dark

#124548

Secondary accent · Navigation · Headers

Teal Medium

#2F7579

Badges · Tertiary elements

Teal Light

#CAEBFF

Background tints · Hover states

Navy Deep

#15295A

Dark accent · Contrast emphasis

Navy Medium

#180BB1

Interactive overlays · Secondary

Brown Warm

#425B76

Borders · Dividers · Warmth

Error Red

#D9002B

Destructive · Error states

Beige Warm

#FCC6B1

Hover states · Soft backgrounds

Text Primary

#1F1F1F

Body text · Labels · UI content

Text Secondary

#9B9897

Helper text · Disabled · Subtle

Border Gray

#CFCCCB

Borders · Dividers · Separators

Background Light

#FCFCFA

Minimal surfaces · Form areas

Background Cream

#F8F5EE

Soft background · Warmth

White

#FFFFFF

Cards · Elevated surfaces

Typography

Type Scale

Playfair Display drives heroic display text — elegant, high-impact headers paired with clean Lato for accessible body copy and UI.

Display Playfair Display H1 · Hero · Page titles

Primary Lato UI · Headings · Body · Buttons

Monospace Courier New Code · Token values · Badges

Display Build what matters 80px · 300 · 95px line

H2 The quick brown fox 18px · 500 · 28px

H3 The quick brown fox jumps 16px · 500 · 28px

Body Large The quick brown fox jumps over the lazy dog 16px · 300 · 28px

Body Regular The quick brown fox jumps over the lazy dog 14px · 300 · 22px

Button Get Started 16px · 400 · 18.4px

Caption Meta information · Badges 12px · 500 · 20px

Code const token = '#FF4800'; 14px · 400 · monospace

Layout

Spacing & Shapes

8px base grid — every spacing token is a multiple of 8. Border radii range from sharp (0px) to soft (24px) to match component context.

Spacing Scale

4px Micro

8px XS

12px S

16px M

20px L

24px XL

32px 2XL

40px 3XL

Border Radius

None 0px

Small 4px

Medium 8px

Large 16px

Extra Large 24px

Full 9999px

Shadows

Level 0 Flat · no elevation

Level 1 (Raised) Cards · subtle lift

Level 2 (Elevated) Modals · dropdowns

Level 3 (Floating) Overlays · tooltips

Border Widths

Thin 1px

Medium 2px

Thick 4px

Opacity

Full 100%

Muted 60%

Disabled 30%

Z-index / Layering

Base 1

Dropdown 95

Sticky Nav 100

Modal 9999

Elevation

Depth & Surfaces

Three light surface levels create spatial hierarchy. White (base) → Cream (panel) → Light (card) — each step provides visual separation through background color and shadow.

White Base

Card surfaces and elevated containers

L0 · #FFFFFF

Background Cream

Large surface areas and warm backgrounds

L1 · #F8F5EE

Background Light

Forms, inputs, and minimal surfaces

L2 · #FCFCFA

White #FFFFFF

Cream #F8F5EE

Light #FCFCFA

Border #CFCCCB

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #FF4800 bg · #FFFFFF text · 8px radius · 16px 24px padding · 52px height. Secondary: transparent bg · #1F1F1F 2px border. Ghost: teal text, light teal hover background.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · rgba(0,0,0,0.47) 1px border · 4px radius · 44px height. Focus: #FF4800 border · 3px focus ring rgba(255,72,0,0.1).

Card

Content container — elevated surface with shadow

.card

Repository name

A brief description of this project. It's enterprise-grade and has deep integrations.

#FFFFFF bg · rgba(0,0,0,0.47) 1px border · 16px radius · Level 1 shadow. Title: 16px/500/#1F1F1F. Body: 16px/#9B9897. CTA: primary orange button.

Badges

Status indicators — Success, Error, Info

.badge

Active Failed Pending

12px/500 · 4px 8px padding · 12px radius. Success: #1F883D. Error: #D9002B. Info: #1F6FEB.

Guidelines

Do's & Don'ts

Principles for consistent application of the HubSpot design language across surfaces and contexts.

Do — Embrace

Use HubSpot Orange (#FF4800) for all primary CTAs — ensures immediate recognition
Pair serif headers (H1) with sans-serif body for clear visual hierarchy
Maintain 8px base spacing throughout all layouts and components
Apply generous whitespace (64px+ section margins) for breathing room
Use WCAG AA contrast ratios (4.5:1) minimum for all text on backgrounds
Implement 3px orange focus rings on all interactive keyboard elements

Don't — Avoid

Use pure black (#000000) for text — use #1F1F1F instead for accessibility
Apply orange accents to secondary actions — reserve for primary CTAs only
Stack multiple shadow layers on standard cards — use single-layer only
Mix serif body text with sans-serif headers — maintain strict separation
Set border-radius below 4px on any element — prevents rendering artifacts
Remove or hide focus states — always provide visible keyboard navigation

hubspot.com

Preview