DO NOT MERGE — Redesign UI on the FORRT design system

[LukasWallrich]

⛔ DO NOT MERGE

A second commit (1557bad) rebuilds the UI on the full FORRT living
style guide. It is not consistently better than main. Parts are a
clear improvement, parts are a regression or unverified. This PR is
parked as a draft for review and cherry-picking, not for merging as-is.

Do not merge without deciding, section by section, what is actually
wanted.

---

Commit 2 — rebuild on the full living style guide (1557bad)

The first commit adopted the Replication Atlas token sheet. This one
rebuilds on design_system/design-system.html, the full living style
guide, which documents the real component conventions rather than just
the tokens. Colours are unchanged — the guide's values match
design_system/claude_design_colors/tokens/colors.css exactly.

Probably good

• One token layer. Upstream ships both a generated --color-* scale
  and a short legacy alias layer (--primary, --text, …). Only
  --color-* is kept, and the app's separate --flora-* layer is gone
  with it. One name per value.
• Charts follow the theme. Palettes, axis colours and translucent
  overlays were hard-coded hexes duplicating the token values. They now
  resolve through a token() helper at render time, so charts respond to
  dark mode. Three duplicate Plotly theme functions collapsed into one.
• Dark mode simplified. --color-primary itself moves up the ramp on
  dark (at #853953 the maroon fails contrast on a dark surface), so one
  brand token serves both themes instead of every rule carrying an
  override.
• Deduplication. Five ghost-button blocks, four input blocks and four
  copies of the micro-label typography collapsed into one rule each. 14
  inline font-size declarations in index.html became .note /
  .note-detail.
• Browse table. Columns size to content instead of
  table-layout: fixed: titles wrap to two lines rather than four, DOIs
  no longer break mid-token, outcome badges no longer split across lines.
• Two broken token references fixed (--color-scrim-cool,
  --z-overlay were referenced but never defined, silently disabling the
  modal backdrop and the ribbon tooltip's stacking).

Contentious — this is the part to argue about

The style guide sets body copy at 14px, interface text at 13px, and its
ramp stops at 36px. That density suits its three-pane explorer, read
close up. Applied literally to this wide scrolling dashboard it looked
cramped and the hierarchy went muddy, so the scale was re-tuned:

role	size
hero	48px (--text-5xl, added)
tab page title	30px (--text-3xl, added)
card header	24px
sub-heading	18px
body	16px
metadata, controls	14px
dense metadata	12px
uppercase micro-labels, badges	11px

This is a deliberate departure from the system, documented in the README.
Whether it is the right call is exactly what needs a second opinion —
it trades fidelity to the shared system for legibility on this page, and
it is the reason this PR is not simply mergeable.

Verified

All six tabs render in light and dark with no console errors — Chart.js,
Plotly and DataTables views, plus the citation-impact modal.

Not verified

Mobile width. The responsive rules under max-width: 768px were
renamed and resized but not restructured, and the browser resize would
not change the rendering viewport, so the mobile layout is unchecked.

Also added

design_system/ is committed as the source these tokens came from
(the living style guide plus the exported token sheet).

---

Commit 1 — original PR description

Adopts FORRT's Replication Atlas (Explore) design system across the Explorer, replacing the ad-hoc --flora-* palette and Inter/Source Serif type with the system's tokens.

What's here

assets/ds-tokens.css (new) — the system's tokens transcribed verbatim: the frozen #853953 brand ramp, #2c2c2c neutral, semantic fg/bg/border triples, the study-type blue/violet pair, Domine + Source Sans 3, the 6/10/100/14px shape scale, three elevation levels, the .12s/.2s motion pair. Plus a [data-theme="dark"] block extending the system into a plum-tinted dark ramp — the system is light-only upstream, and the app already had dark mode.

assets/styles.css — rewritten to consume those tokens. Beyond the recolour, the component patterns the system specifies:

• 10px / 700 / tracked-uppercase micro-labels (stat labels, KPI labels, filter labels)
• semantic badges as soft fg/bg/border triples instead of solid fills; study type gets the blue/violet pair
• pill chips that go faint-tinted with a brand border when active, rather than solid
• 3px brand left rails on notable rows (cite blocks, callouts, expanded table rows, mobile cards)
• Domine italic for citations and pull-quotes
• dark topbar paired with a dark footer (also made full-bleed in index.html)

Replaces the --flora-primary-dark-accent duplicate-rule pattern with a single --flora-accent that lightens on dark, dropping ~25 redundant dark-mode override rules.

app.js / citation-impact.js — chart palettes moved to the same semantic colours; the categorical palette now leads with the brand ramp. Also styles .mc-stat-box, which was rendered on the Authorship Overlap tab but never had CSS.

Two deliberate deviations

Both documented in the new README "Styling" section:

1. The WIP corner ribbon stays on the --error ramp. On brand plum it read as decoration and lost its caution signal.
2. The system's fixed-height 100dvh app shell with independently scrolling panels is not adopted — this is a scrolling multi-tab dashboard, not the Atlas's three-pane explorer.

Verification

Checked in the browser across all six tabs, both light and dark themes, and the mobile card layout. No console errors.

Not included: the Explore Design System - Main/ source folder is left untracked — happy to vendor it into the repo if that's useful for future contributors.

🤖 Generated with Claude Code

[LukasWallrich]

@Keegan-Vaz could you take a look at this design-system redesign when you get a chance? Formal review request isn't possible — you're not currently a collaborator on this repo, so GitHub rejects it. Tagging you here instead.

[LukasWallrich]

Pushed 1557bad, which rebuilds the UI on the full FORRT living style guide (design_system/design-system.html) rather than just its token sheet.

Not consistently better than main — parked as a draft, do not merge as-is.

The token consolidation, the theme-aware chart colours and the Browse-table column sizing are improvements I'd stand behind. The type scale is the open question: the style guide's 13/14px density made this dashboard cramped, so it was re-tuned upward (body 16px, new 30px and 48px rungs). That is a deliberate departure from the shared system and needs a decision rather than a merge.

Mobile width (max-width: 768px) is unverified.

Details in the PR description.