> ## 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.

# Introduction to AtomicKit: Elementor v4 CSS Utilities

> AtomicKit gives Elementor v4 designers a complete atomic CSS utility framework and design system manager to build consistent, responsive websites faster.

AtomicKit is a WordPress plugin that supercharges Elementor v4 with a complete set of CSS utility classes and a visual design system manager. Instead of writing custom CSS for every spacing tweak, color choice, or layout adjustment, you apply descriptive class names directly to your Elementor elements — and AtomicKit handles the rest.

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Install AtomicKit and apply your first utility classes in minutes
  </Card>

  <Card title="CSS Variables" icon="palette" href="/concepts/variables">
    Manage reusable design tokens across your entire site
  </Card>

  <Card title="Responsive Breakpoints" icon="mobile" href="/concepts/responsive-utilities">
    Apply utilities at specific viewport sizes with the --on-\* suffix system
  </Card>

  <Card title="Plugin Features" icon="puzzle-piece" href="/plugin/overview">
    Explore the visual dashboard, class creator, and import/export tools
  </Card>
</CardGroup>

## What AtomicKit Provides

AtomicKit ships two tightly integrated surfaces that work together:

**CSS Utility Framework** — A comprehensive library of atomic classes covering spacing, typography, colors, flexbox layout, sizing, borders, effects, and filters. Every class is tokenized with CSS variables so your design stays consistent and easy to update.

**Design System Manager** — A visual WordPress admin panel where you create and manage global CSS variables (design tokens), build custom utility classes with a visual editor, import CSS from external sources, export your design system, and roll back to previous states with snapshot history.

## Why Atomic Classes in Elementor?

Elementor's visual editor is powerful, but repeating the same styling decisions across dozens of widgets gets tedious and leads to drift. AtomicKit solves this by letting you:

* **Reuse patterns** — Apply `padding-6 rounded-lg shadow-md` to any element from the Elementor Advanced CSS classes panel
* **Enforce consistency** — Every spacing, color, and size value comes from the same shared token scale
* **Respond to viewports** — Add `--on-m` to any structural class and it only applies at that breakpoint
* **Ship faster** — Stop writing one-off CSS and start composing from a predictable, documented system

## Key Utility Families

| Category   | Example Classes                                             |
| ---------- | ----------------------------------------------------------- |
| Spacing    | `padding-4`, `margin-horizontal-8`, `gap-6`                 |
| Typography | `text-2xl`, `font-bold`, `leading-relaxed`, `tracking-wide` |
| Colors     | `text-primary`, `background-gray-light`, `border-error`     |
| Layout     | `flex`, `flex-col`, `justify-between`, `items-center`       |
| Sizing     | `width-full`, `height-screen`, `maximum-width-3xl`          |
| Borders    | `border-2`, `border-solid`, `rounded-xl`                    |
| Effects    | `shadow-md`, `opacity-75`, `blur-sm`                        |
| Filters    | `brightness-90`, `saturate-150`, `grayscale`                |

<Note>
  AtomicKit requires Elementor v4 with the **Atomic Elements** and **Global CSS Variables** experiments enabled. See the [Quick Start](/quickstart) for setup instructions.
</Note>