> ## Documentation Index
> Fetch the complete documentation index at: https://invoca-5bd45748-mintlify-6c3474a6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Titan

> Invoca's design system: foundations, components, patterns, and views.

# Titan

Titan is Invoca's design system. It exists so that a person or an agent building an
Invoca screen can make the right decision without asking anyone.

## How this documentation is organized

Four tiers, resolved from the top down. When you are building something new, start at
View and work inward — the page-level decision constrains everything below it.

<Columns cols={2}>
  <Card title="Foundations" icon="palette" href="/invoca-design-system/foundations/overview">
    Design tokens: color, type, space, elevation, motion. What everything else is built from.
  </Card>

  <Card title="Components" icon="component" href="/invoca-design-system/components/overview">
    Units that ship as exports from the Titan package, with a props API.
  </Card>

  <Card title="Patterns" icon="layout-template" href="/invoca-design-system/patterns/overview">
    Named compositions of two or more components. Rules, but no export.
  </Card>

  <Card title="Views" icon="layers" href="/invoca-design-system/views/overview">
    Full-page archetypes. Which regions exist, and what fills each one.
  </Card>
</Columns>

## How to read a page

Every page carries three layers, and it helps to know which one you are reading.

| Layer         | What it is                                                                  | How to treat it                                     |
| ------------- | --------------------------------------------------------------------------- | --------------------------------------------------- |
| **Reference** | Props, token values, variants. Generated from Titan source on every build.  | Authoritative. If it is wrong, the source is wrong. |
| **Decision**  | "Choose this when", "Choose something else when", and numbered constraints. | Normative. Departures need a reason, in review.     |
| **Rationale** | Why the decision is what it is.                                             | Context. Read it before proposing a change.         |

### Constraints have IDs

Normative rules are numbered — `TITAN-BTN-01`, `TITAN-COLOR-03`. The IDs are permanent
and citable. Use them in design review and in pull requests: "this conflicts with
TITAN-BTN-01" is a shorter and less personal conversation than describing the rule again.

## Start here

<Columns cols={3}>
  <Card title="For designers" icon="pen-tool" href="/invoca-design-system/get-started/for-designers">
    The Figma library, how it relates to code, and what to do when they disagree.
  </Card>

  <Card title="For engineers" icon="code" href="/invoca-design-system/get-started/for-engineers">
    Install, theming, tokens in code, and contributing back.
  </Card>

  <Card title="For agents" icon="bot" href="/invoca-design-system/get-started/for-agents">
    How to consume this documentation programmatically.
  </Card>
</Columns>

## One thing worth knowing up front

**Code is the source of truth for Titan.** Tokens are authored as DTCG JSON, built with
Style Dictionary, and emitted to CSS, to TypeScript, to Figma — and to this site. The
Figma library is a projection of code, not an authority. A value that exists only in
Figma is not part of the system.

This matters when you find a disagreement. The answer is not "which one looks right"; it
is "code is right, and Figma has drifted." [Report it](/invoca-design-system/contribute/reporting-drift).