Documentation

Brands & tokens

How the multi-brand architecture works, how tokens are structured, and how to add a third brand.

Every brand is pure data in src/content/brands/<brand>/. The component tree is 100% shared.

The brand data folder

Each brand is defined by seven JSON files in src/content/brands/parcelry/: identity.json, tokens.json, content.json, pages.json, photos.json, shipments.json, and cities.json. No component tree is copied.

  • src/content/brands/parcelry/identity.json
  • src/content/brands/parcelry/tokens.json
  • src/content/brands/parcelry/content.json
  • src/content/brands/parcelry/pages.json
  • src/content/brands/parcelry/photos.json
  • src/content/brands/parcelry/shipments.json
  • src/content/brands/parcelry/cities.json

Tokens structure

tokens.json specifies light and dark palettes (16 tokens each: bg, surface, surface-2, border, field-border, text, text-muted, accent, accent-contrast, accent-text, ok, warn, danger, info, focus, accent-fill), font stacks, radii, spacing, and shadows.

Adding a third brand (e.g. berthline)

To add a third brand: 1) Create src/content/brands/berthline/ with the required JSON files. 2) Add 'berthline' to the BRANDS array in src/lib/brand.mjs and tools/build.mjs. 3) Run npm run build. The new brand will be built to dist/berthline/ automatically.

Explore further

Ready to see the platform in action?

Review live track events or explore operations in the control tower.