Typography ​
Use Typography to create visual hierarchy, making things readable and beautiful. Good typography make it easier for users to scan content to find the information they need.
Type scale ​
A type scale is a selection of type styles used across a product to ensure consistency.
We have a predefined type scale (font sizes and line heights) that is used across all themes in Warp. The following example shows an overview of the type scale using the FINN theme. You can find an overview of the type scale for all themes in our WARP Component library
Type scale tokens ​
Each theme in Warp has its own predefined typeface (see below) and font which are connected to a set of primitive tokens in Warp that capture all of their default properties: Font family, Size, Weight, Line height.
Display ​
Used for large headings, eg. Hero images.
Title ​
Used for page or section headings and titles for content areas.
Preamble ​
Follows a heading and provides an introductory statement, a preliminary explanation, or an opening remark that comes before more detailed content.
Body ​
Used for the main body of content, or larger paragraphs of text optimised for reading.
Caption ​
Use it to caption an image or provide supplementary text.
Detail ​
Use it for finer tertiary level detail where information needs to be available but not visually distracting
Brand fonts ​
For designers, our fonts are automatically made available for you in Figma, so you shouldn't need to install them on your computer. But if you need them for anything else, they are available for download here:
| Brand | Link |
|---|---|
| Bilbasen | GT Walsheim Pro |
| Blocket | Blocket Sans & Blocket Display |
| DBA | Vend Sans Text |
| FINN | FINNType Web Strippet |
| Oikotie | Roboto |
| Tori | Tori Sans Family |
| Vend | Vend Sans Text |
UX writing guidelines ​
Astro is the UX writers guide to create effective, localised, and accessible content across all Vend brands and languages. It covers all the nitty-gritty like how to write date and time in different languages, info for development and strings and much more.
Website
Astro Portal
Slack support
#uxwriting
