Introduction
What Crown is, who it's for, and the problem it solves.
Crown is King Power Group's design-token system — a single source of truth for colour, typography, spacing, and elevation across three brands: KP, WF, and GWL. Tokens flow from Figma through Tokens Studio and Style Dictionary into per-platform build outputs, so design decisions made in Figma surface consistently across every product.
Who it's for
| Audience | What you'll do with Crown |
|---|---|
| Web engineers | Consume tokens via the Tailwind preset or plain CSS variables. Component code stays brand-agnostic; the token layer fills in the brand and theme. |
| Designers | Work in Figma with Tokens Studio. Edits made here flow through the pipeline and appear in every product. |
| Token contributors | Edit core-tokens/ JSON, run the build, and land changes that propagate to web, iOS, and Android. |
The problem Crown solves
Without a shared token layer, a button built for KP can't be reused for GWL without forking it. Crown removes that problem: components bind to semantic roles (e.g. color-primary-foreground-default), and the brand layer resolves the actual colour at runtime. One component, three brands, zero duplication.
component binds to role → brand layer fills shade → browser rendersSwitch data-brand on <html> and the same component re-renders in a different brand — no code changes, no re-deployment.
How it works
Figma → Tokens Studio JSON → Style Dictionary → per-platform outputsStyle Dictionary reads the token JSON, applies Crown's transform pipeline, and emits:
@kingpowerclick/crown-css— CSS custom properties for every brand × mode permutation@kingpowerclick/crown-tailwind— Tailwind v4 theme and variant CSS@kingpowerclick/crown-utils— prebuilt utility classes
Three integration tiers
Pick the tier that matches your stack. All three coexist if you need them.
| Tier | Package | When to use |
|---|---|---|
| Tailwind preset | crown-tailwind | Tailwind v4 projects. Recommended. |
| Plain CSS | crown-css | Any web project — no Tailwind required. |
| Raw tokens | crown-css/tokens | Non-web platforms, or tooling that needs structured data. |
Ready to set up Crown? Continue to Install.