Visual identity
Color
Primary colors
The primary palette is anchored by Buffini Blue, supported by a darker blue for contrast and a range of neutral grays. A secondary set of colors add flexibility and liveliness to our overall message.
General guidelines
Buffini Blue is our primary brand color
It doesn’t need to dominate every layout, but it should always be present and consistently carried throughout the system.
Balance color across the layout
Use color intentionally and balance it throughout the layout to create clarity and rhythm. In longer documents, vary background colors thoughtfully to help establish pacing and visual flow.
Dark blue
Dark blue serves as the primary contrast color, helping anchor the palette and balance lighter tones.
Use tints and shades to create space
Use varying shades of neutral tones or Buffini Blue to create structure through rules, frames, tables, containers, and other supporting elements. Lighter tones can cover larger surface areas, while darker tones should be used more sparingly for lines, accents, and emphasis.
Primary palette
Buffini Blue
#006EB4
RGB: 0, 110, 180
CMYK: 100, 50, 0, 0
PMS: 300U
Dark blue
#003B64
RGB: 0, 59, 100
CMYK: 100, 50, 0, 60
PMS: 541
Use Dark blue to create contrast and balance within the layout. It is especially effective for headlines, subheads, and titles, particularly when Buffini Blue is already prominent elsewhere in the design.
Blue 90
#147EC2
RGB: 20, 126, 194
CMYK: 90, 45, 0, 0
Blue 80
#2B8BC8
RGB: 43, 139, 200
CMYK: 80, 40 0, 0
Blue 70
#499BD1
RGB: 73, 155, 200
CMYK: 70, 35, 0, 0
Blue 60
#64ACDA
RGB: 100, 172, 218
CMYK: 60, 30, 0, 0
Blue 50
#81BBE1
RGB: 129, 187, 225
CMYK: 50, 25, 0, 0
Blue 40
#98C8E8
RGB: 152, 200, 232
CMYK: 40, 20, 0, 0
Blue 30
#BADDF4
186, 221, 244
CMYK: 30, 15, 0, 0
Blue 20
#C9E5F6
RGB: 201, 229 246
CMYK: 20, 10, 0, 0
Blue 10
#E1F2FD
RGB: 225, 242, 253
CMYK: 10, 5, 0, 0
Light Blue
#EBF7FF
RGB: 235, 247, 255
CMYK: 6, 0, 0, 0
Ultra Light Blue
#F4FBFF
RGB: 244, 251, 255
CMYK: 4, 0, 0, 0
Super Ultra Light Blue
#FAFCFE
RGB: 250, 252, 254
CMYK: 2, 0, 0, 0
Neutrals
Use pure black for print body copy and Neutral 90 for screen copy. Lighter neutrals should be used for containers and subtle backgrounds, mid-tones for rules and borders, and darker tones for accents and infographics. Light blue and neutral are the lightest neutral approved for print. Ultra Light and Super Ultra Light tints are reserved for screen use only.
Neutral Pallete
Black
#000000
RGB: 0, 0, 0
CMYK: 0, 0, 0, 100
Neutral 90
#474543
RGB: 71, 69, 67
CMYK: 0 4, 8, 90
N80
#646361
RGB: 100, 99, 97
CMYK: 0, 4, 7, 80
N70
#797775
RGB: 121, 119, 117
CMYK: 0, 3, 6, 70
N60
#868583
RGB: 134, 133, 131
CMYK: 0, 2, 5, 60
N50
#A8A5A2
RGB: 168, 165, 162
CMYK: 0, 2, 5, 50
N40
#BCB8B3
RGB: 188, 184, 179
CMYK: 0, 2, 4, 40
N30
#D0CDC8
RGB: 208, 205, 200
CMYK: 0, 1, 4, 30
N20
#DEDCD5
RGB: 222, 220, 213
CMYK: 0, 1, 3, 20
N10
#E8E6E4
232, 230, 228
CMYK: 0, 1, 3, 10
Light Neutral
#EDEDEB
RGB: 237, 237, 235
CMYK: 0, 1, 2, 8
Ultra Light Neutral
#F7F6F4
RGB: 247, 246, 244
CMYK: 0, 1, 2, 5
Super Ultra Light Neutral
#FAFAF8
RGB: 250, 250, 248
CMYK: 0, 1, 2, 2
Support colors
These colors support the primary palette by allowing Buffini Blue to stand out, while also adding an additional layer of energy to the brand visuals. Without the secondary palette, the brand becomes too corporate and lacks vibrance and personality.
General guidelines
Use secondary colors to support the message and reinforce the system
They should enhance clarity and add character without competing with Buffini Blue. Always use restraint so the final design feels focused, cohesive, and distinctly Buffini.
Use restraint
Limit use to key moments. Avoid saturating layouts with multiple accents.
Limit the palette per layout
Use one primary color and one or two secondary colors at most per screen. Infographics or grouped content areas may expand the palette when additional distinction or organization is needed.
Assign color with purpose
Use secondary colors to highlight key actions, categories, or information. Add blocks, frames, or rules to create space and provide anchors. Use color in type to add emphasis.
Keep color meaning consistent
If a color represents a concept, use it consistently across the piece.
Use tints and shades for flexibility
Extend colors through lighter and darker variations before introducing new ones. Use consistent tint and shade increments, such as 25% steps, to maintain a controlled and cohesive palette.
Cerulean
#0095DF
RGB: 0, 149, 223
CMYK: 85, 25, 0, 5
Aqua
#49D5F4
RGB: 73, 213, 244
CMYK: 50, 0, 8, 0
Electric Blue
#9DF5FF
RGB: 157, 245, 255
CMYK: 30, 0, 6, 0
Arctic Blue
#DEF6FB
RGB: 222, 246, 251
CMYK: 10, 0, 2, 0
Teal
#069FA9
RGB: 6, 159, 169
CMYK: 89, 12, 35, 0
Turquoise
#5CCEC4
RGB: 92, 206, 196
CMYK: 61, 0, 33, 0
Aquamarine
#A7FAE7
RGB: 167, 250, 231
CMYK: 38, 0, 21, 0
Light Turquoise
#DAFCF7
RGB: 218, 252, 247
CMYK: 15, 0, 7, 0
Verdigris
#269086
RGB: 38, 144, 134
CMYK: 86, 13, 50, 13
Green
#7ACF97
RGB: 122, 207, 151
CMYK: 50, 0, 50, 0
Chartreuse
#BEF7BC
RGB: 190, 247, 188
CMYK: 28, 0, 39, 0
Light Chartreuse
#E7FDDC
RGB: 231, 253, 220
CMYK: 5, 0, 15, 0
Amber
#EC8F1F
RGB: 236, 143, 31
CMYK: 5, 35, 100, 0
Gold
#FFD48C
RGB: 255, 212, 140
CMYK: 1, 12, 56, 0
Yellow
#FFE7AB
RGB: 255, 231, 171
CMYK: 0, 4, 29, 0
Light Yellow
#FFFAD8
RGB: 255, 250, 216
CMYK: 0, 3, 15, 0
Brick
#DA693E
RGB: 218, 105, 62
CMYK: 15, 70, 75, 0
Rose
#F4AB97
RGB: 244, 171, 151
CMYK: 5, 36, 32, 0
Peach
#FFD7C8
RGB: 255, 215, 200
CMYK: 0, 21, 23, 0
Light Peach
#FFEFE6
RGB: 255, 239, 230
CMYK: 0, 10, 10, 0
Tints
Use consistent tint and shade increments, such as 25% steps, to maintain a controlled and cohesive palette. Avoid stacking transparent colors, as overlapping transparencies can create unintended colors that fall outside the approved palette. Instead, use these predefined tints and shades. It’s okay to use transparency if the swatch is against a white background.
Gradients
Gradients should serve a clear purpose, such as adding depth or a campaign-specific design approach. Keep gradients subtle, controlled, and aligned with the core palette to enhance clarity.
General guidelines
Use gradients with purpose
Only apply gradients when they add clarity or serve some visual purpose.
Stay within the brand palette
Build gradients from approved colors or closely related tints and shades.
Limit color stops
Use two stops max.
Avoid muddy combinations
Use caution when blending blues into reds and oranges which can produce brownish hues.
Use linear gradients only
Don’t use more complex gradients such as radial, angular or mesh.
Two gradient styles
1. Fade to White(Buffini Blue to White)
2. Fade to Buffini Blue(Dark blue to Buffini Blue)
Blues → White
Blues → Buffini Blue
Teals → White
Teals → Buffini Blue
Greens → White
Greens → Buffini Blue
Yellows → White
Yellows → Buffini Blue
Reds → White
Reds → Buffini Blue
