Sermona

Voice & copy ​

For who uses what and how to talk about the system in tickets and reviews, start with Using Sermona. This page is the word-level craft: tone, labels, errors, and icons.

Sermona reads like a confident editor, not a chatbot. Sentences are short. Jargon is earned. The gold accent draws the eye — your words should tell people where to go next, not decorate the page.

Tone ​

  • Direct — Lead with the outcome; trim filler (“simply”, “just”, “very”).
  • Warm, not cute — Human without gimmicks; avoid fake familiarity.
  • Active verbs — Save, Publish, Connect beat Submit when accurate.
  • Specific — “Saved to Draft” beats “Success!”; say what happened.

Structure on the page ​

ElementRoleGuidance
KickerSection labelUppercase, few words, gold. Issue 02 · Release notes
LedePromiseOne or two lines; answers “why should I care?”
HeadingScan anchorNouns or short imperatives; avoid question titles unless FAQ
BodyProofShort paragraphs; one idea each
MetaContextDates, authors, counts — .sermona-meta treatment
  • Primary — Verb + object when space allows: Download report, Start trial.
  • Secondary / ghost — Learn more is acceptable if the heading already names the topic; otherwise Learn about {topic}.
  • Links in prose — Prefer descriptive text over click here.

Details, live demos, and an a11y checklist: Forms, buttons & CTAs.

Errors & empty states ​

  1. Say what broke in plain language (no error codes alone).
  2. Say what the user can do next.
  3. Offer one recovery path (retry, contact, link).

Bad: “Error 500”
Better: “We couldn’t load this issue. Refresh the page or try again in a minute.”

Lists in content ​

  • Short bullets — Parallel grammar; 3–7 items when possible.
  • With icons — One short line per item unless you’re in a feature pattern (title + supporting line). See Iconography.
  • Numbered — Use when order matters (steps, rankings).

Icons + words ​

Icons reinforce text; they rarely replace it unless the symbol is universal (play, close, search). Default pattern:

  1. Glyph carries recognition.
  2. Label carries meaning.
  3. Optional hint in meta style for pros.

Screen readers: aria-hidden="true" on decorative SVG; the visible label or aria-label on the control carries the name.

Do / don’t ​

Do

  • Front-load the user benefit.

  • Match label length to button width.

  • Reuse the same term for the same concept.

Avoid

  • Stacking synonyms for “easy” and “fast.”

  • Mystery icons with no adjacent label.

  • Apologizing in the headline (*Oops!*) without a fix.

See also ​