2026 Design system

Guiding excellent design with intention.

Blurb goes here

BE screenshots-4-Contingent 2

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

Request a demo

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

Request a demo

Secondary

Blue button

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

Blue button hover

Secondary inverted

Secondary button inverted 2

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

Secondary button inverted 2

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

Screenshot 2025-12-10 at 11.14.08
Screenshot 2025-12-10 at 11.23.35

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

VMS 101-1 (2)
BE Page images-17-Global solutions 2

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.

Pairing blue

All blues may be paired adjacently

Pairing green
Pairings BG

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

Pairings mint

Mint Green may be paired with Light Mint and Print Navy

Do not pair:

Pairing no 3
Pairing no 6
Pairing no
Pairing no 2
Pairing no 5
Pairing no 4

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

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.

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

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.

Typography


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.
KPN
Airbus
The Home Depot
Amazon
epiq
LinkedIn
CSL Limited
AT&T
Best Buy
BAE Systems
Accenture
Thermo Fisher Scientific
NXP Semiconductors
Tiffany & Co
Elida beauty
Audible
Southwest Airlines
Cuisine Solutions
BNP Paribas
CIBC