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.

Foundations

Design tokens: color, type, space, elevation, motion. What everything else is built from.

Components

Units that ship as exports from the Titan package, with a props API.

Patterns

Named compositions of two or more components. Rules, but no export.

Views

Full-page archetypes. Which regions exist, and what fills each one.

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

For designers

The Figma library, how it relates to code, and what to do when they disagree.

For engineers

Install, theming, tokens in code, and contributing back.

For agents

How to consume this documentation programmatically.

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.