Permitted and not permitted

Two boxes set the correct way to do something beside the mistake it prevents. Use them in a guide or a set of instructions, where people are likely to make that mistake.

What it is

Permitted

A label that states the positive: Notify the candidate.
Checked means yes, so the answer takes one step.

Not permitted

A label that makes checked mean no: Do not notify the candidate.
Whoever fills in the form has to undo a negative before answering.

Permitted

A label that states the positive: Notify the candidate.
Checked means yes, so the answer takes one step.

Not permitted

A label that makes checked mean no: Do not notify the candidate.
Whoever fills in the form has to undo a negative before answering.

When to use a pair

Add a pair when a mistake is likely: people have made it before, or the wrong form looks as plausible as the right one. Repeated under every heading, the boxes stop being read.

Each item in Not permitted names a mistake someone could make on their own, and each has its correct form in Permitted, on the same row. A list of mistakes with nothing correct beside it says what to avoid and leaves the reader to guess what to write.

Anatomy

Permitted comes first, on the left. Each box carries one icon beside its heading, and the items below it carry no bullets. Below 768 px the boxes stack, Permitted on top.

Permitted

A label that states the positive: Notify the candidate.
Checked means yes, so the answer takes one step.
A button that names its action: Send offer.

Not permitted

A label that makes checked mean no: Do not notify the candidate.
Whoever fills in the form has to undo a negative before answering.
A button that says OK under an offer.
Nobody can tell what OK sends, or to whom.

Space between the boxes: 24 px; --gutter
Corner radius: 12 px; --radius-xl
Padding: 24 px; --space-6
Edge: none
Permitted fill: faint green; --tint-permitted
Not permitted fill: faint red; --tint-not-permitted
Icon: 24 px check or cross; --success-ink
Heading: 20 px on a 28 px line, weight 500; --text
Item: 16 px on a 26 px line; --text
Reason: 14 px on a 22 px line; --text-label
Space between items: 16 px; --space-4

Writing the items

Write each item as one sentence someone can check their own work against. Add a reason only when it is not obvious, in one more sentence.

An item in Not permitted says what goes wrong when the rule is broken. Keep each box to five items at most.

Keep the headings Permitted and Not permitted as they are. Do not rename them Do and Don't, and do not color the correct side blue.

Color and meaning

The green and red fills are faint, close to the surface around them. The heading and the shape of the icon say which box is which, so the pair reads the same in grayscale, on paper and for anyone who cannot tell red from green.

Permitted
- A label that states the positive: Notify the candidate.
Not permitted
- A label that makes checked mean no: Do not notify the candidate.
Color
Permitted
- A label that states the positive: Notify the candidate.
Not permitted
- A label that makes checked mean no: Do not notify the candidate.
Grayscale
Permitted
A label that states the positive: Notify the candidate.
Not permitted
A label that makes checked mean no: Do not notify the candidate.
Print

Accessibility

Each box is a section with its own heading, and its items are a list. The icons are hidden from screen readers, since the heading already says which box is which. Text on the fills never takes the muted ink.

NextStat tile

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

JSON

{
  "title": "Permitted and not permitted",
  "path": "/components/permitted",
  "url": "https://design.werklist.com/components/permitted",
  "text": "https://design.werklist.com/agent/components/permitted",
  "summary": "Sets the correct way to do something beside the mistake it prevents, in a faint green box and a faint red one.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Permitted and not permitted",
  "purpose": "Sets the correct way to do something beside the mistake it prevents, in two tinted boxes.",
  "use": [
    "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."
  ],
  "avoid": [
    "The same pair repeated under every heading.",
    "Mistakes with no correct form beside them.",
    "More than five items in a box."
  ],
  "anatomy": [
    {
      "part": "Boxes",
      "measure": "two, side by side from 768 px and stacked below it, Permitted first"
    },
    {
      "part": "Gap",
      "measure": "24 px",
      "token": "--gutter"
    },
    {
      "part": "Radius",
      "measure": "12 px",
      "token": "--radius-xl"
    },
    {
      "part": "Padding",
      "measure": "24 px",
      "token": "--space-6"
    },
    {
      "part": "Border",
      "measure": "none"
    },
    {
      "part": "Permitted fill",
      "measure": "success at 10 percent over the surface",
      "token": "--tint-permitted"
    },
    {
      "part": "Not permitted fill",
      "measure": "error at 10 percent over the surface",
      "token": "--tint-not-permitted"
    },
    {
      "part": "Icon",
      "measure": "24 px Check or Cross, stroke 1.75, 8 px before the heading",
      "token": "--success-ink"
    },
    {
      "part": "Heading",
      "measure": "Permitted or Not permitted, 20 px on 28 px, weight 500",
      "token": "--text"
    },
    {
      "part": "Item",
      "measure": "16 px on 26 px",
      "token": "--text"
    },
    {
      "part": "Reason",
      "measure": "14 px on 22 px",
      "token": "--text-label"
    },
    {
      "part": "Spacing",
      "measure": "16 px between items and from the heading to the first item",
      "token": "--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"
  ],
  "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."
  ]
}

Raw file: https://design.werklist.com/agent/components/permitted