Brand

Everything here is the real thing, not a picture of it. The specimens below are the same files and the same CSS the site runs on.

If you host somebody's Buzz me button, this page is what you need. Take the mark, take the colors, take the button, and put them on your page without asking anyone.

The mark

The name is the address and the button all at once, so the wordmark is always written out in full. There is no short form, no monogram, and no version without .me.

On dark

On light

One file does both: logo.svg is filled with currentColor, so it takes the color of the text around it. Place it with a CSS mask rather than an img tag, because an image cannot inherit color and would stay black on a dark background. 

<span class="buzzzz-logo" role="img" aria-label="buzzzz.me"></span>

.buzzzz-logo {
  display: block;
  width: 112px;          /* the mark is 5.09 : 1, height follows */
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url(https://buzzzz.me/logo.svg) no-repeat center / contain;
  mask: url(https://buzzzz.me/logo.svg) no-repeat center / contain;
}

Do

  • keep clear space around it equal to the height of the letter b;
  • let it inherit the text color, one color only;
  • keep it at least 90 pixels wide, below that the strokes close up;
  • put it in the header, where a name belongs.

Don't

  • type the address with hyphens: the logo reads buzz-z-z, the domain is buzzzz.me;
  • recolor parts of it, outline it, or add a shadow;
  • stretch it: the proportion is fixed;
  • bake it into a pill or a badge, the page decides the shape;
  • put it on a button. Buttons carry a verb, not a name.

Colors

Written in oklch because the ramps stay even that way. Night is the ground, amber is the only thing that asks to be pressed, sand is the text.

Night

night 950oklch(16% 0.025 260)
night 900oklch(21% 0.03 260)
night 800oklch(27% 0.028 258)
night 700oklch(35% 0.025 258)

Amber, the only accent

amber 700oklch(50% 0.18 55)
hover
amber 600oklch(56% 0.18 58)
the button
amber 500oklch(64% 0.19 58)
marks, accents
amber 400oklch(73% 0.17 63)
links
amber 300oklch(81% 0.14 68)

Text and paper

sand 50oklch(97% 0.008 76)
headings
ink 100oklch(89% 0.008 60)
body
ink 200oklch(79% 0.01 58)
ink 600oklch(43% 0.015 55)
quiet

States, not brand

Green means a call is connected and red means it failed. They belong to the interface and never to the identity: there is no green dot in the logo and no green in a heading.

live 500oklch(65% 0.17 150)
connected
dangeroklch(58% 0.2 25)

The button

This is the one people press, and it always says the same two words. Not "Contact", not "Request a call", not "Submit". Buzz me. The long form is Buzz me when you're free.

The label is white, and that is why the fill is amber 600 rather than 500. White on the lighter orange measures 3.5 against a 4.5 minimum; on this one it measures 4.9. Hover goes darker for the same reason: lightening the button would dim its own label at the moment somebody is looking at it.

Primary, on your page

Buzz me Buzz me See how it works 
<a href="https://buzzzz.me/sarah" class="buzzzz-btn">Buzz me</a>

.buzzzz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border: none;
  border-radius: 999px;
  background: oklch(56% 0.18 58);
  color: #fff;
  font: 700 16px/1 Manrope, system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 24px oklch(56% 0.18 58 / 0.38);
  transition: background 200ms ease, transform 200ms ease;
}
.buzzzz-btn:hover  { background: oklch(50% 0.18 55); }
.buzzzz-btn:active { transform: scale(0.97); }

Under the button, on the page where someone leaves a number, one line has to be there: Your number stays with us. [Name] never sees it. That sentence is the reason people press the button, so it is not decoration and it does not get cut for space.

Type

Words

It reads like a neighbour who worked it out, not a consultant who is selling.

Say

  • free, window, we'll connect you;
  • Host and Guest for the two sides;
  • plain facts and real numbers.

Never

  • lead, availability, matching engine, dispatch, funnel;
  • countdowns, "only 2 spots left", any manufactured hurry;
  • promises of speed, that is callback-widget language;
  • dashes and em-dashes, in any language.

Using this

Take it. If you are a host, the mark and the button are yours to place wherever people find you. What we ask is narrow: don't redraw the mark, don't rename the button, and don't imply that buzzzz.me endorses something it hasn't seen. Questions go to info@buzzzz.me.