Spoy brand guidelines

Logotype at every size

For light and dark backgrounds

Isotype

• Ink55%

  HEX

  #0B0B0A

  RGB

  11, 11, 10

  CMYK

  0, 0, 9, 96

  OKLCH

  14.9% 0.002 107

  The ground for everything: pages, the portal and every email.

• Surface20%

  HEX

  #111110

  RGB

  17, 17, 16

  CMYK

  0, 0, 6, 93

  OKLCH

  17.7% 0.002 107

  Panels and cards that sit on Ink.

• Paper15%

  HEX

  #F5F4EE

  RGB

  245, 244, 238

  CMYK

  0, 0, 3, 4

  OKLCH

  96.6% 0.008 99

  Text and marks on dark grounds, and the light ground when one is needed.

• Stone5%

  HEX

  #AAA9A1

  RGB

  170, 169, 161

  CMYK

  0, 1, 5, 33

  OKLCH

  73.3% 0.011 101

  Secondary text: leads, labels and captions.

• Signal5%

  HEX

  #FFDE21

  RGB

  255, 222, 33

  CMYK

  0, 13, 87, 0

  OKLCH

  90.1% 0.181 98

  One lit thing per screen: the main action or the current layer. Never body text.

• Amber

  HEX

  #FFB802

  RGB

  255, 184, 2

  CMYK

  0, 28, 99, 0

  OKLCH

  82.7% 0.171 80

  Signal on light grounds, where the yellow would fade: the chevron and highlights.

Colour proportions

How much of each colour a typical layout uses.

Readable combinations

Every pair of colours as text on a background, graded against WCAG 2.2. AA is the minimum for body text; AA large covers 24px and up.

• Paper on Ink17.9:1AAA
• Paper on Surface17.1:1AAA
• Signal on Ink14.7:1AAA
• Signal on Surface14.1:1AAA
• Amber on Ink11.4:1AAA
• Amber on Surface10.9:1AAA
• Stone on Ink8.3:1AAA
• Stone on Surface8.0:1AAA
• Paper on Stone2.1:1Fail
• Signal on Stone1.8:1Fail
• Paper on Amber1.6:1Fail
• Amber on Stone1.4:1Fail
• Signal on Amber1.3:1Fail
• Paper on Signal1.2:1Fail

• Aa

  Geist

  Headlines and text

  Headlines and working text. Tight tracking at display sizes, normal tracking for reading.

  Weights 400 · 500 · 600Get the font

• Aa

  Geist Mono

  Labels, numbers and code

  Labels, figures and code, set in capitals with open tracking for tags.

  Weights 500Get the font

Previews use the font when it is installed or available on the web.

• Say what happens

  Name the action and its result. A button says what it does; the message after it uses the same word.

  Say

  • Your call is booked.
  • Saving it emails an updated invitation.

  Avoid

  • Awesome, you’re all set! 🎉
  • Your changes will be propagated.

• Show the work, not adjectives

  A concrete detail does more than a claim about quality.

  Say

  • One studio from the first conversation to the production release.
  • Proof of delivery with photos and signature.

  Avoid

  • World-class, cutting-edge digital solutions.
  • A seamless end-to-end experience.

• Respect the reader’s time

  Lead with what they need, ask for one thing at a time, and give a date when there is one.

  Say

  • We need the depot addresses by Friday.
  • Share the context first. Nothing is sent until you review it.

  Avoid

  • Just circling back to touch base on the addresses.
  • Let’s hop on a quick call to align.

• One voice in every language

  Formal Bulgarian with вие (capitalised in letters), plain English, and Spanish with tú. The same facts in each.

  Say

  • Какво чакаме от вас
  • Elige otro horario que te venga bien.

  Avoid

  • Чакаме те!
  • Machine translation left as it came out.

• 

  Email header The header of every transactional email: the landing’s light, the lit layer and the wordmark.

Isotype

• PNG

  Ink

• PNG

  Surface

• PNG

  Paper

• PNG

  Stone

• PNG

  Signal

• PNG

  Amber

Logotype

• PNG

  Ink

• PNG

  Surface

• PNG

  Paper

• PNG

  Stone

• PNG

  Signal

• PNG

  Amber

Profile pictures

• PNG

  Ink

• PNG

  Surface

• PNG

  Paper

• PNG

  Stone

• PNG

  Signal

• PNG

  Amber

Favicons and app icons

• Favicon SVGfavicon.svg

• Favicon PNGfavicon-32.png

• Favicon ICOfavicon.ico

• Apple iconapple-touch-icon.png

• PWA iconicon-192.png

• PWA icon, largeicon-512.png

:root {
  --color-ink: #0b0b0a; /* oklch(14.9% 0.002 107) */
  --color-surface: #111110; /* oklch(17.7% 0.002 107) */
  --color-paper: #f5f4ee; /* oklch(96.6% 0.008 99) */
  --color-stone: #aaa9a1; /* oklch(73.3% 0.011 101) */
  --color-signal: #ffde21; /* oklch(90.1% 0.181 98) */
  --color-amber: #ffb802; /* oklch(82.7% 0.171 80) */
  --font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --text-display: 3.05rem; /* 48.8px */
  --text-h1: 2.444rem; /* 39.1px */
  --text-h2: 1.956rem; /* 31.3px */
  --text-h3: 1.563rem; /* 25px */
  --text-lead: 1.25rem; /* 20px */
  --text-body: 1rem; /* 16px */
  --text-small: 0.8rem; /* 12.8px */
}