atm

Atomix

v0.4.6

    1. Home
    2. Guides
    3. Theme Studio

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.

Keyboard Shortcuts

Cmd/Ctrl+Z
Undo last change
Cmd/Ctrl+Shift+Z
Redo last undone change
Cmd/Ctrl+K
Focus search
Cmd/Ctrl+F
Focus search
Cmd/Ctrl+P
Toggle preview
Cmd/Ctrl+B
Toggle color tools
Cmd/Ctrl+E
Export theme
Cmd/Ctrl+I
Import theme
Cmd/Ctrl+/
Show keyboard shortcuts
Select an option
Viewport: 1920 × 1080px

Colors137

color
--atomix-blue-1
Validation Error
Token value cannot be empty
color
--atomix-blue-10
Validation Error
Token value cannot be empty
color
--atomix-blue-2
Validation Error
Token value cannot be empty
color
--atomix-blue-3
Validation Error
Token value cannot be empty
color
--atomix-blue-4
Validation Error
Token value cannot be empty
color
--atomix-blue-5
Validation Error
Token value cannot be empty
color
--atomix-blue-6
Validation Error
Token value cannot be empty
color
--atomix-blue-7
Validation Error
Token value cannot be empty
color
--atomix-blue-8
Validation Error
Token value cannot be empty
color
--atomix-blue-9
Validation Error
Token value cannot be empty
color
--atomix-body-color
Validation Error
Token value cannot be empty
color
--atomix-border-color
Validation Error
Token value cannot be empty
color
--atomix-border-color-translucent
Validation Error
Token value cannot be empty
color
--atomix-brand-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-brand-border-subtle
Validation Error
Token value cannot be empty
color
--atomix-brand-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-dark
Validation Error
Token value cannot be empty
color
--atomix-dark-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-dark-border-subtle
Validation Error
Token value cannot be empty
gradient
--atomix-dark-gradient
Validation Error
Token value cannot be empty
color
--atomix-dark-hover
Validation Error
Token value cannot be empty
text
--atomix-dark-rgb
Validation Error
Token value cannot be empty
color
--atomix-dark-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-disabled-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-error
Validation Error
Token value cannot be empty
color
--atomix-error-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-error-border-subtle
Validation Error
Token value cannot be empty
gradient
--atomix-error-gradient
Validation Error
Token value cannot be empty
color
--atomix-error-hover
Validation Error
Token value cannot be empty
text
--atomix-error-rgb
Validation Error
Token value cannot be empty
color
--atomix-error-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-focus-border-color
Validation Error
Token value cannot be empty
font-weight
--atomix-font-weight-light
Validation Error
Token value cannot be empty
color
--atomix-form-invalid-border-color
Validation Error
Token value cannot be empty
color
--atomix-form-valid-border-color
Validation Error
Token value cannot be empty
color
--atomix-gray-1
Validation Error
Token value cannot be empty
color
--atomix-gray-10
Validation Error
Token value cannot be empty
color
--atomix-gray-2
Validation Error
Token value cannot be empty
color
--atomix-gray-3
Validation Error
Token value cannot be empty
color
--atomix-gray-4
Validation Error
Token value cannot be empty
color
--atomix-gray-5
Validation Error
Token value cannot be empty
color
--atomix-gray-6
Validation Error
Token value cannot be empty
color
--atomix-gray-7
Validation Error
Token value cannot be empty
color
--atomix-gray-8
Validation Error
Token value cannot be empty
color
--atomix-gray-9
Validation Error
Token value cannot be empty
color
--atomix-green-1
Validation Error
Token value cannot be empty
color
--atomix-green-10
Validation Error
Token value cannot be empty
color
--atomix-green-2
Validation Error
Token value cannot be empty
color
--atomix-green-3
Validation Error
Token value cannot be empty
color
--atomix-green-4
Validation Error
Token value cannot be empty
color
--atomix-green-5
Validation Error
Token value cannot be empty
color
--atomix-green-6
Validation Error
Token value cannot be empty
color
--atomix-green-7
Validation Error
Token value cannot be empty
color
--atomix-green-8
Validation Error
Token value cannot be empty
color
--atomix-green-9
Validation Error
Token value cannot be empty
color
--atomix-heading-color
Validation Error
Token value cannot be empty
color
--atomix-highlight-bg
Validation Error
Token value cannot be empty
color
--atomix-info
Validation Error
Token value cannot be empty
color
--atomix-info-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-info-border-subtle
Validation Error
Token value cannot be empty
gradient
--atomix-info-gradient
Validation Error
Token value cannot be empty
color
--atomix-info-hover
Validation Error
Token value cannot be empty
text
--atomix-info-rgb
Validation Error
Token value cannot be empty
color
--atomix-info-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-invert-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-invert-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-light
Validation Error
Token value cannot be empty
color
--atomix-light-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-light-border-subtle
Validation Error
Token value cannot be empty
gradient
--atomix-light-gradient
Validation Error
Token value cannot be empty
color
--atomix-light-hover
Validation Error
Token value cannot be empty
text
--atomix-light-rgb
Validation Error
Token value cannot be empty
color
--atomix-light-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-link-color
Validation Error
Token value cannot be empty
text
--atomix-link-color-rgb
Validation Error
Token value cannot be empty
color
--atomix-link-hover-color
Validation Error
Token value cannot be empty
text
--atomix-link-hover-color-rgb
Validation Error
Token value cannot be empty
color
--atomix-primary
Validation Error
Token value cannot be empty
color
--atomix-primary-1
Validation Error
Token value cannot be empty
color
--atomix-primary-10
Validation Error
Token value cannot be empty
color
--atomix-primary-2
Validation Error
Token value cannot be empty
color
--atomix-primary-3
Validation Error
Token value cannot be empty
color
--atomix-primary-4
Validation Error
Token value cannot be empty
color
--atomix-primary-5
Validation Error
Token value cannot be empty
color
--atomix-primary-6
Validation Error
Token value cannot be empty
color
--atomix-primary-7
Validation Error
Token value cannot be empty
color
--atomix-primary-8
Validation Error
Token value cannot be empty
color
--atomix-primary-9
Validation Error
Token value cannot be empty
color
--atomix-primary-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-primary-border-subtle
Validation Error
Token value cannot be empty
gradient
--atomix-primary-gradient
Validation Error
Token value cannot be empty
color
--atomix-primary-hover
Validation Error
Token value cannot be empty
text
--atomix-primary-rgb
Validation Error
Token value cannot be empty
color
--atomix-primary-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-red-1
Validation Error
Token value cannot be empty
color
--atomix-red-10
Validation Error
Token value cannot be empty
color
--atomix-red-2
Validation Error
Token value cannot be empty
color
--atomix-red-3
Validation Error
Token value cannot be empty
color
--atomix-red-4
Validation Error
Token value cannot be empty
color
--atomix-red-5
Validation Error
Token value cannot be empty
color
--atomix-red-6
Validation Error
Token value cannot be empty
color
--atomix-red-7
Validation Error
Token value cannot be empty
color
--atomix-red-8
Validation Error
Token value cannot be empty
color
--atomix-red-9
Validation Error
Token value cannot be empty
color
--atomix-secondary
Validation Error
Token value cannot be empty
color
--atomix-secondary-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-secondary-border-subtle
Validation Error
Token value cannot be empty
gradient
--atomix-secondary-gradient
Validation Error
Token value cannot be empty
color
--atomix-secondary-hover
Validation Error
Token value cannot be empty
text
--atomix-secondary-rgb
Validation Error
Token value cannot be empty
color
--atomix-secondary-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-success
Validation Error
Token value cannot be empty
color
--atomix-success-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-success-border-subtle
Validation Error
Token value cannot be empty
gradient
--atomix-success-gradient
Validation Error
Token value cannot be empty
color
--atomix-success-hover
Validation Error
Token value cannot be empty
text
--atomix-success-rgb
Validation Error
Token value cannot be empty
color
--atomix-success-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-tertiary-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-tertiary-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-warning
Validation Error
Token value cannot be empty
color
--atomix-warning-bg-subtle
Validation Error
Token value cannot be empty
color
--atomix-warning-border-subtle
Validation Error
Token value cannot be empty
gradient
--atomix-warning-gradient
Validation Error
Token value cannot be empty
color
--atomix-warning-hover
Validation Error
Token value cannot be empty
text
--atomix-warning-rgb
Validation Error
Token value cannot be empty
color
--atomix-warning-text-emphasis
Validation Error
Token value cannot be empty
color
--atomix-yellow-1
Validation Error
Token value cannot be empty
color
--atomix-yellow-10
Validation Error
Token value cannot be empty
color
--atomix-yellow-2
Validation Error
Token value cannot be empty
color
--atomix-yellow-3
Validation Error
Token value cannot be empty
color
--atomix-yellow-4
Validation Error
Token value cannot be empty
color
--atomix-yellow-5
Validation Error
Token value cannot be empty
color
--atomix-yellow-6
Validation Error
Token value cannot be empty
color
--atomix-yellow-7
Validation Error
Token value cannot be empty
color
--atomix-yellow-8
Validation Error
Token value cannot be empty
color
--atomix-yellow-9
Validation Error
Token value cannot be empty

