@k-universe/design-tokens weekly downloads statistics

@k-universe/design-tokens

K-Universe design tokens — CSS custom properties, TypeScript token objects, Tailwind CSS plugin, and React branding primitives. Install once, apply the K-Universe design system anywhere.

---

Install

# pnpm (recommended)
pnpm add @k-universe/design-tokens

# npm
npm install @k-universe/design-tokens

# bun
bun add @k-universe/design-tokens

---

Token overview

Category	Description
Colors	Monochrome foundation + --ku-primary (#0066FF) + --ku-secondary (#00CC88)
Typography	Power Grotesk scale (hero → tiny), JetBrains Mono for code
Spacing	8px base grid (4px → 128px), 60px margin principle
Motion	GSAP-aligned durations + cubic-bezier easings
Layout	60px margins, 1320px max-width, section spacing
Radius	xs (2px) → round (9999px)
Shadows	Elevation 1–4 + glow variants

---

Usage

Option 1 — Drop-in CSS (no build step)

Import the standalone CSS file and use --ku-* variables in your stylesheets.

<!-- HTML -->
<link rel="stylesheet" href="node_modules/@k-universe/design-tokens/standalone/css" />

/* CSS/PostCSS */
@import "@k-universe/design-tokens/standalone/css";

// Vite / bundler
import "@k-universe/design-tokens/standalone/css";

Then use variables anywhere:

.card {
  background: var(--ku-surface);
  border: 1px solid var(--ku-border);
  color: var(--ku-text);
  font-family: var(--ku-font-primary);
  border-radius: var(--ku-radius-lg);
}

.button-primary {
  background: var(--ku-primary);
  color: var(--ku-white);
  transition: background var(--ku-duration-fast) var(--ku-ease-default);
}

.button-primary:hover {
  background: var(--ku-primary-hover);
}

---

Option 2 — TypeScript token objects

import { tokens } from "@k-universe/design-tokens";

// Colors
tokens.colors.primary; // '#0066FF'
tokens.colors.secondary; // '#00CC88'
tokens.colors.background; // '#000000'
tokens.colors.surface; // '#1A1A1A'
tokens.colors.foreground; // '#FFFFFF'

// Typography
tokens.typography.fontFamily.sans; // 'Power Grotesk, ...'
tokens.typography.fontFamily.mono; // 'JetBrains Mono, ...'
tokens.typography.scale.h1.size; // '3rem'

// Spacing
tokens.spacing[4]; // '16px'
tokens.spacing[15]; // '60px'  ← K-Universe 60px margin

// Motion
tokens.motion.duration.default; // '300ms'
tokens.motion.easing.default; // 'cubic-bezier(0.4, 0, 0.2, 1)'

---

Option 3 — CSS variable injection (JavaScript)

import { applyCSSVarsToDocument } from "@k-universe/design-tokens/css";

// Inject all --ku-* vars onto :root
applyCSSVarsToDocument();

// Or generate the object only
import { generateCSSVars } from "@k-universe/design-tokens/css";
const vars = generateCSSVars();
// { '--ku-primary': '#0066FF', '--ku-bg': '#000000', ... }

---

Option 4 — Tailwind CSS plugin

// tailwind.config.ts
import kuPlugin from "@k-universe/design-tokens/tailwind";

export default {
  content: ["./src/**/*.{ts,tsx,html}"],
  plugins: [kuPlugin],
};

This maps all tokens into Tailwind utilities:

<div class="bg-ku-surface text-ku-primary font-ku-sans">
  <p class="text-ku-body leading-ku-body tracking-ku-normal">K-Universe styled text</p>
</div>

---

Option 5 — React branding components

import {
  KLogoIcon,
  KLogo,
  KBotLogoIcon,
  KBotLogo,
  KLoadingGrid,
} from "@k-universe/design-tokens/branding"

// Primary brand mark (K letterform + trademark)
// viewBox: 0 0 390.6 450
<KLogoIcon size={32} color="#000000" />
<KLogoIcon size={24} color="var(--ku-primary)" />

// KLogo is an alias for KLogoIcon
<KLogo size={32} />

// Bot / agent / assistant mark
// viewBox: 0 0 720.48 720
// Use for: AI agents, assistants, TUI surfaces, k-speech, automation UI
<KBotLogoIcon size={24} color="currentColor" />
<KBotLogoIcon size={32} color="var(--ku-primary)" />

// KBotLogo is an alias for KBotLogoIcon
<KBotLogo size={24} />

// Loading animation — 4-cell grid with staggered opacity pulse
// No external dependencies (CSS animation only)
<KLoadingGrid size={48} color="var(--ku-primary)" />
<KLoadingGrid size={24} color="currentColor" />

Component	Mark	viewBox	Default size	Use case
KLogoIcon / KLogo	Primary K mark	0 0 390.6 450	32px	Brand, headers, splash screens
KBotLogoIcon / KBotLogo	Bot/agent mark	0 0 720.48 720	32px	Agents, assistants, TUI, k-speech, automation
KLoadingGrid	Animated grid	0 0 1986.5 2024.1	24px	Loading states, splash screens

Note on fonts: Power Grotesk is a commercially licensed typeface. The CSS variable --ku-font-primary references it by name with system-ui fallbacks. You need to supply the font files yourself (self-hosted or via a licensed CDN). The package ships variable definitions only — not the font binaries.

---

CSS variable reference…