Token Registry · binary-ly/zynaui / v0.2.0
INTERCEPT ACTIVE · SOURCE: OPS

Token Registry

The live CSS variable surface of ZynaUI. Switch the genre above. All 83 public tokens respond in real time. Semver-locked from v0.2.0: rename or remove = major bump.

0 PUBLIC TOKENS semver-locked
0 INTERNAL TOKENS do not use
0 GENRES override all of them
STABLE FROM v0.2.0 10 categories · 100% CSS variables
Value column reads live from the current genre via getComputedStyle Colour swatches render the actual computed colour Easing tokens show their bezier curve Click any token name → copies var(--name)
POLICY Semver Contract #
Change Type Impact
MAJOR
Rename or remove a public token · Change the meaning of a public token · Default value change that visually breaks existing uses
MINOR
Add a new public token
PATCH
Change a public token's default value as a bug fix
ANY
Any change to an internal token (--zp-*, --z-btn-*, etc.): no constraint

Public tokens — 83

CH·01 Brand 2 tokens LOCKED #

The primary brand colour pair. Set colors.zyna.DEFAULT in your Tailwind config to change --zyna globally. Every component that uses gold updates automatically.

--zyna
Primary brand colour. Used by all components for accents, glows, and fills. Overridden by every genre.
--zyna-dark
Dark variant. Used in gradients and deep hover states.
CH·02 Shape 4 tokens LOCKED #

Global corner-radius scale. Components reference these via --btn-corner, etc. Override on :root to scale all component corners at once.

--z-corner-sm
Tight corners. .btn-sm, .btn-icon.
--z-corner
Default button corner. Feeds clip-path geometry calculations.
--z-corner-lg
.btn-lg
--z-corner-xl
.card-round
CH·03 Motion 10 tokens LOCKED #

Every genre overrides all 10 of these to express its unique pacing. Atelier uses the slowest values (0.38s base); Laboratory the fastest (0.18s). Override on :root to retime your entire UI in one block.

--z-duration-fast
Fastest transition. Colour snaps, micro-interactions.
--z-duration-base
Standard transition. Filter and background changes.
--z-duration-slow
Scan sweeps, scan-fill animations, deliberate state changes.
--z-duration-pulse
Looping animation period. Badge pulse and card glow.
--z-ease-enter
Hover-in easing. Smooth deceleration, the "landing" curve.
--z-ease-exit
Hover-out easing. Acceleration away, the "lifting off" curve.
--z-ease-spring
Modest overshoot spring. Badge scan and pulse ring.
--z-ease
General-purpose smooth deceleration alias.
--z-ease-snap
Quick snap. Reaches final value rapidly.
--z-ease-out
Aggressive ease-out: rapid start, sharp deceleration, clean stop. No overshoot.
CH·04 Typography 1 token LOCKED #
--z-font-mono
Monospace font stack used by all ZynaUI components. Override once to change every component's mono font simultaneously.
CH·05 Color 12 tokens LOCKED #

All components consume these. Genres override the full set to establish their palette. All text tokens meet WCAG 2.1 AA contrast (≥4.5:1) on their intended backgrounds.

--z-color-text
Primary body text. 90% opacity.
--z-color-text-muted
Secondary text. Default button and badge label colour. 55% opacity. WCAG AA.
--z-color-text-dim
Tertiary text. Alert body colour. 65% opacity. WCAG AA.
--z-color-text-solid
Card titles. Full opacity, no reduction.
--z-color-text-inverse
Text on brand-coloured backgrounds. .btn-primary label.
--z-color-success
.badge-success, .alert-success.
--z-color-danger
.badge-danger, .alert-danger, .btn-danger.
--z-color-warning
.badge-warning, .alert-warning.
--z-color-info
.badge-info, .alert-info.
--z-color-border
Standard border. Card borders, header lines.
--z-color-border-dim
Dimmer border. Dark card variant and neutral alert.
--z-color-overlay
Translucent fill. Ghost button and badge backgrounds.
CH·06 Surfaces & Shadows 9 tokens LOCKED #
--z-surface-page
Page background. Set on html by the plugin. Every genre overrides this.
--z-surface-inset
Interior fill for outlined button/badge variants at rest.
--z-surface-inset-hover
Interior fill for outlined variants on hover.
--z-surface-inset-danger
Interior fill for .btn-danger outlined variant at rest.
--z-surface-inset-danger-hover
Interior fill for .btn-danger outlined variant on hover.
--z-surface-card
Default card surface gradient. Fallback for --card-gradient.
--z-surface-card-deep
Deep/void card surface. Used by .card-dark.
--z-shadow-card
Standard card box-shadow. Fallback for --card-shadow.
--z-shadow-card-deep
Deep card box-shadow. Used by .card-dark.
CH·07 Button Component 14 tokens LOCKED #

