Add the grey recognized tier to the verified badge

Same mark, two tones: accent for submitter-validated results, grey for
results ingested directly from a known public leaderboard's official
API without submitter validation. Tooltip copy distinguishes the tiers.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/evaluators/[...id]/page.tsx

@@ -11,7 +11,7 @@ import type { EvalHierarchy } from "@/lib/backend-artifacts"
 import type { BenchmarkCard } from "@/lib/benchmark-schema"
 import { fetchBenchmarkMetadata, fetchEvalHierarchy, fetchEvalList } from "@/lib/dashboard-data-client"
 import type { BenchmarkEvalListItem } from "@/lib/eval-processing"
-import { getEvalsForEvaluator, verifiedEvalIds } from "@/lib/evaluators"
+import { getEvalsForEvaluator, isRecognizedEvaluator, verifiedEvalIds } from "@/lib/evaluators"
 
 function EvaluatorDetailInner() {
   const params = useParams()
@@ -159,7 +159,7 @@ function EvaluatorDetailInner() {
         <div className="kicker">Evaluator</div>
         <h1 className="ec-page-h1 inline-flex items-center gap-2">
           {name}
-          {isVerified && <VerifiedBadge verified size="md" />}
+          <VerifiedBadge verified={isVerified} recognized={isRecognizedEvaluator(name)} size="md" />
         </h1>
         <div
           className="mb-5 flex flex-wrap items-center gap-3 font-mono text-[11px] uppercase tracking-[0.12em]"

components/eval-card.tsx

@@ -19,7 +19,7 @@ import {
 } from "lucide-react"
 import Link from "next/link"
 import { routeIdToPath } from "@/lib/utils"
-import { evaluatorSlug } from "@/lib/evaluators"
+import { evaluatorSlug, isRecognizedEvaluator } from "@/lib/evaluators"
 import type { BenchmarkEvalListItem } from "@/lib/eval-processing"
 import { getTagColor, tagLabel } from "@/lib/benchmark-schema"
 
@@ -278,9 +278,12 @@ export function EvalCard({ summary, delayMs = 0 }: EvalCardProps) {
                             >
                               {name}
                             </Link>
-                            {verifiedEvaluators.has(name) ? (
-                              <VerifiedBadge verified size="sm" className="ml-1 align-middle" />
-                            ) : null}
+                            <VerifiedBadge
+                              verified={verifiedEvaluators.has(name)}
+                              recognized={isRecognizedEvaluator(name)}
+                              size="sm"
+                              className="ml-1 align-middle"
+                            />
                           </span>
                         ))}
                   </span>

components/eval-detail.tsx

