Components

Text Styles

A set of pre-defined text styles can help to kick start the design of your project. Use them to present your content efficiently and improve the reading experience.

Usage
  • Usage
  • Examples
  • Related components
  • Download

Usage

Unordered and Ordered Lists

A few styles are available for bullet points in unordered lists: circular, rectangular, or a simple dash. Use red numbers in ordered lists unless the background is yellow, in which case use black numbers to ensure sufficient contrast.

Text links

Format text links in black or red and underline them if necessary to make the link clear to the reader. Use a white transparent layer behind red text links on yellow backgrounds to ensure sufficient contrast.

Headlines

We prefer black (in combination with accents in DHL Red), capitalized main headlines accompanied by a red topline or a subline. Write other headlines in mixed case and use the same color as the copy text.

Quotations

Our quotation style is used both for quoting people and for highlighting an excerpt from the text (pull quotes). We prefer quotations in italics. Indicating the source of the quote is optional. To add emphasis or further separate nested quotations visually from the copy text, add a border on the side.

Copy text

We separate copy text into two categories: short and long. Long copy text uses a larger line height to improve the readability of larger chunks of text. Short copy text uses a smaller line height to visually group together a few lines of text.

Examples

Related components

Download

Sketch UI Library
ZIP
85.97 MB