atm

Atomix

v0.4.6

    1. Home
    2. Design Tokens
    3. Spacing

Getting Started
  • Introduction
  • Installation
  • Quick Start
  • Migration Guide
  • CLI Reference
Design Tokens
  • Overview
  • All Tokens
  • Colors
  • Spacing
  • Typography
  • Grid
  • Elevation
Styles System
  • Architecture
  • Customization
  • Utilities
  • API Reference
Layouts
  • Grid System
  • Masonry Grid
  • Responsive Patterns
  • Customization
  • Performance
Components
  • Overview
  • Guidelines
  • Accordion
  • AtomixGlass
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • ButtonGroup
  • Card
  • Checkbox
  • Date Picker
  • Dropdown
  • Form
  • Input
  • Modal
  • Progress
  • Radio
  • Rating
  • Select
  • Slider
  • Spinner
  • Tab
  • Textarea
  • Toggle
  • Tooltip
  • Upload
  • Block
  • Callout
  • Countdown
  • Hero
  • Icon
  • List
  • Messages
  • Navbar
  • Pagination
  • Popover
  • Steps
  • SectionIntro
  • Container
  • Grid
  • GridCol
  • Row
  • River
  • MasonryGrid
  • DataTable
  • EdgePanel
  • SideMenu
  • Nav
  • NavItem
  • NavDropdown
  • VirtualizedGrid
Guides
  • Theming Guide
  • AtomixGlass Performance
  • AtomixGlass Theming
  • Theme Studio
  • Devtools
  • Theme Inspector
  • Theme Preview
  • Theme Comparator
  • Live Editor
  • CLI Tool
  • Try Live Editor
  • Try Inspector
  • Try Preview
  • Try Comparator
  • AtomixGlass Playground
Examples
  • Common Patterns
  • Landing Page
API Reference
  • React API
  • JavaScript API
  • CSS API
CLI
  • Overview
  • User Guide
  • API Reference
  • Migration Guide
  • Security Guide
Resources
  • Roadmap
  • Changelog
  • Contributing

Atomix Design System

A comprehensive design system for building modern, accessible, and performant web applications with React and vanilla JavaScript.
GitHubTwitterDiscordNPM

Getting Started

IntroductionInstallationQuick StartTheming Guide

Documentation

ComponentsDesign TokensStyles SystemLayouts

Resources

GitHub Repository↗NPM Package↗Storybook↗API Reference

Community

ContributingRoadmapChangelogReport Issue↗
© 2026 Atomix Design System. Built with ❤️ by the Shohojdhara.

Spacing Tokens

Explore the precise CSS variables mapped to this category to build pixel-perfect UIs.

Spacing

Consistent spacing scale based on rem units

36 tokens

Spacing 0

No spacing

reset marginsno gaps
var(--atomix-spacing-0)

Spacing 1

Extra small spacing (4px)

icon gapstight paddingfine adjustments
var(--atomix-spacing-1)

Spacing PX 6

Pixel-based spacing (6px)

precise spacingfine adjustments
var(--atomix-spacing-px-6)

Spacing 2

Small spacing (8px)

button paddingform field gapscompact layouts
var(--atomix-spacing-2)

Spacing PX 10

Pixel-based spacing (10px)

precise spacingfine adjustments
var(--atomix-spacing-px-10)

Spacing 3

Medium-small spacing (12px)

compact paddingsmall gaps
var(--atomix-spacing-3)

Spacing PX 14

Pixel-based spacing (14px)

precise spacingfine adjustments
var(--atomix-spacing-px-14)

Spacing 4

Medium spacing (16px)

default paddingstandard marginscontent spacing
var(--atomix-spacing-4)

Spacing 5

Medium-large spacing (20px)

generous paddingmedium margins
var(--atomix-spacing-5)

Spacing PX 22

Pixel-based spacing (22px)

precise spacingfine adjustments
var(--atomix-spacing-px-22)

Spacing 6

Large spacing (24px)

section paddingcard spacinggenerous margins
var(--atomix-spacing-6)

Spacing 7

Extra large spacing (28px)

large paddinggenerous margins
var(--atomix-spacing-7)

Spacing PX 30

Pixel-based spacing (30px)

precise spacingfine adjustments
var(--atomix-spacing-px-30)

Spacing 8

Extra large spacing (32px)

page sectionsmajor componentshero spacing
var(--atomix-spacing-8)

Spacing 9

Double extra large spacing (36px)

large sectionsmajor separations
var(--atomix-spacing-9)

Spacing 10

Triple extra large spacing (40px)

very large sectionsmajor separations
var(--atomix-spacing-10)

Spacing 11

Quadruple extra large spacing (44px)

maximum spacinghero sections
var(--atomix-spacing-11)

Spacing 12

Quintuple extra large spacing (48px)

maximum spacinghero sections
var(--atomix-spacing-12)

Spacing 14

Extra large spacing (56px)

very large sectionsmajor separations
var(--atomix-spacing-14)

Spacing 16

Extra large spacing (64px)

very large sectionsmajor separations
var(--atomix-spacing-16)

Spacing 20

Extra large spacing (80px)

very large sectionsmajor separations
var(--atomix-spacing-20)

Spacing 24

Extra large spacing (96px)

very large sectionsmajor separations
var(--atomix-spacing-24)

Spacing 28

Extra large spacing (112px)

very large sectionsmajor separations
var(--atomix-spacing-28)

Spacing 32

Extra large spacing (128px)

very large sectionsmajor separations
var(--atomix-spacing-32)

Spacing 36

Extra large spacing (144px)

very large sectionsmajor separations
var(--atomix-spacing-36)

Spacing 40

Extra large spacing (160px)

very large sectionsmajor separations
var(--atomix-spacing-40)

Spacing 44

Extra large spacing (176px)

very large sectionsmajor separations
var(--atomix-spacing-44)

Spacing 48

Extra large spacing (192px)

very large sectionsmajor separations
var(--atomix-spacing-48)

Spacing 52

Extra large spacing (208px)

very large sectionsmajor separations
var(--atomix-spacing-52)

Spacing 56

Extra large spacing (224px)

very large sectionsmajor separations
var(--atomix-spacing-56)

Spacing 60

Extra large spacing (240px)

very large sectionsmajor separations
var(--atomix-spacing-60)

Spacing 64

Extra large spacing (256px)

very large sectionsmajor separations
var(--atomix-spacing-64)

Spacing 72

Extra large spacing (288px)

very large sectionsmajor separations
var(--atomix-spacing-72)

Spacing 80

Extra large spacing (320px)

very large sectionsmajor separations
var(--atomix-spacing-80)

Spacing 90

Extra large spacing (360px)

very large sectionsmajor separations
var(--atomix-spacing-90)

Spacing 200

Extra large spacing (800px)

very large sectionsmajor separations
var(--atomix-spacing-200)