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: a coloured icon, a short rule title, and one or two sentences of context. Pair them in a 3-column grid to present a set of rules together.
Anatomy
.card.dont-card
.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 |
| 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
Use a 3-column grid (.grid.cols-3.gap-m) when presenting a set of rules together. 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>
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 3-column grid for sets of 6+ rules; a 2-column grid is fine for 3–4
- 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