For developers

BrandCloud is five packages that share one set of tokens. Use the parts you need: a static Astro site can ship with no React at all.

The packages

Packages and what they do
Package	Version	What it is
`@brandcloud/tokens`	0.9.0	Semantic design tokens, brand themes from a small JSON file with WCAG AA checks at build time, a Tailwind v4 layer, a shadcn/ui bridge and a UI linter.
`@brandcloud/ui`	0.9.0	Accessible React primitives for crafted, brandable interfaces, styled only with @brandcloud/tokens.
`@brandcloud/astro`	0.9.0	Astro marketing components with zero client JavaScript by default, styled only with @brandcloud/tokens.
`@brandcloud/motion`	0.9.0	Motion tokens, CSS utilities, View Transitions recipes, character presets and spring drivers for web and React Native. Reduced-motion safe.
`@brandcloud/antipatterns`	0.9.0	Rules, a detector and bad/good example pairs for the visual tells of AI-generated web design.

Versions are pre-release until 1.0.0. npm packages are coming soon. Until then, install from the GitHub repository: clone it, run one command to pack the packages, then add the packed files to your project.

The shortest path

An Astro site with one brand, one section and a button. No client JavaScript.

Terminal: get the packages

git clone https://github.com/Zammi1/brandcloud.git
cd brandcloud
pnpm install
pnpm packs        # builds every package and packs it into ./packs

Terminal: in your project, next to that folder

pnpm add ../brandcloud/packs/brandcloud-astro-0.9.0.tgz ../brandcloud/packs/brandcloud-tokens-0.9.0.tgz astro

src/pages/index.astro

---
import "@brandcloud/tokens/css";
import "@brandcloud/tokens/brands/harbour.css";
import Hero from "@brandcloud/astro/components/Hero.astro";
---
<html lang="en-GB" data-brand="harbour" data-theme="light">
  <body>
    <Hero variant="editorial" copy={{
      heading: "Physio in Merewick that gets you back to running",
      primary: { label: "Book an assessment", href: "/book/" },
    }} />
  </body>
</html>

In these docs

Getting started
Install for Astro, React and Next, add Tailwind v4 and connect stock shadcn/ui components.
Theming
Make a brand from four inputs, switch brands and modes with two attributes, and use the depth and level tokens.
Components
Every public Astro and React component, live, with its props and its hover, focus, pressed, loading, disabled and invalid states.
Motion
Every timing and spring preset, the CSS utilities, the character presets and the spring drivers, with a reduce motion switch.
Anti-AI guide
Each visual rule with its bad and good example, and how to run the detector in CI.
Showcase
Three example brands on one page, switched with one attribute.