The basics
Every Bluebird color is defined in four ways so it stays consistent across screen and print. Use HEX for the web, RGB for screens and presentations, and CMYK or PMS when something is printed.
Color values
HEX
A hexadecimal way of representing the red, green, and blue of screen colors.
RGB
Red, green, and blue, the component colors which create all screen colors.
CMYK
Cyan, magenta, yellow, and black. The four colors used in offset and digital printing.
PMS
Pantone Matching System: global color numbering for precise color selection and matching.
Please note:
Pantone colors are approximations, so always check them with your printer. Other factors can affect color reproduction too, so run a test print before any large print run.
Midnight Black
Midnight Black serves not only as the text color but also as the foundation of the grayscale used within Bluebird. It ensures a dynamic range that can be used to create contrast.
050
100
200
300
400
500
600
700
800
900
Stands for
A calm, premium base.
Use it for
Most surfaces, long reading, forms, navigation, and all primary text.
Keep in mind
Every gray and white comes from the warm family. No cold grays.
Rise Blue
Rise Blue is the base for the blue gradient. It can also be used on its own to highlight text or create a refreshing contrast for eyebrows or marketing material.
200
500
900
Stands for
Clarity, trust, and expertise.
Use it for
Primary buttons and links, the logo, what we do and how we work, process and service sections, key brand statements.
Never for
Decorative full-bleed panels with no message. Keep blue text large.
In use
Sunset Orange
Sunset Orange is the base for the orange gradient. It can also be used on its own to highlight text or create a refreshing contrast for eyebrows or marketing material.
200
500
900
Stands for
Warmth, people, and results.
Use it for
Numbers and KPIs, case results, testimonials, people and team moments, highlights.
Never for
Body text or small interface elements. On orange, set text in Midnight Black, never white.
In use
Clear White
Gradients
Putting colors together
One lead color per page, with everything else in support. Neutrals carry about 70% of any surface, one pillar color about 20%, and accents the last 10%. Pick the color for what it says, not for how it looks.
Neutral by default
A page is neutral first, with at most two colored sections. Two colored sections never sit directly next to each other.
One lead color
A blue-led layout may use one orange number. An orange-led layout may use blue only for a button or link. The other color is always an accent.
Never
Place a blue gradient and an orange gradient edge to edge, blend them into one gradient, or set white text on orange.