Typography25

color
--atomix-body-bg
Validation Error
Token value cannot be empty
font-family
--atomix-body-font-family
Validation Error
Token value cannot be empty
font-size
--atomix-body-font-size
Validation Error
Token value cannot be empty
font-weight
--atomix-body-font-weight
Validation Error
Token value cannot be empty
line-height
--atomix-body-line-height
Validation Error
Token value cannot be empty
font-family
--atomix-font-monospace
Validation Error
Token value cannot be empty
font-family
--atomix-font-sans-serif
Validation Error
Token value cannot be empty
font-size
--atomix-font-size-2xl
Validation Error
Token value cannot be empty
font-size
--atomix-font-size-xl
Validation Error
Token value cannot be empty
font-weight
--atomix-font-weight-black
Validation Error
Token value cannot be empty
font-weight
--atomix-font-weight-bold
Validation Error
Token value cannot be empty
font-weight
--atomix-font-weight-heavy
Validation Error
Token value cannot be empty
font-weight
--atomix-font-weight-medium
Validation Error
Token value cannot be empty
font-weight
--atomix-font-weight-normal
Validation Error
Token value cannot be empty
font-weight
--atomix-font-weight-semibold
Validation Error
Token value cannot be empty
letter-spacing
--atomix-letter-spacing-h1
Validation Error
Token value cannot be empty
letter-spacing
--atomix-letter-spacing-h2
Validation Error
Token value cannot be empty
letter-spacing
--atomix-letter-spacing-h3
Validation Error
Token value cannot be empty
letter-spacing
--atomix-letter-spacing-h4
Validation Error
Token value cannot be empty
letter-spacing
--atomix-letter-spacing-h5
Validation Error
Token value cannot be empty
letter-spacing
--atomix-letter-spacing-h6
Validation Error
Token value cannot be empty
line-height
--atomix-line-height-base
Validation Error
Token value cannot be empty
line-height
--atomix-line-height-lg
Validation Error
Token value cannot be empty
line-height
--atomix-line-height-sm
Validation Error
Token value cannot be empty
text
--atomix-link-decoration
Validation Error
Token value cannot be empty

