Brand guidelines
The OVOKY logo, icons, colors and type, and how to use them. Every value on this page is static and identical to the one the website uses.
Logo
Three colorways
The wordmark is five geometric glyphs. Keep clear space of 0.4 × the logo height on every side, and never show it narrower than 72 px.
Clear space
The shaded square is 0.4 × the logo height.
Don't
- Recolor the wordmark outside the three colorways
- Put the sky logo on white or light backgrounds
- Add shadows, outlines or gradients to the wordmark
- Stretch, rotate or rebuild the logo in a font
Color
Two mirrored families
Blue and green each run from a pale tint to a deep shade. Neutrals are tinted toward navy. Sky and mint are for dark backgrounds only.
Pink & plum (brand)
- #050003
Night
Hero, footer, 3D scene
- #1F0D25
Plum
Dark bands and cards
- #911D6E
Ribbon
Ribbons, deep pink fills
- #FF488B
Pink
Primary buttons, accents on dark
- #D6176A
Berry
Links, numbers, pink text on light
- #FF9EC9
Glow
Pink text on dark
- #FBE4EE
Blush
Chips, badges, quiet buttons
Neutrals (plum-tinted)
- #1C0D22
Ink
Body text, solid buttons
- #6A5870
Muted
Secondary text
- #E6D8E3
Line
Borders
- #F9F2F6
Paper 2
Section background
- #FDFBFC
Paper
Page background
Blue (product, supporting)
- #CCEEFF
Ice
Product mock-ups
- #33BBFF
Sky
Logo main colorway
- #006699
Ocean
Product mock-ups
- #004466
Navy
Product mock-ups
Green (product, supporting)
- #CCFFEE
Foam
Product mock-ups
- #33FFBB
Mint
Status in mock-ups
- #009966
Emerald
Status in mock-ups
Deep blue
#006699 → #004466
Deep green
#009966 → #006644
Wash
Hero and highlight backgrounds
Headline accent
Ocean → emerald on light
Typography
Google Sans
Google Sans for headlines and text, Google Sans Code for labels. Headlines in bold with tight tracking, always in sentence case.
Display · Google Sans Bold
Dial more, get flagged less
Section title · display-2
Answer every call properly
Body · Google Sans Regular 17 px
The record pops up before they say hello. Notes, callbacks, emails and texts all land on the same timeline.
Label · Google Sans Code SemiBold, uppercase
Predictive dialer · Live · 32 reports
Interface
Buttons and labels
Primary actions in navy, accent actions in mint with ink text, secondary actions outlined. One primary button per view.
- Ink on paper for body text; ocean for links (6.2:1)
- Emerald for icons and large text; forest for small green text
- Sky and mint only on navy or ink
Need something else for press or partners?
Write to us and we will send the files or the guidance you need.