Utility Classes Reference

This reference documents all utility classes defined in src/styles/components/_utility.scss. These classes provide a Tailwind-like approach to styling, generated from the design tokens for consistency.

Naming Convention

The utility class naming follows a consistent pattern:

{property}-{scale}-{value}

Examples:
.text-primary-500      → Text color
.bg-neutral-100        → Background color
.p-4                   → Padding (all sides)
.mt-8                  → Margin top
.gap-6                 → Gap (flexbox/grid)

Color Utilities

Text Colors

Apply color to text content using .text-{palette}-{shade} classes.

Primary Text

.text-primary-500

Navy Text

.text-navy-600

Neutral Text

.text-neutral-700

Success Text

.text-success

Warning Text

.text-warning

Error Text

.text-error

HTML
Available Classes

<p class="text-primary-500">Primary colored text</p>
<p class="text-navy-600">Navy colored text</p>
<p class="text-success">Success message</p>
<p class="text-error">Error message</p>

Primary: .text-primary-50 through .text-primary-900
Navy: .text-navy-50 through .text-navy-900
Neutral: .text-neutral-50 through .text-neutral-900
Semantic: .text-success, .text-warning, .text-error, .text-info
Variants: .text-{semantic}-light, .text-{semantic}-dark

Background Colors

Apply background colors using .bg-{palette}-{shade} classes.

Primary Light

.bg-primary-50

Primary Base

.bg-primary-500

Neutral Light

.bg-neutral-50

Success Light

.bg-success-light

Warning Light

.bg-warning-light

Error Light

.bg-error-light

HTML
Available Classes

<div class="bg-primary-50">Light primary background</div>
<div class="bg-primary-500">Base primary background</div>
<div class="bg-success-light">Success background</div>
<div class="bg-error-light">Error background</div>

Primary: .bg-primary-50 through .bg-primary-900
Navy: .bg-navy-50 through .bg-navy-900
Neutral: .bg-neutral-50 through .bg-neutral-900
Semantic: .bg-success, .bg-warning, .bg-error, .bg-info
Variants: .bg-{semantic}-light, .bg-{semantic}-dark

Border Colors

Apply border colors using .border-{palette}-{shade} classes. Must be combined with .border or .border-{width} class.

Primary Border

.border-2.border-primary-500

Neutral Border

.border-2.border-neutral-300

Success Border

.border-2.border-success

Error Border

.border-2.border-error

HTML
Available Classes

<div class="border border-primary-500">Primary border</div>
<div class="border-2 border-neutral-300">Neutral border</div>
<div class="border-4 border-success">Success border</div>

Primary: .border-primary-50 through .border-primary-900
Navy: .border-navy-50 through .border-navy-900
Neutral: .border-neutral-50 through .border-neutral-900
Semantic: .border-success, .border-warning, .border-error, .border-info

Typography Utilities

Font Families

Sans-serif font family (default)

.font-sans

Serif font family

.font-serif

Monospace font family

.font-mono

Font Sizes

Extra small text (12px)

.text-xs

Small text (14px)

.text-sm

Base text (16px)

.text-base

Large text (18px)

.text-lg

2XL heading (24px)

.text-2xl

4XL heading (36px)

.text-4xl

Available Sizes

.text-xs     → 0.75rem (12px)
.text-sm     → 0.875rem (14px)
.text-base   → 1rem (16px)
.text-lg     → 1.125rem (18px)
.text-xl     → 1.25rem (20px)
.text-2xl    → 1.5rem (24px)
.text-3xl    → 1.875rem (30px)
.text-4xl    → 2.25rem (36px)
.text-5xl    → 3rem (48px)
.text-6xl    → 3.75rem (60px)

Font Weights

Light weight text

.font-light

Normal weight text (default)

.font-normal

Medium weight text

.font-medium

Semibold weight text

.font-semibold

Bold weight text

.font-bold

Available Weights

.font-thin        → 100
.font-light       → 300
.font-normal      → 400 (default)
.font-medium      → 500
.font-semibold    → 600
.font-bold        → 700
.font-extrabold   → 800
.font-black       → 900

Line Heights

Tight line height for headings and compact text. Lorem ipsum dolor sit amet.

.leading-tight

Normal line height for body text and general content. Lorem ipsum dolor sit amet.

.leading-normal

