Do's and Don'ts

How the tool renders it#

When you upload a DESIGN.md that contains a ## Do's and Don'ts section (or any accepted alias), the tool parses the Markdown body of that section and separates each bullet-list item into one of two buckets:

• Do column (green): items whose text starts with Do (case-insensitive), excluding "don't" / "do not" patterns, or the German verwende.
• Don't column (red): items whose text starts with Don't, Dont, Do not, or the German vermeide.

The leading verb is stripped automatically and the first remaining letter is uppercased. So:

- Do use the primary color only for the single most important action per screen.
- Don't mix rounded and sharp corners in the same view.

...renders as two cards: "Use the primary color only for the single most important action per screen." under Do, and "Mix rounded and sharp corners in the same view." under Don't.

If the section contains no classifiable items, the tool falls back to the generic Markdown renderer and displays the prose as-is. No content is lost.

Accepted heading aliases#

The engine maps all of the following headings to the dos-donts section kind:

• ## Do's and Don'ts (canonical)
• ## Dos and Donts

German equivalents: ## Do's und Don'ts, ## Regeln

Writing effective rules#

Each bullet item must begin with a recognized verb so the tool can classify it. Recommended patterns:

Items that do not start with one of these leads are silently skipped. They will not appear in either column. If your rules use another phrasing (e.g., "Always ...", "Never ..."), wrap them in a Do/Don't lead or they will be dropped.

Emphasis markers (**bold**, *italic*) inside a bullet item are stripped before classification and display. You can use them in your source for readability without affecting the rendered columns.

Full DESIGN.md example#

---
name: Brand Voice
---

## Do's and Don'ts

- Do use the primary color only for the single most important action per screen.
- Do maintain WCAG AA contrast ratios (4.5:1 minimum for normal text).
- Do use the `body-md` typography token for all long-form reading.
- Don't mix rounded and sharp corners within the same view.
- Don't use more than two typefaces on a single screen.
- Don't apply drop shadows to flat-design surfaces; use tonal separation instead.
- Do align all interactive elements to the 8px grid.
- Don't use the tertiary accent color for more than 10% of the visual surface area.

This renders as:

Do column

• Use the primary color only for the single most important action per screen.
• Maintain WCAG AA contrast ratios (4.5:1 minimum for normal text).
• Use the body-md typography token for all long-form reading.
• Align all interactive elements to the 8px grid.

Don't column

• Mix rounded and sharp corners within the same view.
• Use more than two typefaces on a single screen.
• Apply drop shadows to flat-design surfaces; use tonal separation instead.
• Use the tertiary accent color for more than 10% of the visual surface area.

Tips#

• Write rules as imperative sentences: short, specific, and actionable.
• Pair each positive rule with a corresponding negative rule where possible.
• Rules do not need to reference token names, but doing so makes them machine-actionable (e.g., agents can verify the rule against the token definitions).
• There is no enforced limit on the number of rules, but 5-12 items per column keeps the section scannable.

Try it in the tool