# Content guidelines

Guide for how to fill out the component content guidelines template

Tabs: [Building blocks](/content/notion-guidelines.building-blocks.md) · [Template](/content/notion-guidelines.template.md) · [Guidelines](/content/notion-guidelines.guidelines.md)

The content guidelines are a supplement to other component guidelines on the Telescope website. As such, we should only really include guidelines on how to write copy for components and not include usage guidelines or accessibility guidelines.

> Our template is heavily inspired by Adobe’s Spectrum ([example for their Button](https://spectrum.adobe.com/page/button/#Content-standards)).

***

# A standard guideline block

To keep things organised and consistent, we try to use the same pattern and format for each of our content guidelines. Repeating the same structure between components help make our guidelines easy to scan and consume.

Let’s break this down and discuss each part of this guideline block.

***

# Headings

With inspiration from [Spectrum](https://spectrum.adobe.com/page/button/#Content-standards), we always use **prescriptive headings**. This directness leaves little room for ambiguity, ensuring that the intended action is easily understood and essentially makes the guideline actionable rather than just informative.

> ***Write labels as verbs***

***

# Paragraphs

Provide specific, actionable instructions that team members can follow. Avoid vague language and ensure that each guideline gives clear direction on **what to do** or not do. Ideally provide context and explain ***why*** we have this practice.

> *A button represents an action, so its label needs to reflect the action that a user is taking — which is a verb. Labels written as nouns or adjectives tend to be unclear and disorienting.*

# Visual examples

We use “Do’s and Don’ts”, which are tangible, real world, visual examples of what is correct and incorrect to do. These has to follow the *exact* structure outlined in the template.

### Creating image examples

All images used should be Pleo specific. Ideally, image examples are created using the components in [our Figma library](https://www.figma.com/file/J4pl8gvfmMdbigPMiaCwrr/%E2%9D%96-Telescope---Web-Components?type=design&node-id=8418-85253&mode=design&t=QdwSxnKxhZFD4qok-0). We’ve created [a content guidelines Figma file](https://www.figma.com/design/xV9luu5InugSJHAeQUzL8S/%5BTEMP%5D-Content-guidelines-examples?node-id=0-1&t=k5mXbtb43UzXZk3i-0) for this exact purpose.

> 💁 No Figma expert? Feel free to reach out to the Design Systems team.