Relaxed line height for comfortable reading. Lorem ipsum dolor sit amet.

.leading-relaxed

Spacing Utilities

Margin

Apply margin using .m{direction}-{size} classes. Direction can be: t (top), r (right), b (bottom), l (left), x (horizontal), y (vertical), or omitted for all sides.

Content with margin

Blue area shows applied margin

<div class="m-4">Margin on all sides (1rem/16px)</div>
<div class="mt-8">Margin top (2rem/32px)</div>
<div class="mx-auto">Horizontal margin auto (centering)</div>
<div class="my-12">Vertical margin (3rem/48px)</div>
<div class="mb-0">No bottom margin</div>

.m-0, .m-px, .m-0-5, .m-1, .m-2, .m-3, .m-4, .m-5, .m-6,
.m-8, .m-10, .m-12, .m-16, .m-20, .m-24, .m-32, .m-40,
.m-48, .m-64, .m-80, .m-96

Works with: .mt-, .mr-, .mb-, .ml-, .mx-, .my-
Special: .m-auto, .mx-auto, .my-auto, .mt-auto, etc.

0    → 0
px   → 1px
0.5  → 0.125rem (2px)
1    → 0.25rem (4px)
2    → 0.5rem (8px)
3    → 0.75rem (12px)
4    → 1rem (16px)
6    → 1.5rem (24px)
8    → 2rem (32px)
12   → 3rem (48px)
16   → 4rem (64px)

Padding

Apply padding using .p{direction}-{size} classes. Direction can be: t (top), r (right), b (bottom), l (left), x (horizontal), y (vertical), or omitted for all sides.

.p-4 (1rem)

.py-8 .px-4

.p-6 (1.5rem)

Common Examples
Available Sizes

<div class="p-4">Padding on all sides (1rem/16px)</div>
<div class="pt-8">Padding top (2rem/32px)</div>
<div class="px-6">Horizontal padding (1.5rem/24px)</div>
<div class="py-12">Vertical padding (3rem/48px)</div>
<button class="px-4 py-2">Button with custom padding</button>

.p-0, .p-px, .p-0-5, .p-1, .p-2, .p-3, .p-4, .p-5, .p-6,
.p-8, .p-10, .p-12, .p-16, .p-20, .p-24, .p-32, .p-40,
.p-48, .p-64, .p-80, .p-96

Works with: .pt-, .pr-, .pb-, .pl-, .px-, .py-

Gap (Flexbox/Grid)

Apply gap between flex or grid children using .gap{-direction}-{size} classes.

Item 1

Item 2

Item 3

.flex .gap-4

Examples
Available Classes

<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="grid grid-cols-3 gap-6">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<div class="flex gap-x-8 gap-y-4">
  <!-- Different horizontal and vertical gaps -->
</div>

.gap-{size}     → Gap on both axes
.gap-x-{size}   → Column gap (horizontal)
.gap-y-{size}   → Row gap (vertical)

Available sizes: 0, px, 0.5, 1, 2, 3, 4, 6, 8, 12, 16, etc.

Layout Utilities

Display

Control element display type with these classes.

<div class="block">Block element (full width)</div>
<span class="inline">Inline element</span>
<div class="inline-block">Inline block element</div>
<div class="hidden">Hidden element (display: none)</div>

<div class="flex">Flexbox container</div>
<div class="inline-flex">Inline flex container</div>
<div class="grid">Grid container</div>
<div class="inline-grid">Inline grid container</div>

.block          → display: block
.inline-block   → display: inline-block
.inline         → display: inline
.flex           → display: flex
.inline-flex    → display: inline-flex
.grid           → display: grid
.inline-grid    → display: inline-grid
.hidden         → display: none

Flexbox

Complete flexbox utilities for layout control.

Left

Center

Right

.flex .justify-between .items-center

Item 1

Item 2

Item 3

.flex .flex-col .gap-2

<div class="flex flex-row">Horizontal (default)</div>
<div class="flex flex-row-reverse">Horizontal reversed</div>
<div class="flex flex-col">Vertical</div>
<div class="flex flex-col-reverse">Vertical reversed</div>

<div class="flex justify-start">Start (default)</div>
<div class="flex justify-end">End</div>
<div class="flex justify-center">Center</div>
<div class="flex justify-between">Space between</div>
<div class="flex justify-around">Space around</div>
<div class="flex justify-evenly">Space evenly</div>

