skip to content
menu
foundations · content & voice
foundations

content & voice

The words on a screen do as much work as its layout. They say what is true and what people can do about it, in the person's language, not the system's. So we keep them short, plain and true.

This page is about how the words sound. Where they come from, and what they leave out, is on meaningful text.

the voice

The system speaks with two voices, and the typeface tells them apart.

  • Monospace is the system's voice, and it is lowercase. Titles and headings; buttons, tabs and navigation; statuses and badges; table and column headers; menu items, toolbar and filter labels; numbers and codes. It is short and easy to scan, and the lowercase is part of the identity, in every language. Names and codes inside it keep their own capitals: a series called “The Quiet Harbour” stays “The Quiet Harbour” in a group label, a language stays “German” in a button that reads “find German for 4 selected”, an episode stays “S04E07”, and an id stays as it is. The components lowercase this chrome, and only this, so a name inside a lowercase label, such as a button or a dialog title, is marked as a name and keeps its case.
  • The body face is the reader's language, and it follows that language's rules. It carries everything that explains: descriptions and subtitles; the messages in banners, toasts and dialogs; the descriptions of empty states; field labels, hints and errors; checkbox and switch labels; and the text of these guidelines. It is written in sentence case: a capital at the start of each sentence, for names, for “I”, for abbreviations such as HEVC, GB, WCAG, CSS or URL, and for German nouns. Nothing lowercases it.
  • Why two voices. The brand lives in the monospace layer, where text is short and set apart. Easy reading, and correct spelling in every language, live in the layer people actually read.
  • Short. A label is two or three words, a message one or two sentences. Leave out adverbs, “please” and “successfully”.
  • Plain. No emoji, no exclamation marks, no marketing words, and no jokes in error messages.
  • Direct. Speak to the reader (“pick a release”), say who does what when it matters (“the catalog holds them without an identity”), and use the active voice.
do

nothing missing

Every aired, monitored episode and movie is in the library.

A lowercase monospace title over a sentence-case description: each voice in its own typeface.
don't

nothing missing

every aired, monitored episode and movie is in the library.

The description lowercased like the title: text in the reader's typeface, spelled as if it were chrome.
do

Die Einstellungen gelten ab der nächsten Sicherung.

German in both voices: the sentence keeps Einstellungen and every other noun capitalised; the monospace button reads “einstellungen speichern”.
don't

die einstellungen gelten ab der nächsten sicherung.

The sentence lowercased as well: in German that misspells every noun, Einstellungen and Sicherung among them, and slows the reader down.
do
The language is a name, so it keeps its capital inside the lowercase button.
don't
The name lowercased with the rest of the label: “german” reads like a spelling mistake.

write what is true, then what to do

Most of what a screen says has one of five shapes. Each one says what is true first, and then what people can do.

part says for example
A status The state, in the object's own words “on its way”, “needs attention”, “connection firewalled”
Its detail Why, or what happens next “nothing found · again in 6h”, “the release was removed by its source”
A message What is true, and what it means “105 titles can't be checked: the catalog holds them without an identity.”
An action A verb and its object “ask the catalog again”, “grab 8 selected”, “clear filters”
An empty state What is true, why, and the way forward “no matches” · “Nothing in this list fits the search and filters.” · “clear filters”

primary text stays human

Ids, codes, raw errors and technical status codes help an operator fix things, so we keep them, just not in the sentence. A banner puts them under its “details”; a table puts them behind a details toggle on each row; a status cell shows a raw search error when the pointer rests on it.

The main text is what a person can act on without knowing how the system works inside.

buttons start with a verb

  • “save changes”, “grab 8 selected”, “ask the catalog again”, “pick a release”.
  • Name the object when the screen holds more than one kind of thing, and put the count in an action for several items.
  • Avoid “ok”, “submit”, “yes”, “click here” and “learn more”: say what will happen.
  • In a dialog, the confirming button repeats the verb of the title (“delete volume” confirms with “delete volume”), and the way out is “cancel”.

numbers and dates

  • Counts use a thousands separator: “2,500”, not “2500”. The components format their counts this way for you.
  • A date is said both ways, as a date and as how long ago: “12 oct 2026 · 5d ago”, as the date cell does.
  • “n of m” reads as shown of total: “100 of 2,500”.
  • Plurals agree with their number: “1 title”, “105 titles”; “8 episodes queued”, “1 movie queued”.

words that mean one thing

Some words come up on every screen. Each of them means one thing, everywhere.

use for not
“missing” Wanted and not held “absent”, “lacking”
“on its way” Queued, grabbed, downloading, or waiting to be listed “in progress” for things that aren't
“needs attention” Failed or blocked: a person has to act “error” on its own, “problem”
“can't be checked” The system can't know “unknown” with no reason
“held” In the library “done”
“Portuguese (Brazil)” A language with its region or script in brackets after it, so that the variants of a language sort together: “Chinese (Simplified)”, “English (New Zealand)” “Brazilian Portuguese”, “pt-BR”

Status vocabulary shows how a domain writes its own words.

do and don't

do
warning: 105 titles can't be checked: the catalog holds them without an identity.
What is true, in words, with the system's details one click away.
don't
warning: Holdings unknown for 105 titles — the catalog holds a title of this name without an identity (item 3f2a9c1e-5b7d-4c11-9e02-6a1d0b8f4c21)
The system's own sentence, with its long id, as the message.
do
A verb, its object and its count.
don't
A label that hides what will happen.
do

no matches

Nothing in this list fits the search and filters.

An empty state that says what is true and offers the way out.
don't
no data
A blank that could mean anything: loading, empty or broken.
do
on its way
The status in the object's own words, one per object.
don't
GRABBED_PENDING_IMPORT
The system's internal name for the state.
  • Meaningful text: where the words come from, what they leave out, and the checks before they ship.
  • Message handling: which component says what.
  • Empty states: the five kinds of empty, and their words.
  • Button: the labels on actions.
  • Principles: 3, people's words first, the system's detail one click away.
  • Typography: the two typefaces the voices are set in.

specs

  • Lowercase chrome. The components set text-transform: lowercase on their monospace chrome, and only there. The text in the DOM stays as written.
  • Names inside lowercase chrome. Wrap the name in KeepCase, or give its element the class nc-keep-case: find <KeepCase>German</KeepCase> for 4 selected. It sets text-transform: none on the name alone, in any label that takes elements: buttons, dialog and empty-state titles, tabs, menu items, toolbar headings and statuses.
  • Counts. formatCount(2500) returns “2,500”; it is the formatter the components use.
  • Dates. The DateCell writes a date both ways.
  • Details. A banner's details prop; a native <details> per table row; a raw search error kept in a status cell's hover text.