Atlas Signal UI
Component reference for the Atlas Signal brief viewer. IBM Plex type system on a warm editorial paper palette. Each section shows live renders with CSS class annotations.
Snapshot Strip
The at-a-glance panel placed directly below the pull quote in a brief view.
A .snap-plain prose block sits above a dashed-rule divider;
a two-column .snap-grid holds evidence strength (left) and
readiness level (right).
Researchers interviewed 20 everyday users of the Merlin bird-identification app to find out what they actually want from AI explanations. The surprise: users care less about technical model internals and more about practical guidance — how to trust the AI's answer, how to take better photos so the model works better, and how to give developers useful feedback. They strongly preferred explanations that pointed to recognisable parts, the way a human birder would explain.
Three tiers of evidence strength. All color, fill, and border are set by the
modifier class — no inline styles. Always includes a .dot span as
first child.
Five-step linear progress indicator. Steps before the active stage take
.past (solid ink dot); the active step takes .here
(accent dot with glow ring). The connector line is a pseudo-element on
.rs-track::before.
Section Blocks
Expandable content sections for the full paper brief. The section number badge
(§ 01) and heading sit in .bsec-head; the
+ toggle rotates 45° via CSS when .open is present.
Three modes: collapsed, open, and
skim (all visible, no toggle controls).
Body is hidden (display: none). Click any header to open it.
Research problem
What do real end-users of a deployed AI app actually want from explainability — and how does that map onto the four dominant XAI approaches the research community has been building?
Methodology
Mixed-methods study with 20 end-users of Merlin, the Cornell bird-identification app. Each participant completed a one-hour interview combining a survey adapted from the XAI Question Bank and an interactive feedback session with four XAI approaches.
Add .open to reveal the body. The + toggle rotates to
× via transform: rotate(45deg).
Key findings
- Users wanted practically useful information that improves their collaboration with the AI, more than technical system details.
- They intended to use XAI for four purposes beyond understanding: trust calibration, learning the task themselves, supplying better inputs, and giving developers feedback.
- Part-based explanations were strongly preferred over heatmaps because they resemble human reasoning.
- The "help me help the AI" need was unanimous across all participant backgrounds.
Applied at the brief level, not per-section. No .toggle element
is rendered. All bodies are always visible via
.bsec.skim .bsec-body { display: block }.
Limitations
- Single application (bird identification) — findings may not transfer to high-stakes domains like medicine or law.
- n=20, qualitative — effect sizes and quantitative generalisation are out of scope.
- Developers and deployers of Merlin were not interviewed; only end-users.
Questions to validate
- Do part-based explanations beat heatmaps in higher-stakes domains like radiology or fraud review?
- Does adding "how to supply better inputs" guidance measurably improve real-world AI accuracy and adoption?
- Can a single XAI pattern library transfer cleanly across consumer, enterprise, and clinical AI apps?
.toggle element rendered · body always display: block · non-interactive
Color Palette
All surfaces, text, and borders are drawn from a single warm-paper palette.
The accent cascade (--accent → --accent-soft →
--accent-deep) covers interactive, tinted, and deep-ink contexts.
Tier colors are defined directly — not via variables — so each tier can cascade
--sig-color and --sig-bg to child elements.
Typography
Three IBM Plex families, each with a specific editorial role. Sans carries all UI and body text. Mono labels, metadata, code, and scores. Serif appears only in the pull-quote drop cap and decorative quotation mark — a contrast accent, not a body face.
Signal Pill
The primary score display in the paper list — a stacked column of number,
tier dot + label, meter bar, and index. Color cascades from the tier class
on the parent wrapper via --sig-color. Distinct from the sidebar
signal display: larger score, explicit tier row, 60px meter, and row index.
Badges & Labels
Inline status markers. Tier chip is the sidebar-weight sibling of the signal pill tier label — styled as a pill with dot. Peer reviewed is a green check badge rendered inline with author metadata. Saved marker is a bare accent-colored glyph. KBD renders keyboard shortcuts with a bordered mono box.
--sig-color / --sig-bg on the tier class — the same variables used by the signal pill and sidebar display.
Topbar
Sticky chrome bar above the main content column. Left: sidebar toggle (.side-toggle)
with an SVG panel icon. Center: flex spacer. Right: a primary CTA button and a
mono back link. Renders on paper background with a bottom rule.
Masthead
The library page header. A .masthead-meta strip carries mono
publication metadata separated by a flex-1 rule line. The display heading and
deck follow. Below, .masthead-tabs provides a tab row that sits flush
on the section border.
Sits between the masthead tabs and the paper list. Signal legend on the left, view toggle on the right.
Paper Row
The primary list-view item. A 3-column grid: 100px signal pill column, 1fr body (title + finding + metadata), 220px aside (field, tags, top application scores). Hover shifts background to paper-2.
Pull Quote
The headline finding, displayed as an editorial pull quote. A 2px top border
anchors it; the oversized Serif quotation mark (::before) sits
at left: -8px in accent color. Text and attribution indent 28px
to clear the quote mark.
74-word/minute decoding of silently-imagined speech with 6% word error rate — the first real-time speech BCI to feel conversational rather than dictation-paced.
::before 72px Serif quote mark in accent · text 21px 400 · attrib 10px mono uppercase
Applied via .drop-cap on a paragraph. The ::first-letter
pseudo-element uses IBM Plex Serif at 56px, floated left, with accent color.
Used on the first paragraph of the Research Problem section.
What do real end-users of a deployed AI app actually want from explainability — and how does that map onto the four dominant XAI approaches the research community has been building: heatmap, example, concept, and prototype-based explanations?
float: left · 6px 8px 0 0 padding · line-height: 0.88
Application Engine
Full-bleed dark panel below the brief. Ink background inverts all text to paper
tones. An .engine-switch pill tab row switches between four
presentation modes. All four treatments are shown statically below.
auto-fit minmax(240px, 1fr) grid · .idea-card · hover shifts border to accent · .idx accent-soft · .who mono uppercase with bottom border
Mobile Frame
A CSS-only phone mockup for previewing the mobile reading experience. 320×640px content area with a dynamic island notch, status bar, scrollable inner body, and a sticky 4-tab navigation. Used as an overlay demo triggered by a FAB.
This week's signal.
A Unified Approach to Interpreting Model Predictions
SHAP unifies six XAI methods under a game-theoretically grounded framework, producing consistent feature attributions…
Emergent 3D Spatial Reasoning in Vision-Language Models
A 7B-parameter VLM fine-tuned on 18M robot manipulation trajectories generalises to unseen objects…
12-Minute Mindfulness Protocol Improves Joint Value Creation by 23%
In 312 dyadic negotiations, a brief guided mindfulness exercise before bargaining raised total joint surplus…
box-shadow 32px 80px depth