atm

Atomix

v0.4.6

    1. Home
    2. Design Tokens
    3. Typography

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.

Typography Tokens

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

font-family

3 tokens
Aa
The quick brown fox

Font Sans Serif

Primary sans-serif font family

body textUI elementsgeneral content
var(--atomix-font-sans-serif)
Aa
The quick brown fox

Font Monospace

Monospace font for code and technical content

code blockstechnical textdata display
var(--atomix-font-monospace)
Aa
The quick brown fox

Body Font Family

Font family for body text

body textparagraphs
var(--atomix-body-font-family)

font-size

4 tokens
aAa

Body Font Size

Base font size for body content

body textparagraphsdefault content
var(--atomix-body-font-size)
aAa

Font Size XL

Extra large text for headings

large headingssection titles
var(--atomix-font-size-xl)
aAa

Font Size 2XL

Double extra large text for display headings

display headingshero titles
var(--atomix-font-size-2xl)
aAa

Display 1

Display size for large headings

hero headingslarge display text
var(--atomix-display-1)

font-weight

8 tokens
Aa
var(--atomix-body-font-weight)

Body Font Weight

Base font weight

body textnormal weight
var(--atomix-body-font-weight)
Aa
var(--atomix-font-weight-light)

Font Weight Light

Light font weight

light textsubtle emphasis
var(--atomix-font-weight-light)
Aa
var(--atomix-font-weight-normal)

Font Weight Normal

Normal font weight

body textnormal emphasis
var(--atomix-font-weight-normal)
Aa
var(--atomix-font-weight-medium)

Font Weight Medium

Medium font weight

medium emphasissubheadings
var(--atomix-font-weight-medium)
Aa
var(--atomix-font-weight-semibold)

Font Weight Semibold

Semibold font weight

headingsstrong emphasis
var(--atomix-font-weight-semibold)
Aa
var(--atomix-font-weight-bold)

Font Weight Bold

Bold font weight

bold headingsmaximum emphasis
var(--atomix-font-weight-bold)
Aa
var(--atomix-font-weight-heavy)

Font Weight Heavy

Heavy font weight

heavy headingsstrong emphasis
var(--atomix-font-weight-heavy)
Aa
var(--atomix-font-weight-black)

Font Weight Black

Black font weight

black headingsmaximum emphasis
var(--atomix-font-weight-black)

line-height

4 tokens

Body Line Height

Base line height

body textdefault line height
var(--atomix-body-line-height)

Line Height Base

Base line height

body textdefault line height
var(--atomix-line-height-base)

Line Height SM

Small line height

compact texttight spacing
var(--atomix-line-height-sm)

Line Height LG

Large line height

comfortable readingrelaxed spacing
var(--atomix-line-height-lg)

text

5 tokens

Body Color

Base body text color

body textdefault text
var(--atomix-body-color)

Heading Color

Base heading text color

headingstitles
var(--atomix-heading-color)

Link Color

Base link color

linksanchors
var(--atomix-link-color)

Link Hover Color

Link hover color

link hover states
var(--atomix-link-hover-color)

Link Decoration

Link text decoration

link styling
var(--atomix-link-decoration)

background

2 tokens

Body Background

Base body background color

page backgrounddefault background
var(--atomix-body-bg)

Highlight Background

Text highlight background color

text highlightsmark elements
var(--atomix-highlight-bg)

letter-spacing

6 tokens
SPACE

Letter Spacing H1

Letter spacing for H1 headings

H1 headingslarge titles
var(--atomix-letter-spacing-h1)
SPACE

Letter Spacing H2

Letter spacing for H2 headings

H2 headingssection titles
var(--atomix-letter-spacing-h2)
SPACE

Letter Spacing H3

Letter spacing for H3 headings

H3 headingssubsection titles
var(--atomix-letter-spacing-h3)
SPACE

Letter Spacing H4

Letter spacing for H4 headings

H4 headingssmall titles
var(--atomix-letter-spacing-h4)
SPACE

Letter Spacing H5

Letter spacing for H5 headings

H5 headingssmall titles
var(--atomix-letter-spacing-h5)
SPACE

Letter Spacing H6

Letter spacing for H6 headings

H6 headingssmall titles
var(--atomix-letter-spacing-h6)