Skip to content
Serve513 Guide

Utility Classes Reference

Utility Classes Reference

Section titled “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

Section titled “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

Section titled “Color Utilities”

Text Colors

Section titled “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
<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>

Background Colors

Section titled “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
<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>

Border Colors

Section titled “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
<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>

Typography Utilities

Section titled “Typography Utilities”

Font Families

Section titled “Font Families”

Sans-serif font family (default)

.font-sans

Serif font family

.font-serif

Monospace font family

.font-mono

Font Sizes

Section titled “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
.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

Section titled “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
.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

Section titled “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

Section titled “Spacing Utilities”

Margin

Section titled “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>

Padding

Section titled “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)

<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>

Gap (Flexbox/Grid)

Section titled “Gap (Flexbox/Grid)”

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

Item 1
Item 2
Item 3

.flex .gap-4

<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>

Layout Utilities

Section titled “Layout Utilities”

Display

Section titled “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>

Flexbox

Section titled “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>

Width & Height

Section titled “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>

Position

Section titled “Position”
<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

Section titled “Border & Effects Utilities”

Border Radius

Section titled “Border Radius”
.rounded-none
.rounded
.rounded-lg
.rounded-xl
.rounded-2xl
.rounded-full
<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

Section titled “Border Width”

.border-0 (no border)

.border (1px)

.border-2 (2px)

.border-4 (4px)

<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>

Shadows

Section titled “Shadows”
.shadow-sm
.shadow
.shadow-md
.shadow-lg
.shadow-xl
.shadow-2xl

Transition Utilities

Section titled “Transition Utilities”
<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>

Z-Index Utilities

Section titled “Z-Index Utilities”

Layer elements properly using semantic z-index classes.

<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>

Text Utilities

Section titled “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>

Overflow Utilities

Section titled “Overflow Utilities”
<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>

Legacy Utilities

Section titled “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>

Real-World Examples

Section titled “Real-World Examples”

Button Component

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

Card Component

Section titled “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

Section titled “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>
Section titled “Navigation Bar”
<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

Section titled “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.

Section titled “Related Documentation”

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