Brand examples

Two reference ApollionConfigs in the monorepo — fast food and fashion/retail — ready for apollion-tokens build.

Source: packages/tokens/docs/examples/themes/.

Color groups

Group	Keys	Role
Brand	`main`, `opposite`, `complementary`	Identity
Contrast	`baseDark`, `baseLight`, `deepDark`, `deepLight`	Light/dark duotone
Function	`primary`, `secondary`, `tertiary`	CTAs / hierarchy
Response	`success`, `information`, `warning`, `danger`	Feedback

opposite can be omitted — the pipeline derives it via OKLch hue rotation (+180°) from main. The .dark / .light / .action / .active variants and the neutral / grayscale ramps come out automatically (OKLch lerp).

Color doc in core: Colors.

Files

File	Brand	Inspiration
`fast-food.theme.json`	`fast-food`	Red + gold
`fashion-retail.theme.json`	`fashion-retail`	Editorial black + champagne

Fast food (summary)

{
  "brands": {
    "fast-food": {
      "main": "#C8102E",
      "complementary": "#FFC72C",
      "primary": "#E31837",
      "baseDark": "#2C1810",
      "baseLight": "#FFF8F0"
    }
  },
  "modes": ["light"],
  "surfaces": ["positive"],
  "dimensions": ["normal"],
  "output": { "css": true, "json": true, "ts": true }
}

Local build

cd packages/tokens
 
yarn apollion-tokens build \
  --config docs/examples/themes/fast-food.theme.json \
  --out /tmp/apollion-fast-food
 
yarn apollion-tokens build \
  --config docs/examples/themes/fashion-retail.theme.json \
  --out /tmp/apollion-fashion

Output: dist/css/*.css, dist/json/*, dist/ts/*.d.ts + manifest.json.

Expanding the matrix

The examples use 1 variant (light × positive × normal). Full matrix:

{
  "modes": ["light", "dark"],
  "surfaces": ["positive", "negative"],
  "dimensions": ["compact", "normal", "spacious"]
}

→ 12 variants per brand (2 × 2 × 3).

React runtime (shortcut)

No CLI — createTheme in core:

import { createTheme, ApollionProvider } from '@apollion-dsi/core/themes';
 
const theme = createTheme({
  colors: {
    main: '#C8102E',
    complementary: '#FFC72C',
  },
});

For declarative production: copy brands.<name> into apollion.config.mjs at the consumer's root — see Build CLI and Create Theme.