You’re viewing documentation for our new design tokens, which are currently in Alpha. Some components may not fully support them yet, and parts of the documentation may still be incomplete as we continue development.
Thanks for your patience and understanding.
If you have feedback, we’d love to hear it—please reach out in the #ask-api-vivid Slack channel.
Token Types (Reference Pages)
Design tokens cover several dimensions of the interface - color, typography, spacing, shape, size, and elevation. Each dimension has its own purpose and its own set of semantic scales. To keep things simple and predictable, each token category is documented on a dedicated page.
Covers semantic color families, usage guidance for backgrounds, solids, borders, and text, and the full neutral, accent, status, and accent-alt scales.
Used for properties like foreground and background colors, surfaces, border colors, etc.
Describes the concept of typography as a compound token (font size, line height, weight, and family), explains style roles, and lists all heading, body, caption, input, and code tokens.
Used for properties like font, text styles, etc.
Explains how spacing works. These tokens affect the inner and outer spacing between the UI elements. It provides the regular, condensed, and extended semantic sets.
Used for properties like paddings, margins and gaps
Covers shape families (rectangle, pill, circle), when each is appropriate, and the full scale for each radius group.
Used for properties like border radiuses that affect the shape of the element.
Details how size tokens help standardize icons, UI elements, and layout blocks, with a reference table for medium and large families.
Used for sizes of internal UI elements like text, icons, carets.
Explains depth, shadows, and layering, and includes the full elevation scale for regular surfaces.
Used for properties like container shadow.