Tokens

Tokens — also called variables — are the named values your design is built from: colors, spacing, sizes, radii, border widths, opacity and shadows. When a layer uses a token instead of a raw value, changing the token updates every screen, and the export uses the same token names in code.

Foundations

Press ⌃ 3, or click Open Foundations in the right panel's Foundation tab (with nothing selected). Foundations opens as a full-screen window above the canvas, with tables of your design system and a navigation titled Variables on the left. Press ⌃ 3 again or close it to get back to the canvas.

The Foundation tab of the right panel shows the same design system as a compact summary — you can add and edit tokens there without leaving the canvas.

Primitive and semantic tokens

Shippp uses two layers of tokens, the same model most mature design systems use:

Build your palette as primitives once, then point semantic tokens at them. When the brand color changes, you edit a primitive; when a role changes (for example the color of secondary text), you edit a semantic token.

Create primitives

1. Add a primitive page

   In Foundations, click New primitive page (it starts as Primitives).

2. Add a category

   Click Color or Number to add a group, for example Gray or Space.

3. Add variables

   Use Create variable and fill in names and values. Use slashes to nest groups, such as gray/100.

Create semantic tokens

Semantic tokens live in Collections, organized by category: Typography, Colors, Spacing, Size, Radius, Border width, Opacity, Effects and Layout guides. Click Create variable (Add effect for effects) and choose a primitive (or a value) for it. Text and effect styles are created the same way, right in Foundations.

Responsive tokens

Switch on Responsive on a semantic token and the row shows one value per breakpoint. A spacing token can be 24 on Mobile, 40 on Tablet and 96 on Desktop — every layout that uses it adapts automatically. Colors and effects can be responsive too, for example a lighter shadow on Mobile.

In code, a responsive token becomes a responsive theme value:

Gutter: {
  value: {
    base: "24px",
    Tablet: "40px",
    Desktop: "96px",
  },
},

Edit many tokens at once

• Click a row to select it, ⌘-click to add rows, ⇧-click to select a range.
• Press Enter to set one value for every selected row in a column — a single undo step.
• Right-click for Copy, Duplicate, Move to a group, Rename… (find and replace in the names) and Delete. ⌫ deletes the selection.
• Deleting a token that is in use lists where it is used, instead of breaking those links.

Use tokens on layers

• Color pickers have Custom and Libraries tabs. Libraries lists your tokens, split into Primitives and Semantic, with Search tokens.
• Gap, padding, size, radius, border width and opacity fields can bind to the matching token category.
• Detach token replaces the token with its current value on that layer.

Move a design system between files

Use File menu → Export DS to download your design system as .ds.json — either Tokens Only or Tokens + Components. In another file, Import DS brings it in.