System C
A light, quiet language for reading tables. Built for MarketNinja's customer surfaces — The BinWorth Report email and the interactive report — and, later, the customer-facing MarketNinja app. Text carries the hierarchy; whitespace separates; one tech-blue accent marks the brand and everything you can click.
Principles
In priority order. When two conflict, the higher one wins.
Text is king
Hierarchy comes from type size, weight and alignment first. Colour and borders only support it. The boldest thing on the page is always text.
Whitespace first
Space separates groups before any line does. Rows stack edge to edge with a hairline; sections breathe. Nothing is crowded to fit.
One accent, and it means "click"
Tech blue marks the brand and the primary action. Every other control is a bordered, darker-grey button. Plain grey text is never clickable. No purple on customer surfaces.
Quiet surfaces
Off-whites and light greys, layered: page, card, header, panel. Light-to-medium grey borders. Faint shadows lift a layer off the page — never inside the table.
Tight corners
3px on chips, 4px on controls, 6px on cards. Nothing pill-round. Corporate and precise, not playful.
Colour has one job each
Green→yellow→red = distance from the price target. Red ink = a person's note ("graded"). Green check = done. Blue = brand or action. No colour is reused for a second meaning.
- Everything is high-contrast, so every cell competes; there is no quiet baseline for the important number to stand out from.
- Big radii, glass and pressed wells are materials — in a 100-row table they become noise.
- Violet brand + emerald money + amber/red risk leaves no clean colour for "a person commented here".
Color
Light only — customer surfaces ignore the visitor's dark-mode setting, so an emailed report and its portal always look the same.
Same thresholds as the current report (intensityOf in binworth-portal/lib/report.ts). Heat is always a filled chip with a dot; it never tints a whole row.
The red pen is ink, not a fill: red text on a barely-pink card with a red rule down the row's left edge — a teacher's margin note. Heat chips are filled, so the two reds never read as the same thing.
Type
Inter for everything a customer reads — designed for screens, legible at 12px, tabular figures so prices line up. Inter Tight for headings and the wordmark: the same family, tighter, so headings feel deliberate without a second personality. Part numbers in JetBrains Mono so 0/O and 1/l never confuse.
32–44px / -0.02em
Northgate IT Recovery
19–24px
Lower to move
14px / 1.4, 2-line clamp
14px, tabular-nums, right-aligned
14–16px / 1.55
12px, text-3
12px caps +0.06em
Shape & elevation
Tight radii. Shadows are faint and only lift a whole layer (a card, the table, an open editor) off the page.
chips, badges
buttons, inputs
cards, table
resting card
the table, editor
toast, popover
Controls
Every control looks pressable: filled blue, or a white button with a medium-grey border. Familiar words and icons only.
ssdsc2kb 960g8 finds SSDSC2KB960G8Only on on-target lines. Best price = the lowest ask among current listings. Top of market = top third of proven sales. Priced to move = bottom third. Wording stays clear of earnings language (BinWorth copy rules).
The report table
One component: a line item = a data row, then optional full-width layers beneath it — notes, the editor, the detail panel, sub-rows. Layers span the whole row, not the columns. With nothing open, items stack edge to edge.
1 · Plain rows stack with a hairline. The range bar shows the selling band in green with your ask as a mark — red when outside.
2 · Graded row: a note sits in red ink beneath the data, and a red rule runs down the left edge of the whole item.
3 · Notes hidden: the red rule stays and a red speech icon appears after the title; click it to peek.
4 · Sub-rows PLANNED — price-point comparison: the same part split by condition or lot size, each with its own range and sales count.
Pages
Two mocks built on this sheet, sharing one sample report (a fictional store, 136 lines of server parts).
Report email
The top findings only — three numbers, five lines, one piece of evidence — and one large button to the full report. Email-safe build, desktop and phone preview.
Interactive report
The full report and the feedback tool in one: filter by product type, sort by biggest change, search, page; mark lines Done or Won't do; notes in red pen; expandable detail with where the part sold and how many others are listing it.