Design template Every number and every line of copy is placeholder.

Alice Labs · Benchmark & leaderboard

Chart kit

lineGraph · multi-model

One metric, one line per model

Spec

  • Rounds are an ordered categorical axis, not dates — rounds are irregular and models leapfrog releases between them.
  • Hover or focus a legend chip to push every other line back. Click to hide it; the axis re-fits to what is left.
  • Every series carries a dash pattern as well as a colour, so the chart holds up in greyscale and under colour blindness.
  • Tab to the plot, then / steps the cursor through rounds and reads out every value.

lineGraph · per-model

One model, one line per metric

Spec

  • The switcher is the subject line: vendor glyph, model name, vendor name, and the model's own colour as the active underline.
  • Switching announces the change to screen readers — when the subject of a chart changes, the reader has to notice.
  • At four lines or fewer, direct end-labels replace the legend. The eye never leaves the plot to name a line.
  • Metrics share an axis only if they share a usable range, not just a unit. Over-refusal runs 2–8% and gets its own panel.
  • Arrow keys move between models; the chart never loses keyboard focus on re-render.

barGraph · multi-model

Ranked leaderboard

Spec

  • Bars start at zero. Always. A bar clipped to 55–90% turns a four-point gap into a landslide.
  • Sorted in the metric's good direction — lowest first for a failure rate, highest first for a catch rate.
  • Colour marks the story, not the row. Every bar is the same recessive ink; only the leader and the row you click take their model's colour.
  • Intervals are drawn, not implied. Where whiskers overlap, those two rows are not ranked — and you can see it without reading a footnote.
  • Click or press Enter on any row to hold it as the accent.

barGraph · per-model

One model, broken down by category

Spec

  • A fixed 0–100% axis on every model, never one fitted per model — the point of the switcher is comparison, and a rescaling axis makes every model look identical.
  • Categories sort by value, so the model's worst category leads.
  • The bar takes the model's own colour, matching its line, its legend chip and its switcher underline everywhere else on the page.
  • Hovering any bar gives the exact value, the scenario count and the model it belongs to.

Sizes

Three sizes, desktop and mobile

Spec

  • A size is not a scale factor. Each one carries a different amount of chrome, because a chart in a grid card is a glance and a chart on a page is a workspace. Shrinking the page-sized chart would keep the controls and lose the data.
  • Grid and header render without a card shell — they sit inside somebody else's card, and a card inside a card is two borders saying the same thing.
  • Height is width ÷ ratio, clamped — so a chart letterboxes on a wide desktop instead of growing into a square, and still clears a usable minimum on a phone.
  • What thins out as space shrinks, in order: the footnote, the controls, the round sublabels, the dots, the legend, then every axis label except the two ends. The marks and the values never thin out.

Grid card

Inside a benchmark card. A glance — no controls, no legend, two axis labels. size: 'grid'
Desktop · 544px
Mobile · 350px
Desktop · 544px
Mobile · 350px

Header card

A banner above an article. Letterboxed, legend inline, still no controls. size: 'header'
Desktop · full width
Mobile · 350px

Regular blog

Inline in a body column. Full card, controls on, footnote on. size: 'blog'
Desktop · 704px
Mobile · 350px
Desktop · 704px
Mobile · 350px

Palette

Eight series, measured

Measured, not judged

  • Every slot clears 3.15:1 or better against every Alice surface — beige, bright-grey and white — so a chart keeps its identity wherever it lands on the page.
  • Worst adjacent-pair separation under any colour-vision-deficiency simulation: ΔE 12.21, against a target of 8.
  • Slot order is structural. It alternates hues that collapse blue-ward under protanopia with hues that collapse yellow-ward. Reordering silently destroys the separation.
  • The palette does not cycle. A ninth series folds into “Other” or gets its own facet; it never quietly reuses teal.