Design tokens overview
Understand what design tokens are, why they matter, and how to use them in Lovision.
What design tokens are
Design tokens are named, reusable values that store the visual decisions of your design system — colors, font sizes, spacing, radii, and other properties — in one place. Instead of remembering #1A73E8 for every blue button, you define a token such as color.brand.primary = #1A73E8 and keep that value available from the Design Tokens panel.
Supported token types
| Token type | Stores | Example |
|---|---|---|
| Color | A color value (hex, RGB, or reference to another token) | color.text.primary = #111111 |
| Number | A numeric value for spacing, sizing, or border radius | spacing.md = 16 |
| Font | A font family name | font.heading = "Inter" |
| String | Arbitrary text values | copy.cta = "Get started" |
Token sets
Tokens are organized into token sets — named collections that represent a theme or style direction (e.g., "Light theme", "Dark theme", "Brand A"). You can have multiple sets in a project and switch between them to preview different themes.
Where tokens appear
Once you define a token, you can manage it from the Design Tokens panel and copy its raw value into inspector fields. Direct binding from fill, stroke, font, or spacing fields to token references is not exposed in the current editor.
Workflow
- Open Design Tokens from the editor toolbar (the diamond icon or the Tokens menu).
- Create a token set if you don't have one (e.g., "Default" or "Brand").
- Add tokens for your most-used values — start with colors and spacing.
- Copy token values into color, font, or spacing fields when you need to reuse them.
- Edit tokens in the panel when your source values need to change.
Benefits
- Consistency — a named source for visual values helps prevent drift across a large file.
- Scalability — organize reusable values before applying them across a design system.
- Theming — token sets let you prepare alternate themes or brand variants in one place.
- Handoff — tokens map directly to CSS variables or design system constants, making developer handoff cleaner.
Tips
- Use semantic naming (
color.text.primary) rather than descriptive naming (color.blue) so tokens stay meaningful when values change. - Start with 10–15 tokens for the essentials (primary color, text colors, spacing steps, corner radii) before expanding.
- Group tokens under prefixes (
color/,spacing/,typography/) using the slash convention — the panel renders slashes as folder separators.