QuotaLens · mark · round three

Ring, four ways

The shape is settled. What is not settled is how it is drawn — whether there is a track behind the arc, whether the silhouette stays a full circle, and whether it carries one reading or two. Each is shown at 128px, at the three sizes it ships in, in a tab, in the wordmark lockup, and across the states the dashboard already defines.

First, which way it sweeps

This decision comes before the drawing, because it changes what every variant below means. The arc can show what you have used or what you have left.

arc shows what is used — it grows toward a full, red circle

arc shows what is left — it shrinks to almost nothing

Used, growing clockwise from twelve o'clock. The moment that matters is 91%, and a nearly-full red circle is a stronger signal than a nearly-empty one — an almost-invisible arc at the point of maximum danger is exactly backwards. It also matches every progress ring anyone has ever seen, so it needs no learning. All four variants below use it.

The four

Same 24-unit grid, same 68% reading, same states. Only the drawing changes.

Track

A faint full circle with the used part drawn solid over it. You see the part and the whole, so 68% reads as 68% rather than as “most of a circle”.

QuotaLens 68%

QuotaLens

22%early

68%two thirds gone

91%at the threshold

—stale

two tone values needed · unmistakable at 16 · the safe answer

Open

The arc alone, no track behind it, round caps. One path, the lightest drawing of the four, and the only one that would survive being stamped in a single colour.

QuotaLens 68%

QuotaLens

22%early

68%two thirds gone

91%at the threshold

—stale

an incomplete circle in a tab reads as a spinner for the first half second

Bead

A complete ring, thinner, with a solid bead riding on it at the current position. The silhouette is always a circle; only the bead moves.

QuotaLens 68%

QuotaLens

22%early

68%two thirds gone

91%at the threshold

—stale

most stable of the four · the bead survives 16px better than a thin arc

Dual

Two concentric rings: session window outside, weekly window inside. Both of the product's readings in one mark, which no other option here manages.

QuotaLens 68%

QuotaLens

22%early

68%two thirds gone

91%at the threshold

—stale

the gap between the rings closes at 16px · a 24px-and-up mark

Also tried

Three that did not survive

Segments

Eight segments, five lit. Legible, but it turns a continuous reading into a coarse one and eight gaps mush together at 16px.

Ring and dot

A centre dot adds a second element that carries no information. It is the kind of detail that looks considered and is not.

Ring and needle

A needle from the centre. Reads as a clock at a glance, which is a different claim than the one the mark should be making.

Recommendation

01 · Track, with 03 · Bead as the alternative

Track is the one to ship. It is the only variant where the reading is unambiguous — you can see the whole circle, so a two-thirds arc reads as two thirds rather than as “nearly a circle”. It costs two elements and one extra tone, both of which you already have in tokens.css.
Bead if you would rather the silhouette never change. At 16px in a busy tab strip a constant circle is easier to find than an arc that is sometimes a quarter-circle; the trade is that a bead at one position is a coarser read than an arc.
Open is the most elegant drawing and the wrong one for a tab. An arc with round caps and no track is what every loading spinner on the internet looks like.
Dual is the most interesting idea here and I would keep it in the drawer. It is a genuinely good 32px-and-up mark for the site header and the OG image — just not the favicon.

What Track costs to ship

Two circles. The track takes --txt-far, the arc takes --lit, and the dash length is the reading — so the same file serves as both the static mark and the live one, with a single attribute updated by the poller.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
     role="img" aria-label="QuotaLens — 68% of the session window used">
  <circle cx="12" cy="12" r="9" fill="none"
          stroke="var(--txt-far)"  stroke-width="2.6"/>
  <circle cx="12" cy="12" r="9" fill="none"
          stroke="var(--lit)" stroke-width="2.6"
          stroke-dasharray="38.45 56.55"          <!-- 68% of 2πr -->
          transform="rotate(-90 12 12)"/>
</svg>

Three files, same as now: mark.svg at 24, favicon.svg redrawn on a 16 grid with the stroke at 3 units so the edges land on whole pixels, and logo.svg for the mark plus the wordmark.
Amber or not. If the Bench palette survives, the arc is --lit and the mark is the fourth legitimate use of amber — it is the session window, which is the rule, not an exception to it. If you take one of the other directions, the arc takes that direction's live colour instead.
Stale is a dashed empty ring, never a full one. The mark obeys the same rule as every meter in the product: when the value is unknown it is removed, not guessed.

Every mark on this page is live SVG at real size — the 16px renders are 16px, not scaled screenshots. Arc lengths are computed from 2πr at r=9 (circumference 56.55), so 68% is a dash of 38.45.