Customize

Graffiti

github

CSS Utilities

These utility classes actually have utility.

We aren't replicating CSS with classnames, but providing real functionality to be combined or used individually. If you want a common layout or pattern or even automatic color contrast, we've got you.

Layouts

CSS Grid-based page layouts. All layouts are responsive by default.

When to use: Responsive page and panel layouts for app and content structure.

Classes: .layout-card, .layout-sidebar, .layout-split, .layout-three-col, .layout-readable, .layout-holy-grail, .section

Reference Notes

Variants:

  • .layout-sidebar - 250px sidebar (default)
  • .layout-sidebar.narrow - 150px sidebar
  • .layout-sidebar.wide - 350px sidebar
  • .layout-sidebar.invert - Sidebar on right (combine with .narrow or .wide)
  • .layout-sidebar.fill - Full app-shell frame (--layout-gap: 0, height: 100dvh)
  • .layout-sidebar.fixed - Sticky sidebar with scrolling main content
Split (50/50)

Add .no-stack to prevent stacking on mobile.

Three Column

Responsive: 3 cols → 2 cols → 1 col.

Readable Width

Max-width container for optimal reading:

Variants:

  • .layout-readable - Centered by default (margin: 0 auto)
  • .layout-readable.center - Same as default; explicit affirmation
  • .layout-readable.end - End-aligned (margin-inline-start: auto)

Full bleed child:

Section

Use .section to apply consistent block padding around major page regions:

Override the default with --section-padding (defaults to var(--pad-xxxl)).

CSS Variables
  • --gap or --layout-gap - Gap between grid items
  • --min-card-width - Minimum card width for .layout-card
  • --max-width - Max width for .layout-readable
  • --padding - Inline padding for .layout-readable
  • --section-padding - Block padding for .section

Organization

Flexbox utilities for vertical and horizontal layouts.

When to use: Flow and grouping helpers for vertical/horizontal composition.

Classes: .stack, .cluster, .split, .split.vertical, .flex, .grid

Reference Notes
Modifiers
  • .cluster.center — center the row horizontally instead of starting at the inline-start edge
  • .split.even — children take equal width (flex: 1 1 auto)
  • .split.center — vertically center children (overrides the default align-items: start)
  • .split.vertical — column flow, full height; useful for top+bottom split sidebars
  • .split automatically stacks at container widths under 500px
Default Properties

Stack:

  • display: flex
  • flex-direction: column
  • --gap: 1rem (override via style="--gap: …")
  • Resets child margins to 0

Cluster:

  • display: flex
  • flex-wrap: wrap
  • align-items: center
  • --gap: 0.5rem

Split:

  • display: flex
  • justify-content: space-between
  • align-items: start
  • gap: var(--gap, 1rem)

Handy Stuff

Helper classes for common styling needs.

When to use: Common reset, visibility, width, and helper utilities.

Classes: .readable, .no-list, .circle, .row, .visually-hidden, .auto-color, .full, .fc

Reference Notes
Spacing

In forms and fieldsets, .row also works as a field-group wrapper (label + control + help text).

Width

Use .readable or .narrow when you also need max-width constraints.

Fluid Container

.fc (alias: .fluid-text-container) turns the element into an inline-size container query root and switches fluid typography to container-query units (cqi) instead of viewport units. Use it on any region whose type should scale with the region's width — sidebars, cards, modals — not the viewport.

Validation States

.error, .success, and .warning set border colours on form controls (and are scoped to a few other components like .callout, .tag, .timeline li, .sidebar-nav). They do not style generic text — a <small> placed after an input gets caption spacing but inherits the parent's color.

For prominent inline status messages, use <div class="callout error">…</div> instead.

Font Sizing

Utility classes for heading-style typography and fluid size tokens.

When to use: Applying type hierarchy styles to non-heading elements.

Classes: .h1, .h2, .h3, .h4, .h5, .h6, .fs-xs, .fs-base, .fs-s, .fs-m, .fs-l, .fs-xl, .fs-xxl, .fs-xxxl

Reference Notes

Use these classes when you need visual hierarchy without changing semantic HTML.

  • .h1-.h6 apply heading styles to any element.
  • .fs-* classes map directly to the fluid type scale (--fl).

Gradients

Curated gradient background and gradient text utility classes.

When to use: Adding branded visual emphasis to surfaces and headings.

Classes: .gradient-*, .gradient-text

Reference Notes

Gradient utilities provide complete, theme-aware color compositions.

  • Use .gradient-* on containers for expressive backgrounds.
  • Add .gradient-text to apply the same gradient treatment to text.