DocsBack to homepage

Start Here

  • Getting Started
  • Key Concepts

Design Tokens

  • Token Types
  • Token Modes
  • Token Enforcement
  • Deprecated Tokens
  • Quality and Accessibility

Components

  • Component Builder
  • Composition Rules

Publishing

  • Publishing
  • Docs Mode
  • Changelog Notifications
  • Notifications and Alerts

Integrations

CLI & Data

  • CLI Reference
  • CLI Configuration
  • Import Formats
  • Importing Tokens
  • Export Formats

Tooling

  • Studio AI Assistant
  • Figma Plugin
  • API Reference
  • Webhooks

Account & Billing

  • Audit Log
  • Security and Access
  • Account Security
  • Pricing and Payments

Documentation

Docs Mode

Docs Mode is the documentation layer built into Studio. Write guides, embed live tokens and components, and publish to a consumer-facing portal without leaving your design system.

How Docs Mode works

Docs Mode is the Docs tab inside any project in Studio. Access it from the left navigation.

The sidebar lists every page for the project. The main area is a block editor. Changes auto-save as you type. There is no separate publish step for individual pages.

Each page has a visibility setting. Visible pages appear in the consumer docs portal. Hidden pages stay accessible in Studio for drafting.

Two surfaces exist: the editor in Studio, and the reader at /docs/[org]/[project].

Page types

Every project starts with three page types.

  • •Custom pages: pages you create. Click the "+" button in the sidebar, enter a title, and press Enter. The slug is generated automatically. Custom pages are fully editable and can be deleted.
  • •Template pages: seeded defaults, like Getting Started. You can edit their content but cannot delete them. A lock icon marks them in the sidebar.
  • •Auto pages: generated from your design system data (Token Reference, Components, Changelog, and Version Diff). Content updates automatically when the design system changes. You cannot edit auto pages. A lock icon marks them in the sidebar.

Every new project starts with all five default pages already in the sidebar.

Managing pages

  • •Creating a custom page: click the "+" icon in the sidebar, enter a title, and press Enter. The page appears at the bottom of the list and opens immediately.
  • •Renaming: click the page title in the sidebar to edit it inline. Renaming applies to custom pages only.
  • •Reordering: drag any page by its handle in the sidebar. Auto and template pages can be reordered relative to custom pages.
  • •Visibility: click the eye icon next to any page to show or hide it in the consumer portal. Hidden pages remain accessible in Studio.
  • •Deleting: hover a custom page in the sidebar and click the trash icon. A confirmation dialog appears before the page is removed. Auto and template pages cannot be deleted.

Confirmation dialog: Delete this page? This cannot be undone. (Buttons: Delete page, Cancel)

Content blocks

Custom and template pages use a block editor. Click the "+" between blocks, or at the bottom of the page, to add a block.

  • •Heading: section heading at H2, H3, or H4 level.
  • •Paragraph: body text.
  • •Code: syntax-highlighted code block. Supported languages: bash, html, css, typescript, javascript, json, tsx, vue, yaml.
  • •Callout: highlighted notice in one of three variants: Info, Tip, or Warning.
  • •Image: inline image with alt text and an optional caption.
  • •Token Embed: live inline preview of a token value, such as a color swatch. Resolves the current published token value at render time.
  • •Component Embed: renders the live HTML output of a component from your design system.
  • •Divider: horizontal rule for separating sections.

Drag a block's left handle to reorder it. The trash icon appears on hover to delete a block.

The consumer docs portal

The consumer-facing URL for your docs is /docs/[org]/[project], or a custom domain if you have one configured.

All visible pages appear in the consumer sidebar in the same order as the Studio sidebar.

Auto pages update on their own: Token Reference reflects the latest published token values, Components reflects the latest published component output, and Changelog reflects each published version. See Publishing for the full publish lifecycle.

Branching and docs

Docs pages are branch-aware. When you switch to a branch in Studio, the Docs editor shows that branch's version of each page.

Changes to docs pages on a branch are merged along with token changes when the branch is merged.

The consumer portal supports branch preview. From the branch menu in Studio, generate a branch-specific URL to share a preview of the merged docs state before the branch lands on main. See Branching Workflow for the full branching workflow.