Downloads

Every file on this page is generated from the @bigbang/tokens build output when the site is built; there is no hand-edited copy. The Figma variables and the ECharts theme come from the same export code as the Theme generator, and the build stops if their values differ from the token build.

Fixture is the test brand: it is for trying the white-label flow and brand switching, not for product screens.

CSS variables

One file per brand and mode. The selector is [data-brand="<brand>"][data-theme="<mode>"]; reduced-motion values are in the same file. tailwind-theme.css binds the Tailwind v4 utility classes to the token variables and is imported by @bigbang/ui/styles.css.

File	Brand	Mode	Size	Download
bigbang-light.css	BigBang	Light	42.2 KB	Downloadbigbang-light.css
bigbang-dark.css	BigBang	Dark	41.9 KB	Downloadbigbang-dark.css
fixture-light.css	Fixture (test brand)	Light	42.2 KB	Downloadfixture-light.css
fixture-dark.css	Fixture (test brand)	Dark	41.9 KB	Downloadfixture-dark.css
neutral-light.css	neutral	Light	42.2 KB	Downloadneutral-light.css
neutral-dark.css	neutral	Dark	41.9 KB	Downloadneutral-dark.css
tailwind-theme.css	All	All	21.3 KB	Downloadtailwind-theme.css

app.css

@import '@bigbang/tokens/css/neutral-light.css';
@import '@bigbang/tokens/css/neutral-dark.css';

JSON

The same values, flat: the key is the CSS variable name (bigbang-color-surface-default) and the value is the one CSS uses. It is for places that cannot read CSS variables, such as charts, canvas or e-mail templates. motion.json gives durations in milliseconds, curves as Bézier arrays and springs as physics parameters (MOT-09).

File	Brand	Mode	Size	Download
bigbang-light.json	BigBang	Light	24.3 KB	Downloadbigbang-light.json
bigbang-dark.json	BigBang	Dark	24.2 KB	Downloadbigbang-dark.json
fixture-light.json	Fixture (test brand)	Light	24.3 KB	Downloadfixture-light.json
fixture-dark.json	Fixture (test brand)	Dark	24.2 KB	Downloadfixture-dark.json
neutral-light.json	neutral	Light	24.3 KB	Downloadneutral-light.json
neutral-dark.json	neutral	Dark	24.2 KB	Downloadneutral-dark.json
motion.json	All	All	3.7 KB	Downloadmotion.json

DTCG

The tokens as a DTCG tree: each token has a $type and a resolved $value, with no references ({…}) left. It is for importing into design tools and other token pipelines. Tokens that only mean something in CSS (spring linear() curves, percentage distances) stay out of the tree; their names are listed under $extensions["com.pupas.cssOnly"] at the root.

File	Brand	Mode	Size	Download
bigbang-light.tokens.json	BigBang	Light	58.1 KB	Downloadbigbang-light.tokens.json
bigbang-dark.tokens.json	BigBang	Dark	57.8 KB	Downloadbigbang-dark.tokens.json
fixture-light.tokens.json	Fixture (test brand)	Light	58.1 KB	Downloadfixture-light.tokens.json
fixture-dark.tokens.json	Fixture (test brand)	Dark	57.8 KB	Downloadfixture-dark.tokens.json
neutral-light.tokens.json	neutral	Light	58.1 KB	Downloadneutral-light.tokens.json
neutral-dark.tokens.json	neutral	Dark	57.8 KB	Downloadneutral-dark.tokens.json

Figma variables

One file per brand, with three collections:

Collection	Modes	Contents
<brand> / ramps	value	The brand’s own colour ramps (50–950)
<brand> / semantic colour	light, dark	Every colour of the semantic layer, with its light and dark value
<brand> / dimension	value	Spacing, corner radius, border width and icon size, in px

Colours are Figma r, g, b, a objects in the 0–1 range; variable names are grouped with / (color/surface/default). Bring the file into a Figma file with a plugin that imports variables from JSON, or with the Figma variables API.

File	Brand	Mode	Size	Download
bigbang.figma-variables.json	BigBang	Light and dark	73.7 KB	Downloadbigbang.figma-variables.json
fixture.figma-variables.json	Fixture (test brand)	Light and dark	73.7 KB	Downloadfixture.figma-variables.json
neutral.figma-variables.json	neutral	Light and dark	73.7 KB	Downloadneutral.figma-variables.json

ECharts theme

One file per brand, holding one theme per mode (neutral-light, neutral-dark): categorical palette, sequential palette, axis, grid, legend and tooltip colours.

File	Brand	Mode	Size	Download
bigbang.echarts-theme.json	BigBang	Light and dark	3.4 KB	Downloadbigbang.echarts-theme.json
fixture.echarts-theme.json	Fixture (test brand)	Light and dark	3.4 KB	Downloadfixture.echarts-theme.json
neutral.echarts-theme.json	neutral	Light and dark	3.4 KB	Downloadneutral.echarts-theme.json

import * as echarts from 'echarts/core';
import themes from './neutral.echarts-theme.json';

echarts.registerTheme('neutral-light', themes['neutral-light']);
const chart = echarts.init(element, 'neutral-light');

Product screens do not need this file: the Chart component reads its colours from the tokens at run time and repaints when the brand or mode changes. The file is for tools and reports that use ECharts outside Chart.