Design tokens

Extract design tokens automatically from captures in Alloy. Manage colors, typography, spacing, and shadows for consistent prototypes. Start now.

Overview

Every capture creates a prototype and automatically detects design tokens like colors, fonts, spacing, and shadows. These detections improve the quality and consistency of future prototypes.

What are design tokens?

Design tokens are named values that store visual properties in your design system. Alloy automatically extracts these from your captures:

Colors

  • Primary, secondary, and accent colors
  • Background and surface colors
  • Text and border colors
  • Semantic colors (success, warning, error)

Typography

  • Font families and weights
  • Font sizes and line heights
  • Letter spacing
  • Text styles (headings, body, captions)

Spacing

  • Margin and padding values
  • Grid and layout spacing
  • Component gaps

Border & Shadows

  • Border radii and styles
  • Box shadows and elevations
  • Border colors and widths

How tokens are extracted

When you capture a page, Alloy:

  1. Analyzes all visual elements
  2. Identifies patterns and repeated values
  3. Groups similar tokens together
  4. Names tokens based on usage context
  5. Stores tokens in your design system

Using design tokens

In prototypes

Extracted design tokens inform styling in subsequent prototypes:

  • New components automatically use your token values
  • Consistency is maintained across prototypes
  • Reduces manual tweaks and drift from your design system

Token application

When creating new elements, Alloy:

  • Applies appropriate tokens based on context
  • Suggests token options in the editor
  • Maintains token relationships (e.g., hover states)

Managing tokens

View tokens

Access your design tokens from:

  • The Tokens panel in the editor
  • Settings > Design System
  • Individual component properties

Edit tokens

You can:

  • Rename tokens for clarity
  • Adjust token values globally
  • Create new tokens manually
  • Delete unused tokens

Token sync

Changes to tokens:

  • Update across all prototypes using them
  • Can be previewed before applying
  • Are tracked in version history

Best practices

  • Capture your main product pages first to establish a complete token set
  • Review and name tokens meaningfully after extraction
  • Keep token names consistent with your design system documentation
  • Regularly audit and clean up unused tokens
  • Export tokens for use in development