Web Design

Welcome to the web section of Copart's Brand Guidelines. Browse our web colors, typography, and grab the code for different UI assets.

Brand Color Styles

Primary Colors

Copart Blue
#2662D9
(38, 98, 217)

Pure White
#FFFFFF
(255, 255, 255)

Copart Black
#2F333C
(220, 70, 50)

Button Colors

Primary

#2662D9

(38, 98, 217)

Hover
#063598
(6, 53, 152)

2nd Hover
#EEF2FC
(238, 242, 252)

Inactive
#E2E5E9
(226, 229, 233)

Text Colors

Body

#46525D

(70, 82, 93)

Headline
#2F333C
(47, 51, 60)

Button Text
#FFFFFF
(255, 255, 255)

Error Alert Text

#FCE5E9

(192, 0, 34)

Success Alert Text
#1B6600
(27, 102, 0)

Warning Alert Text
#705700
(112, 87, 0)

Neutral Alert Text
#0F2757
(15, 39, 87)

Grayscale

Dark Gray

#2F333C

(220, 70, 50)

Medium Gray
#46525D
(70, 82, 93)

Main Gray
#C5CCD3
(197, 204, 211)

Light Gray
#E2E5E9
(226, 229, 233)

Lighter Gray
#F4F5F6
(244 245, 246)

Blue Scale

Darker Blue
#0F2757
(15, 39, 87)

Dark Blue
#063598
(6, 53, 152)

Blue
#2662D9
(38, 98, 217)

Light Blue
#E1E9FA
(225, 233, 250)

Lighter Blue
#EEF2FC
(238, 242, 252)

White Blue
#F6F9FD
(246, 249, 253)

UI Background Colors

Gray 100

#F4F5F6

(244 245, 246)

Blue 100

#F6F9FD

(246, 249, 253)

Blue 200

#EEF2FC

(238, 242, 252)

Blue 300

#E1E9FA

(225, 233, 250)

Pure White

#FFFFFF

(255, 255, 255)

Error Alert

#FCE5E9

(252, 229, 233)

Success Alert

#D7E8D1

(215, 232, 209)

Warning Alert

#FFF7D1

(255, 247, 249)

Neutral Alert

#E0EBFF

(224, 235, 255)

Borders Colors

Divider

#E2E5E9

(226, 229, 233)

Form Field

#C5CCD3

(197, 204, 211)

Overlays Colors

Overlay Light

#FFFFFF

OPACITY (50%)

(255, 255, 255, 0.5)

Overlay Dark

#000000

OPACITY (50%)

(0, 0, 0, 0.5)

Typography

Hero

Family: Inter

Weight: XBold

Size: 64px

Line Height: 74px

Inter Hero

Header 1

Family: Inter

Weight: XBold

Size: 40px

Line Height: 48px

Inter Header 1

Header 2

Family: Inter

Weight: Bold

Size: 22px

Line Height: 32px

Use Case: Section header

Inter Header 2

Header 3

Family: Inter

Weight: Medium

Size: 20px

Line Height: 28px

Use Case: Hero body copy

Inter Header 3

Header 4

Family: Inter

Weight: Bold

Size: 16px

Line Height: 22px

Use Case: Hero body copy

Inter Header 4

Body 1

Family: Inter

Weight: Medium

Size: 16px

Line Height: 22px

Use Case: General body

Body and what it looks like with two sentences of body copy and then three sentences.

Body 2M

Family: Inter

Weight: Medium

Size: 14px

Line Height: 20px

Use Case: Dashboard cards

Body and what it looks like with two sentences of body copy and then three sentences.

Body 2 SB

Family: Inter

Weight: Semi Bold

Size: 14px

Line Height: 20px

Use Case: Dashboard cards

Body and what it looks like with two sentences of body copy and then three sentences.

Body 3

Family: Inter

Weight: Medium

Size: 12px

Line Height: 16px

Use Case: Alert Text

Body and what it looks like with two sentences of body copy and then three sentences.

Body 4

Family: Inter

Weight: Medium

Size: 12px

Line Height: 16px

Use Case: Alert text

Body and what it looks like with two sentences of body copy and then three sentences.

Tooltip

Family: Inter

Weight: Medium

Size: 12px

Line Height: 16px

Use Case: Alert text

Label 1

Family: Inter

Weight: Extra Bold

Size: 14px

Line Height: 20px

Use Case: Labels

Label 1

Label 2

Family: Inter

Weight: Bold

Size: 12px

Line Height: 18px

Use Case: Labels

Label 2

Label 3

Family: Inter

Weight: Semibold

Size: 12px

Line Height: 18px

Use Case: Labels

Label 3

Form Field

Family: Inter

Weight: Semibold

Size: 12px

Line Height: 18px

Use Case: Form fields

Form Field

Button Small

Family: Inter

Weight: Medium

Size: 14px

Line Height: 20px

Use Case: Small button

Button Text

Button Medium

Family: Inter

Weight: Medium

Size: 16px

Line Height: 22px

Use Case: Medium button

Button Text

Button Large

Family: Inter

Weight: Semibold

Size: 16px

Line Height: 22px

Use Case: L button

Button Text

Button Extra Large

Family: Inter

Weight: Semibold

Size: 20px

Line Height: 28px

Use Case: XL button

Button Text

Buttons

A button triggers an action or event. Use buttons for important actions like submitting a response, committing a change, or moving to the next step. If you need to navigate to another place, try a link instead. A toggle button is a two-state behavior that switches a state between on and off. A button’s rest state indicates “off” while the selected state indicates “on.”