2026 Design system

Beeline main brand and Beeline Enterprise.

Asset 28@4x

Enterprise    |    Professional    |   Supplier Network    |    MBO Partners    |    JoinedUp

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: Navy #001858
Text: White #ffffff
Bold type: Mint #7df98c

CTA Buttons


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

Text align: center
Font weight: bold
Border radius: 40px
CSS class: button primary

Primary hover #448500

Primary button hover

 

Secondary

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

Line height: 24px
Border radius: 40px
Border weight: 1,5px
CSS class: ?

Secondary hover

Screenshot 2026-02-26 at 15.26.28

Secondary inverted

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

Line height: 24px
Border radius: 40px
Border weight: 1,5px
CSS class: ?

Secondary inverted hover

Screenshot 2026-02-26 at 15.23.25

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.

*Used on Beeline Enterprise product

Black Navy

#000f32
18.84:1
AAA

Navy*

#001858
16.52:1
AAA

Light Blue

#e3effe
18.04: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. All of these are rated AAA. For Beeline Enterprise, greens and blues must be most prevalent.

*Used on Beeline Enterprise product

Pastel Mint*
#a8fbb2

Light Mint
#dcfdeo

X Light Mint
#eefff0

Medium Blue*
#b5dfff

Light Blue
#e3effe

Blue Grey
#eff5f8

Light Purple*
#ddc5ff

X Light Purple
#eeeeff

Light Pink
#fcd7f6

X Light Pink
#ffeefd

Pastel Orange
#ffe4c7

Light Orange
#fff3e9

Accent colors

These colors may only be used in small areas, like icons. They are be used to create visual interest and draw the eye. For Beeline Enterprise, greens and blues must be most prevalent.

*Used on Beeline Enterprise product

Beeline Green
#5fa300
3.12:1
Large text AA

Mint Green*
#7df98c
15.8:1
AAA

Bright Blue*
#0357fc
5.56:1
AA

Cornflower Blue
#66b3ff
9.46:1
AAA

Orange
#ffc004
12.79:1
AAA

Purple
#be6cff
7.80:1
AAA

Pink
#ff5fff
8.33:1
AAA

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

Typography


Words of a heading may be bold, but not the entire sentence. When a heading is inverted, the bold words must be Mint Green #7d798c.

Paragraph (desktop and mobile):

  • Roboto regular, 16px

  • Line spacing: 1.6

  • Tracking: 0

  • Color: #0C0C0C (97% black)

  • Inverted color: #ffffff

  • Inline links: Bright blue #0357fc, bold

  • Inverted inline links: Mint green #7df98c, bold

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. Example link.

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.


Headings:

  • Roboto Condensed regular

  • Line spacing: 1.25

  • Color: Navy #001858

  • Tracking: 0

  • Inverted color: #ffffff

  • Bold must be Mint Green #7df98c

Dektop:

Heading 1: 55px

Heading 2: 40px

Heading 3: 32px

Heading 4: 24px

Heading 5: 20px
Heading 6: 16px

Mobile:

Heading 1: 40px

Heading 2: 32px

Heading 3: 24px

Heading 4: 18px

Heading 5: 16px
Heading 6: 14px

Example of an inverted heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore example link

Corners and cards


Corners

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

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.

Card colors

White is the default color for cards and modules with cards, including all testimonials, resources, card groups and carousels.

  • White cards must have a shadow.

  • If the card is clickable an enhanced shadow may appear on hover.

  • Multiple white cards may sit as a group.

  • When referring to other company sub-brands, the color strip related to said brand may be used.

Other colors may be used in specific circumstances to highlight and segment information.

  • Cards of color (not white) must not have a shadow.

  • Mutliple cards of color may not sit as a group.

  • If the card is clickable an enhanced shadow may appear on hover.

Background (default): White #ffffff
Text: Black
21:1
AAA
Shadow: yes (optional)
Optional color strip: yes

Background: Light Blue #e3effe
Text: Black
18.04:1
AAA
Shadow: no
Optional color strip: no

Background: Light Mint #e1ffe5
Text: Black
19.63:1
AAA
Shadow: no
Optional color strip: no

Background: Mint Green #7df98c
Text: Black
15.8:1
AAA
Shadow: no
Optional color strip: no

Background: Beeline Green #5fa300
Text: White
3.12:1
Large text AA
Shadow: no
Optional color strip: no

Background: Navy #001858
Text: White
16.52:1
AAA
Shadow: no
Optional color strip: no

Background: Bright Blue #0357fc
Text: White
5.56:1
AA
Shadow: no
Optional color strip: no

Background: Medium Blue #b1d3fc
Text: Black
13.59:1
AAA
Shadow: no
Optional color strip: no

Examples

Screenshot 2026-01-26 at 10.51.12
Screenshot 2026-01-26 at 10.48.36
Screenshot 2026-01-26 at 11.20.11
Screenshot 2026-01-26 at 11.14.33

Icons


We use the Lineal Color icons by Freepik. All icons to please be uploaded as svgs. The default icon color for Enterprise is Light Green, although other Light colors may be used. Icons may have a white circle background, or be used as is. The dark lines may be inverted to white on a dark background.

Default color: Light Green
Optional colors: Light Blue, Light Orange, Light Pink, Light Purple
Size with circle: 60px
Size without circle: 45px

Examples

Light green:

Icon transparency Icon benefits Icon human-led Icon project tracking

 

 mint_moderator   mint_court   mint_time (1)   mint_human-resources 

 mint_moderator   mint_court   mint_time (1)   mint_human-resources 

Shadows


Shadows may be applied to white cards, images and graphic design elements

Shadow parameters Hubspot

Default:
box-shadow: 3px 5px 10px -2px rgba(0, 0, 0, .1);

Hover:
box-shadow: 3px 5px 10px -2px rgba(0, 0, 0, .1);

Screenshot 2026-02-05 at 14.55.34

Shadow parameters Adobe Express

Blur 4-6, Angle 165, Distance 34+
Color #000000, Opacity 15%

AE shadow example2

Forms


Example