Gesso

Voice

Copy is part of the design. Keep it precise and free of filler.

Writing

  • Use Title Case for labels, buttons, titles, and tabs; sentence case for body, helper text, and toasts.
  • Name actions with a verb and a noun (Deploy Project, Delete Member), never Confirm, OK, or a bare verb.
  • Write errors as what happened plus what to do next: Build failed. Bundle exceeds 50 MB. Reduce it or raise the limit.
  • Toasts name the specific thing that changed, drop the trailing period, and never say successfully: Project deleted, not Successfully deleted the project.
  • Empty states point to the first action: No deployments yet. Push to your Git repository to create one.
  • Use the present participle with an ellipsis for in-progress states: Deploying…, Saving….
  • Use numerals (3 projects), curly quotes, and the ellipsis character; skip please and marketing superlatives.

Do’s and Don’ts

  • Use the gray scale to rank information: 1000 for primary text, 900 for secondary, 700 for disabled.
  • Keep solid accent color for state and the single most important action on a view.
  • Hold WCAG AA contrast (4.5:1 for body text).
  • Show the focus ring on every interactive element at :focus-visible, and never remove an outline without a visible replacement.
  • Apply the typography tokens instead of setting font size, line height, or weight by hand.
  • Don’t signal state with color alone; pair it with an icon or text label.
  • Don’t use background-200 as a general fill; it is for subtle separation only.
  • Don’t mix rounded and sharp corners, or more than two font weights, in one view.
  • Don’t swap gray-* for background-*; they are separate scales.