> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orbital.supply/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> A modular library for professional brand guidelines

The Brandbook is built from a modular library of components. Each component group is powered by variables and styles, ensuring consistency and flexibility across proposals, internal presentations, and client-facing brand guidelines.

## Component Categories

### 1. Typography

* **Purpose**: Core heading and paragraph components (Display → Body).
* **How it works**: Controlled by variables (font-family, font-weight, font-size) and linked to text styles.
* **Usage**: Do not edit directly — replace values via variables or component properties.

### 2. Layout & Structure

* **Purpose**: Building blocks for document consistency — headers, footers, sections, dividers, tags.
* **Highlights**:
  * Chapter headers with automatic numbering.
  * Flexible section frames connected to spacing variables.
  * Tabs, labels, and content blocks powered by typography variables.
* **Example**: Use “Chapter Name” blocks to auto-generate structured layouts.

### 3. Visual Guides

* **Purpose**: Tools to explain logo placement, safe areas, and grid systems.
* **Includes**:
  * Logo construction diagrams.
  * Safe zone indicators.
  * Grid templates (12-column, modular variants).
* **Usage**: Replace logo placeholders with the client’s identity to generate professional visual guidelines instantly.

### 4. Color

* **Purpose**: Components for showcasing brand palettes using dynamic variables.
* **Includes**:
  * Color codes (RGB, HEX, CMYK, PMS).
  * Color swatches connected to Theme variables.
  * Full palette displays (primary, secondary, neutral, gradients, tints).
* **Usage**: Variables cascade automatically; edit colors in Theme to update globally.

### 5. Illustrative Elements

* **Purpose**: Patterns, icons, and graphic elements supporting brand identity.
* **Includes**:
  * Pattern modules built from primitives.
  * Icon sets connected to neutral/accent colors.
  * Frames for photography or supporting visuals.
* **Usage**: Replace placeholder visuals while keeping layouts intact.

### 6. Social Media

* **Purpose**: Ready-to-use templates for brand presence on digital platforms.
* **Includes**:
  * Post layouts (image + copy).
  * Mockups (Instagram UI, mobile screens).
  * Responsive ratios for multiple platforms.
* **Usage**: Update text and visuals; variables ensure consistent typography and color.

### 7. Page Templates

* **Purpose**: Full-page layouts that combine typography, layout, and visual elements.
* **Variants**: Each page has **5 layout options** (≈200 total variants).
* **Editable properties**: Page size, margins, and spacing — controlled via variables.
* **Usage**: Select the layout that fits your content; avoid editing individual components.

### 8. Brandbook Max

* **Purpose**: A “master view” of all page templates.
* **Usage**: No manual editing here — simply select the desired layout for each page.
* **Export**: This is also the place to export the final Brandbook once layouts are selected.
* **Why it matters**: Lets you preview, finalize, and export a complete brandbook quickly, without losing consistency.

## Your Brand Components

### 1. Base Elements

Fundamental building blocks for internal documents.

* **Typography**: heading and body components controlled by styles and variables.
* **Tables**: responsive tables for KPIs, budgets, or comparisons.
* **Tags & Labels**: highlight keywords or categories.
* **Logos & Icons**: placeholders for showcasing partner/client brands.

### 2. Layout & Content

Pre-built layouts for structuring proposals and internal presentations.

* **Chapter headers** with numbering and title properties.
* **Content blocks** for paragraphs, lists, or metric highlights.
* **Charts & Data visuals** for presenting KPIs.
* **Team & Clients layouts** to present collaborators.

### 3. Illustrative Elements

Supporting visuals to enrich the presentation.

* **Graphs** styled to match proposal themes.
* **Dividers & Frames** for document rhythm.
* **Highlight blocks** for quotes or spotlighted data.

## Editing Components

* **Variables first** → All components are powered by variables (colors, typography, spacing). Always update variables instead of editing components directly.
* **Locked components** → Some base elements (typography, logo placeholders) are locked to preserve consistency. Replace content via properties panel instead of editing directly.
* **Nested components** → Most components are built with nested instances (e.g. headings, body text, icons, swatches). This means you can change typography, sizes, or content directly from the **nested component properties**, without having to click into every layer.
* **Multi-brand support** → Switch between Client / Your Brand / Proposals modes to instantly restyle all components without rebuilding layouts.

## Best Practices

* **Use the correct set of components for the context.**
  * Brand Proposal = exploratory, Your Brand = internal, Brand Book = final client delivery.
* **Avoid overrides.** Always replace content via properties or connected variables, not by breaking component instances.
* **Leverage nested components.** Use their properties to update multiple layers quickly and consistently.
* **Choose layouts, don’t rebuild them.** Use the 5 variants provided per page; they scale through variables.
* **Apply modes correctly.** Use Theme and Mode collections for Light/Dark or Client/Your Brand switching — never override directly.

## Next Steps

* [Changelog](/brand-book/changelog) → Track updates, improvements, and new component releases.