CSS utilities

The global stylesheet includes a small set of u-* helper classes (the ITCSS “trumps” layer, in packages/ui/src/styles/trumps/utilities.css). They give surfaces the stitched, blueprint look described in The stitch aesthetic. They read semantic tokens, so they follow the theme and your overrides.

Use them sparingly, as accents. Each class below lists the custom properties it exposes.

u-border-tech

A dashed 1px border drawn with gradients, so you control the dash and gap lengths. It sets position: relative.

Custom property	Default
`--dash-size`	`8px`
`--gap-size`	`6px`
`--border-width`	`1px`
`--border-color`	`var(--s-color-border-interactive)`

Default

Dotted-ish

<div class="u-border-tech">Default</div>
<div class="u-border-tech" style="--dash-size: 3px; --gap-size: 3px">Fine dashes</div>

Do not use it as the only boundary of a form control. Controls need a --s-color-border-control border for a 3:1 boundary.

u-holo-grid

A 24px grid with faint crosshair dots at the intersections. It sets position: relative and fades with opacity.

Custom property	Default
`--grid-color`	`var(--s-color-accent-grid)`
`--grid-size`	`24px`
`--grid-line-width`	`1px`
`--grid-crosshair-color`	`var(--s-color-accent-grid-strong)`

Holographic grid

<div class="u-holo-grid">Holographic grid</div>
<div class="u-holo-grid" style="--grid-size: 16px">Tighter grid</div>

u-grid-hidden and u-grid-toggle

These hide a u-holo-grid by setting its opacity to 0 and disabling pointer events.

u-grid-hidden hides the element it is on. Add it to a u-holo-grid element directly.
u-grid-toggle goes on an ancestor. A u-holo-grid inside is hidden unless the ancestor also has is-active. The selector also supports is-inactive.

Toggle the is-active class from your own code:

Grid follows the button

u-grid-hidden: grid is always hidden here

<div class="u-grid-toggle is-active">
  <div class="u-holo-grid">Grid follows the wrapper class</div>
</div>

<div class="u-holo-grid u-grid-hidden">Always hidden</div>

<script>
  const wrapper = document.querySelector('.u-grid-toggle');
  wrapper.classList.toggle('is-active'); // show or hide the grid
</script>

u-glow-hologram

An outer and inner glow in --s-color-accent-glow, plus an interactive border and a background blur. Override the glow with --glow-color.

Glow

Custom glow

<div class="u-glow-hologram">Glow</div>
<div class="u-glow-hologram" style="--glow-color: color-mix(in srgb, var(--s-color-status-success) 50%, transparent)">Custom glow</div>

Use it for emphasis. holo-card offers the same effect through its glow property.

u-glow-text

A soft text-shadow in --s-color-accent-glow.

Hololink UI

<h2 class="u-glow-text">Hololink UI</h2>

u-shimmer-scan

A scanning beam that sweeps down the element every 4 seconds. It draws with ::after, which is absolutely positioned, so the element needs position: relative. Add overflow: hidden to clip the beam.

Scanning

<div class="u-shimmer-scan" style="position: relative; overflow: hidden">Scanning</div>

u-perspective and u-isometric

u-perspective sets perspective: 1000px on a parent. u-isometric rotates a child with rotateX(60deg) rotateZ(-45deg), so a flat square reads as a tile on a floor.

<div class="u-perspective">
  <div class="u-isometric u-border-tech" style="width: 8rem; height: 8rem"></div>
</div>

u-spin-holo

Turns an element around the Z axis once every 20 seconds, keeping the isometric X tilt. It animates transform, so do not combine it with u-isometric on the same element.

<div class="u-perspective">
  <div class="u-spin-holo u-border-tech" style="width: 8rem; height: 8rem"></div>
</div>

Reduced motion

u-spin-holo and u-shimmer-scan animate continuously. Both stop automatically for visitors who set prefers-reduced-motion: reduce, because utilities.css switches their animation off inside that media query. You don’t need to add anything.