Don't Card

The don't card extends the standard to communicate a non-negotiable rule, used in brand books and design-system pages to flag prohibited patterns ("don't recolour the logo", "don't break the grid", "don't override tokens"). It uses the --status-danger colour for the icon so the rule reads as a stop signal at a glance.

It is deliberately small: an optional example image, a coloured icon, a short rule title, and one or two sentences of context. Pair them in a grid to present a set of rules together.

Anatomy

.card.dont-card
  .dont-card-media         ← optional image of the failure (placeholder until it exists)
  .dont-card-icon          ← coloured (--status-danger) icon slot
    {{icon:close-circled}}
  .card-title              ← short rule
  .card-description        ← one-line context

Element	Class	Purpose
Wrapper	`.card.dont-card`	Standard card with vertical stack layout
Media		Optional `<img>` showing the failure the rule warns against
Icon slot		Coloured icon container, sized 2rem,
Rule title		Short imperative, "Don't recolour the logo"
Body		One-line reason or context

Single rule

<div class="card dont-card">
  <div class="dont-card-icon">{{icon:close-circled}}</div>
  <h4 class="card-title">Don't apply an outline</h4>
  <p class="card-description">The logotype is solid. Outlines, strokes, and hairline borders are not part of the system.</p>
</div>

Rules grid

Text-only rules sit in a 3-column grid (.grid.cols-3.gap-m). Each card sits in its own grid cell.

<div class="grid cols-3 gap-m">
  <div class="card dont-card">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't recolour the logotype</h4>
    <p class="card-description">The wordmark is monochrome, pure black or pure white only.</p>
  </div>
  <div class="card dont-card">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't stretch or distort</h4>
    <p class="card-description">Scale uniformly. Never squash, stretch, skew, or warp the proportions.</p>
  </div>
  <div class="card dont-card">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't apply at an angle</h4>
    <p class="card-description">Keep the logotype upright. No tilts, rotations, or "playful" angles.</p>
  </div>
</div>

Rules grid with examples

Rules with an example image use and a 2-column grid (.grid.cols-2.gap-m), so the image stays large enough to read. Touchpoint pages use this form; a placeholder from the image service holds the slot until the real example lands. Give the image width, height, and loading="lazy" so the page doesn't shift while it loads, and leave alt empty while the image is a placeholder.

<div class="grid cols-2 gap-m">
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't put text in the overlay zones</h4>
    <p class="card-description">The top and bottom of a Story belong to the platform UI.</p>
  </div>
  <div class="card dont-card">
    <img class="dont-card-media" src="/image/800x450" width="800" height="450" loading="lazy" alt="">
    <div class="dont-card-icon">{{icon:close-circled}}</div>
    <h4 class="card-title">Don't compose for the full 4:5</h4>
    <p class="card-description">The grid crops every preview to 3:4.</p>
  </div>
</div>

Icon choice

The default icon is close-circled (a circled X) because it reads as a clear stop signal across cultures and is already in the brand icon registry. If a more specific icon better describes the rule (e.g. palette for "don't recolour", crop for "don't crop"), substitute it. The icon slot accepts any brand icon. The colour is set on and inherits via currentColor.

Do / Don't

Do:

Use the don't card for non-negotiable rules in brand and design-system docs
Keep titles short and imperative: "Don't X", not "X should not be Y"
Use a 2-column grid when cards carry example images; a 3-column grid for text-only sets
Pair with a "Do" section in plain prose nearby so readers see both sides

Don't:

Don't use the don't card for soft preferences. Use a callout or plain text instead
Don't write more than two sentences in . If a rule needs that much explanation, it belongs in the surrounding prose
Don't substitute the danger colour for another status. The red is the visual signal that makes the pattern read as "stop"
Don't nest don't cards inside each other or inside callouts