Do and don’t
StableA do / don’t pair: two cards side by side with a short note each, told apart by icon, word and a dashed edge.
For guidelines that are easier to see than to describe: the right way and the wrong way to do one thing. The pair stays two columns even on a phone, so the comparison is never split. The icon guidelines and the logo’s misuse rules are built with it.
Updated View source
One pair
import { DoDont } from '@rchursin/product/iconset/parts'import { Chip } from '@rchursin/product/ui'
/** One rule, shown twice. The verdicts differ by icon, word and a dashed edge, never by colour. */export default function DoDontPair() { return ( <div className="w-full max-w-md"> <DoDont title="Show state with a shape and a word" good={ <span className="flex flex-wrap justify-center gap-2"> <Chip variant="solid" icon="play"> Running </Chip> <Chip variant="dashed" icon="pause"> Paused </Chip> </span> } bad={ <span className="flex gap-3"> <span className="size-3 rounded-full bg-fg" /> <span className="size-3 rounded-full bg-fg-3" /> </span> } goodNote="Solid and dashed, each with its name." badNote="Don’t ask people to tell two greys apart." /> </div> )}Usage
import { DoDont } from '@rchursin/product/iconset/parts'<DoDont title="Write in sentence case" good={<span>Create task</span>} bad={<span>CREATE A NEW TASK</span>} goodNote="A verb first, one capital." badNote="Don’t shout."/>Examples
Several pairs
Side by side from 1024 pixels, stacked below.
import { DoDont } from '@rchursin/product/iconset/parts'
const costs = ['$0.92', '$3.20', '$11.40']
/** Pairs sit side by side on wide screens and stack on narrow ones; each pair stays two columns. */export default function DoDontGrid() { return ( <div className="grid w-full grid-cols-1 gap-x-6 gap-y-10 lg:grid-cols-2"> <DoDont title="Line the numbers up" good={ <span className="flex flex-col items-end text-[13px] tabular-nums"> {costs.map((c) => ( <span key={c}>{c}</span> ))} </span> } bad={ <span className="flex flex-col items-start text-[13px]"> {costs.map((c) => ( <span key={c}>{c}</span> ))} </span> } goodNote="Right-aligned, tabular figures." badNote="Don’t left-align amounts in proportional digits." /> <DoDont title="Write in sentence case" good={<span className="text-[13px] font-medium">Create task</span>} bad={<span className="text-[13px] font-medium">CREATE A NEW TASK</span>} goodNote="Short, a verb first, one capital." badNote="Don’t shout, or capitalise Every Word." /> </div> )}API
DoDont props
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | – | The rule, as the figure’s caption. |
goodrequired | ReactNode | – | The right way, drawn in the first card. |
badrequired | ReactNode | – | The wrong way, drawn in the second card. |
goodNoterequired | string | – | One line under the “Do” card. |
badNoterequired | string | – | One line under the “Don’t” card, starting with “Don’t”. |
Accessibility
- A <figure> named by its <figcaption> (the title). Each card says “Do” or “Don’t” in words; the check and cross icons are decorative.
- The cards’ content is read as it is. If the bad example is only a picture (two grey dots), the note must say what is wrong with it.
- Anything interactive inside becomes a real Tab stop that does nothing useful; draw illustrations with plain elements instead of live buttons.
Guidelines
Do
- Change one thing between the two cards.
- Start the bad note with “Don’t”.
Don’t
- Don’t use colour (green and red) to mark the verdict; the word does it.
- Don’t pack two rules into one pair.
In use
Related
- Rules listA numbered grid of short principles (01, 02, 03), each a title and one or two lines.
- LogoThe 09 Frame mark and the RChursin_ wordmark in four lockups, drawn as one SVG that takes the text colour.
- Icon guidelinesHow the icons are built, how status and priority are drawn, how to use icons, and how the set ships, as live sections.
- SpecimenOne part on a quiet raised card. Specimen captions it underneath; Figure titles it on top.
Source
The component’s own files, exactly as they run on this site.
/** * Small pieces shared by the icon page's sections: a captioned figure card, a copyable code * block, and a do / don't pair. */import { useRef, type CSSProperties, type ReactNode } from "react"import { cx } from "../../components/cx"import { Icon } from "../icons/Icon"import { IconButton } from "../ui/button"import { CopyFallback, useCopy } from "./copy"
/** A card with a mono label, a title and a short note above its content */export function Figure({ label, title, note, children, className, style,}: { label: string