@novahelm/design-tokens

Canonical design tokens for NovaHelm — semantic color, radius, spacing, typography, shadow, and motion values, with presets and platform adapters.

Zero runtime dependencies. Layer 0 in the NovaHelm dependency graph. Portable to any project.

Install

pnpm add @novahelm/design-tokens

Presets

• default — Clean blue, balanced contrast. Light-first.
• slate — Neutral grays, professional. Light-first.
• neon — High-energy fuchsia. Light-first.
• novapulse-dark — Signature: obsidian + mint-cyan pulse + Bricolage Grotesque. Dark-first.
• novapulse-light — Light companion to the signature preset.

import { getPreset } from "@novahelm/design-tokens";
const preset = getPreset("novapulse-dark");
preset.dark.colors.brand.pulse; // "#5eead4"

Adapters

Web (CSS variables)

import { toCssVars } from "@novahelm/design-tokens/web";
import { getPreset } from "@novahelm/design-tokens";
const vars = toCssVars(getPreset("novapulse-dark").dark);

Native (React Native)

import { toNativeTokens } from "@novahelm/design-tokens/native";
import { getPreset } from "@novahelm/design-tokens";
const tokens = toNativeTokens(getPreset("novapulse-dark").dark);

Schema

See src/semantic.ts. Token groups: colors (bg/text/border/brand/signal), radii, spacing, typography, shadows, motion.

Design Language

The novapulse-dark preset codifies the signature language — palette, typography, surfaces, motion. Reference mockup: docs/mockups/novapulse-redesign.html.