@@ -54,7 +54,7 @@ import {
 import type { BenchmarkCard, SourceData } from "@/lib/benchmark-schema"
 import { tagLabel } from "@/lib/benchmark-schema"
 import type { BenchmarkEvalSummary, ModelResultForBenchmark } from "@/lib/eval-processing"
-import { evaluatorSlug } from "@/lib/evaluators"
+import { evaluatorSlug, isRecognizedEvaluator } from "@/lib/evaluators"
 import type { ComparisonIndex, EvalHierarchy } from "@/lib/backend-artifacts"
 import type { HierarchyEvalLocation } from "@/lib/hierarchy-lookup"
 import { PolicyOverview } from "@/components/policy-overview"
@@ -1111,9 +1111,12 @@ export function EvalDetail({
               <span key={name} style={{ color: "var(--fg)" }}>
                 {i > 0 ? ", " : null}
                 <EvaluatorName display={name} linkName={resolveEvaluatorName(name)} />
-                {verifiedEvaluators.has(name) ? (
-                  <VerifiedBadge verified size="sm" className="ml-1 align-middle" />
-                ) : null}
+                <VerifiedBadge
+                  verified={verifiedEvaluators.has(name)}
+                  recognized={isRecognizedEvaluator(name)}
+                  size="sm"
+                  className="ml-1 align-middle"
+                />
               </span>
             ))}
             {evaluatorList.length > 2 ? (
@@ -2022,7 +2025,14 @@ export function EvalDetail({
                                   {sourceTypeLabel}
                                 </span>
                               )}
-                              <VerifiedBadge verified={modelResult.result?.is_verified_evaluator} size="sm" />
+                              <VerifiedBadge
+                                verified={modelResult.result?.is_verified_evaluator}
+                                recognized={isRecognizedEvaluator(
+                                  modelResult.source_metadata?.source_name
+                                    ?? modelResult.source_metadata?.source_organization_name,
+                                )}
+                                size="sm"
+                              />
                             </span>
                           ) : (
                             <span style={{ color: "var(--fg-subtle)" }}>—</span>
@@ -2998,6 +3008,10 @@ function MultiMetricLeaderboard({
                         />
                         <VerifiedBadge
                           verified={Object.values(row.verified ?? {}).some(Boolean)}
+                          recognized={isRecognizedEvaluator(
+                            row.source_metadata?.source_name
+                              ?? row.source_metadata?.source_organization_name,
+                          )}
                           size="sm"
                         />
                       </span>

components/evaluator-table.tsx

@@ -4,7 +4,7 @@ import Link from "next/link"
 import { ArrowUpRight, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react"
 
 import { VerifiedBadge } from "@/components/signals/verified-badge"
-import type { EvaluatorGroup } from "@/lib/evaluators"
+import { isRecognizedEvaluator, type EvaluatorGroup } from "@/lib/evaluators"
 import { cn } from "@/lib/utils"
 
 export type EvaluatorTableSortCol = "name" | "evals" | "verified"
@@ -84,7 +84,11 @@ export function EvaluatorTable({ rows, sortCol, sortDir, onSort, verifiedOnly }:
                     <span className="font-semibold text-[14px] text-[color:var(--fg)] group-hover:text-[color:var(--accent)] transition-colors">
                       {row.name}
                     </span>
-                    {row.isVerified && <VerifiedBadge verified size="sm" />}
+                    <VerifiedBadge
+                      verified={row.isVerified}
+                      recognized={isRecognizedEvaluator(row.name)}
+                      size="sm"
+                    />
                   </div>
                 </Link>
               </td>

components/signals/verified-badge.tsx

@@ -47,6 +47,38 @@ export type VerifiedBadgeDesign =
   | "chip"
 export type VerifiedBadgeSize = "sm" | "md"
 
+/**
+ * Two trust tiers share the same mark, distinguished by colour:
+ *   - "verified"   (accent/blue): submitter-validated results.
+ *   - "recognized" (grey):        known public-leaderboard sources we ingest
+ *                                 directly (Artificial Analysis, LLM Stats,
+ *                                 HF Open LLM v2, Global-MMLU-Lite) that are
+ *                                 not submitter-verified.
+ */
+type BadgeTone = "verified" | "recognized"
+
+const TONE_CLASSES: Record<
+  BadgeTone,
+  { text: string; tileBg: string; glyphBorder: string; tickUnderline: string; tagBorder: string; chipBg: string }
+> = {
+  verified: {
+    text: "text-[var(--accent)]",
+    tileBg: "bg-[var(--accent)] text-[var(--accent-fg)]",
+    glyphBorder: "border-[var(--accent)]/55 text-[var(--accent)]",
+    tickUnderline: "text-[var(--accent)] border-[var(--accent)]/40",
+    tagBorder: "border-[var(--accent)]/40 text-[var(--accent)]",
+    chipBg: "bg-[var(--accent)] text-[var(--accent-fg)] hover:bg-[var(--accent-hover)]",
+  },
+  recognized: {
+    text: "text-[color:var(--fg-muted)]",
+    tileBg: "bg-[color:var(--fg-muted)] text-[var(--accent-fg)]",
+    glyphBorder: "border-[color:var(--fg-muted)]/55 text-[color:var(--fg-muted)]",
+    tickUnderline: "text-[color:var(--fg-muted)] border-[color:var(--fg-muted)]/40",
+    tagBorder: "border-[color:var(--fg-muted)]/40 text-[color:var(--fg-muted)]",
+    chipBg: "bg-[color:var(--fg-muted)] text-[var(--accent-fg)]",
+  },
+}
+
 const ICON_SIZE: Record<VerifiedBadgeSize, string> = {
   sm: "h-3.5 w-3.5",
   md: "h-4 w-4",
@@ -61,17 +93,26 @@ export function verifiedTooltipCopy(_mode: "research" | "policy"): string {
   return "Submitted by the organization that ran this evaluation."
 }
 
+export function recognizedTooltipCopy(_mode: "research" | "policy"): string {
+  // Grey tier: the result was ingested directly from a known source's
+  // official API, but the submitter has not been validated.
+  return "Imported from this organization's official API."
+}
+
 function IconOnly({
   design,
   size,
+  tone,
   className,
 }: {
   design: VerifiedBadgeDesign
   size: VerifiedBadgeSize
+  tone: BadgeTone
   className?: string
 }) {
   const sz = ICON_SIZE[size]
-  const base = "inline-flex shrink-0 items-center justify-center align-middle text-[var(--accent)]"
+  const tc = TONE_CLASSES[tone]
+  const base = cn("inline-flex shrink-0 items-center justify-center align-middle", tc.text)
 
   switch (design) {
     case "tile":
@@ -81,7 +122,8 @@ function IconOnly({
       return (
         <span
           className={cn(
-            "inline-flex shrink-0 items-center justify-center rounded-[3px] bg-[var(--accent)] align-middle text-[var(--accent-fg)]",
+            "inline-flex shrink-0 items-center justify-center rounded-[3px] align-middle",
+            tc.tileBg,
             size === "md" ? "h-[18px] w-[18px]" : "h-4 w-4",
             className
           )}
@@ -109,7 +151,8 @@ function IconOnly({
       return (
         <span
           className={cn(
-            "inline-flex shrink-0 items-center justify-center rounded-[3px] border border-[var(--accent)]/55 align-middle text-[var(--accent)]",
+            "inline-flex shrink-0 items-center justify-center rounded-[3px] border align-middle",
+            tc.glyphBorder,
             size === "md" ? "h-[18px] w-[18px]" : "h-4 w-4",
             className
           )}
@@ -122,7 +165,8 @@ function IconOnly({
       return (
         <span
           className={cn(
-            "inline-flex shrink-0 items-center align-middle text-[var(--accent)] border-b border-[var(--accent)]/40 leading-none",
+            "inline-flex shrink-0 items-center align-middle border-b leading-none",
+            tc.tickUnderline,
             className
           )}
         >
@@ -162,14 +206,21 @@ function BadgeCheckScalloped({ className }: { className?: string }) {
 
 export function VerifiedBadge({
   verified,
+  recognized,
   design = "check",
   size = "sm",
   withTooltip = true,
-  label = "Verified",
+  label,
   className,
 }: {
   /** The per-result `is_verified` boolean. Null/false/undefined → renders nothing. */
   verified?: boolean | null
+  /**
+   * Grey fallback tier: result/org comes from a recognized public leaderboard
+   * (see lib/evaluators.ts RECOGNIZED_EVALUATOR_NAMES) but isn't submitter-
+   * verified. Only takes effect when `verified` is falsy; both falsy → null.
+   */
+  recognized?: boolean | null
   design?: VerifiedBadgeDesign
   size?: VerifiedBadgeSize
   withTooltip?: boolean
@@ -180,11 +231,14 @@ export function VerifiedBadge({
   // Hooks must run unconditionally; guard on the value afterwards.
   const { mode } = useAudienceMode()
 
-  if (!verified) {
+  const tone: BadgeTone | null = verified ? "verified" : recognized ? "recognized" : null
+  if (!tone) {
     return null
   }
 
-  const tooltip = verifiedTooltipCopy(mode)
+  const tc = TONE_CLASSES[tone]
+  const tooltip = tone === "verified" ? verifiedTooltipCopy(mode) : recognizedTooltipCopy(mode)
+  const visibleLabel = label ?? (tone === "verified" ? "Verified" : "Recognized")
   // Screen-reader text mirrors the tooltip so the two never drift. `label`
   // ("Verified evaluator") only surfaces visually on the tag/chip designs.
   const ariaLabel = tooltip
@@ -194,7 +248,7 @@ export function VerifiedBadge({
   if (ICON_ONLY.includes(design)) {
     node = (
       <span aria-label={ariaLabel} role="img" className="inline-flex">
-        <IconOnly design={design} size={size} className={className} />
+        <IconOnly design={design} size={size} tone={tone} className={className} />
       </span>
     )
   } else if (design === "tag") {
@@ -204,14 +258,14 @@ export function VerifiedBadge({
       <span
         className={cn(
           "inline-flex shrink-0 items-center gap-1 rounded-[2px] border px-1.5 py-0.5 align-middle",
-          "border-[var(--accent)]/40 text-[var(--accent)]",
+          tc.tagBorder,
           "font-mono text-[10px] font-semibold uppercase tracking-[0.12em]",
           className
         )}
         aria-label={ariaLabel}
       >
         <Check className={size === "md" ? "h-3.5 w-3.5" : "h-3 w-3"} strokeWidth={3} />
-        {label}
+        {visibleLabel}
       </span>
     )
   } else {
@@ -220,13 +274,13 @@ export function VerifiedBadge({
       <Badge
         className={cn(
           "shrink-0 gap-1 rounded-full border-transparent align-middle",
-          "bg-[var(--accent)] text-[var(--accent-fg)] hover:bg-[var(--accent-hover)]",
+          tc.chipBg,
           className
         )}
         aria-label={ariaLabel}
       >
         <Check className={ICON_SIZE[size]} strokeWidth={3} />
-        {label}
+        {visibleLabel}
       </Badge>
     )
   }

lib/evaluators.ts

@@ -19,6 +19,30 @@
 
 import type { BenchmarkEvalListItem } from "@/lib/eval-processing"
 
+/**
+ * "Recognized" evaluator orgs — public leaderboards whose results we ingest
+ * directly but which are not submitter-verified. They get the grey
+ * VerifiedBadge tier (vs the blue verified one). Keys are the view-layer
+ * evaluator/source names of the four ingested sources:
+ *   artificial_analysis → "Artificial Analysis"
+ *   llm_stats           → "LLM Stats"
+ *   hfopenllm_v2        → "Hugging Face"
+ *   global-mmlu-lite    → "kaggle"
+ * Matched case-insensitively (see isRecognizedEvaluator).
+ */
+export const RECOGNIZED_EVALUATOR_NAMES = new Set([
+  "artificial analysis",
+  "llm stats",
+  "hugging face",
+  "kaggle",
+])
+
+/** True when the org name is one of the recognized leaderboard sources. */
+export function isRecognizedEvaluator(name: string | null | undefined): boolean {
+  if (!name) return false
+  return RECOGNIZED_EVALUATOR_NAMES.has(name.trim().toLowerCase())
+}
+
 export interface EvaluatorGroup {
   /** Canonical org name as it appears in `evaluator_names`. */
   name: string