@fffui/tokens

design tokens for fffui design system - tailwind v4 compatible.

installation

npm install @fffui/tokens

usage

/* import in your css */
@import "@fffui/tokens/tokens.css";

/* or use a preset */
@import "@fffui/tokens/presets/swiss.css";

customization

@import "@fffui/tokens/tokens.css";

@theme {
  /* override tokens */
  --color-primary-500: oklch(60% 0.25 300);
  --font-sans: 'your font', sans-serif;
}

tokens included

• colors: 5 scales × 10 shades (oklch format)
• spacing: 8px grid (13 values)
• typography: font families, sizes, weights
• radius: border radius scale
• shadow: elevation system
• transitions: duration and easing

presets

• default.css - fffui default theme
• swiss.css - international style theme
• more presets: browse presets

documentation

full token documentation

license

mit