# Brandtree Docs > Build and maintain brand guidelines with Brandtree. ## Getting started - [Introduction](https://brandtree.dev/): Create, maintain, and publish a brand guidelines website with Brandtree. - [Quickstart](https://brandtree.dev/quickstart): Scaffold a brand-guidelines project, add a page, and build your first site. - [Project structure](https://brandtree.dev/project-structure): Understand authored files, generated output, and how to create another client project. ## Brand configuration - [Overview](https://brandtree.dev/brand-configuration): Configure your brand identity and connect shared brand data to your guidelines. - [Brand identity](https://brandtree.dev/brand-identity): Set your brand name, document details, and public identity. - [Colors](https://brandtree.dev/colors): Define palette shades and select the colors your guidelines document. - [Themes](https://brandtree.dev/themes): Assign semantic colors for light and dark interfaces. - [Typography](https://brandtree.dev/typography): Define font roles, weights, and the typographic scale. - [Fonts](https://brandtree.dev/fonts): Register hosted or local fonts and connect them to typography. - [Logos](https://brandtree.dev/logos): Configure artwork variants, clearspace, sizes, and colorways. - [Brand assets](https://brandtree.dev/brand-assets): Organize approved brand resources and register downloadable packages. - [Contact and social profiles](https://brandtree.dev/contact): Provide contact details and official social accounts. ## Content creation - [Pages and MDX](https://brandtree.dev/authoring): Write Markdown and MDX pages, set page metadata, and connect prose to typed brand data. - [Media](https://brandtree.dev/media): Add images, SVG icon specimens, and downloadable files to authored pages. - [Custom components](https://brandtree.dev/customization): Extend MDX with your own Astro and React components while preserving Brandtree's data model. - [Styling and tokens](https://brandtree.dev/styling): Style custom exhibits with generated brand tokens, theme support, and accessible layouts. ### Components - [Components](https://brandtree.dev/components): Built-in MDX components for composing Brandtree brand websites. #### Layout and prose - [Block](https://brandtree.dev/components/block): Pair explanatory copy with a specimen and an optional supporting note. - [Grid](https://brandtree.dev/components/grid): Arrange related specimens in responsive columns. - [Panel](https://brandtree.dev/components/panel): Frame artwork with a configured color pairing, consistent proportions, and an optional caption. - [Figure](https://brandtree.dev/components/figure): Display an image in a consistent frame, or reserve space for artwork still in production. - [Callout](https://brandtree.dev/components/callout): Highlight an editorial note or a rule for using the brand correctly. - [Spec List](https://brandtree.dev/components/spec-list): Present short specification terms and values in a readable description list. - [Statement](https://brandtree.dev/components/statement): Group the opening prose that expresses a brand promise or point of view. #### Logos - [Logo](https://brandtree.dev/components/logo): Display approved logo artwork that follows the page theme. - [Logo Clearspace](https://brandtree.dev/components/logo-clearspace): Show the protected space around your logo with a labeled measurement diagram. - [Logo Colorways](https://brandtree.dev/components/logo-colorways): Display approved logo and background combinations from your brand configuration. - [Logo Scaling](https://brandtree.dev/components/logo-scaling): Compare logo sizes side by side and display your configured minimum-size guidance. - [Construction Grid](https://brandtree.dev/components/construction-grid): Overlay a division grid on logo artwork to explain its proportions. - [Logo Misuse](https://brandtree.dev/components/logo-misuse): Illustrate incorrect logo treatments with numbered rules and explanatory notes. #### Colors - [Color Palette](https://brandtree.dev/components/color-palette): Display your brand’s named color swatches with optional print values. - [Color Swatch](https://brandtree.dev/components/color-swatch): Display one named brand color with its source value and optional print specifications. - [Color Scale](https://brandtree.dev/components/color-scale): Display the published shade stops for each configured palette family. - [Contrast Matrix](https://brandtree.dev/components/contrast-matrix): Compare foreground and background color pairs with contrast ratios and grades. #### Typography - [Type Specimen](https://brandtree.dev/components/type-specimen): Introduce a type family with oversized characters, foundry details, and a licence link. - [Type Scale](https://brandtree.dev/components/type-scale): Show your configured type styles at their actual sizes alongside screen and print specifications. - [Font Weights](https://brandtree.dev/components/font-weights): Compare the configured font weights and italics in a selected type family. - [Glyphs](https://brandtree.dev/components/glyphs): Display character sets to document the letterforms, numerals, and punctuation of a type family. #### Voice and audience - [Tone Sliders](https://brandtree.dev/components/tone-sliders): Position your brand’s voice between pairs of opposing traits. - [Value Grid](https://brandtree.dev/components/value-grid): Present brand values as large headings paired with concise explanations. - [Persona Card](https://brandtree.dev/components/persona-card): Introduce an audience persona with a portrait, key facts, and supporting notes. #### Collections - [Icon Grid](https://brandtree.dev/components/icon-grid): Show a named SVG icon set with version labels and a construction-grid overlay. - [Photo Grid](https://brandtree.dev/components/photo-grid): Arrange photography in a responsive grid with captions, column spans, and image treatments. - [Downloads](https://brandtree.dev/components/downloads): List downloadable brand assets with their configured format, size, and supporting notes. - [Layout Grid](https://brandtree.dev/components/layout-grid): Illustrate a composition grid with columns, margins, gutters, and supporting specifications. ## Site management - [Navigation](https://brandtree.dev/navigation): Organize pages, control sidebar order, and keep published URLs stable. - [Localization](https://brandtree.dev/localization): Publish translated guidelines with locale routes, fallback pages, localized brand labels, and RTL content. - [Social cards and SEO](https://brandtree.dev/social-cards): Configure generated share images, page metadata, canonical URLs, and indexing. - [Validation](https://brandtree.dev/validation): Check source inputs and review the generated site before a release. - [Build and deployment](https://brandtree.dev/publishing): Build a static release and deploy it to your hosting provider. ## Reference - [Configuration](https://brandtree.dev/configuration): The fields, defaults, and constraints accepted by brandtree.config.ts. - [Frontmatter](https://brandtree.dev/frontmatter): All supported page metadata fields, defaults, and validation rules. - [Folder metadata](https://brandtree.dev/folder-metadata): Reference for folder labels, ordering, icons, and metadata modules. - [CLI](https://brandtree.dev/cli): Commands, flags, generated runtimes, and failure behavior. - [Troubleshooting](https://brandtree.dev/troubleshooting): Resolve common content, configuration, asset, and development problems. ## Other - [Assets](https://brandtree.dev/assets): Find the guide for brand resources, page media, fonts, and social preview images. ## Agent skills - [brandtree-docs](https://brandtree.dev/.well-known/agent-skills/brandtree-docs/SKILL.md): Read the Brandtree Docs instead of answering from memory. Build and maintain brand guidelines with Brandtree. Use when a task involves Brandtree Docs: how it works, how to set it up or configure it, or its API. ## Agent resources - [llms-full.txt](https://brandtree.dev/llms-full.txt): The full Markdown of every page in one file. - [Page Markdown](https://brandtree.dev/index.md): Append `.md` to any page URL to fetch that page as raw Markdown. - [JSON API](https://brandtree.dev/api/docs/pages.json): Page index of the JSON docs API; each entry links the page's JSON and Markdown forms. Described by the OpenAPI document at https://brandtree.dev/openapi.json. - [Agent skills](https://brandtree.dev/.well-known/agent-skills/index.json): Agent Skills discovery index of the skills this site publishes. - [API catalog](https://brandtree.dev/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here. - [AI catalog](https://brandtree.dev/.well-known/ai-catalog.json): ARD manifest of the agent-facing resources on this site (MCP server, skills, APIs). - [agent-readability.json](https://brandtree.dev/agent-readability.json): Manifest of every agent-facing artifact on this site. - [Sitemap](https://brandtree.dev/sitemap.xml): Every indexable page URL with its last-modified date.