Design tokens

Every non-colour design axis is a thin semantic scale of CSS custom properties, each with a matching get-*() Sass accessor. Value tables are on the Variables page; this page shows them rendered, and the last section is the visual check for the token cascade.

Reference a token from CSS with its full --jf-* name, or from SCSS with the accessor: padding: get-space(md);, border-radius: get-radius(lg);, box-shadow: get-shadow(md);.

The one axis not shown here is type — the --jf-font-size-* scale, its paired line-heights and which heading level takes each step are tabled on Typography.

Extending a scale. Every scale ($space-scale, $radius-scale, $leading-scale, $duration-scale, $ease-scale) uses the empty-map + merge pattern — your map is merged over the defaults. Set one before importing Jellyfish: a matching key overwrites ($radius-scale: ("md": 20px) makes --jf-radius-md 20px), a new key appends (("xxl": 40px) adds --jf-radius-xxl, resolvable as get-radius(xxl)). Everything you don't mention keeps its default. Setting it after the import is too late — the !default has already fired.

Spacing --jf-space-*

A t-shirt scale for flow between elements — margin, padding, gap — pointing at $sizing-system steps. Reference with get-space() or the token name. --jf-flow is the block-flow rhythm (bottom margin between block elements) — $flow-step picks which step it uses, md by default. For the fixed size of a thing (width, height, icon dimensions) use get-size() against the Sass-only $sizing-system map instead.

Line height --jf-leading-*

Unitless leading steps. Reference with get-leading() or the token name. --jf-leading-base (1.5) matches body copy; the responsive $root-line-height stays the source for the body element itself.

Border radius --jf-radius-*

A t-shirt scale with values drawn from $sizing-system. Reference with get-radius() or the token name. Component defaults map onto it; retune the whole framework's corners from $radius-scale.

Border width --jf-border-width

Two widths only — not a stepped scale, so there's no get-*() accessor; reference with token(border-width) / token(border-width-strong) in Sass, or the custom property directly. Naming mirrors the colour role ladder.

Elevation --jf-shadow-*

Box-shadows that mix --jf-shadow-color toward transparent at each step's alpha. Reference with get-shadow() or the token name. Geometry in $shadow-scale; hue in $shadow-color / --jf-shadow-color.

Motion --jf-transition

Hover the boxes. Each declares its own transition from the motion tokens; the OS "reduce motion" setting zeroes the durations and stops all of them.

Or set --jf-transition once on a scope and let motion() pick it up — everything inside runs to that tempo:

Retuning tokens

The wrapper below deliberately overrides four tokens on this one box to values nothing like their real defaults (--jf-radius-lg is normally a generous rounded corner, not 1px — it's squashed down here purely so the override is unmistakable at a glance). Anything inside that reads them re-resolves with no other change — a single scope override cascades. This section is the permanent visual check for the token cascade: if a swatch stops responding to its overridden value, something's regressed.

Components build their own radius / border / spacing defaults from these tokens, so a wrapper override like this restyles a nested .card / .button / .callout too.