@routess/design-tokens

Design values centralized so the web app, this docs site, and the future mobile app all look the same.

What's in itCopy Anchor Link

• Colors: light + dark palettes in OKLCH
• Typography: font sizes, weights, line heights
• Spacing: consistent scale (xs/sm/md/lg/xl)
• Border radius: --radius system
• Animations: fade, slide, scale, spin keyframes

Web usageCopy Anchor Link

Import the CSS once at the app entry:

import "@routess/design-tokens/css/tokens.css";

Use the CSS variables directly:

.card {
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

Or the Tailwind v4 theme tokens (bg-card, text-foreground, etc.), already wired via @theme inline.

React Native usageCopy Anchor Link

Import the JS exports:

import { lightColors, darkColors, spacing } from "@routess/design-tokens";

OKLCH isn't directly supported in RN; use the helper utilities in the package to get hex/rgb fallbacks.

Dark modeCopy Anchor Link

Add the dark class to <html> (or <body>) and the dark token values take over. The web app and docs site both follow the user's system preference by default.