Set on .btn-* variant classes or any custom class alongside .btn. Unset tokens fall back to the genre's structural defaults.

--btn-bg
@property *→ --z-color-overlay
Background: solid, gradient, or multi-layer. Base default is the overlay tint; variants replace it entirely.
--btn-color
@property <color>
Label text colour.
--btn-filter
none
Resting drop-shadow / glow filter.
--btn-scan-color
@property <color>color-mix(in oklch, white 7%, transparent)
Scan-fill sweep accent, the shimmer seen on hover.
--btn-hover-bg
→ --btn-bg
Hover background. Falls back to resting bg if unset.
--btn-hover-color
→ --z-color-text
Hover text colour. Base default is full-opacity text; falls back to --btn-color only if explicitly unset.
--btn-hover-filter
none
Hover glow + brightness filter.
--btn-hover-text-shadow
none
Hover text luminescence.
--btn-active-filter
none
Filter applied on :active press.
--btn-focus-color
65% brand
Focus-visible ring colour.
--btn-corner
@property <length>→ --z-corner
Corner cut depth. Shape modifiers and size classes set this automatically.
--btn-interior
@property <color>transparent
Interior fill for outlined variants. Transparent for solid buttons.
--btn-hover-interior
→ --btn-interior
Hover interior fill for outlined variants.
--btn-inner-clip
genre default
Inner clip-path polygon for the outlined interior border technique.
CH·08 Badge Component 8 tokens LOCKED #

Set on .badge-* variant classes or any custom class alongside .badge.

--badge-bg
@property <color>
Background tint.
--badge-color
@property <color>
Text and dot colour.
--badge-glow
none
Drop-shadow filter (traces the badge shape).
--badge-scan-color
color-mix(in oklch, white 18%, transparent)
Scan-sweep highlight colour.
--badge-dot-size
5px
Pulse status dot diameter. .badge-sm = 4px, .badge-lg = 6px.
--badge-interior
transparent
Interior fill for .badge-outline.
--badge-offset
@property <length>5px
Shape slant/notch depth. Shape modifiers set this automatically.
--badge-inner-clip
genre default
Inner clip-path for the outlined interior border technique.
CH·09 Card Component 18 tokens LOCKED #

Set on .card-* variant classes or any custom class alongside .card.

--card-gradient
genre default
Base colour gradient. Texture and genre overlay stack on top.
--card-border-color
@property <color>
Border colour.
--card-shadow
genre default
Box-shadow.
--card-bracket-color
genre default
Corner L-bracket stroke colour.
--card-bracket-size
20px
Corner bracket arm length.
--card-bracket-stroke
1.5px
Corner bracket line thickness.
--card-bar-gradient
genre default
Top power-bar gradient. Overrides the genre bar default when set.
--card-bar-shadow
genre default
Top power-bar box-shadow glow.
--card-animation
none
CSS animation shorthand. Set to zyna-card-pulse … for a pulsing glow.
--card-glow-lo
@property <color>
Pulse glow colour at rest, used by the zyna-card-pulse keyframe.
--card-glow-hi
@property <color>
Pulse glow colour at peak, used by the zyna-card-pulse keyframe.
--card-header-border
genre default
Card header bottom border colour.
--card-header-bg
genre default
Card header background tint.
--card-header-color
genre default
Card header text colour.
--card-header-dot-color
genre default
Status dot colour in the card header.
--card-header-dot-shadow
genre default
Status dot box-shadow glow.
--card-header-text-shadow
genre default
Card header text luminescence.
--card-title-text-shadow
genre default
.card-title text luminescence.
CH·10 Alert Component 5 tokens LOCKED #

Set on .alert-* variant classes or any custom class alongside .alert. The accent bar position (left/top/right/bottom) is genre-defined.

