---
title: "Architecture & Core Pillars"
sidebarTitle: "Introduction"
description: "Learn the Define, Orbit, and Broadcast architecture of deeepSpace. Eliminate design-code drift across Figma, code repositories, and AI models."
keywords: "living design system architecture, define orbit broadcast, zero drift"
icon: "book-open"
---

## Welcome to deeepSpace

**deeepSpace is the one source of truth for your design system, connecting designers, developers, and the AI agents they use while keeping design and code continuously aligned.**

It connects Figma components with their corresponding code components, tracks and versions both sides, detects structural, styling, token, variant, and visual mismatches, and helps teams understand exactly what changed and where design and implementation have drifted apart.

By giving people and their AI agents access to the same design-system context, deeepSpace creates a shared bridge between design and development where teams and AI can understand, maintain, and evolve the design system together.

<Tip>
**deeepSpace connects designers, developers, and AI agents around the same design system — Sync → Version → Detect → Verify → Align.**
</Tip>

---

## deeepSpace Products

<CardGroup cols={2}>
  <Card title="Figma Plugin" icon="pen-tool">
    **The designer-side connection**

    Designers selectively sync components from Figma into deeepSpace, including variants, properties, styles, tokens, and design specifications.
  </Card>
  <Card title="deeep CLI" icon="terminal">
    **The developer-side connection**

    Analyzes your UI codebase, discovers components and Storybook stories, normalizes metadata, and syncs code-side representations to deeepSpace.
  </Card>
  <Card title="Web Space" icon="globe">
    **The central design-system hub**

    Explore components, connect Figma and code mappings, inspect versions, identify mismatches, review visual diffs, and manage projects.
  </Card>
  <Card title="AI Connector (MCP)" icon="bot" href="/guides/ai-connector">
    **The Model Context Protocol server**

    Connects AI coding agents and IDE tools to live design-system context so AI operates with the actual source of truth.
  </Card>
</CardGroup>

---

## Core Capabilities

<CardGroup cols={2}>
  <Card title="Design & Code Sync" icon="refresh-cw">
    Keep Figma and code components connected and synchronized as the design system evolves over time.
  </Card>
  <Card title="Versioning & Change Tracking" icon="git-branch">
    Track versions on both design and code sides to understand exactly what changed and when.
  </Card>
  <Card title="Mismatch Detection" icon="search">
    Detect structural, styling, token, and variant drift between Figma designs and code implementations.
  </Card>
  <Card title="Visual Verification" icon="eye">
    Compare rendered code components with their Figma visuals to verify that implementation matches design.
  </Card>
  <Card title="AI-Powered Alignment" icon="zap">
    Equip AI agents with shared design-system context to understand differences and keep design and code in sync.
  </Card>
</CardGroup>

---

## Getting Started with the deeep CLI

### Quick Installation

Follow the [installation guide](/guides/installation) for your platform, installer availability, and PATH setup. Once installed, run:

```bash
deeep auth
```

<Note>
**New to deeepSpace?** [Create a free account](https://app.deeepspace.com) to get started.
</Note>

### Continuous Alignment Workflow

<CardGroup cols={1}>
  <Card title="1. Sync Design & Code" icon="refresh-cw">
    Designers push from Figma via the plugin; developers sync code components with `deeep init` and `deeep sync`.
  </Card>
  <Card title="2. Detect & Verify" icon="search">
    deeepSpace tracks versions, detects styling/prop drift, and visually verifies rendered components against Figma.
  </Card>
  <Card title="3. Align with AI" icon="sparkles">
    Use Web Space and the AI Connector (MCP) to resolve differences and maintain continuous consistency.
  </Card>
</CardGroup>

---

## Next Steps

1. [Install the deeep CLI](/guides/installation)
2. [Authenticate Your Account](/guides/authentication)
3. [Connect Your Project](/guides/connect)
4. [Sync Components](/guides/sync)