<div class="flex items-start">Align start</div>
<div class="flex items-end">Align end</div>
<div class="flex items-center">Align center</div>
<div class="flex items-baseline">Align baseline</div>
<div class="flex items-stretch">Stretch (default)</div>

<div class="flex flex-wrap">Wrap items</div>
<div class="flex flex-wrap-reverse">Wrap reverse</div>
<div class="flex flex-nowrap">No wrap (default)</div>

Width & Height

<div class="w-auto">Auto width</div>
<div class="w-full">Full width (100%)</div>
<div class="w-screen">Viewport width (100vw)</div>
<div class="w-min">Min content width</div>
<div class="w-max">Max content width</div>
<div class="w-fit">Fit content width</div>

<div class="h-auto">Auto height</div>
<div class="h-full">Full height (100%)</div>
<div class="h-screen">Viewport height (100vh)</div>
<div class="h-min">Min content height</div>
<div class="h-max">Max content height</div>
<div class="h-fit">Fit content height</div>

<div class="max-w-xs">Extra small (20rem/320px)</div>
<div class="max-w-sm">Small (24rem/384px)</div>
<div class="max-w-md">Medium (28rem/448px)</div>
<div class="max-w-lg">Large (32rem/512px)</div>
<div class="max-w-xl">Extra large (36rem/576px)</div>
<div class="max-w-2xl">2XL (42rem/672px)</div>
<div class="max-w-7xl">7XL (80rem/1280px)</div>
<div class="max-w-full">Full width (100%)</div>

Position

Position Types

<div class="static">Static (default)</div>
<div class="fixed">Fixed positioning</div>
<div class="absolute">Absolute positioning</div>
<div class="relative">Relative positioning</div>
<div class="sticky">Sticky positioning</div>

Border & Effects Utilities

Border Radius

.rounded-none

.rounded

.rounded-lg

.rounded-xl

.rounded-2xl

.rounded-full

Available Radii

<div class="rounded-none">No rounding (0)</div>
<div class="rounded-sm">Small (0.125rem/2px)</div>
<div class="rounded">Base (0.25rem/4px)</div>
<div class="rounded-md">Medium (0.375rem/6px)</div>
<div class="rounded-lg">Large (0.5rem/8px)</div>
<div class="rounded-xl">XL (0.75rem/12px)</div>
<div class="rounded-2xl">2XL (1rem/16px)</div>
<div class="rounded-3xl">3XL (1.5rem/24px)</div>
<div class="rounded-full">Full (9999px)</div>

Border Width

.border-0 (no border)

.border (1px)

.border-2 (2px)

.border-4 (4px)

All Sides
Individual Sides

<div class="border-0">No border</div>
<div class="border">Default border (1px)</div>
<div class="border-2">2px border</div>
<div class="border-4">4px border</div>
<div class="border-8">8px border</div>

<div class="border-t">Top border</div>
<div class="border-r">Right border</div>
<div class="border-b">Bottom border</div>
<div class="border-l">Left border</div>

<div class="border-t-2">Top 2px border</div>
<div class="border-b-4">Bottom 4px border</div>

Shadows

.shadow-sm

.shadow

.shadow-md

.shadow-lg

.shadow-xl

.shadow-2xl

<button class="duration-75">75ms transition</button>
<button class="duration-100">100ms transition</button>
<button class="duration-150">150ms transition</button>
<button class="duration-200">200ms transition (default)</button>
<button class="duration-300">300ms transition</button>
<button class="duration-500">500ms transition</button>

<button class="ease-linear">Linear timing</button>
<button class="ease-in">Ease in</button>
<button class="ease-out">Ease out</button>
<button class="ease-in-out">Ease in-out</button>

Z-Index Utilities

Layer elements properly using semantic z-index classes.

Common Layers
All Available

<div class="z-base">Base layer (0)</div>
<div class="z-docked">Docked elements (10)</div>
<div class="z-dropdown">Dropdowns (1000)</div>
<div class="z-sticky">Sticky headers (1100)</div>
<div class="z-modal">Modals (1400)</div>
<div class="z-tooltip">Tooltips (1800)</div>

