LMArena — Leaderboard

Analytics DashboardSee it livelmarena.ai

A leaderboard that refuses to look like SaaS — cream paper background, a serif display face on every heading, and the confidence bar isn't a chart beside the ranking, it's drawn inside each row.

LMArena — Leaderboard — captured interface — Page excerpt · scroll inside to explore

Source capture · 2026-08-01Open full image ↗

Dashboards

Why this pattern works

The in-row confidence bar: a light-grey track spans the full width of every ranking row, filled solid green to the leader's score with a thin vertical bracket marking the confidence-interval edge — a chart built into the row instead of bolted beside it as a separate column. Pair it with the cream-and-serif treatment (warm paper backdrop, serif display headings against a plain sans for data) and a dense AI-benchmark table reads like a printed report instead of another blue SaaS dashboard.

Design notes

Surface: LMArena Leaderboard, Overview tab, Agent category
Navigation: Two tiers. A left sidebar (logo with a collapse toggle, New Chat, Leaderboard as the active item, Search, then a promo card and Log In pinned to the bottom) and a top tab strip inside the content area (Overview as an active boxed icon tab, then Agent/Chat/Code/Image/Video category tabs with dropdown chevrons) plus a black 'Start Voting' button on the far right. A dismissible cream announcement banner sits above everything.
Layout: Fixed sidebar, fluid content. The ranking table is a single column filling the remaining width; each row is full-bleed with no card borders between rows, just a hairline divider.
Density: Comfortable. Rows run roughly 56-60px tall with room for a secondary confidence line under the percentage figure — built for scanning ten rows at a glance, not hundreds.
Color: Cream/paper background throughout, including the announcement bar — not white. The only saturated colour is the green fill of the leading confidence bar and the green up-arrow percentage figures; every rank badge, logo glyph and divider stays black, grey, or the paper tone.
Type: A serif display face for page titles and section labels ('Leaderboard Overview', the italic-leaning 'Agent' section header) paired with a plain sans for body copy, table content and the percentage figures — serif signals editorial authority, sans carries the data.
Pattern: The in-row confidence bar: a full-width light-grey track sits inside every ranking row, filled solid green up to the leader's score with a thin vertical bracket marking the statistical interval edge; lower rows show the same track with only the bracket mark, no fill, so the eye reads relative standing without a separate chart.
States: Rank #1 is the only row with a filled bar — every other row shows an empty track with just its interval bracket, which reads as 'not yet statistically separated from the leader' rather than an empty or loading state. The announcement banner is dismissible via a top-right X.
Don't: Don't render the confidence bar as a separate sparkline column bolted onto the right of the table. It has to share the row's left-to-right axis with the rank and name, or the 'chart built into the row' effect is lost and it just becomes another numeric column.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withI want to

Tech stack

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text

# My project
[Describe the product, audience, and screen you want to improve]

Stack: Use the existing project stack
Task: Implement the interface and verify the result in the existing project.

## Tool guidance (Any AI tool)
Use available project tools to inspect, implement, and test. State any unavailable capabilities.

# Design reference: LMArena — Leaderboard
Source: https://lmarena.ai/leaderboard
Swipefile reference: https://swipefile.design/ref/lmarena-leaderboard/
Captured: 2026-08-01. This is a dated reference, not a claim about the current live product.
Capture scope: a page excerpt. Do not infer unseen sections or interactions.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- surface: LMArena Leaderboard, Overview tab, Agent category
- nav: Two tiers. A left sidebar (logo with a collapse toggle, New Chat, Leaderboard as the active item, Search, then a promo card and Log In pinned to the bottom) and a top tab strip inside the content area (Overview as an active boxed icon tab, then Agent/Chat/Code/Image/Video category tabs with dropdown chevrons) plus a black 'Start Voting' button on the far right. A dismissible cream announcement banner sits above everything.
- layout: Fixed sidebar, fluid content. The ranking table is a single column filling the remaining width; each row is full-bleed with no card borders between rows, just a hairline divider.
- density: Comfortable. Rows run roughly 56-60px tall with room for a secondary confidence line under the percentage figure — built for scanning ten rows at a glance, not hundreds.
- color: Cream/paper background throughout, including the announcement bar — not white. The only saturated colour is the green fill of the leading confidence bar and the green up-arrow percentage figures; every rank badge, logo glyph and divider stays black, grey, or the paper tone.
- typography: A serif display face for page titles and section labels ('Leaderboard Overview', the italic-leaning 'Agent' section header) paired with a plain sans for body copy, table content and the percentage figures — serif signals editorial authority, sans carries the data.
- pattern: The in-row confidence bar: a full-width light-grey track sits inside every ranking row, filled solid green up to the leader's score with a thin vertical bracket marking the statistical interval edge; lower rows show the same track with only the bracket mark, no fill, so the eye reads relative standing without a separate chart.
- states: Rank #1 is the only row with a filled bar — every other row shows an empty track with just its interval bracket, which reads as 'not yet statistically separated from the leader' rather than an empty or loading state. The announcement banner is dismissible via a top-right X.
- dont: Don't render the confidence bar as a separate sparkline column bolted onto the right of the table. It has to share the row's left-to-right axis with the rank and name, or the 'chart built into the row' effect is lost and it just becomes another numeric column.

Useful for: The in-row confidence bar: a light-grey track spans the full width of every ranking row, filled solid green to the leader's score with a thin vertical bracket marking the confidence-interval edge — a chart built into the row instead of bolted beside it as a separate column. Pair it with the cream-and-serif treatment (warm paper backdrop, serif display headings against a plain sans for data) and a dense AI-benchmark table reads like a printed report instead of another blue SaaS dashboard.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.

## Objective
Adapt the interaction and layout patterns below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

LMArena — Leaderboard

Make it your own

Keep exploring