ScampDesign tokens: spacing, borders, radius, and shadows
Beyond colors and type, the Design System panel has four sections for the values that give your design its rhythm and depth: Spacing, Border widths, Radius, and Shadows. Each works the same way: a named scale that you edit once and reuse everywhere.
These tokens are all lengths or shadow strings, so Scamp routes them to the right section, and the right pickers, by name rather than by value.
Spacing
--space-* tokens define your spacing scale—the padding, margin, and
gap values used throughout a layout. A common scale runs --space-1
through --space-16.
In each row, you can edit the value, rename the label, or delete the token. Spacing tokens appear in the padding, margin, and gap pickers across the properties panel.
Border widths
--border-* tokens define your border-width scale, typically thin,
medium, and thick. They appear in the border-width picker.
Note: --color-border is a color token, not a border-width token;
the prefix keeps them apart. Border widths are --border-thin,
--border-medium, and so on.
Radius
--radius-* tokens define your corner-radius scale—for example,
none, sm, md, lg, xl, 2xl, and full. Each row
shows a small corner-preview swatch, so you can see the roundness at a
glance. They appear in the border-radius picker.
Shadows
--shadow-* tokens define your elevation scale—for example, sm,
md, lg, and xl. Each row uses a monospace input for the full
box-shadow value, and multi-layer (comma-separated) shadows round-trip
correctly.
Shadow tokens appear as a preset list in the Shadows section of the properties panel. Selecting a preset applies that shadow's value to the element; see Use these tokens.
Add defaults
To keep new projects lean, Scamp adds these tokens on demand. When a section is empty, you see the following:
- + Add default …: Adds the full recommended scale for that section.
- + Add token: Adds a single blank token for you to define.
After you add tokens, every one is fully editable: change the values, rename the labels, or delete the ones you don't need.
Use these tokens
- Spacing, border, and radius fields have a token icon inside the input. Click it for a list of the matching tokens.
- Shadow presets apply from the Shadow preset… list in the Shadows
section of the properties panel. Because Scamp stores shadows as
structured, editable rows rather than a
var()reference, selecting a preset is a one-time application: it fills in the shadow's layers, which you can then fine-tune per element.
For the full table of which token types appear on which fields, see Design system.