--alert-bar-color
@property <color>
Accent bar colour. Bar position is controlled by the active genre.
--alert-bg
@property <color>
Background tint.
--alert-color
@property <color>
Body text colour. WCAG AA ≥4.5:1.
--alert-shadow
none
Box-shadow: near glow and inset depth.
--alert-title-shadow
none
.alert-title text luminescence.
USAGE Examples #

Custom button variant

.btn-plasma {
  --btn-bg:                rgba(139, 0, 255, 0.38);
  --btn-color:             #BF5FFF;
  --btn-filter:            drop-shadow(0 0 8px rgba(139,0,255,0.45));
  --btn-scan-color:        rgba(139, 0, 255, 0.18);
  --btn-hover-filter:      drop-shadow(0 0 22px rgba(139,0,255,1)) brightness(1.10);
  --btn-hover-text-shadow: 0 0 16px rgba(200,100,255,0.7);
}

Custom card variant

.card-ember {
  --card-gradient:      linear-gradient(145deg, #1a0800 0%, #0d0400 100%);
  --card-border-color:  rgba(255, 80, 0, 0.22);
  --card-bracket-color: rgba(255, 80, 0, 0.55);
  --card-bar-gradient:  linear-gradient(90deg, transparent, rgba(255,80,0,0.6), transparent);
  --card-glow-lo:       rgba(255, 80, 0, 0.10);
  --card-glow-hi:       rgba(255, 80, 0, 0.28);
  --card-animation:     zyna-card-pulse 4s ease-in-out infinite;
}

Retime all animations globally

:root {
  --z-duration-fast: 0.08s;
  --z-duration-base: 0.14s;
  --z-duration-slow: 0.20s;
}

Override brand colour (Tailwind v4)

/* app.css */
@import "tailwindcss";
@plugin "zynaui";

/* Override: everything that used gold now uses electric blue */
:root {
  --zyna:      #0088FF;
  --zyna-dark: #0055CC;
}
INTERNAL Internal tokens — 80 #
! Do not set or read these in your own stylesheets. They are implementation details of the genre system and may be renamed, restructured, or removed in any minor release without notice. Use the public tokens above instead.
Primitives15

Raw values that feed the semantic --z-* tokens. Never referenced directly by user code.

--zp-corner-sm--zp-corner-md--zp-corner-lg--zp-corner-xl--zp-corner-badge--zp-corner-badge-lg--zp-corner-card--zp-ease-standard--zp-ease-snap--zp-ease-out--zp-success--zp-danger--zp-warning--zp-info--zp-text
Button genre structural5

Control the default button shape and geometry for each genre. Use public --btn-corner and --btn-inner-clip to override individual elements.

--z-btn-clip--z-btn-corner--z-btn-inner-clip--z-btn-active-scale--z-btn-scan-stop
Badge genre structural7
--z-badge-clip--z-badge-radius--z-badge-padding--z-badge-letter-spacing--z-badge-inset-shadow--z-badge-scan-duration--z-badge-inner-clip
Card genre structural25
--z-card-clip--z-card-filter--z-card-texture--z-card-gradient--z-card-border-color--z-card-shadow--z-card-bracket-color--z-card-bracket-size--z-card-bracket-stroke--z-card-bar-height--z-card-bar-bg--z-card-bar-shadow--z-card-header-bg--z-card-header-border--z-card-header-color--z-card-header-letter-spacing--z-card-header-text-shadow--z-card-header-dot-size--z-card-header-dot-bg--z-card-header-dot-shadow--z-card-header-dot-animation--z-card-title-text-shadow--z-card-glow-duration--z-card-default-glow-lo--z-card-default-glow-hi
Alert genre structural14
--z-alert-radius--z-alert-bar-width--z-alert-prefix--z-alert-bg-opacity--z-alert-border--z-alert-prefix-opacity--z-alert-bar-glow--z-alert-texture--z-alert-padding-top--z-alert-padding-left--z-alert-bar-inset--z-alert-bar-w--z-alert-bar-h--z-alert-bar-radius
Docs chrome14

Consumed only by the ZynaUI docs site stylesheet. Not in the npm package API.

--bg--bg2--bg3--text--text2--text3--border--border2--topbar-bg--z-topbar-border--z-topbar-glow--z-sidebar-active-shadow--z-panel-bg--z-panel-shadow