2026 Design system
For branding assistance or assets please contact Lauren or Janet on Teams or at lauren.redman@beeline.com or janet.chrysakis@beeline.com
Corporate | Enterprise | Professional | Supplier Network | MBO Partners | JoinedUp
Logo
Logos can be downloaded here.
Our name is crafted in lower case contemporary lettering to give it a warm, human personality. The logo text is built with a custom font that is based on the Gotham font family. The logo text is Beeline Green #5fa300. The Registered mark protects our brand. It is aligned to the top of the 'e'.
To ensure the logo type is always clear and legible, minimum sizes are set for print and electronic/on-screen applications. The sizes are measured from the left-hand edge of the ’b’ to the right of the registered mark in the Beeline name.
Minimum size:
Print 1.18 inch
30mm
Digital 100px
The Beeline logo should always be surrounded by an area of clear space so that text, images, or graphic elements don’t overpower it. The clear space is defined by the height of the ‘b’ in our name.
Incorrect logo usage
Do not:
1. Change the color of our logo
2. Put a box around our logo
3. Fade the logo
4. Place the logo on a busy background
5. Use our logo as a watermark or photo effect
6. Capitalize the logo
7. Put the green logo on a green background
8. Use the old B icon next to the logo
9. Use our new icon next to the logo
10. Use any icon next to our logo
11. Use the old, lighter green HEX #8dc63f. It must be darker green HEX #5fa300
12. Warp our logo in anyway
13. Add a gradient to our logo
14. Change the logo proportions
Typography
The Roboto font family can be downloaded here.
Digital
Tags and eyebrows:
Roboto regular, all caps 14px
Paragraph (desktop and mobile):
Roboto regular, 16px
Line height: 1.6 or 25,5px
Letter spacing: 0
Color: #0C0C0C (97% black)
Inverted color: white #ffffff
Inline links: Bright blue #0357fc, bold
Inverted inline links: Mint green #7df98c, bold
Two column layout
Headings:
Roboto Condensed regular
Sentence case
Line height: 1.25
Letter spacing: 0
CSS: clamp
Color: Navy #001858
Inverted color: #ffffff
Bold can be Mint Green #7df98c
*Note: Heading 1 may be used at 56, 64 or 72px depending on the usage and amount of copy
Clamp Maximum:
Heading 1: 72px
Heading 2: 48px
Heading 3: 36px
Heading 4: 26px
Heading 5: 20px
Heading 6: 18px
Clamp Minimum
Heading 1: 40px
Heading 2: 32px
Heading 3: 24px
Heading 4: 18px
Heading 5: 16px
Heading 6: 16px
Website UI: Resource labels
White paper
Roboto medium 14px
Sentence case
Letter spacing: 0
Color: White #ffffff
Background default color: Bright Blue #0357fc
Corners: 5px border radius
Padding: 5px top/bottom; 10px left/right
Website UI: Date labels
August 7, 2025
Roboto medium, 14px
Letter spacing: 0
Text color: Navy #001585
Background color: Blue grey #F5F6FA
Border: 1px Grey - 80* #DDDFE6
Corners: 5px border radius
Padding: 5px
Section content module
Your extended workforce. Full force.
With a range of solutions for managing today’s external workforce, Beeline empowers businesses to deliver leading contingent workforce programs.
Example of a link.
Colors
Primary colors
Our token primary color for Beeline and Beeline Enterprise is Beeline Green #5fa300. Our token neon color is Mint Green* #7df98c. These colors are the identifiers for Beeline and BE and must be featured. They may be used in small and medium-sized areas, including backgrounds of graphics.
*Used on Beeline Enterprise product
Neutral 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
Examples
Secondary colors
These colors may be used in small and medium-sized areas, including backgrounds of graphics. They are used to create visual interest and help present information. For Beeline Enterprise, greens and blues must be most prevalent. *Used on Beeline Enterprise product
Negative color
If marketing wishes to create a negative graphic (for example a negative notification on a graphic for an advert) this color scale may be used.
Gradients
These gradients may be used in small and medium-sized areas.
Color 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.
Examples of colors that are okay to pair:
Examples of colors that are not okay to pair:
Icons
Decorative icons
We use the Lineal Color icons by Freepik. Pre-downloaded icons can be found here. The default icon color for Enterprise is Icon Green #B7F9C8. Icons must have a white circle on any background of color darker than Blue Grey #F5F6FA, or they can be used as is on white or Blue Grey.
Default color: Icon Mint #B7F9C8
Size with circle: 50px
Size without circle: 50px
Heading
Lorem ipsum dolor sit amet consectetur. Duis ac odio sit vestibulum quis adipiscing. Nunc sit id vivamus ut sagittis.
Heading
Lorem ipsum dolor sit amet consectetur. Duis ac odio sit vestibulum quis adipiscing. Nunc sit id vivamus ut sagittis.
Functional icons
We use Font Awesome for check marks and crosses, size: 30px
White check on Beeline green #5fa300
White cross on Error red #D81313
Arrow height is 30px
Social icons
Size: 24px
Background color: Navy #001858
Share icon
Size: 35px
Background color: Blue grey
Border color: Grey - 80*
Border wight: 1px
Icon color: white
Pattern
This is our brand pattern, you can download it here. It may be used in section backgrounds, graphic backgrounds and graphic elements. The pattern must always be on a #000f32 color background, and may either be #081f6a or a gradient from #081f6a through #001858 to #000f32.
All buttons are:
Font size: 16px
Text align: center
Font weight: bold
Border radius: 40px
Please not button text must fit onto one line only
Button height: 50px high
Line height: 1.25 (16 x 1.25 = 20px)
Border-width: 2px (top + bottom = 4px)
Padding: 13px 20px (top + bottom = 26px)
Desktop:
Content width: 1400px
Top and bottom padding: 100px
Left and right padding: 40px
Mobile:
Top and bottom padding: 40px
Left and right padding: 20px
Note:
If two sections with the same background appear after each other, reduce the combined padding of 160px (80+80) to 120px
Background color options and resulting font colors:
Tiny cards:
10px border radius
20px padding
Example: FAQ module
Small cards:
14px border radius
30px padding
Example: Podcast episode
Medium cards:
20px border radius
40px padding
Example: Featured content module
Large cards:
26px border radius
55px padding
Tiny card
Lorem ipsum
Small card
Lorem ipsum dolor sit amet
Medium card
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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 have an optional shadow.
-
If the card is clickable an enhanced shadow may appear on hover.
-
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.
-
No color strip may be used
- Light colors must appear on a white/dark background (not blue grey or another light color)
Example cards with background color and images
Managed Service Partners (MSPs)
Design, run, and optimize your contingent workforce program- Program management and operations
- Supplier management and performance
- Workforce strategy and optimization
Solution Partners
Extend your capabilities with integrated technologies- Compliance and risk management tools
- Talent sourcing and engagement solutions
- Workforce analytics and reporting enhancements
System Integrators (SIs)
Implement and connect your workforce ecosystem- Beeline implementation and configuration
- System integrations across your tech stack
- Change management and transformation support
Shadows may be applied to white cards, froms, images and graphic design elements. The shadow is soft and drops to the bottom right. Please endure to visually align shadows created in other platforms to the example below.
Example shadow
Lorem ipsum
Shadow parameters Hubspot/Figma
Default:
box-shadow: 3px 5px 10px -2px rgba(0, 0, 0, .1);
Position: X 3px, Y 5px
Blur: 10px
Spread: -2px
Color: #000000 at 10%
Headshots of people who are event speakers or webinar hosts are in a rounded square and may have a color background. They have no border and no shadow. Square corner radius is that of tiny card (10px). You can find an Adobe Express headshots template here.
Headshots of staff are on our company background in a circle mask (unless they are being featured as speakers/hosts, in which case they follow the guide above).
When featuring headshots as part of a platform mockup, the shape may mimic that of the platform. For example, Beeline Enterprise uses round headshots, therefore the mockup mimics this:
Buttons
CTAs and buttons must visually align with the website buttons. They may have an arrow added on the right hand side. In cases where there is very little space (e.g in a small display ad) the button may have its vertical padding reduced. We have an Adobe Express template here.
.png?width=910&height=113&name=ABM%20MOFU%20ads%20Oct%20Ad%205-9-Still%20on%20top%20(728x90).png)
Backgrounds
Dark backgrounds are either a gradient of Black Navy #000f32 to Navy #001858, or this gradient with our pattern overlayed in Black Navy. You can download an example background with the pattern here.
Light backgrounds are either White or Blue Grey #f5f6fA.
Typography
Headings are Roboto Condensed or Roboto Condensed Bold in either white, Mint Green #7df98c or Navy #001858.
Paragraph text is Roboto regular in white or Black Navy #000f32.
Imagery
Please use photos of real people and places and avoid stock illustrations. Simple and clean UI elements and style may be used.
Examples
These semantic colors and typography apply to any forms or assessments where there may be an 'error', 'action required' or 'success' message. Use the background box wherever possible. If this is not possible the text may appear without it.
Text: 14px
Line height: 20px
Box padding: Top 5px, bottom 5px, left 10px
Corner radius: 5px
Error message is Red - 20 #9A0C26 text on Red - 90 #FFDAD8 background
Action required message is Orange - 20 #8A5100 text on Orange - 90 #FFEFD8 background
Success message is Pine - 20 #207B40 text on Pine - 90 #E5ffee background