Accessibility
The floor under every sheet in this guide. Rook aims for WCAG 2.2 AA: text people can read, states they can tell apart without color, and controls they can reach with a keyboard.
Contrast
Real pairs from the palette, measured with the WCAG 2 formula. Body text needs 4.5:1; large text (24px, or 19px bold) and non-text marks need 3:1.
| Sample | Pair | Ratio | Allowed for | Use |
|---|---|---|---|---|
| Ink on white | 18.9:1 | Any text | Body, headings, controls. | |
| Graphite on white | 6.0:1 | Any text | Ledes, descriptions, secondary text. | |
| Graphite on vellum | 5.6:1 | Any text | Secondary text on vellum fills. | |
| Pencil on white | 3.1:1 | Large text and marks | Field borders, icons, meta at 12px or more. Never body text. | |
| Cyan on white | 6.6:1 | Any text | Links, focus rings, the current location. | |
| Cyan on cyan wash | 5.8:1 | Any text | The active row in a rail or tab bar. | |
| Approved on wash | 4.6:1 | Any text | Approved badges. Just clears 4.5:1; keep it at 12px semibold or larger. | |
| In flight on wash | 5.2:1 | Any text | Classifying and importing badges. | |
| Failed on wash | 5.7:1 | Any text | Failed badges and inline errors. | |
| White on ink | 18.9:1 | Any text | Primary buttons; 14.2:1 on the hover fill. | |
| Rule on white | 1.2:1 | Decoration only | Hairlines between rows. Never the only edge of a control. |
Never color alone
About one man in twelve can’t tell green from red, and printed sheets are often gray. Every state pairs its hue with a dot and a word.
- Beam to column connection
- Moment frame base plate
- Brace gusset, typical
Don’t · hue alone
Green and red dots look the same to many readers.
- Beam to column connectionApproved
- Moment frame base plateClassifying
- Brace gusset, typicalFailed
Do · hue, dot and word
The word carries the meaning; hue and dot help scanning.
- Beam to column connectionApproved
- Moment frame base plateClassifying
- Brace gusset, typicalFailed
Check · print it gray
In grayscale the words still tell the three states apart.
Focus
Every control shows where the keyboard is. Fields take a cyan border and a soft ring; everything else takes a 2px cyan outline, offset 2px. Never remove the outline without a replacement.
Type size
No essential text under 12px. Body copy is 16px and controls 14px; 12px is the floor, kept for uppercase labels and metadata.
| Size | Role | Sample | Status |
|---|---|---|---|
| 40 / 48 | Page title | Logo & mascot | Headings |
| 22 / 32 | Section title | Clear space & minimum size | Headings |
| 16 / 24 | Body | Send from Revit adds the detail to your library. | Any text |
| 14 / 24 | Controls, tables | Beam to column connection · S-600 | Any text |
| 12 / 16 | Labels, meta | On this page | Floor · labels only |
| 11 / 16 | Too small | Updated 12 min ago by an organization admin | Never |
Motion
Motion explains a change of place, never decorates it. When the system asks for reduced motion, slides and rises become fades or instant changes.
| Movement | Default | With reduced motion |
|---|---|---|
| Hover and press | Color · 140 ms ease | Unchanged. A color change is not movement. |
| Menus, popovers, the command palette | Fade and a small rise · 180 ms | Fade only. |
| Sheets and dialogs | Slide or scale · 200–280 ms | Appear in place with a short fade. Focus still moves into the panel. |
| Cards entering a page | Rise · 420 ms ease-out | None. Content is there when the page is. |
| Smooth scrolling | Eased scroll on long pages | Native scrolling. No scroll-linked effects. |
Alt text
Describe what the image tells the reader, not what it looks like. Decorative images get empty alt text so screen readers skip them.
| Image | Alt text | Why |
|---|---|---|
| Detail drawing preview | “Beam to column connection, S-600, 3" = 1'-0"” | The drawing is the content. Name it as the sheet does. |
| Release notes screenshot | “Wind loads dialog with ASCE 7-22 selected” | Say what changed, not every pixel on screen. |
| Rook mark linking home | “Rook home”, or empty beside the word Rook | Describe the link’s destination. Don’t repeat visible text. |
| The dog | alt="" (empty) | Decoration. The heading and copy beside it carry the message. |