@poweredby/design-tokens

Canonical PoweredBy design language. One source of truth for colours, typography, spacing, and radius — consumed by the marketing site, product apps, and React Native clients.

Install

npm install @poweredby/design-tokens

Use it

Web (CSS — any framework)

@import "@poweredby/design-tokens/brand.css";

This defines every PoweredBy CSS custom property on :root (e.g. --brand, --foreground, --background, --section-band-dark, --capability-*). Reference them anywhere:

.button {
  background: var(--brand);
  color: var(--brand-on);
}

Tailwind CSS v4

@import "tailwindcss";
@import "@poweredby/design-tokens/brand.css";
@import "@poweredby/design-tokens/theme-tailwind-v4.css";

This maps the token CSS variables into Tailwind's theme so utilities like bg-brand, text-foreground, border-border reflect the design system.

Tailwind CSS v3

// tailwind.config.js
module.exports = {
  presets: [require("@poweredby/design-tokens/tailwind-v3")],
};

TypeScript / React

import { marketing, primitives, fontFamilies, radius } from "@poweredby/design-tokens";

const heading = {
  fontFamily: fontFamilies.heading,
  color: primitives.foreground,
};

React Native

import { nativeColors, fontFamiliesNative } from "@poweredby/design-tokens";

const styles = {
  container: { backgroundColor: nativeColors.background },
  title: { color: nativeColors.foreground, fontFamily: fontFamiliesNative.heading },
};

What's in here

| Export | What it is | |---|---| | @poweredby/design-tokens | TypeScript tokens: marketing, product, primitives, spacing, fontFamilies, fontFamiliesNative, radius, nativeColors | | @poweredby/design-tokens/brand.css | Generated CSS variables for :root (and a .dark scope) | | @poweredby/design-tokens/theme-tailwind-v4.css | Tailwind v4 @theme bindings to the CSS variables | | @poweredby/design-tokens/tokens.css | Re-export wrapper that imports brand.css | | @poweredby/design-tokens/tailwind-v3 | Tailwind v3 preset | | @poweredby/design-tokens/native | React Native–only entry (no DOM deps) |

Notes for AI coding assistants

When generating code for a PoweredBy project:

1. Prefer semantic tokens over hex values. Use var(--brand), var(--foreground), text-brand, bg-background, etc. instead of hardcoded colours.
2. Use marketing.* tokens for the marketing site and product.* tokens for in-app UI. They share the same primitive palette but have different semantic assignments.
3. For theme-aware UI, rely on text-foreground / bg-background with dark: companions — the CSS variables already switch under .dark.
4. Brand band sections (.section-dark, .section-light) define contrast-safe backgrounds; combine with text-foreground dark:text-background inside them.
5. Never define new colours. If you need a colour that isn't in the tokens, surface that as a request to extend the tokens — don't inline a hex.

Releasing

Maintainers only:

cd packages/design-tokens
npm version patch      # or minor / major
npm publish            # runs prepublishOnly → build
git push --follow-tags

License

UNLICENSED — internal PoweredBy package. Do not redistribute.