Border Radius9

border-radius
--atomix-border-radius
Validation Error
Token value cannot be empty
border-radius
--atomix-border-radius-2xl
Validation Error
Token value cannot be empty
border-radius
--atomix-border-radius-3xl
Validation Error
Token value cannot be empty
border-radius
--atomix-border-radius-4xl
Validation Error
Token value cannot be empty
border-radius
--atomix-border-radius-lg
Validation Error
Token value cannot be empty
border-radius
--atomix-border-radius-pill
Validation Error
Token value cannot be empty
border-radius
--atomix-border-radius-sm
Validation Error
Token value cannot be empty
border-radius
--atomix-border-radius-xl
Validation Error
Token value cannot be empty
border-radius
--atomix-border-radius-xxl
Validation Error
Token value cannot be empty

Borders2

text
--atomix-border-style
Validation Error
Token value cannot be empty
number
--atomix-border-width
Validation Error
Token value cannot be empty

Shadows6

shadow
--atomix-box-shadow
Validation Error
Token value cannot be empty
shadow
--atomix-box-shadow-inset
Validation Error
Token value cannot be empty
shadow
--atomix-box-shadow-lg
Validation Error
Token value cannot be empty
shadow
--atomix-box-shadow-sm
Validation Error
Token value cannot be empty
shadow
--atomix-box-shadow-xl
Validation Error
Token value cannot be empty
shadow
--atomix-box-shadow-xs
Validation Error
Token value cannot be empty

Breakpoints6

breakpoint
--atomix-breakpoint-lg
Validation Error
Token value cannot be empty
breakpoint
--atomix-breakpoint-md
Validation Error
Token value cannot be empty
breakpoint
--atomix-breakpoint-sm
Validation Error
Token value cannot be empty
breakpoint
--atomix-breakpoint-xl
Validation Error
Token value cannot be empty
breakpoint
--atomix-breakpoint-xs
Validation Error
Token value cannot be empty
breakpoint
--atomix-breakpoint-xxl
Validation Error
Token value cannot be empty

