StudioMark

A studio's face at the top of its booking page, a 48px tile: its logo, or without one the first letter of its name, 32px, in leaf glass on the leaf wash — the landing pillars' see-through tubes, rocking a little. Before there's a name, a quiet tile holds the logo's place.

Playground

StudioMark

Three states

No name yet: the logo's place, held. A name: its first letter. A logo: the logo, filling the tile.

The letters

Okami's own monoline capitals, on the icons' 24px grid. Accents drop (Š is S) and whatever comes before the first letter is skipped (“#1 Barber” is B).

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z

API reference

PropTypeDefaultDescription
namestring | null—The studio's name; its first letter A–Z is drawn. Nothing to draw holds the logo's place.
logostring | null—The logo's URL. When given, it's shown instead.
size"md" | "header" | "sm" | "xs""md"A 48px tile (a page's hero); 36px for a header, as big as an icon button beside it (40px on a touch screen); 28px (the studio menu); 24px (a sidebar).
tone"glass" | "plain""glass"Leaf glass, rocking — a booking page. Plain is the letter in ink on a light gray tile, still: the app's own chrome, the header's studio menu.
classNamestring—Layout only, on the tile.

Guidelines

  • It's decoration: put the studio's name beside it. The mark itself is hidden from screen readers.
  • Leaf where clients see it: on a booking page every studio's letter is the brand's green, so the page reads as Okami's until it has a logo of its own. In the app's chrome it's plain, so the header stays quiet.
  • Glass is one WebGL canvas per mark; for many letters at once, put them in one GlassIcons, as the alphabet above does.