atm

Atomix

v0.4.6

    1. Home
    2. Design Tokens
    3. Overview

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.
Design System

Design Tokens

The fundamental design atoms that power Atomix. These variables ensure every component remains consistent across the entire platform.

Design Foundations

Explore the precise values that define the visual language of our products.

Colors

Comprehensive color system with brand, semantic, and neutral palettes. Built for WCAG 2.1 AA compliance.

View Tokens

Spacing

Atomic spacing scale based on a 4px grid system for consistent margins, padding, and layout rhythms.

View Tokens

Typography

Robust typography system including font families, sizes, weights, and line heights for optimal readability.

View Tokens

Grid

Responsive 12-column grid system with customizable gutters and breakpoints for fluid layouts.

View Tokens

Elevation

Modern depth system using layered shadows to create visual hierarchy and focus across themes.

View Tokens

Atomic Foundations

Every token is meticulously crafted to support multi-theme systems, accessibility, and high-performance rendering.