Other15

font-size
--atomix-display-1
Validation Error
Token value cannot be empty
text
--atomix-z-0
Validation Error
Token value cannot be empty
text
--atomix-z-1
Validation Error
Token value cannot be empty
text
--atomix-z-2
Validation Error
Token value cannot be empty
text
--atomix-z-3
Validation Error
Token value cannot be empty
text
--atomix-z-4
Validation Error
Token value cannot be empty
text
--atomix-z-5
Validation Error
Token value cannot be empty
text
--atomix-z-drawer
Validation Error
Token value cannot be empty
text
--atomix-z-dropdown
Validation Error
Token value cannot be empty
text
--atomix-z-fixed
Validation Error
Token value cannot be empty
text
--atomix-z-modal
Validation Error
Token value cannot be empty
text
--atomix-z-n1
Validation Error
Token value cannot be empty
text
--atomix-z-popover
Validation Error
Token value cannot be empty
text
--atomix-z-sticky
Validation Error
Token value cannot be empty
text
--atomix-z-tooltip
Validation Error
Token value cannot be empty

Transitions12

transition
--atomix-easing-base
Validation Error
Token value cannot be empty
transition
--atomix-easing-ease-in
Validation Error
Token value cannot be empty
transition
--atomix-easing-ease-in-out
Validation Error
Token value cannot be empty
transition
--atomix-easing-ease-linear
Validation Error
Token value cannot be empty
transition
--atomix-easing-ease-out
Validation Error
Token value cannot be empty
transition
--atomix-transition-base
Validation Error
Token value cannot be empty
transition
--atomix-transition-duration-base
Validation Error
Token value cannot be empty
transition
--atomix-transition-duration-fast
Validation Error
Token value cannot be empty
transition
--atomix-transition-duration-slow
Validation Error
Token value cannot be empty
transition
--atomix-transition-duration-slower
Validation Error
Token value cannot be empty
transition
--atomix-transition-fast
Validation Error
Token value cannot be empty
transition
--atomix-transition-slow
Validation Error
Token value cannot be empty

Forms5

number
--atomix-focus-ring-offset
Validation Error
Token value cannot be empty
text
--atomix-focus-ring-opacity
Validation Error
Token value cannot be empty
number
--atomix-focus-ring-width
Validation Error
Token value cannot be empty
color
--atomix-form-invalid-color
Validation Error
Token value cannot be empty
color
--atomix-form-valid-color
Validation Error
Token value cannot be empty

Gradients1

gradient
--atomix-gradient
Validation Error
Token value cannot be empty

Spacing36

spacing
--atomix-spacing-0
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-1
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-10
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-11
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-12
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-14
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-16
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-2
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-20
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-200
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-24
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-28
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-3
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-32
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-36
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-4
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-40
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-44
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-48
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-5
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-52
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-56
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-6
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-60
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-64
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-7
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-72
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-8
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-80
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-9
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-90
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-px-10
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-px-14
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-px-22
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-px-30
Validation Error
Token value cannot be empty
spacing
--atomix-spacing-px-6
Validation Error
Token value cannot be empty

Component Preview

See how your theme looks across all Atomix components in real-time.

Typography

Heading 1

Heading 2

Heading 3

This is body text using your configured typography settings. The font family is default.

This is secondary text using the secondary text color.

Color Swatches

Primary
Success
Error

Badges

PrimarySecondarySuccessErrorWarningInfo

Buttons

Input

Textarea

Select

Select an option

Toggle

Enable feature

Spinner

Loading...
Loading...
Loading...

Progress

Callout

Information
This is an informational callout message.
Success
Operation completed successfully!
Warning
Please review before proceeding.
Error
An error occurred during processing.

Breadcrumb

  1. Home
  2. Components
  3. Theme Studio

Pagination

Steps

1
Step 1
2
Step 2
3
Step 3

Avatar

JD
JS
BJ

Rating

Loading...

Card

Card Title

This is a card component with themed colors and spacing.

Another Card

Cards adapt to your theme colors.

Accordion

This is the content of the first accordion item.

This is the content of the second accordion item.

AtomixGlass

Glass morphism effects with liquid distortion

Standard Mode

Hover to see liquid distortion effect

Enhanced Effect

Stronger distortion and elasticity

Theme Studio

Create and customize themes interactively with real-time preview.

Save snapshots, share themes with your team, and restore previous versions.