Brand · the mark

Motif, drawn once

A rounded square holding four dots: the diagonal pair at full strength, the off-diagonal pair at 55%, running along a violet-indigo-cyan gradient. It is drawn in the header component and redrawn on this page from the same geometry — a harness check compares the coordinates in both files, because a logo that exists in two versions is a logo that will drift.

Sizes

The dots are 6 units in a 32-unit box, so at 24px they are 4.5px and start to blur. That is the floor for the full mark; under it, use the frame alone or the wordmark.

16px

24px

32px

48px

64px

96px

Single-colour renderings, for print and for anywhere the gradient would fight the background — same geometry, one paint. The dim tone is what a disabled or decorative use looks like; neither is a second logo.

Clear space

Minimum clear space is one dot — 6 units, 18.75% of the mark — on every side. The dashed box below is that boundary at 96px — a number a designer can measure rather than eyeball.

18px of clear space at 96px

Wordmark pairing

The wordmark is set in the display face, weight 800, tracking slightly tight — the same treatment the header uses for navigation. The mark sits 10px from the wordmark at 28px, vertically centred on the x-height rather than the box.

Motif UI

Sentence case, never all caps. “Motif UI” is the full name; “Motif” alone is fine in body copy once the first mention has been spelled out.

Misuse

Five things the mark must never do, rendered rather than described — a rule with a picture next to it is a rule people follow.

Stretched

A squashed mark reads as a mistake at 16px, which is most of the places it appears.

Rotated

The rounded square is a container; tilting it turns a frame into a sticker.

Recoloured

The gradient is the identity. Pick one stop for a single-colour use instead of inventing a new hue.

Shadowed

A drop shadow implies depth the mark does not have; on a dark ground it just looks dirty.

M..

Re-typed

The dots are geometry, not punctuation — · · and .. are different marks.

The source, verbatim

Copy this rather than redrawing the mark: the geometry is the identity.

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" aria-hidden>
  <defs>
    <linearGradient id="logo" x1="0" y1="0" x2="32" y2="32">
      <stop stopColor="#8b5cf6" />
      <stop offset="0.55" stopColor="#6366f1" />
      <stop offset="1" stopColor="#22d3ee" />
    </linearGradient>
  </defs>
  <rect x="1.5" y="1.5" width="29" height="29" rx="9" stroke="url(#logo)" strokeWidth="2" />
  <rect x="7" y="7" width="6" height="6" rx="2" fill="url(#logo)" />
  <rect x="19" y="7" width="6" height="6" rx="2" fill="url(#logo)" opacity="0.55" />
  <rect x="7" y="19" width="6" height="6" rx="2" fill="url(#logo)" opacity="0.55" />
  <rect x="19" y="19" width="6" height="6" rx="2" fill="url(#logo)" />
</svg>

one dot = 6×6 units = the clear-space unit; the header's copy lives in src/components/chrome.tsx

Related: the voice guide, the proof shelf and the optional watermark.