Logo Misuse

Illustrate incorrect logo treatments with numbered rules and explanatory notes.

<LogoMisuse
  cols={2}
  items={[
    {
      effect: "stretch",
      title: "Do not stretch",
      note: "Keep the original proportions.",
    },
    {
      effect: "rotate",
      title: "Do not rotate",
      note: "Keep the artwork upright.",
    },
  ]}
/>

Usage

Pass at least one misuse rule. The effect creates the visual mistake; the title and note explain what readers should do instead. The artwork comes from Logos.

<LogoMisuse
  items={[
    {
      effect: "stretch",
      title: "Do not stretch",
      note: "Keep the original proportions.",
    },
  ]}
/>

Examples

Pair each mistake with a rule

Add entries in the order you want readers to encounter them. The opening preview pairs stretching and rotation in a two-column grid.

<LogoMisuse
  cols={2}
  items={[
    {
      effect: "stretch",
      title: "Do not stretch",
      note: "Keep the original proportions.",
    },
    {
      effect: "rotate",
      title: "Do not rotate",
      note: "Keep the artwork upright.",
    },
  ]}
/>

Show legibility mistakes

Compare low-contrast, too-small, and obstruct to explain how a logo can become hard to recognize even when its shape remains intact. This group uses three columns on wider screens.

<LogoMisuse
  cols={3}
  items={[
    {
      effect: "low-contrast",
      title: "Keep enough contrast",
      note: "Choose an approved foreground and background pairing.",
    },
    {
      effect: "too-small",
      title: "Keep the logo legible",
      note: "Respect the published minimum size.",
    },
    {
      effect: "obstruct",
      title: "Keep the logo clear",
      note: "Keep other artwork outside the protected space.",
    },
  ]}
/>

Show unapproved treatments on the brandmark

The same effects work with mark="brandmark". This group demonstrates recolor, outline, shadow, and pattern in two columns. Together with the opening preview and legibility group, it covers every preset effect.

<LogoMisuse
  mark="brandmark"
  cols={2}
  items={[
    {
      effect: "recolor",
      title: "Do not recolor",
      note: "Use approved colorways.",
    },
    {
      effect: "outline",
      title: "Do not outline",
      note: "Use the original filled artwork.",
    },
    {
      effect: "shadow",
      title: "Do not add shadows",
      note: "Keep the artwork free of added effects.",
    },
    {
      effect: "pattern",
      title: "Avoid busy backgrounds",
      note: "Use a clear approved background.",
    },
  ]}
/>

Effects and layout

MisuseEffect accepts "stretch", "recolor", "low-contrast", "too-small", "obstruct", "rotate", "outline", "shadow", and "pattern". These are preset visual treatments, not measurements or validators for uploaded artwork.

Items are numbered automatically from one in array order. cols applies from 48rem up; narrower viewports always use two columns. An empty items array renders an empty grid.

API reference