The UIengine interface includes templates for displaying various types of design tokens. These tokens can be referenced in the YAML frontmatter of a page file.
The design tokens are listed under the tokens
key of a page:
---
title: Spaces
tokens:
- type: size
name: S
value: .5rem
- type: size
name: M
value: 1rem
- type: size
name: L
value: 1.5rem
- type: size
name: XL
value: 3rem
---
Our spacings.
Each token consists of the following attributes:
type
name
value
variable
description
reference
: The name of the referenced token property
The tokens can also be seperated into multiple categories.
---
title: Colors
tokens:
- type: category
name: Brand
tokens:
- type: color
name: brandPrimary
value: yellow
- type: color
name: brandSecondary
value: blue
- type: category
name: Neutral
tokens:
- type: color
name: neutralWhite
value: "#FFF"
- type: color
name: neutralBlack
value: "#000"
- type: category
name: Background
tokens:
- type: color
name: backgroundLight
value: "#FFF"
reference: neutralWhite
- type: color
name: backgroundDark
value: blue
reference: brandSecondary
---
Our colors.
You can integrate and consume design tokens defined with the Theo tokens spec. For details on the format see the integrations docs.