.z-hide       → -1
.z-auto       → auto
.z-base       → 0
.z-docked     → 10
.z-dropdown   → 1000
.z-sticky     → 1100
.z-banner     → 1200
.z-overlay    → 1300
.z-modal      → 1400
.z-popover    → 1500
.z-skip-link  → 1600
.z-toast      → 1700
.z-tooltip    → 1800

Text Utilities

<p class="text-left">Left aligned (default)</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified text</p>

<p class="uppercase">UPPERCASE TEXT</p>
<p class="lowercase">lowercase text</p>
<p class="capitalize">Capitalized Text</p>
<p class="normal-case">Normal Case</p>

<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<p class="no-underline">No underline</p>

<p class="whitespace-normal">Normal wrapping</p>
<p class="whitespace-nowrap">No wrapping</p>
<p class="whitespace-pre">Preserve whitespace</p>
<p class="whitespace-pre-line">Preserve line breaks</p>
<p class="whitespace-pre-wrap">Preserve and wrap</p>

Overflow Utilities

General Overflow
Axis-Specific

<div class="overflow-auto">Auto scroll</div>
<div class="overflow-hidden">Hidden overflow</div>
<div class="overflow-visible">Visible overflow</div>
<div class="overflow-scroll">Always scroll</div>

<div class="overflow-x-auto">Horizontal auto scroll</div>
<div class="overflow-x-hidden">Hide horizontal overflow</div>
<div class="overflow-y-auto">Vertical auto scroll</div>
<div class="overflow-y-hidden">Hide vertical overflow</div>

Legacy Utilities

Enhanced centering utilities with built-in gap.

<div class="centered">
  <!-- Flex container, centered, with gap-4 -->
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="centered-column">
  <!-- Flex column, centered, with gap-4 -->
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="centered-row">
  <!-- Flex row, centered, with gap-4 -->
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Real-World Examples

Button Component

Primary Button
Outlined Button

<button class="
  bg-primary-500
  text-white
  font-medium
  px-4
  py-2
  rounded
  shadow
  duration-200
  ease-in-out
">
  Click Me
</button>

<button class="
  bg-neutral-50
  text-primary-600
  font-medium
  px-4
  py-2
  rounded
  border-2
  border-primary-500
  duration-200
  ease-in-out
">
  Secondary
</button>

Card Component

<article class="
  bg-neutral-50
  border
  border-neutral-200
  rounded-lg
  shadow
  p-6
  max-w-2xl
">
  <h2 class="
    text-2xl
    font-bold
    text-neutral-900
    mb-2
  ">
    Card Title
  </h2>
  <p class="
    text-base
    text-neutral-700
    leading-relaxed
    mb-4
  ">
    Card content with comfortable reading line height.
  </p>
  <button class="
    bg-primary-500
    text-white
    font-medium
    px-4
    py-2
    rounded
    duration-200
  ">
    Learn More
  </button>
</article>

Alert Component

<div class="
  bg-success-light
  border-l-4
  border-success
  p-4
  rounded
  flex
  items-start
  gap-3
">
  <svg class="text-success" width="24" height="24">...</svg>
  <div>
    <h3 class="font-semibold text-success-dark mb-1">Success!</h3>
    <p class="text-sm text-neutral-700">Your changes have been saved.</p>
  </div>
</div>

<nav class="
  bg-neutral-50
  border-b
  border-neutral-200
  px-6
  py-4
">
  <div class="
    flex
    justify-between
    items-center
    max-w-7xl
    mx-auto
  ">
    <div class="text-2xl font-bold text-primary-600">
      Logo
    </div>
    <div class="flex gap-6 items-center">
      <a href="#" class="text-neutral-700 font-medium">Home</a>
      <a href="#" class="text-neutral-700 font-medium">About</a>
      <a href="#" class="text-neutral-700 font-medium">Contact</a>
    </div>
  </div>
</nav>

Best Practices

Use Design Tokens

All utility classes map directly to design tokens, ensuring consistency across your application.

Compose Classes

Combine multiple utility classes to create complex components without writing custom CSS.

Responsive Design

While these utilities don’t include breakpoint prefixes, they work well with custom media queries.

Keep It Semantic

For frequently used patterns, consider creating semantic component classes that use these utilities.

Design Tokens Reference - View all available design tokens
Design System Overview - Complete design system guide
Component Library - Pre-built components using these utilities

Source File: src/styles/components/_utility.scss