Brand guidelines
Color
Main and secondary colors, balance ratios, and correct vs incorrect usage.
Updated Aug 10, 2026
Our colors
Leonardo color is led by Brand Blue. Teal signals interaction, Ember adds rare emphasis, and cool neutrals keep reading surfaces calm. Use only approved values—do not invent tints outside the system.
Main colors
Main colors carry brand recognition. Brand Blue is the default for heroes, navigation ink, and primary identity moments. Deep Blue supports large brand fields. White and soft inverse keep content legible.
Brand Blue
Primary brand · identity, heroes, ink
RGB 0, 0, 179 · HEX #0000B3
Deep Blue
Supporting brand field · rails, panels
RGB 0, 0, 153 · HEX #000099
White
Primary light surface · cards, content
RGB 255, 255, 255 · HEX #FFFFFF
Ink Inverse
Soft light · text on dark, soft fills
RGB 245, 247, 250 · HEX #F5F7FA
Secondary colors
Secondary colors support hierarchy and UI. Teal is the interactive accent. Ember is a highlight used sparingly. Neutrals (canvas, muted, secondary ink) structure layouts without competing with Brand Blue.
Signal Teal
Accent · links, focus, success cues
RGB 14, 124, 102 · HEX #0E7C66
Teal Strong
Accent pressed · strong emphasis
RGB 11, 95, 80 · HEX #0B5F50
Warm Ember
Highlight · rare emphasis only
RGB 232, 93, 4 · HEX #E85D04
Canvas
Page surface · backgrounds
RGB 238, 241, 244 · HEX #EEF1F4
Muted
Muted surface · dividers, chips
RGB 226, 231, 237 · HEX #E2E7ED
Ink Secondary
Supporting text · body, captions
RGB 61, 79, 99 · HEX #3D4F63
Color balance
Balance keeps Leonardo recognizable without feeling loud. Let neutrals carry most reading surfaces, Brand Blue lead brand moments, and accents stay scarce.
Neutrals
60%
Canvas, white, and muted surfaces for reading and structure.
Brand Blue
30%
Heroes, navigation, key identity blocks, and primary CTAs.
Accents
10%
Teal for interaction; Ember only for rare highlight moments.
- 01
Lead with blue
Open brand moments with Brand Blue fields or gradients that still feel blue-first.
- 02
Rest on neutrals
Shift long-form content onto white or canvas so type stays calm and readable.
- 03
Accent with intent
Use teal for interactive cues. Reserve Ember for a single emphasis point per view.
Correct and incorrect uses
Do
Use Brand Blue on white/canvas for identity. Put white or Ink Inverse type on Brand Blue. Use teal for links and focus. Keep Ember as a small highlight.
Don’t
Don’t place Ember text on teal, light gray on white, or rainbow gradients that dilute Brand Blue. Don’t convey meaning by color alone.
Correct · Blue on light
Brand Blue type or fields on white/canvas.
Correct · White on blue
Ink Inverse / white on Brand Blue heroes.
Incorrect · Ember on teal
Low clarity and off-system pairing.
Incorrect · Washed gray type
Fails contrast on light surfaces.
Downloads
Color palette sheet
Printable primary and secondary color values.
Updated Jul 12, 2026
Color design tokens
Machine-readable color tokens for product and web teams.
Updated Jul 12, 2026
Brand categories