The stitch aesthetic and shapes

Hololink UI looks calm, precise and technical: flat indigo-accented surfaces on slate neutrals. The “stitch” aesthetic adds subtle dashed and dotted lines and geometric alignment, like a blueprint. Glass and glow are accents, not the default.

Stitch lines

Use stitch lines to frame a region, such as a divider, a drop zone or an area next to focus. Keep them 1px, low contrast and aligned to the 4px grid. Do not use them in place of the real border of a control that needs a 3:1 boundary.

Dashed border

u-border-tech draws a dashed border with gradients so you can tune the dash and gap.

Drop files here

<div class="u-border-tech">Drop files here</div>

Dotted line

For a simple dotted rule you do not need a utility. A plain CSS border using the interactive border token does the job:

---

hr {
  border: 0;
  border-top: 2px dotted var(--s-color-border-interactive);
}

Grid and crosshairs

u-holo-grid lays a faint 24px grid with crosshair dots behind a surface.

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

The full list of utilities, with options, is in CSS utilities.

Shapes

Radii come from one scale. Use the semantic roles in your own code.

Token	Primitive	Use
--s-radius-subtle	sm (4px)	Tags, tooltips, small icon buttons, dismiss buttons
--s-radius-interactive	md (6px)	Buttons, inputs, selects
--s-radius-container	xl (12px)	Cards, alerts, panels, dialogs
--s-radius-pill	full	Badges, avatars, switches, spinners, pills

Token	Value	Preview
--s-radius-subtle	0.25rem
--s-radius-interactive	0.375rem
--s-radius-container	0.75rem
--s-radius-pill	9999px

The primitive scale is none 0, sm 4px, md 6px, lg 8px, xl 12px, 2xl 16px and full 9999px.

Nest radii so the inner radius is never larger than the outer one. Borders are 1px. The alert accent is a 4px border-inline-start. Focus rings are 2px.

Glass and glow

Use these as accents for emphasis.

Glow. u-glow-hologram adds an outer and inner glow in --s-color-accent-glow, with an interactive border. holo-card has a glow property for the same effect.

Glass. Combine --s-shadow-glass with backdrop-filter: blur(8px) and a translucent surface.

Glass panel

<holo-card card-title="Glow" subtitle="Used sparingly" glow></holo-card>

<div
  style="
    background: color-mix(in srgb, var(--s-color-bg-surface) 60%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: var(--s-shadow-glass);
    border-radius: var(--s-radius-container);
  "
>
  Glass panel
</div>