2026 Design system

Guiding excellent design with intention.

Blurb goes here

View all brands Contact us

Skip Navigation

Sections
CTA Buttons
Colors
Corners and card padding

Sections

Excludes header navigation and secondary navigation

Desktop:

Content width: 1400px
Top and bottom padding: 80px
Left and right padding: 20px

Mobile:

Top and bottom padding: 40px
Left and right padding: 20px

Background color options and resulting font colors:

Your extended workforce. Full force.

Background: Blue grey #eff5f8
Text: Black navy #000f32

Your extended workforce. Full force.

Background: White #ffffff
Text: Black navy #000f32

Your extended workforce. Full force.

Background: Print navy #001a61
Text: White #ffffff
Bold type: Mint #7df98c

Your extended workforce. Full force.

Background gradient: Top left (Print navy #001a61) to bottom right (Black navy #000f32)
Text: White #ffffff
Bold type: Mint #7df98c

Your extended workforce. Full force.

Background gradient: Top (Black navy #000f32) to bottom (Print navy #001a61)
Text: White #ffffff
Bold type: Mint #7df98c

CTA Buttons

Primary

Fit to text
Color: Beeline green #5fa300
Font size: 17px
Left, right padding: 26px
Top, bottom padding: 15px

Text align: center
Font weight: semi-bold (550)
Line height: 24px
Border radius: 30px
CSS class: button primary

Primary hover #448500

Secondary

Fit to text
Color: Bright blue #2257fc
Font size: 17px
Left, right padding: 26px
Top, bottom padding: 15px
Text align: center

Font weight: semi-bold (550)
Line height: 24px
Border radius: 30px
Border weight: 1,5px
CSS class: ?

Secondary hover

Secondary inverted

Fit to text
Color: white #ffffff
Font size: 17px
Left, right padding: 26px
Top, bottom padding: 15px
Text align: center

Font weight: semi-bold (550)
Line height: 24px
Border radius: 30px
Border weight: 1,5px
CSS class: ?

Secondary inverted hover

Colors

Large scale colors

These colors may be used in areas small to large, including section backgrounds. They are be used to support the primary colors, differentiate sections and help present information.

Black Navy

#000f32
18.84:1
AAA

Print Navy

#001a61
15.9:1
AAA

Blue Grey

#eff5f8
19.08:1
AAA

White

#ffffff
21:1
AAA

Examples

Medium scale colors

These colors may be used in small and medium-sized areas, including backgrounds of graphics. They are used to support the accent colors, create visual interest and help present information. Icons must use only Black navy and Icon green.

Light Blue

#e3effe
18.04:1
AAA

Icon Green

#b7f9c8
17.39:1
AAA

Light Mint

#e1ffe5
19.63:1
AAA

Accent colors

These colors may only be used in small areas, including buttons. They are be used to create visual interest and draw the eye.

Beeline Green

#5fa300
3.12:1
Large text AA

Mint Green

#7df98c
15.8:1
AAA

Bright Blue

#0357fc
5.56:1
AA

Examples

Pairings

Please pay attention to which colors are ideal to pair adjacent to each other, and which aren't. When two colours (excluding white) are adjacent there must be a contrast ratio of at least 1.32:1.

All blues may be paired adjacently

Beeline Green may be paired with Icon Green, Light Mint and all blues except for Bright Blue

Mint Green may be paired with Light Mint and Print Navy

Do not pair:

Examples

Corners and card padding

Corners

The corner radiuses below apply to cards, images and any other element which needs a rounded corner

Tiny cards:

10px corner radius
Left, right padding 20px
Top, bottom padding 10px

Example: FAQ module

Small cards:

14px corner radius
Left, right padding 30px
Top, bottom padding 30px

Example: Podcast episode

Lorem ipsum dolor sit amet

Medium cards:

20px corner radius
Left, right padding 40px
Top, bottom padding 30px

Example: Featured content module

Large cards:

26px corner radius
Left, right padding 55px
Top, bottom padding 40px

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tiny cards:

10px border radius
20px padding

Example: FAQ module

Tiny card

Lorem ipsum

Small cards:

14px border radius
30px padding

Example: Podcast episode

Small card

Lorem ipsum dolor sit amet

Medium cards:

20px border radius
40px padding

Example: Featured content module

Medium card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Large cards:

26px border radius
55px padding

Example:

Large card

Typography

Font · Font styles · Size · Line spacing · Colors · Padding · Links

Line spacing:

Paragraphs 1.7
Bullets 1.5
Headings 1.25

The world's best-known brands rely on Beeline to manage their non-employees.