Shaper embraces design tokens – named values for colors, spacing, typography, and more – to keep your design consistent and in sync with code. You can think of tokens as your single source of truth for style values (much like a theme). In Shaper’s editor, you have a Token Editor or a section within project settings where you can define and manage these tokens.
  • Colors: Define a palette of colors (e.g., primary, secondary, success, warning, etc.). These token names (and values) can map directly to CSS variables or Tailwind theme colors. When styling an element’s fill or text color in the Property Panel, you’ll be able to pick from these token names (instead of remembering hex codes). For example, if you set your primary color token to #4F46E5, applying “Primary” to a button’s background will not only turn it that purple shade, but also ensure the generated code uses the token (so if you update the token, all uses update too).
  • Spacing: Establish a scale for spacing (e.g., small = 4px, medium = 8px, large = 16px, etc.). These tokens can then drive padding, margin, gap, and grid spacing in your layouts. In practice, you might set a card’s padding to “large” instead of a raw pixel value, keeping spacing uniform throughout the design.
  • Typography: Set up font families and size presets. For instance, define tokens for headings and body text sizes, as well as font families (primary font, monospace font for code, etc.). When adding text, you can assign it a token like “Heading Large” or “Body Medium” so that it adheres to the typography scale of your design system.
  • Others: You can also manage tokens for border radii, shadows, breakpoints, or any custom styles your design system uses. Shaper’s token system is flexible – any token you define will be available to use in the Property Panel controls.
To work with tokens, open the Token Editor (via the right sidebar menu). There you can create new token categories and values or import an existing design token JSON (if you’re migrating from another tool). All tokens are stored and versioned alongside your code, meaning they propagate to the codebase (for example, updating a color token might update a Tailwind config or CSS variables file). This tight coupling ensures design and code stay in sync.
Best Practice: Define your core design tokens at the start of the project – especially primary colors and base spacing. This will make the rest of your design work faster and more consistent. It’s much easier to adjust a token value once (e.g., tweak the brand color shade) than to change dozens of individual elements later.