units

All CSS units supported by Atomic CSS and core unit rules. Correct unit selection is the foundation of a consistent design system.

Unit Rules

Atomic CSS operates based on html { font-size: 10px }. Therefore 1rem = 10px.

Core Rule

Under 20px→pxuse

20px and above→remuse

Size	Unit	Example	Value
4px	`px`	`gap4px`	gap: 4px
8px	`px`	`p8px`	padding: 8px
12px	`px`	`br12px`	border-radius: 12px
16px	`px`	`mb16px`	margin-bottom: 16px
20px	`rem`	`gap2rem`	gap: 2rem (20px)
32px	`rem`	`p3-2rem`	padding: 3.2rem (32px)
48px	`rem`	`mt4-8rem`	margin-top: 4.8rem (48px)
100px	`rem`	`w10rem`	width: 10rem (100px)

<!-- Under 20px: use px -->
<div class="gap8px p12px br4px mb16px">Small values use px</div>

<!-- 20px and above: use rem -->
<div class="gap2rem p3-2rem mt4-8rem w10rem">Large values use rem</div>

<!-- Mixed usage (common) -->
<div class="p2rem gap8px br8px mb3-2rem">
  <p class="fs14px mb8px">Properly mixing px and rem</p>
</div>

Supported Units

Atomic CSS supports all standard CSS units. Units append directly after values.

Unit	Description	Example	CSS
`px`	Pixel (absolute unit)	`w100px`	width: 100px
`p`	Percent (% → p)	`w50p`	width: 50%
`rem`	root em (1rem = 10px)	`fs1-5rem`	font-size: 1.5rem
`em`	Based on parent font-size	`p1em`	padding: 1em
`vh`	viewport height	`h100vh`	height: 100vh
`vw`	viewport width	`w100vw`	width: 100vw
`vmin`	Viewport minimum	`w50vmin`	width: 50vmin
`vmax`	Viewport maximum	`w50vmax`	width: 50vmax
`fr`	Fraction (Grid only)	`gtc1fr-2fr`	grid-template-columns: 1fr 2fr

rem Conversion Table

Based on html { font-size: 10px }, 1rem = 10px. Memorize this for quick class naming.

Class Notation

Decimals use hyphens (-). Ex: 0.4rem → 0-4rem, 1.6rem → 1-6rem

rem	px	Class Notation	Example
0.4rem	4px	`0-4rem`	`p0-4rem`
0.8rem	8px	`0-8rem`	`gap0-8rem`
1.2rem	12px	`1-2rem`	`mt1-2rem`
1.6rem	16px	`1-6rem`	`mb1-6rem`
2rem	20px	`2rem`	`gap2rem`
2.4rem	24px	`2-4rem`	`p2-4rem`
3.2rem	32px	`3-2rem`	`mt3-2rem`
4rem	40px	`4rem`	`w4rem`
4.8rem	48px	`4-8rem`	`mt4-8rem`
6.4rem	64px	`6-4rem`	`p6-4rem`
8rem	80px	`8rem`	`w8rem`
10rem	100px	`10rem`	`w10rem`
12rem	120px	`12rem`	`maxw12rem`

Spacing Value Rules

Spacing values use multiples of 4. A design principle for consistent rhythm.

Recommended spacing values (multiples of 4)

4px8px12px16px20px24px32px40px48px64px80px100px

Value	Unit	gap	padding	margin-top
4px	px	`gap4px`	`p4px`	`mt4px`
8px	px	`gap8px`	`p8px`	`mt8px`
12px	px	`gap12px`	`p12px`	`mt12px`
16px	px	`gap16px`	`p16px`	`mt16px`
20px	rem	`gap2rem`	`p2rem`	`mt2rem`
24px	rem	`gap2-4rem`	`p2-4rem`	`mt2-4rem`
32px	rem	`gap3-2rem`	`p3-2rem`	`mt3-2rem`
40px	rem	`gap4rem`	`p4rem`	`mt4rem`
48px	rem	`gap4-8rem`	`p4-8rem`	`mt4-8rem`
64px	rem	`gap6-4rem`	`p6-4rem`	`mt6-4rem`
80px	rem	`gap8rem`	`p8rem`	`mt8rem`
100px	rem	`gap10rem`	`p10rem`	`mt10rem`

Decimal Notation

CSS decimals (.) are hyphens (-) in class names, since dots can't be used.

CSS Value	Class Notation	Example Class	CSS Output
0.8rem	`0-8rem`	`gap0-8rem`	gap: 0.8rem
1.5rem	`1-5rem`	`fs1-5rem`	font-size: 1.5rem
2.4rem	`2-4rem`	`p2-4rem`	padding: 2.4rem
3.2rem	`3-2rem`	`mt3-2rem`	margin-top: 3.2rem
4.8rem	`4-8rem`	`mb4-8rem`	margin-bottom: 4.8rem

<!-- Decimal point: use hyphen -->
<p class="fs1-5rem lh1-7 mb1-6rem">1.5rem, line-height 1.7, margin-bottom 1.6rem</p>

<!-- Same for gap, padding -->
<div class="df gap0-8rem p2-4rem">
  <span>Gap 0.8rem, Padding 2.4rem</span>
</div>

Unit Details

`px`pixel

Absolute unit. For precise small values under 20px.

When to use?

- Border width: b1pxsolidDDDDDD, bw2px

