Overview

Labels allow users to:

• Differentiate between content types.
• Create urgency for time-sensitive content.
• Understand that a product is still in an experimental stage.

Label Types

1. Content states
2. Indicators
3. In-line
4. Lifecycle states

1. Content states (usage)

Used to differentiate between types of content (predominantly within teasers).

• ✅ DO: Place underneath the headline

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FrIWBCOOiVoBZA7EBqnlmpB%2FDesign-System-Documentation%3Fnode-id%3D56%253A46

• ❌ DON'T: Place at the end of headline, as it breaks alignment and reduces ability to scan.

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FrIWBCOOiVoBZA7EBqnlmpB%2FDesign-System-Documentation%3Fnode-id%3D85%253A114