Skip to content

Content ​

Tone: formal, business-like, tight, unambiguous. The UI states facts and next steps; it does not chat, apologise or cheer. Vibe: an instrument, not a companion.

Voice ​

  • Address the user as you only where an action is theirs ("Assign owners"). The system never says I.
  • Data lines are impersonal and name the source when it is known: "Imported from Sqrl ABM", "Imported from CSV".
  • Sentence case everywhere. The only uppercase is micro-caps for section headers and table columns.
  • Emoji: never. Meaning is carried by Bootstrap Icons and colour — never colour alone (Iconography, Colors, badges).

Buttons ​

Verb + object: "Assign owners", "Save changes", "Import prospects", "Delete contact". Create actions may use New or Add + entity: "New contact", "Add contact". Not "Submit", "OK", or "Click here". Destructive buttons name the object.

Add a Bootstrap Icon when it makes the action obvious at a glance — for example plus on create/add and trash on delete. Icon before the label; keep the text unless the control is icon-only (Iconography, Buttons).

Labels ​

Field and control labels are nouns, sentence case, no colon: "Company name", "Due date", "Owner". Placeholder and helper text follow the same tone — impersonal where it is system data, not instructions disguised as labels.

Form layout and validation copy: Forms.

Errors and confirmations ​

Inline alerts (Feedback) use three copy shapes:

  • Success — past-tense outcome, often impersonal: what happened and from where ("18 prospects imported from CSV.").
  • Warning — fact in the semibold line, impact or next step in smaller body text; when the user can fix it in place, one btn-secondary on the alert ("Assign owners").
  • Danger — what blocks progress and what to do next, in one or two short sentences ("Assign an owner before activating this step."). Transient save/create confirmations use toasts instead: past tense, no full stop — "Contact created", "Changes saved".
18 prospects imported from CSV.
12 prospects are missing an owner
Unassigned prospects are not included in flow automation.

Never "Something went wrong". Validation and forms: Forms, Feedback.

Numbers and dates ​

Counts and money are always numerals with tabular figures: 412 contacts, € 482K, 31%. Dutch thousand separators (18.400) since the data is Dutch; the € sign is spaced from the number.

Dates use Manrope (same as body), not monospace. Format 12 Mar 2026; append time for activities: 12 Mar 2026, 14:20. Relative words only for the near horizon: "Today", "Tomorrow". In tables, right-align with sq-cell--date (Table).

Abbreviations are allowed for people in dense tables ("M. de Groot") and expanded in headers and panels ("Marieke de Groot").

Rules ​

  • UI copy is English; numeric formatting follows Dutch conventions where data is Dutch.
  • Sentence case; micro-caps only for section headers and table columns.
  • Buttons: verb + object; New / Add + entity for create; destructive buttons name the object; icons when they clarify (plus, trash, …) with label kept.
  • Labels: nouns, no colon.
  • Errors: specific and actionable; confirmations: short past tense.
  • No emoji, "Submit", "OK", "Click here", or generic "Something went wrong".
  • Icons + colour carry meaning together — see Iconography and Colors.