Avatar

.talos-avatar is a square identity tile with a single top-right chamfer — the HUD’s square-with-a-cut house silhouette. The edge colour rides the clip-path (host edge + 1px-inset fill) so the hairline follows the diagonal instead of being sliced off, and the optional __status dot encodes presence in colour alone.

Default

PREVIEW

JS

<span class="talos-avatar">JS</span>
<span class="talos-avatar"><img src="/me.jpg" alt="" /></span>

Holds uppercase initials (display font, tight tracking) or an <img> that object-fits inside the inset. Background is --surface-2, edge --edge-default.

Sizes

<span class="talos-avatar talos-avatar--sm">SM</span>
<span class="talos-avatar">MD</span>
<span class="talos-avatar talos-avatar--lg">LG</span>

--sm is 1.75rem, default 2.5rem, --lg 3.5rem — driven by the --talos-avatar-size var, so font size scales with the tile.

Ring

<span class="talos-avatar talos-avatar--ring">AB</span>

--ring swaps the edge to --edge-strong for a brighter hairline — use it to mark the current user or a focused tile.

Status

<span class="talos-avatar">ON<span class="talos-avatar__status talos-avatar__status--online"></span></span>
<span class="talos-avatar">WN<span class="talos-avatar__status talos-avatar__status--warning"></span></span>
<span class="talos-avatar">OF<span class="talos-avatar__status talos-avatar__status--offline"></span></span>

__status is a dot tucked into the un-chamfered bottom-right corner. Bare it reads --muted-foreground; --online → --success, --warning → --warning, --offline → --danger. The colour is the presence.

Group

<div class="talos-avatar-group">
  <span class="talos-avatar">JS</span>
  <span class="talos-avatar">KP<span class="talos-avatar__status talos-avatar__status--online"></span></span>
  <span class="talos-avatar talos-avatar--lg">AB</span>
</div>

.talos-avatar-group is a spaced inline row — distinct tiles, not an overlapped collaborator stack, so each chamfer reads on its own.

Classes