⌘K
(opens in new tab)
Liquidify
Documentation
Getting started
Concepts
Guides
Packages
@liquidify/react@liquidify/glass@liquidify/tokens@liquidify/motion
Design tokens
Examples
AI resourcesDocumentation versions
Community

@liquidify/tokens

Consume Liquidify's CSS variables, JSON manifest, and Tailwind preset.

Experimental: token names and values may change before a stable release.

pnpm add @liquidify/tokens

Public exports

ExportUse
@liquidify/tokens/variables.cssCSS custom properties for the current web baseline
@liquidify/tokens/system-color-classes.cssGenerated system-color utility classes
@liquidify/tokens/tokens.jsonMachine-readable token values
@liquidify/tokens/tailwind-presetliquidifyPreset object for Tailwind configuration
@liquidify/tokensTypeScript transform utilities such as ptToRem
import "@liquidify/tokens/variables.css"
.account-card {
  color: var(--lq-color-fg-primary);
  padding: var(--lq-space-16);
  border-radius: var(--lq-radius-14);
}

The token baseline is currently generated from the repository's iOS source set. Archived platform source files are not runtime variants and should not be presented as switchable public themes.

For component applications, @liquidify/react/styles.css already includes the required token cascade. Import variables.css directly only when consuming tokens without the aggregate React stylesheet.

@liquidify/glass@liquidify/motion