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-secondaryon 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.
Assign an owner before activating this step.
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.