Foundation home
Quick reference
Typography
Color palettes
Color surfaces
Color pairing
Iconography
Spacing and scale
Button - Filled
Foundation elements
Quick reference
This "Quick Reference" section of the Foundation Elements in the Core Design System provides design specifications covering typography, color, iconography, and spacing. While full documentation is available, this guide highlights the key items designers and developers need to consider when discussing a high-level estimate of effort to implement these foundation elements across platforms.
Typography
The core design system uses the Roboto font family, with Roboto Condensed Medium for specific headings, to create a modern, clean, and versatile appearance across all platforms.
Body font
Base font size 16px/1rem
Font Family Roboto Regular
Font weight Default = regular (400) Other weights available for emphasis, medium (500) and bold (700)
Default text color ‘on-surface’ #232C35
Text color variant ‘on-surface-variant’ #3B4B59
Heading font
Font Family Roboto Condensed Medium
Font weight Default = regular (400) Other weights available for emphasis, medium (500) and bold (700)
Default text color ‘on-surface’ #232C35
Text color variant ‘on-surface-variant’ #3B4B59
Font styles For all fonts, line height should be divisible by 4 and equal or greater than the font size. This means that text of all styles align with a 4px grid.
Roboto Regular
Roboto Condensed Medium
Display
small
42px medium
48px large
46px
small
42px medium
48px large
46px
Heading
small
28px medium
32px large
36px
small
28px medium
32px large
36px
Title
small
20px medium
22px large
26px
small
20px medium
22px large
26px
Body
small
12px medium
16px large
16px
label
small
12px medium
16px large
16px xlarge
18px
Iconography
The Core design system uses Google, Material Symbols in supported with custom icons created by the design team
Library
Online library Material Symbols by Google
Style Rounded
Fill Unfilled value 0 for default  (Filled may be used in some contexts
Weight 400
Grade 0 Normal
Default color Usage is contextual, usually defined in component or use ‘on-surface’ color pairing
Custom icons If an icon is required and is not available as a Material Symbol
Created by Roboto Condensed Medium
Export format .svg
Resource location Central repository with Material Symbol icons, currently OneDrive
Text color variant
Exported as Beeline BlackBlack #191C1D neutral.10 Usage is contextual, usually defined in component or use ‘on-surface’ color pairing
Colors
Core and semantic colors are based on our company's brand palette. They have been modified for digital platforms and improved for better accessibility.
Core colors
Primary
Bright Blue
#0357FC
primary.40
Secondary
Blue
#001858
secondary.40
Tertiary
Beeline Green
#4C8300
tertiary.40
Beeline Black
Black
#191C1D
neutral.10
Neutral-Variant
Extended Gray
#4C6073
neutral-variant.40
White
Global White
#FFFFFF
neutral.100
Semantic colors
Error
error.40
#D81313
Warning
warning.40
#E59C05
Success
success.40
#44A5A1
Info
info.40
#6F6CE8
Understanding Success Criterion 1.4.12: Text Spacing | WAI | W3C
Spacing and scale
The scale aligns to a 4pt grid system with increments based on the Major Second scale, using a ratio of 1.125.
Spacing scale
Spacing
rem
px
Example
space-0
0
0
space-1
0.25
4
space-2
0.5
8
space-3
0.75
12
space-4
1
16
space-5
1.5
24
space-6
2
32
space-7
3
48
space-8
4
64
space-9
5
80
Contact us. If you have any questions or feedback relating to the Core Design System or have suggestions to help our commitment to continuous improvement, please contact:
simon.andrews@joinedup.com
aysha.miskin@beeline.com
CORE DESIGN SYSTEM
Foundations
Made
with