atm

Atomix

v0.4.6

    1. Home
    2. Styles System
    3. Customization

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.

Styles Customization

Theming, brand integration, and extending Atomix

Customization Philosophy

Atomix provides multiple levels of customization while maintaining system integrity and accessibility standards.

Design Principles

Maintain System Integrity
Follow ITCSS
Use Design Tokens
Progressive Enhancement
Accessibility First

Customization Levels

LevelScopeComplexityUse Case
ConfigurationVariables onlyLowBrand colors, spacing tweaks
ThemingCSS custom propertiesMediumRuntime theme switching
ExtensionNew components/utilitiesMedium-HighAdditional functionality
ArchitectureSystem structureHighMajor modifications

Configuration Methods

Variable Override

Low Complexity

Override SCSS variables before importing Atomix

SCSS
$primary-6: #your-brand-color; $font-family-base: 'Your Font'; @use 'atomix/styles' as *;
4 lines90 characters

@use Configuration

Low Complexity

Use SCSS @use with inline configuration

SCSS
@use 'atomix/styles' with ( $primary-6: #2563eb, $font-family-base: 'Inter' );
4 lines82 characters

CSS Custom Properties

Medium Complexity

Runtime theming with CSS variables

CSS
:root[data-theme="custom"] { --atomix-primary: #brand; --atomix-text-primary: #333; }
4 lines89 characters

Custom Components

Medium Complexity

Create new components following ITCSS

SCSS
.c-my-component { --my-bg: var(--atomix-bg); background: var(--my-bg); }
4 lines76 characters

Extend Utilities

Medium Complexity

Add custom utility classes to the system

SCSS
$custom-utilities: ( 'aspect-ratio': ( values: (square: 1/1) ) );
5 lines73 characters

Custom Build

High Complexity

Import layers selectively for optimized builds

SCSS
@use 'atomix/styles/01-settings'; @use 'atomix/styles/06-components'; // Skip unused layers
3 lines91 characters

Brand Integration

Brand Colors

Create brand color scales and override Atomix defaults:

$brand-primary: #your-color;

@use 'atomix/styles' with (
  $primary-6: $brand-primary,
  $primary-7: shade($brand-primary, 20%)
);

Typography

Integrate your brand fonts and type scale:

@use 'atomix/styles' with (
  $font-family-base: ('Your Font', sans-serif),
  $font-size-base: 1rem
);

Runtime Theme Switching

Switch themes dynamically without rebuilding CSS:

// JavaScript theme switching
document.documentElement.setAttribute('data-theme', 'dark');

// CSS theme definition
:root[data-theme="dark"] {
  --atomix-primary: #7c3aed;
  --atomix-text-primary: #fff;
  --atomix-bg-primary: #1a1a1a;
}