UX content

These style guidelines explain how to write UX content for UI components and other text, and are fully documented in the Payroc Design System.

For designers and engineers

Badge

Use 1-2 words of key text or numeric data.

Breadcrumbs

Use page names/information architecture naming conventions exactly as they appear, with no capitalization.

Buttons

Use small but descriptive action words on your button. Use sentence case capitalisation. When adding buttons to confirmation modals, use specific wording (not ambiguous terms like Learn more).

For example: Sign in; Confirm payment; Yes, confirm payment or No, cancel payment

Cards

Keep card content concise and focus on the key metrics. For example: User Balance $30,000.00.

Charts

Use clear labels for axis, scale, and data points.

Chips

Use 1-2 words to name chip filters. Use sentence capitalization and write words out in full (no abbreviations). For example: Small, Extra-large.

Circular progress

Show progress as a percentage and include the percentage symbol. For example 20%.

Steppers

Write each step descriptively in a few words, using sentence case capitalisation. Steps should match page or modal titles and headers where relevant. For example: Create an ad group.

Tabs

Keep tab titles short and use sentence case capitalisation where more than one word is required.

Tree

Write tree content as one central theme as the header, and topics relating to the theme as tree branches. For example: [Header] Satisfied customers, [branch] Good food

---

For content creators

Callouts

Use callouts to highlight one thing that the user must know. Make it easy to read, with simple language. One title and 1-2 short sentences of body text.

Error messages

Pattern: what’s wrong? Here’s what you can do about it.

Example: We couldn’t find that website. Check the URL and try again.

Forms

• Use sentence case capitalisation throughout: Field names, placeholder text, button labels, etc.
• Label form fields to tell users what information to add to the field. Use sentence case. For example: First name.
• Use placeholder text to clarify what kind of information the user should add, or provide an example to guide the user. For example: Date of birth (mm/yy), Your full name, 4024 0071 0393 9509.
• Use helper text if the field is more complex and you think the user might need more help or reassurance. For example, when asking for personal details, you could add: We won’t share your details with anyone else; or when asking for CVV: Look for a 3 digit number next to the signature panel on your card.
• Use tooltips if the field needs explanation. Use 1-2 sentences to explain the field. If it’s still not clear, add links, reconsider your text, or reconsider the field itself.

Links

Any links in the UI have to be unbreakable: they must be variable, they must be publicly available, and they must pass firewalls and security software.

Modals

Use sentence case capitalisation in modal headers. Write modal body content in 1-2 sentences clearly explaining the task (and how it affects them, if appropriate). Label buttons with a directive action (see the Buttons guidance).

For example: [Title] Confirm your email address

[Body] We’re sending you a verification email to confirm your email address. Click the verification link to confirm your email address and start using your account.

[Button] Check email or Do it later

Confirmation modal content

State the action as the header, state a consequence as the body text, and make the buttons specific.

Notifications

Maximum of 2 sentences to state success, failure, inform, or warn users. Tell users what to do next and provide links where appropriate to help them take action.

Success toast notifications

Write as a single sentence stating what was achieved. For example: Your profile was successfully set up.

Slide panels

Use slide panels to hide and display larger pieces of content that relates to the main screen. Use sentence case capitalisation for headers and separate content into paragraphs of 1-2 sentences each.

Tooltips

Use tooltips to explain things and provide guidance in 1-2 sentences. If this is too hard, consider adding links to more information, reconsider your text, or reconsider the UX.