# Permitted and not permitted

Sets the correct way to do something beside the mistake it prevents, in two tinted boxes.

* Kind: component
* Page: https://design.werklist.com/components/permitted
* Version: 2.1.2

## When to use it

* A mistake people have made before, or one that looks as plausible as the correct form.
* A guide or a set of instructions where the correct form is clearest beside the wrong one.

## When not to use it

* The same pair repeated under every heading.
* Mistakes with no correct form beside them.
* More than five items in a box.

## Rules

* Use a pair where people are likely to make the mistake.
* Each mistake has its correct form on the same row.
* The headings read Permitted and Not permitted, never Do and Don't.
* The correct side is never colored blue.

## Anatomy

* Boxes: two, side by side from 768 px and stacked below it, Permitted first
* Gap: 24 px (--gutter)
* Radius: 12 px (--radius-xl)
* Padding: 24 px (--space-6)
* Border: none
* Permitted fill: success at 10 percent over the surface (--tint-permitted)
* Not permitted fill: error at 10 percent over the surface (--tint-not-permitted)
* Icon: 24 px Check or Cross, stroke 1.75, 8 px before the heading (--success-ink)
* Heading: Permitted or Not permitted, 20 px on 28 px, weight 500 (--text)
* Item: 16 px on 26 px (--text)
* Reason: 14 px on 22 px (--text-label)
* Spacing: 16 px between items and from the heading to the first item (--space-4)

## Accessibility

* Each box is a section with its own heading. Its items are a list without bullets.
* Icons are hidden from screen readers. The heading says which box is which.
* Text on the tints never takes the muted ink.
* In print and in forced colors mode the fills drop, and the words and icons remain.

## Content

* One sentence per item. A reason only when it is not obvious.
* Not permitted items say what goes wrong.
* Headings are exactly Permitted and Not permitted.
* Items that correspond sit on the same row.

## Tokens

* --tint-permitted
* --tint-not-permitted
* --success-ink
* --error-ink
* --text
* --text-label
* --radius-xl
* --space-4
* --space-6
* --gutter