Content2 of 2
Words on screen
The small words that do the work: names and titles, buttons and links, labels, status and slide headlines.
Names and titles
- One name per app, used everywhere: the top bar, the title, links from other apps.
- Page titles read "Page | App": "Color | Design System".
- The app's name in the top bar is its home link.
Recommended
Case
Sentence case for headings, buttons and menu items: "Start the deck here", not "Start The Deck Here". Labels too: small, gray, in the text face. Decided
Buttons and links
| Part | The rule | For example |
|---|---|---|
| Button | A verb for what it does. | Start · Reset · Send |
| Link | Names where it goes; never "click here". | Patterns › Navigation |
| Previous and next | Name the page they lead to. | Next · Color → |
| Leaving the site | ↗ after the link. | The design canvas ↗ |
| A menu | ▾ after its value. | Model: Llama 3.1 8B ▾ |
Recommended
Labels
Short noun phrases for metadata, in sentence case, small and gray: a figure's number and name, a table's columns, a field's name. A middle dot separates parts: "Fig. 1.1 · One step of the loop".
Status and errors
- Every status color travels with a word that works alone: Raw, Templated, Failed.
- An error says what happened and what happens next, in plain words: "The model is busy — trying again in 8…".
- Never blame the reader; never show a raw error code alone.
RawTemplatedFailed
Slide headlines
Every slide's headline is a full sentence, and the headlines alone tell the argument: "Viridis keeps its order in grayscale", not "Viridis". Decided