- Small spacing: gap4px, gap8px, p12px

- Small border-radius: br4px, br8px

- Precise font-size: fs12px, fs14px

<!-- Borders, small gaps, border-radius -->
<div class="b1pxsolidDDDDDD br4px p8px gap4px">
  <span class="fs12px">Small text</span>
</div>

<!-- Small margins and gaps -->
<div class="df gap8px mb16px">
  <button class="py8px px16px br8px fs14px">Button 1</button>
  <button class="py8px px16px br8px fs14px">Button 2</button>
</div>

`rem`root em (1rem = 10px)

Proportional to root font-size. With html { font-size: 10px }, 1rem = 10px. For layout/spacing/sizing 20px+.

When to use?

- layout spacing:gap2rem(20px), gap3-2rem(32px)

- Large padding: p2rem(20px), p4rem(40px)

- Large font-size: fs2-4rem(24px), fs3-6rem(36px)

- width/height:w25rem(250px), maxw120rem(1200px)

<!-- Large layout gaps -->
<div class="dg gtcr3-1fr gap2rem p3-2rem">
  <div class="bg18181B p2rem br8px">Card 1</div>
  <div class="bg18181B p2rem br8px">Card 2</div>
  <div class="bg18181B p2rem br8px">Card 3</div>
</div>

<!-- Large typography -->
<h1 class="fs3-6rem fw800 mb2-4rem">Title (36px)</h1>
<p class="fs1-6rem lh1-7 mb2rem">Body text (16px)</p>

<!-- Center aligned container -->
<div class="mxa maxw120rem px2rem">
  Max 1200px, center aligned
</div>

`p`percent (% → p)

CSS % is p in Atomic CSS. For relative sizes based on parent.

When to use?

- responsive width:w50p(50%), w100p(100%)

- height:h100p(100%)

- border-radius: br50p (circle)

- position: t50p, l50p

<!-- Responsive Width -->
<div class="w100p">Full width</div>
<div class="w50p">Half width</div>

<!-- Circular avatar -->
<img class="w6rem h6rem br50p ofc" src="avatar.jpg" alt="Avatar" />

<!-- Center aligned (position) -->
<div class="pa t50p l50p" >
  Absolute position center
</div>

`vhvw`viewport height / viewport width

Units based on viewport height/width. For full-screen layouts.

Unit	Description	Example	CSS
`vh`	viewport height %	`h100vh`	height: 100vh
`vw`	viewport width %	`w100vw`	width: 100vw
`vmin`	Smaller of vh, vw	`w50vmin`	width: 50vmin
`vmax`	Larger of vh, vw	`w50vmax`	width: 50vmax

<!-- Fullscreen hero -->
<div class="h100vh df jcc aic">
  <h1>Fullscreen hero section</h1>
</div>

<!-- Fullscreen layout (header-main-footer) -->
<div class="dg gtrauto-1fr-auto h100vh">
  <header>Header</header>
  <main>Content (takes up all remaining space)</main>
  <footer>Footer</footer>
</div>

<!-- Full width banner -->
<div class="w100vw bg18181B p2rem">
  Banner spanning full screen width
</div>

`fr`fraction (Grid only)

fr is a Grid-only ratio unit. Distributes remaining space proportionally. Used with gtc/gtr.

Class	CSS	Description
`gtc1fr`	grid-template-columns: 1fr	1 column (full width)
`gtc1fr-1fr`	grid-template-columns: 1fr 1fr	2 equal columns
`gtc1fr-2fr`	grid-template-columns: 1fr 2fr	1:2 ratio
`gtc1fr-2fr-1fr`	grid-template-columns: 1fr 2fr 1fr	1:2:1 ratio (sidebar layout)
`gtcr3-1fr`	grid-template-columns: repeat(3, 1fr)	3 equal columns repeated
`gtc25rem-1fr`	grid-template-columns: 25rem 1fr	Fixed sidebar + flexible main

<!-- 3-column equal cards -->
<div class="dg gtcr3-1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- 1:2 ratio sidebar + main -->
<div class="dg gtc1fr-2fr gap2rem">
  <aside>Sidebar (1fr)</aside>
  <main>Main Content (2fr)</main>
</div>

<!-- Fixed sidebar + flexible main -->
<div class="dg gtc25rem-1fr gap2rem">
  <aside>Sidebar (250px Fixed)</aside>
  <main>Main (all remaining)</main>
</div>

Tips & Notes

Use rem as default unit

Use rem for 20px+. 1rem = 10px makes calculation simple and layouts scalable.

px only for small precise values

For border thickness, small gap/padding, small border-radius under 20px. Large px values hinder maintenance.

Spacing in multiples of 4

4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 100... Consistent values create design rhythm.

Memorize the rem conversion table

Common values: 2rem=20px, 2-4rem=24px, 3-2rem=32px, 4rem=40px, 4-8rem=48px. Memorize these 5.

spacing font-size width height naming-convention

units

Unit Rules

Supported Units

rem Conversion Table

Spacing Value Rules

Decimal Notation

Unit Details

pxpixel

remroot em (1rem = 10px)

ppercent (% → p)

vhvwviewport height / viewport width

frfraction (Grid only)

Tips & Notes

Related Properties

`px`pixel

`rem`root em (1rem = 10px)

`p`percent (% → p)

`vhvw`viewport height / viewport width

`fr`fraction (Grid only)