Design Tokens

Scaffolds a design token system with base primitives, semantic aliases, theme configuration, and optional dark mode definitions. Tokens follow a three-tier architecture: base values define raw primitives, semantic tokens map intent to base values, and themes override semantic tokens for different contexts.

Name	`design-tokens`
Version	`0.1.0`
Category	design
License	Apache-2.0
Persona	design
Tags	tokens, design, theming, dark-mode, css-variables
Source	`templates/design-tokens`

Render it

Three front doors, one catalog. Pick whichever suits the caller.

# CLI
npx @nanohype/sdk render design-tokens --out ./my-app

# SDK
import { LocalSource, renderTemplate } from "@nanohype/sdk";
const result = await renderTemplate(source, "design-tokens", variables);

# MCP — from an agent
get_template({ name: "design-tokens" })

Variables

Required

ProjectName string: Kebab-case project name, used as directory and token prefix Must be lowercase kebab-case starting with a letter.

Optional

TokenFormat string — defaults to json: Primary output format for token files
IncludeDarkMode bool — defaults to true: Include dark mode token overrides

What it produces

4 files. Placeholder names such as __APP_NAME__ are what the renderer substitutes into.

tokens/base.json
tokens/dark.json
tokens/semantic.json
tokens/theme-config.yaml

Composes with

Pairs with design-system
Pairs with component-inventory
Pairs with brand-guidelines
Pairs with next-app
Nests inside monorepo

Composites that use it

Product Launch — Full product launch kit spanning engineering, design, QA, product, marketing, and operations.