---
version: alpha
name: Expert Lens
description: A reviewer's desk after dark. Deep green-black, jade primary, coral for verdicts, long-form serif reading.
meta:
  id: "theme-expert-lens"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-08-29T15:33:37+09:00"
  updatedAt: "2026-08-29T15:33:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: The reviewer's desk at midnight — long reading, sharp verdicts
  bestFor: Review workflows, editorial judgement, research briefs, expert panels, deep detail pages
  avoidFor: Bright consumer marketing, high-volume grids, print-like light UIs
  defaultMode: dark
  surfaceStyle: filled
  accentUse: underline
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: duotone
  motion:
    intensity: 4
    duration: 200ms
    ease: "cubic-bezier(0.65, 0, 0.35, 1)"
    signature: "Tonal fill crossfades, and the jade underline draws in from the left."
  displayFont: Newsreader
  displayKind: serif
  bodyFont: Source Sans 3
  monoFont: IBM Plex Mono
colors:
  background: "#F4F6F3"
  foreground: "#16211D"
  card: "#FFFFFF"
  card-foreground: "#16211D"
  popover: "#FFFFFF"
  popover-foreground: "#16211D"
  primary: "#14685A"
  primary-foreground: "#FFFFFF"
  secondary: "#E6EBE8"
  secondary-foreground: "#2C3B36"
  muted: "#E6EBE8"
  muted-foreground: "#5D6B65"
  accent: "#C0522E"
  accent-foreground: "#FFFFFF"
  destructive: "#A82E20"
  destructive-foreground: "#FFFFFF"
  border: "#CFD8D3"
  input: "#CFD8D3"
  ring: "#14685A"
  chart-1: "#14685A"
  chart-2: "#C0522E"
  chart-3: "#8A6520"
  chart-4: "#3E5F8A"
  chart-5: "#46534E"
colorsDark:
  background: "#0F1613"
  foreground: "#EDF3F0"
  card: "#17201C"
  card-foreground: "#EDF3F0"
  popover: "#17201C"
  popover-foreground: "#EDF3F0"
  primary: "#58C4A8"
  primary-foreground: "#05201A"
  secondary: "#1E2A25"
  secondary-foreground: "#DEE8E3"
  muted: "#1E2A25"
  muted-foreground: "#98A8A1"
  accent: "#F08A70"
  accent-foreground: "#2A0C05"
  destructive: "#F0736A"
  destructive-foreground: "#2A0806"
  border: "#2A362F"
  input: "#2A362F"
  ring: "#58C4A8"
  chart-1: "#58C4A8"
  chart-2: "#F08A70"
  chart-3: "#D6B05E"
  chart-4: "#7FA8E8"
  chart-5: "#98A8A1"
typography:
  display-lg:
    fontFamily: Newsreader
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-lg:
    fontFamily: Newsreader
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
  headline-md:
    fontFamily: Newsreader
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.35
  body-lg:
    fontFamily: Source Sans 3
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.7
  body-md:
    fontFamily: Source Sans 3
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Source Sans 3
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Source Sans 3
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.12em
  label-mono:
    fontFamily: IBM Plex Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
  quote-lg:
    fontFamily: Newsreader
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.45
rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 48px
  gutter: 20px
  margin: 32px
  measure: 66ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 11px
  button-quiet:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    rounded: "{rounded.md}"
    padding: 11px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-verdict:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    rounded: "{rounded.md}"
    padding: 20px
  queue-item:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.sm}"
    padding: 12px
---

# Expert Lens

## Overview

Expert Lens is the desk of someone who reads carefully and then says what they
think. The screen is dark because the reading session is long. Argument comes
first — a thesis, the evidence behind it, then named verdicts from people whose
judgement the reader is here for.

Use it when the product's value is a considered opinion: review queues, editorial
desks, research briefs, expert panels, deep single-item pages. It is a *detail*
theme; it is not designed to show forty things at once.

Personality: attentive, literate, opinionated, unhurried. Dark by default.

## Colors

Deep green-black with jade for structure and coral for judgement.

- **Primary (jade #58C4A8 dark / #14685A light):** Navigation, active queue item,
  primary action, the underline beneath a section title.
- **Accent (coral #F08A70 dark / #C0522E light):** Verdicts only. When a human
  or an expert persona has made a call, it is coral. Nothing else may be coral.
- **Neutral:** A green-shifted near-black page with a slightly lighter panel.
  The step is deliberately small — panels should feel like paper on a dark desk,
  not glowing cards.
- **Muted foreground:** The apparatus voice — sources, timestamps, attributions.

Light mode exists and is fully specified, but the theme is authored dark-first;
the light palette is the same argument printed on paper.

## Typography

Newsreader for anything argued, Source Sans 3 for anything operational.

- **Display / headlines:** Newsreader 500. Titles are sentences, not labels, and
  are allowed to run two lines.
- **Body:** Source Sans 3 17px / 1.7 at a 66ch measure. Reading comfort outranks
  density everywhere in this theme.
- **Pull quotes:** Newsreader 22px / 1.45, no quotation marks, indented by a 2px
  jade rule on the left.
- **Labels:** Source Sans 3 11px uppercase at `0.12em`.
- **Mono:** IBM Plex Mono for source counts, IDs and dates only.

## Layout

Three columns on desktop: a 260px review queue, a fluid reading column capped at
66ch, and a 320px verdict column. The reading column is the only place with
long-form text; the two rails hold navigation and judgement.

Below 1280px the verdict column moves beneath the reading column — verdicts must
never be the first thing on a narrow screen, because they mean nothing before
the argument. Below 900px the queue becomes a horizontal scroller.

Vertical rhythm: 28px between blocks, 48px between major sections.

## Elevation & Depth

Depth comes from **tonal fill**, not shadow. The page is the darkest layer,
panels fill one step lighter, and inset blocks (`secondary`) fill one step
lighter again. Nothing casts a shadow except modals.

Section titles are separated by a 2px jade underline that spans only the width
of the title — the theme's signature mark.

## Shapes

Calm mid-radius: 12px panels, 10px buttons and inputs, 6px queue items. Nothing
is fully round except avatars. The jade underline is square-ended.

## Components

- **Buttons:** jade fill for primary at 10px radius; quiet buttons fill with
  `secondary` and carry no border.
- **Reading panel:** `card` fill, 24px padding, 12px radius, headline underlined
  in jade, body at the 66ch measure.
- **Evidence line:** a two-column row — uppercase label left, statement right,
  separated by a 1px border. Stacked, these form the evidence block.
- **Verdict card:** `secondary` fill, coral role label in uppercase, a serif
  one-line verdict, then a short rationale and a bold outcome value in coral.
- **Queue item:** compact `card` row, jade left-bar when active, title plus a
  mono source count.
- **Pull quote:** 2px jade left rule, serif 22px, no quotation glyphs.

## Do's and Don'ts

- Do keep the reading column at or under 66ch, always.
- Do reserve coral strictly for verdicts and named judgements.
- Do underline section titles in jade at title width only.
- Don't put the verdict column above the argument on narrow screens.
- Don't use shadows for in-page depth; fill one tonal step instead.
- Don't render more than ~8 items in the queue without pagination.
- Don't pair this theme with a card grid — it is a detail view system.