Color

Our colors serve to provide a platform to show off the brilliance of professionals' slide stories and our product features.

Palette

We lead with our 5 brand colors and support them with 1 neutral ramp, so you know which color to reach for first. Use Deepest Blue wherever a design calls for black, and for text.

Brand · Primary and accent
Base Blue#002533
Gallery Grey#F0F3F5
Agency Azul#00B9FF
Ready Rose#DB2475
Ambition Amber#FA901F
Neutral ramp
Gallery Grey#F0F3F5
Lighter#D8DADA
Light#B2B5B6
Neutral#7F8486
Dark#4C5255
Darker#192125
Deepest Blue#001A24
Agency Azul ramp
Lightest#E5F8FF
Lighter#CCF1FF
Light#52D0FF
Agency Azul#00B9FF
Dark#0094CC
Darker#004A66
Darkest#002533
Ready Rose ramp
Lightest#FBE9F1
Lighter#F7D3E3
Light#E5659E
Ready Rose#DB2475
Dark#AF1C5D
Darker#570E2E
Darkest#410A23
Ambition Amber ramp
Lightest#FFDC8A
Lighter#FFCD76
Light#FFAF50
Ambition Amber#F89228
Dark#9B4600
Darker#7B3000
Darkest#5B1D00

Proportions

We give most of the page to Base Blue and Gallery Grey and keep each accent to no more than 30% of any composition combined, so they read as emphasis.

30%
40%
Base BlueGround · #002533
30%
Gallery GreyGround · #F0F3F5
Agency AzulActions · #00B9FF
Ready RoseAI · #DB2475
Ambition AmberCallouts · #FA901F

Professional x AI

A color story for how we see work

We pair 2 colors to represent the new way to work: professionals' judgment and direction accelerated by AI. Azul is the pro, while Rose is AI.

Palette usage

We use our colors to set the ground, direct action and organize information on every surface we publish.

Marketing features grid: white cards on Gallery Grey
Landing pages
Social video frame: sales slides above chart layouts
Video
Ad: customer portrait with time-saved and annual-value stat cards on Deepest Blue
Ads
Quick Tips tag in Agency Azul on a video thumbnail
Category tags
Update notification with an Ambition Amber alert icon
Product notifications
Generate presentation button in Ready Rose with a collaborator cursor
Call to actions

Color for type

We approve only the pairings that pass WCAG so that pros can set a slide without checking contrast.

Aa
Base Blue on WhiteAAA
Aa
Base Blue on Gallery GreyAAA
Aa
Base Blue on Agency AzulAAA
Aa
Agency Azul on Base BlueAAA
Aa
White on Base BlueAAA
Aa
Gallery Grey on Base BlueAAA
Aa
Neutral Lighter on Neutral DarkerAA
Aa
Azul Lighter on Azul DarkerAA
Aa
White on Rose DarkestAAA
Aa
Rose Lighter on Rose DarkestAAA
Aa
Rose Lighter on Rose DarkerAAA
Aa
Ready Rose on Rose DarkestAA (large)

AA large applies to type at 24px and above, or 18.66px bold and above.

Color misuses

Each of these breaks a contrast or ratio rule on this page.

Don't fill a slide with accents. We keep each accent to about 10% of a page.
You × AI
Don't set Agency Azul on Ready Rose. We show the pair side by side, never one on the other.
Don't blend all 3 accents. Default to Agency Azul and Ready Rose.
Get started
Don't set white type on Agency Azul or Ambition Amber. Make sure type on accents reaches at least 4.5:1.
Quarterly results
Don't set type without enough contrast. Body text needs at least 4.5:1 against its ground.
Don't use colors outside our palette.