# Crown Design Tokens

- Getting Started
  - [Introduction](/docs/getting-started/introduction): What Crown is, who it's for, and the problem it solves.
  - [Installation](/docs/getting-started/install): Add Crown to your project — Tailwind preset, plain CSS, or raw token JSON.
  - [Your first themed page](/docs/getting-started/first-themed-page): End-to-end tutorial: install Crown, set data-brand and data-mode, build a button with semantic Tailwind utilities.
- Concepts
  - [Token Layers](/docs/concepts/token-layers): The six-layer pyramid from global palette to component tokens.
  - [Semantic Roles](/docs/concepts/semantic-roles): Reference for the semantic role API used by component authors.
  - [Theming Dimensions](/docs/concepts/theming-dimensions): Brand × Theme permutation matrix and how it drives the build.
  - [Naming Conventions](/docs/concepts/naming-conventions): Kebab-case rules, state suffixes, variant prefixes, and reference syntax.
- Foundations
  - [Palette](/docs/foundations/palette): Crown's raw color palette — the source material for all semantic token roles.
  - [Color](/docs/foundations/color): Crown's semantic color roles — Foreground, Border, Content — across six states.
  - [Typography](/docs/foundations/typography): Live preview of the Typography tokens, brand-switchable from the header.
  - [Spacing](/docs/foundations/spacing): Live preview of the Spacing tokens, brand-switchable from the header.
  - [Radius](/docs/foundations/radius): Crown's border-radius scale and when to use each step.
  - [Shadow](/docs/foundations/shadow): Crown's elevation ramp.
  - [Gradient](/docs/foundations/gradient): Live preview of the Gradient tokens, brand-switchable from the header.
  - [Breakpoints](/docs/foundations/breakpoints): Live preview of the Breakpoints tokens, brand-switchable from the header.
- Brands
  - [Brands Overview](/docs/brands/overview): KP, WF, and GWL at a glance.
  - [King Power (KP)](/docs/brands/kp): Identity and token highlights for the King Power brand.
  - [WF](/docs/brands/wf): Identity and token highlights for the WF brand.
  - [GWL](/docs/brands/gwl): Identity and token highlights for the GWL brand.
  - [Brand Switching](/docs/brands/switching): How runtime brand switching works via the data-brand attribute.
- Guides
  - [Tailwind Preset](/docs/guides/tailwind): Install the Crown Tailwind preset and configure dark mode.
  - [Plain CSS](/docs/guides/plain-css): Consume Crown via CSS variables — no Tailwind required.
  - [Next.js App Router](/docs/guides/nextjs-app-router): FOUC avoidance, SSR-safe theme attribute, and the pattern this docs site uses.
  - [Mobile](/docs/guides/mobile): iOS and Android usage — coming soon.
- Packages
  - [@kingpowerclick/crown-css](/docs/packages/crown-css): API reference for the crown-css package: install, exports, and when to use it.
  - [@kingpowerclick/crown-tailwind](/docs/packages/crown-tailwind): API reference for the crown-tailwind package: install, exports, and when to use it.
  - [@kingpowerclick/crown-utils](/docs/packages/crown-utils): API reference for the crown-utils package: install, exports, and when to use it.
- Contributing
  - [Adding a Token](/docs/contributing/adding-a-token): Walk through editing core-tokens, registering in metadata, and rebuilding.
  - [Adding a Brand](/docs/contributing/adding-a-brand): Add a fourth brand: new iconic file, new theme entries, register in dimensions.
  - [Writing a Transform](/docs/contributing/writing-a-transform): Style Dictionary v5 transform shape, registration order, and the rgbChannels example.
  - [Layer Contract](/docs/contributing/layer-contract): What each token layer may reference and the rules enforced socially.
  - [Local Development](/docs/contributing/local-development): bun install, build, test, watch — the minimum commands a new contributor needs.
- Releases
  - [Versioning](/docs/releases/versioning): Lockstep versioning across crown packages, driven by Changesets.
  - [Release Flow](/docs/releases/release-flow): develop → beta, main → stable: the dual-channel model.
  - [Changelog](/docs/releases/changelog): Recent entries from each package's changelog with links to GitHub releases.