Tokens

The atomic elements of the GateFlow design system. Browsable, previewable, and ready to use in any workspace.

Install

pnpm add @gateflow/tokens

Token Explorer

Use the explorer below to browse our semantic token library. You can preview how tokens look in both light and dark modes.

Light

Dark

--ds-background

Surface/Canvas background.

var(--ds-background)

Semantic

Light

Dark

--ds-background-neutral-subtle

Secondary/Sidebar background.

var(--ds-background-neutral-subtle)

Semantic

Light

Dark

--ds-background-brand-bold

Primary brand action background.

var(--ds-background-brand-bold)

Semantic

Light

Dark

--ds-background-selected

Selection/Active state surface.

var(--ds-background-selected)

Semantic