Index
How Rook looks, sounds and behaves, as a set of drawing sheets. Start with the four sheets below, then use the index to find the rest.
Start here
Four sheets cover most decisions. Read them in this order if you are new to Rook, or when you are not sure which sheet you need.
- 01 · B-101Voice & toneExact, plain, calm. How we write docs, release notes and errors.Read the sheet →
- 02 · F-201–F-204FoundationsThe mark and the dog, color, type, and the accessibility floor under all of it.Read the sheet →
- 03 · P-000Product UI overviewTokens, patterns and components for the Library, the Portal and the docs.Read the sheet →
- 04 · P-204Elevation & depthWhite means touchable. Edges, then shadows, one step at a time.Read the sheet →
Sheet index
Sixteen sheets in two guides. The brand guide covers what Rook is and how it speaks; the product UI guide covers what you build with.
| Sheet | Brand guide | What it covers | Group |
|---|---|---|---|
| G-000 | Index | Where to start, every sheet, and the two rules. | Rook |
| B-101 | Voice & tone | Attributes, tone by context, words, mechanics. | Brand identity |
| F-201 | Logo & mascot | Lockups, clear space, misuse, and where the dog appears. | Foundations |
| F-202 | Color | Drafting-room neutrals, one cyan accent, three state hues. | Foundations |
| F-203 | Typography | General Sans for headings, Asap for everything else. | Foundations |
| F-204 | Accessibility | Contrast, focus, type size, motion, alt text. | Foundations |
| A-401 | Web | The site, the docs, release notes and sign-in in practice. | Brand in action |
| Sheet | Product UI guide | What it covers | Group |
|---|---|---|---|
| P-000 | Overview | How the product UI guide is organized. | Product UI |
| P-201 | Color tokens | Semantic color tokens and where each one applies. | Primitives |
| P-202 | Type, size & spacing | Type roles, control sizes, the spacing scale. | Primitives |
| P-204 | Elevation & depth | Raised, recessed and overlay surfaces, edges and shadows. | Primitives |
| P-301 | UI patterns | Page headers, ruled lists, filters, empty states. | Patterns |
| C-501 | Button | Primary, secondary, ghost and destructive, with states. | Components |
| C-502 | Form controls | Inputs, selects, textareas, switches, segmented controls. | Components |
| C-503 | Content & overlays | Cards, badges, tables, menus, dialogs, sheets, lightbox. | Components |
| C-504 | Layout & data | Section headings, list rows, tabs, meters, avatars, downloads. | Components |
Two rules
Remember these two. Every other sheet follows from them.
Rule 1 · Color
One accent, hue only for state
Cyan marks links, where you are, and focus. Green, amber and red mean approved, in flight and failed, and nothing else. Everything else is ink on white.
Imported from Snowdon Towers Sample Structural
Rule 2 · Depth
Depth marks what you can touch
The page is white and so are controls, so an edge does the work. Buttons and cards rest on the page, fields sit a hair below it, and only overlays float.