Tokens
Design tokens are the single source of truth for all visual decisions in useVyre. They are CSS custom properties that automatically adapt to light and dark themes.
Rule: Always use semantic tokens (
--vyre-color-semantic-*), never primitive tokens (--vyre-color-primitive-*). Semantic tokens adapt to the theme — primitive tokens are fixed raw values.Import
/* Import once at your app entry */
import "@usevyre/tokens/css";
/* Then use anywhere in CSS */
.my-button {
background: var(--vyre-color-semantic-accent);
color: var(--vyre-color-semantic-accent-foreground);
padding: var(--vyre-spacing-2) var(--vyre-spacing-4);
font-size: var(--vyre-typography-font-size-sm);
border-radius: var(--vyre-border-radius-md);
}import { tokens } from "@usevyre/tokens";
// Typed JS object — useful for runtime theming or Storybook
console.log(tokens.color.semantic.accent); // "#7c3aed"Theme system
Set data-theme on the <html> element to control the theme. Without it, the theme follows prefers-color-scheme.
<!-- Light (explicit) -->
<html data-theme="light">
<!-- Dark (explicit) -->
<html data-theme="dark">
<!-- Auto — follows prefers-color-scheme (default) -->
<html>Color tokens
Semantic color tokens — use these in all component styles and custom CSS.
| Token | Light | Dark | Usage |
|---|---|---|---|
--vyre-color-semantic-background | #ffffff | #09090b | Page/app background |
--vyre-color-semantic-surface | #fafafa | #18181b | Cards, panels, sidebars |
--vyre-color-semantic-surface-raised | #f4f4f5 | #27272a | Dropdowns, popovers |
--vyre-color-semantic-surface-overlay | #ffffff | #333338 | Modals, tooltips |
--vyre-color-semantic-border | #e4e4e7 | #3f3f46 | Default borders |
--vyre-color-semantic-border-subtle | #ebebec | #27272a | Section dividers |
--vyre-color-semantic-border-strong | #a1a1aa | #71717a | Focus rings, selected |
--vyre-color-semantic-text-primary | #09090b | #fafafa | Headings, body |
--vyre-color-semantic-text-secondary | #52525b | #a1a1aa | Descriptions, subtitles |
--vyre-color-semantic-text-muted | #a1a1aa | #71717a | Placeholders, timestamps |
--vyre-color-semantic-text-disabled | #d1d1d6 | #3f3f46 | Disabled state |
--vyre-color-semantic-text-inverse | #ffffff | #09090b | Text on dark/accent bg |
--vyre-color-semantic-accent | #7c3aed | #a78bfa | Brand CTAs, highlights |
--vyre-color-semantic-accent-hover | #6d28d9 | #8b5cf6 | Hover on accent |
--vyre-color-semantic-accent-foreground | #ffffff | #ffffff | Text on accent bg |
--vyre-color-semantic-accent-subtle | #f5f3ff | rgba(167,139,250,0.1) | Badge backgrounds |
--vyre-color-semantic-teal | #14b8a6 | #2dd4bf | Secondary accent, code |
--vyre-color-semantic-teal-hover | #0d9488 | #14b8a6 | Hover on teal |
--vyre-color-semantic-teal-subtle | rgba(20,184,166,.08) | rgba(20,184,166,.1) | Teal badge bg |
--vyre-color-semantic-success | #16a34a | #4ade80 | Success states |
--vyre-color-semantic-success-subtle | #f0fdf4 | rgba(74,222,128,.08) | Success badge bg |
--vyre-color-semantic-warning | #f59e0b | #fbbf24 | Warnings, beta |
--vyre-color-semantic-warning-subtle | #fffbeb | rgba(251,191,36,.08) | Warning badge bg |
--vyre-color-semantic-danger | #dc2626 | #f87171 | Errors, destructive |
--vyre-color-semantic-danger-hover | #ef4444 | #ef4444 | Hover on danger |
--vyre-color-semantic-danger-subtle | #fef2f2 | rgba(248,113,113,.08) | Danger badge bg |
Spacing tokens
| Token | Value | Preview |
|---|---|---|
--vyre-spacing-1 | 4px | |
--vyre-spacing-2 | 8px | |
--vyre-spacing-3 | 12px | |
--vyre-spacing-4 | 16px | |
--vyre-spacing-5 | 20px | |
--vyre-spacing-6 | 24px | |
--vyre-spacing-8 | 32px | |
--vyre-spacing-10 | 40px | |
--vyre-spacing-12 | 48px |
Typography tokens
| Token | Value | Usage |
|---|---|---|
--vyre-typography-font-size-2xs | 0.625rem | Tiny labels |
--vyre-typography-font-size-xs | 0.6875rem | Badge text, captions |
--vyre-typography-font-size-sm | 0.8125rem | Default UI, buttons |
--vyre-typography-font-size-md | 0.9375rem | Body text |
--vyre-typography-font-size-lg | 1.125rem | Large body, small headings |
--vyre-typography-font-size-xl | 1.375rem | Section headings |
--vyre-typography-font-size-2xl | 1.75rem | Page headings |
--vyre-typography-font-size-3xl | 2.25rem | Large headings |
--vyre-typography-font-size-4xl | 3rem | Hero headings |
AI Token Reference
For AI agents, MCP servers, and custom tooling — all tokens are available as structured machine-readable JSON with light/dark values, usage hints, and related token links.
For AI agents: Use
@usevyre/tokens/ai (or@usevyre/ai-context/tokens) instead of scraping this page. The JSON includes every token with both light and dark values, usage examples, and related token names.// Machine-readable token reference for AI agents
import tokensRef from "@usevyre/tokens/ai";
// or via ai-context:
import tokensRef from "@usevyre/ai-context/tokens";
// Each semantic color token includes light + dark values, usage hints, and related tokens
const accent = tokensRef.categories.color.semantic.find(t => t.name === "color.semantic.accent");
// {
// cssVar: "--vyre-color-semantic-accent",
// values: { light: "#7c3aed", dark: "#a78bfa" },
// aliases: { light: "color.primitive.violet.600", dark: "color.primitive.violet.400" },
// usage: ["Button primary background", "Link active state", "Focus ring", ...],
// relatedTokens: ["color.semantic.accent-hover", "color.semantic.accent-foreground", ...]
// }
// Spacing, typography, border-radius, shadow, transition, z-index also included
tokensRef.categories.spacing.tokens; // [{ cssVar, value, description }, ...]
tokensRef.categories.borderRadius.tokens;
tokensRef.categories.shadow.tokens;
// AI usage rules (8 rules)
tokensRef.rules; // ["NEVER use primitive tokens ...", ...]