Design system

Paper

Warm paper in the light, warm near-black in the dark. Serif type is reserved for the system's conclusions. Sans handles everything you read at length or click on. Monospace marks any value the engine measured. Colour is used only to distinguish for, against and neutral.

Palette

Light and dark are peers. Every swatch below is drawn from a CSS variable, so this page repaints when you switch themes — nothing here is a hardcoded hex.

Paper — page

#F6F3EC / #15140F

Card

#FFFFFF / #1F1D17

Well — inputs, bars

#EEEAE1 / #0F0E0A

Ink — headlines

#1C1B17 / #F1EDE3

Ink — secondary

#5E5A52 / #BDB7AA

For

#2F7D4E / #5FC98A

Against

#C97418 / #F0A24A

Judge

#6B5AC6 / #A997E6

Each side also has a tint for chips and avatars, a hairline, a wash for backgrounds, and an ink for text on its tint. The sides get lighter on dark so they clear contrast; the tints become deep rather than translucent.

Type

Instrument Serif 72Verdict

Instrument Serif 40Verdict headlines

Instrument Serif 30Section titles

Instrument Sans 15 / 1.55Body copy and model turns. Everything you read at length.

Instrument Sans 14Secondary UI, card metadata, helper text.

JetBrains Mono 12anthropic/claude-opus-4.8 · 1.4s · $0.014

Components

Radii 10 / 14 / 22 and pills. Controls are 40 tall, the primary action 48. One soft warm shadow.

Chips and seats

The council leans yesLeans noChairNeutralFailed

P1C1JS4

Buttons

Start the debateNew questionExportChoose models

Stages

✓Frame

2Debate

3Judge

Rules the system enforces

For and against columns are symmetrical

The two columns share a width, a type size and a background. Colour marks the side; layout never suggests a winner before the judge has scored.

Serif type is used only for conclusions

Display type appears on the question, verdict headlines and section titles. Never on interface chrome, and never on a model's turn.

Monospace marks what the engine measured

Model ids, latency, tokens, cost and source refs are set in monospace. Labels and copy are sentence-case sans, never uppercase.

Every section has a failed state

Each section is designed for empty, loading and failed. The failed state names both the model that was asked and why it didn't return anything usable.