Utility Classes

All utility classes use descriptive naming that describes exactly what they are doing.

Utilities are a collection of modifier classes that fine-tune layouts and components and keep consistency. You can add a utility class as a combo class to adjust a behavior of the main class or apply it as a main class to define the functionality of an element. For instance, if you want to add a shadow to a card, you can add shadow utility class as a combo class for a card:

Margins and Padding

Margins and padding are applied to sections, containers, and other elements to define inner spacing or distance between elements.

Margin

Margin defines the space outside of an element.

Utility classes use this structure: margin-direction_value

Margin All

• Value: none, xxsmall, xsmall, small, medium, large, xlarge, xxlarge, auto

Example: margin_xxsmall , margin_none

Margin Vertical

• Direction: top, bottom
• Value: none, xxsmall, xsmall, small, medium, large, xlarge, xxlarge, auto

Example: margin-top_xsmall , margin-bottom_large

Margin Horizontal

• Direction: left, right, all
• Value: none, xxsmall, xsmall, small, medium, auto

Example: margin-right_small , margin-left_auto

Padding

Padding defines the space inside of an element.

Utility classes use this structure: padding-direction_value

Padding Vertical

• Direction: top, bottom
• Value: none, xxsmall, xsmall, small, medium, large, xlarge, xxlarge

Example: padding-top_small

Padding Horizontal

• Direction: left, right
• Value: none, xxsmall, xsmall, small, medium, large

Example: padding-right_xsmall

Padding Around

• Value: none, xxsmall, xsmall, small, medium, large, xlarge, xxlarge

Example: padding_none , padding_large

Responsive Spacing

On smaller screens (like Mobile Landscape), some margin and padding utility classes will use smaller spacing variables than their desktop counterparts.

For example:

• 6x on desktop,
• 3x on mobile devices.

This behavior ensures better vertical rhythm and balance on smaller screens without needing to apply breakpoint-specific classes manually.

Display and Overflow

Utilities to control layout visibility and content flow.

Position

Controls element positioning behavior across breakpoints.

Desktop

Tablet

Mobile

Transform

Controls element translation and rotation.

Width

Controls fixed, responsive, and percentage-based width settings.

Desktop

Tablet

Mobile Landscape

Mobile Portrait

Height

Controls element height and minimum height behavior across breakpoints.

Desktop

Tablet

Border Radius

Controls element corner roundness using utility classes.

Component Specific

These are helpful when you need to customize or reset corners without affecting the base component class.

• radius_card
• radius_button

Size Specific

Use the radius_size format to control element corner roundness. The size follows t-shirt sizing convention: small, medium, large, xlarge, round

Example: radius_large

Side-specific

These utilities give you full control when working with overlapping sections, containers with flush corners, or when selectively removing roundness.

• radius_all-0
• radius_top-0
• radius_right-0
• radius_bottom-0
• radius_left-0

Mask

Use utility mask classes mask_direction to apply directional fades to images or elements. These are commonly paired with overlay and Image

Apply one of the following as a combo class:

• mask_top
• mask_bottom
• mask_left
• mask_right
• mask_fade-horizontal
• mask_fade-vertical

Example:

Overlay

Overlay classes are used to create translucent layers above content. They’re commonly used to improve readability on background images or to emphasize text.

Link Overlay

Overlay with Mask

Combine overlay with directional mask utility classes to create faded on a side images or faded overlays.

Example:

• overlay mask_top
• overlay mask_left

Drop Shadow

Add subtle or strong depth to elements using drop shadow utility classes.

• shadow_xxsmall
• shadow_xsmall
• shadow_small
• shadow_medium
• shadow_large
• shadow_xlarge
• shadow_xxlarge

Typography

These utility classes allow you to control alignment and color of text elements globally or responsively.

Text Color

These utility classes are used to apply specific text colors to an element.

• text-color_primary
• text-color_secondary
• text-color_inverse
• text-color_inverse-secondary
• text-color_accent-primary
• text-color_accent-secondary
• text-color_accent-tertiary
• text-color_accent-on-inverse
• text-color_accent-on-primary
• text-color_on-accent-primary
• text-color_on-accent-secondary
• text-color_on-overlay

Text Alignment

Text alignment utilities let you override the default left-aligned behavior.

• text-align_left
• text-align_center
• text-align_right

Responsive modifiers:

• text-align_center_tablet
• text-align_center_mobile-l
• text-align_center_mobile

Misc