Fonts
Defining fonts is as easy as defining colors or spacings, just use fonts
property in config:
As you can see fonts are just objects with CSS properties. You can make font sizes or line heights responsive with @{breakpoint}
notation.
Master tokens
Below we're showing master tokens for fonts:
Token | Description |
---|---|
| Main body text font |
| Bold main body. |
| Smaller body text font. |
| Bold small body. |
| Heading 1 (biggest) |
| Heading 2 |
| Heading 3 |
| Heading 4 (smallest) |
If you only have 1 body text or 2 headings then remember that you can map one of your custom tokens to multiple Shopstory master tokens. For example, if you have only 1 body style without bold you can map it to all of the Shopstory body font tokens.
Last updated