> ## Documentation Index
> Fetch the complete documentation index at: https://atomickit.copyelement.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Export Your Elementor Design System as CSS or JSON

> Export Elementor global classes from AtomicKit as a .css stylesheet or .json schema, with options to export all classes or a filtered selection.

AtomicKit's Export Center lets you package your Elementor design system for backup, team sharing, or migration. Export as a `.css` file for direct stylesheet use, or as a `.json` schema for programmatic workflows and external tooling. You choose both the format and the scope of what gets exported each time you download.

## Export Formats

<CardGroup cols={2}>
  <Card title=".css Stylesheet" icon="file-code">
    A standard CSS file containing all selected global class rules, including responsive `@media` blocks. Use this file to import classes into another AtomicKit installation, commit it to version control, or load it as a reference stylesheet.
  </Card>

  <Card title=".json Design System Schema" icon="file">
    A structured JSON representation of your classes, properties, breakpoints, and design token references. Use this format for programmatic processing, design token pipelines, custom tooling, or documentation generators.
  </Card>
</CardGroup>

A `.css` export looks like this:

```css theme={null}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  .flex-center {
    flex-direction: column;
  }
}
```

A `.json` export follows a schema like this:

```json theme={null}
{
  "classes": [
    {
      "id": "flex-center",
      "label": "flex-center",
      "properties": {
        "desktop": {
          "display": "flex",
          "justify-content": "center",
          "align-items": "center"
        },
        "mobile": {
          "flex-direction": "column"
        }
      }
    }
  ]
}
```

## Export Scope Options

You control exactly which classes are included in your export using the scope selector.

| Scope                      | What is exported                                                                                        |
| -------------------------- | ------------------------------------------------------------------------------------------------------- |
| **All Classes**            | Every global class currently registered in Elementor                                                    |
| **AtomicKit-Tracked Only** | Only classes that AtomicKit created or imported — excludes any classes added directly through Elementor |
| **Selected Classes**       | Classes you choose manually using the search-and-filter table                                           |

The **Selected Classes** option opens a searchable table listing all available classes. Filter by name, check the classes you want, and only those are included in the download.

## How to Export

<Steps>
  <Step title="Open the Export Center">
    In your WordPress admin, go to **Elementor → AtomicKit** and select the **Export** tab.
  </Step>

  <Step title="Choose a format">
    Select **.css** for a stylesheet output or **.json** for a design system schema.
  </Step>

  <Step title="Choose a scope">
    Select **All Classes**, **AtomicKit-Tracked Only**, or **Selected Classes**. If you choose **Selected Classes**, use the search table to find and check the classes you want to include.
  </Step>

  <Step title="Click Download">
    Click the **Download** button. Your browser downloads the file immediately. No data is sent to any external server — the file is generated locally.
  </Step>
</Steps>

## Common Use Cases

<Accordion title="Team sharing and handoff">
  Export your design system as `.css` and share it with your team. A colleague can import it into their own AtomicKit installation using the Import Center, giving them an identical class set to work with.
</Accordion>

<Accordion title="Staging to production sync">
  Build and refine your design system on a staging site, export it as `.css`, then import it on the production site. The diff preview in the Import Center makes it easy to see exactly what will change before you commit.
</Accordion>

<Accordion title="Version control backup">
  Export your design system regularly and commit the `.css` file to your project's Git repository. This gives you a human-readable history of design system changes alongside your theme code.
</Accordion>

<Accordion title="External tooling integration">
  Use the `.json` export to feed your design system into style dictionary pipelines, documentation sites, Figma token importers, or any custom tooling that can consume structured JSON.
</Accordion>

## Related

* [Import](/plugin/import) — bring an exported `.css` file into another AtomicKit installation
* [Snapshot History](/plugin/snapshot-history) — save a restore point before making changes you plan to export