# Exporting Brand Kit design tokens (CSS & JSON)

**Category:** [Standards & Brand Hub](https://help.totalctrl.app/hc/totalctrl/totalctrl-help-center/en-US/categories/standards)
**Updated:** 2026-10-04

## Take your brand into code

Every Brand Kit can be exported as **design tokens** so developers use exactly the same colours, fonts, and styles you defined — no more eyeballing hex codes.

- **CSS** — a `:root` stylesheet of custom properties (e.g. `--brand-primary`) plus `@font-face` rules for your brand fonts. Drop it into any site and reference the variables.
- **JSON** — a structured design-token file for build tools, design systems, and token pipelines.

## How to export

Open a Brand Kit in **Standards → Brand Kit** and use the **Export** action to download the `.css` or `.json` file. The export reflects the kit's current colours, typography, and logos.

---

## Related Articles

- [Brand Portals: a public home for your brand](https://help.totalctrl.app/en-US/articles/brand-portal)
- [App Settings: assign a package to each app](https://help.totalctrl.app/en-US/articles/standards-app-settings)
- [Brand Voice: your workspace's verbal identity](https://help.totalctrl.app/en-US/articles/brand-voice)
- [Create your first Standards Package](https://help.totalctrl.app/en-US/articles/create-a-standards-package)
- [Build a tone profile](https://help.totalctrl.app/en-US/articles/build-a-tone-profile)

---
[← Back to TotalCtrl Help Center](https://help.totalctrl.app/en-US/)