> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Knapsack Documentation

## Why Teams Love Knapsack

Tired of design-development ping-pong? Knapsack gives your team one place to collaborate on design and code. Designers, developers, product folks, writers, and accessibility specialists all work from the same playbook. Teams using Knapsack ship 30-40% faster with more consistent brand experiences.

## Getting Started

Three quick steps and you're running:

1. [Install Knapsack](/get-started/install)
2. Configure and deploy your workspace
3. Invite your team

#### [Install Knapsack](/get-started/install)

Step-by-step guide to set up your environment.

#### [Run Knapsack](/get-started/running-knapsack-locally)

Set up and connect components in your local environment.

#### [Deploy Knapsack](/get-started/deploying-knapsack)

Share your workspace for team collaboration.

## The Building Blocks

### Design Foundations

Your brand's DNA—colors, type, spacing—all in one spot. These foundations automatically flow everywhere they're needed, so your products stay consistent without extra effort.

### Smart Documentation

Docs that update themselves? Yep. When your design system changes, your documentation follows. No more outdated guides or confused teammates.

### Preview and Validate

See changes before they go live. It's like a safety net for your design decisions—catch issues early before they reach customers.

### Component Library

Build UI elements that both designers and developers actually use. Knapsack's status system makes it clear what's ready, what's in progress, and what's being phased out.

#### [Design Tokens and Variables](/design-tokens)

Manage visual foundations including colors, typography, and spacing. Create a unified design language.

#### [Documentation Basics](/documentation)

Create and maintain living documentation for your design system. Keep guidelines current and accessible.

#### [Component Management](/code-sources)

Build and organize your component library with intuitive tools for development and maintenance.

#### [Component Patterns](/composition-and-prototyping/slots-and-sub-components)

Combine components into reusable patterns that solve common design problems without duplicating work.

## The Power Tools

### Design Meets Code

Connect designs with code to create interactive examples. Less back-and-forth, more building the right thing the first time.

### Design Tool Connection

Pull designs from Figma and keep everything in sync as they evolve. Your design tools and code stay friends, not frenemies.

### Tokens and Variables Hub

Bring your design elements from Figma, Tokens Studio, or Style Dictionary into one place. Change a color once, watch it update everywhere—no more hunting through code.

#### [Connecting Code](/code-sources)

Connect your design and code to create dynamic playgrounds for your whole team.

#### [Connecting Design Sources](/figma-design-source)

Display components, frames, and other artifacts from your Figma design files.

#### [Design Token Management](/design-tokens)

Organize design tokens and variables in one central hub. Control usage across products.

## Pro Features

### Theming and Components

Build a LEGO-like system that supports multiple themes. Light mode, dark mode, different brands—all without doubling your workload.

### Prototyping with Real Components

Test ideas with actual components, not throwaway mockups. See how things really work, including accessibility and interactions, before committing.

#### [Token Theming](/design-tokens/variables)

Enable advanced theming capabilities with design tokens using collections, groups, and modes.

#### [Composition and Prototyping](/composition-and-prototyping/prototyping)

Build complex layouts from simple parts and test them with real interactions before coding.

## Documentation and Design Tokens

Create living documentation that showcases your design system in action.

Our content blocks dynamically display design tokens, variables, and live components exactly as they appear in your products. Import from tools like Tokens Studio, Style Dictionary, or directly from Figma using our Figma variables plugin. Easily manage everything in Knapsack's intuitive interface.

#### [Living Documentation](/documentation)

Create guides that update automatically when your design elements change.

#### [Importing Tokens and Variables](/design-tokens/importing-tokens)

Bring design styles from Figma, Tokens Studio, or Style Dictionary with a few clicks.

#### [Unified Management](/design-tokens/using-tokens-in-projects)

Control all design elements in one place. Keep everything consistent across projects.

## Mission Control

### Team Access

Manage access your way—through SSO or Knapsack's built-in system. Give everyone just the right permissions based on their role.

### Governance Made Easy

Guard rails that keep everyone moving in the right direction without slowing them down. Perfect for enterprise teams with specific security needs.

### Development Integration

Connect with your Git workflows and development pipelines. Knapsack plays nicely with your existing tools rather than replacing them.

#### [Administrative](/administrative)

Guidance on configuring and managing your workspace. Learn to customize settings, manage team members, invite users, personalize your workspace, and more.

#### [Guides](/user-guides)

Detailed instructions to help you navigate and utilize the platform effectively. Learn the basics and discover how to work with various features and workflows.

#### [FAQs](/faqs)

Addresses common questions and provides quick solutions to help you navigate the platform. Explore the FAQs to find the information you need quickly and efficiently.