docs/extension-test-page
What's New

CSS Utilities

A utility-first CSS framework for building user interfaces.

Introduction

Utilities – also known as "trumps," "helper classes," or "alterations" – are high-specificity selectors for making very targeted alterations to existing elements or components.

Each utility is a small, atomic style declaration that, when chained together, should mitigate most situations in which custom CSS must be written. Just write these classes right in your mark-up and you're all set!

Most utilities come with responsive options, enabling alterations at targeted screen size ranges. For example, "small padding on smaller screens, larger padding on bigger screens."

While an atomic CSS approach comes with many advantages, we recognize it also offers a notable disadvantage: reducing the CSS cascade. This is especially true for repeated UI elements, which can end up creating redundant mark-up. For these instances, Dialtone offers components.

Example

Border Top

d-bt applies a border (b) to the top (t) side. 1px is the default width, and the color is inherited from the foreground color (currentColor).

Border Top Width

d-btw4 applies a 4px (4) width (w) to the top (t).

Border Color

d-bc-critical applies a critical border (b) color (c).

Tutorial

A basic example styling a container by combining Dialtone's CSS utilities. Follow each step with this Codepen template.

1. Begin with an Unstyled Container

2. Apply an Inverted Background Color

Apply a Primary Inverted Surface Color.

3. Apply Color to the Foreground Text

Since this will be primary content on a dark surface, let's use d-fc-primary-inverted from the font color utilities.

4. Apply Some Padding

Let's use d-p-100 padding for all four sides, from the list of padding utility classes.

5. List a Bunch of Boxes

Let's repeat them in a Stack component. Note that I've moved the surface and foreground colors to the parent container so they may inherit.

6. Render Them Horizontally

Let's add the direction prop to make them flow horizontally.

7. Add Borders to Segment Each

Add a border between each item with d-divide-x. Its default color is currentColor.

8. And Change the Border Color

Since the border color inherits the color of the parent's foreground (implicitly currentColor), let's soften it with a bold inverted border color d-divide-moderate-inverted.

9. How about some icons

Add some icons.

10. Let's use some real color

Apply a semantic surface color to convey some meaning to them, e.g. d-bgc-critical-strong.

11. Apply a text style

Use the DtText component for text styling. It provides a semantic, prop-driven API for typography.

12. Tweak the spacing

Refine the spacing by adjusting the Stack gap prop and padding utilities for horizontal and vertical padding.

13. Round it out!

Add d-bar-300 to each item for subtle rounded corners.

Keep Exploring!

View the final result in this Codepen template. Continue to explore using the variety of CSS utilities listed here.

CSS Utilities documentation last updated Thursday, June 18, 2026