Overview
Configure your brand identity and connect shared brand data to your guidelines.
Your brandtree.config.ts is the source of truth for reusable brand data.
Start with the complete config in the example site, replace its values, and
keep required sections intact. The configuration reference
lists the supported fields.
Configure your identity
Brand identity
Set the brand name, description, and guidelines metadata.
Colors
Define palette families, shades, and approved swatches.
Themes
Map your palette to light and dark interface roles.
Typography
Define font roles, weights, and the type scale.
Fonts
Register local or hosted fonts and connect their CSS variables.
Logos
Configure artwork, colorways, clearspace, and minimum sizes.
Brand assets
Reference shared resources and register downloadable packages.
Contact and social profiles
Provide the contacts and accounts readers need.
Connect the config to your pages
A config describes the brand; an MDX page explains its use. Add a component to show that shared data within your explanation:
## Approved colors
Use the primary palette for our most recognizable applications.
<ColorPalette category="primary" />The runtime supplies the resolved brand, interface strings, and direction for the active locale to built-in MDX components automatically. Pass an explicit prop to override a value for one component. See Components for examples, previews, and prop definitions.