DS3 (design): the color contract — one meaning, enforced by tests

Signal-green #00D4A0 now means exactly ONE thing (edge/active/A-tier/CTA),
locked by tests that fail on violation. Part 1 of DESIGN-SPEC v2.

- web/src/lib/colorContract.js — pure CommonJS helpers: edgeColor(value)
  colors edge/CLV/delta by SIGN (neg=var(--miss), pos=var(--g-a), 0=neutral);
  gradeTierColor() (A/A+ green, B blue, C amber, D/F red, in lockstep with
  vyndrTokens.gradeColor); gradeGlows() (A/A+ only); deltaE()/isSignalGreen()
  CIE76 gate so no archetype hue dilutes the signal.
- GradeResultCard: edge confidence-strip + EDGE row route through edgeColor
  (a -33.3% edge was rendering GREEN — audit #3); grade-hero glow gated to
  A/A+ via gradeGlows (a glowing C devalued the cue); VYNDR INTELLIGENCE
  panel de-flooded (neutral border, Form/Rest neutral not green — #15).
- LiveHeroProp: negative edge now muted red, not neutral (sign completeness).
- Archetype dedup off signal-green (both archetypes.js + archetypeService.js,
  kept matched): DUAL THREAT/MOTOR #00D4A0, MIRROR #34D399, ARTILLERY/RANGE/
  GHOST/BLADE #2DD4BF, BRUSH #3DDC84 shifted to distinct non-green hues (all
  ΔE>=44 from #00D4A0). Within-sport uniqueness preserved.
- tests/unit/colorContract.test.js — 21 tests: helper units + source-grep
  violation locks + archetype-green-dedup. QA.20-22 kept green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/components/LiveHeroProp.tsx

@@ -66,7 +66,7 @@ const row: React.CSSProperties = {
   borderBottom: '1px solid var(--border)',
 };
 
-function Stat({ label, value, tone }: { label: string; value: string; tone?: 'positive' }) {
+function Stat({ label, value, tone }: { label: string; value: string; tone?: 'positive' | 'negative' }) {
   return (
     <div
       style={{
@@ -83,7 +83,8 @@ function Stat({ label, value, tone }: { label: string; value: string; tone?: 'po
         style={{
           fontSize: 14,
           fontWeight: 700,
-          color: tone === 'positive' ? 'var(--grade-a)' : 'var(--text-primary)',
+          // Color contract #2: edge/CLV colored by SIGN — positive green, negative muted red.
+          color: tone === 'positive' ? 'var(--grade-a)' : tone === 'negative' ? 'var(--miss)' : 'var(--text-primary)',
         }}
       >
         {value}
@@ -258,7 +259,7 @@ export default function LiveHeroProp() {
       {/* Projection + edge — visible, the proof. */}
       <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
         <Stat label="Projection" value={`${projection} ${statTypeLabel}`} />
-        <Stat label="Edge" value={edgeDisplay} tone={edge > 0 ? 'positive' : undefined} />
+        <Stat label="Edge" value={edgeDisplay} tone={edge > 0 ? 'positive' : edge < 0 ? 'negative' : undefined} />
       </div>
 
       {/* Reasoning — BLURRED, the paywall. */}

web/src/components/vyndr/GradeResultCard.tsx

@@ -7,6 +7,7 @@ import VBtn from '@/components/vyndr/VBtn';
 import ArchetypeBlend from '@/components/vyndr/ArchetypeBlend';
 import GradeBadge from '@/components/vyndr/GradeBadge';
 import { gradeColor, gradeHex } from '@/lib/vyndrTokens';
+import { edgeColor, gradeGlows } from '@/lib/colorContract';
 import { playerHref } from '@/lib/playerHref';
 
 export interface GradeResultData {
@@ -137,7 +138,8 @@ export default function GradeResultCard({
             lineHeight: 0.95,
             color: hex,
             letterSpacing: '-0.04em',
-            textShadow: `0 0 28px ${hex}aa, 0 0 60px ${hex}55`,
+            // GLOW = A/A+ ONLY (color contract #4): a glowing C/D devalues the cue.
+            textShadow: gradeGlows(d.grade) ? `0 0 28px ${hex}aa, 0 0 60px ${hex}55` : 'none',
             fontFamily: 'var(--sans)',
           }}
         >
@@ -150,7 +152,7 @@ export default function GradeResultCard({
           {d.edge != null && (
             <>
               <span style={{ color: 'rgba(232,255,244,.4)', margin: '0 9px' }}>·</span>
-              <span style={{ color: 'var(--g-a)' }}>{d.edge >= 0 ? '+' : ''}{d.edge}% edge</span>
+              <span style={{ color: edgeColor(d.edge) }}>{d.edge >= 0 ? '+' : ''}{d.edge}% edge</span>
             </>
           )}
           <span style={{ color: 'rgba(232,255,244,.4)', margin: '0 9px' }}>·</span>
@@ -173,7 +175,7 @@ export default function GradeResultCard({
         {[
           { l: 'MODEL', v: d.projection != null ? d.projection : '—', col: d.projection != null ? 'var(--g-a)' : 'var(--text-2)' },
           { l: 'LINE', v: d.line, col: 'var(--text-0)' },
-          { l: 'EDGE', v: d.edge != null ? `${d.edge >= 0 ? '+' : ''}${d.edge}%` : '—', col: d.edge != null ? 'var(--g-a)' : 'var(--text-2)' },
+          { l: 'EDGE', v: d.edge != null ? `${d.edge >= 0 ? '+' : ''}${d.edge}%` : '—', col: d.edge != null ? edgeColor(d.edge) : 'var(--text-2)' },
         ].map((x, i) => (
           <div key={i} style={{ padding: '14px 16px', textAlign: 'center', borderRight: i < 2 ? '1px solid var(--border)' : 'none' }}>
             <div className="label" style={{ fontSize: 10, marginBottom: 5 }}>{x.l}</div>
@@ -216,15 +218,18 @@ export default function GradeResultCard({
         </div>
       )}
 
-      {/* 5c. VYNDR INTELLIGENCE (Session 42) */}
+      {/* 5c. VYNDR INTELLIGENCE (Session 42). Color contract #6: the panel is
+          MUTED (neutral border) with a single green label as its identity
+          accent. Form/Rest are CONTEXT data, not "edge" — neutral-bright,
+          never green. */}
       {d.vyndrIntel && (
-        <div className="intel-surface" style={{ margin: '0 20px 16px', padding: '15px 16px', borderRadius: 12, border: '1px solid rgba(0,212,160,0.24)' }}>
+        <div className="intel-surface" style={{ margin: '0 20px 16px', padding: '15px 16px', borderRadius: 12, border: '1px solid var(--border)' }}>
           <div className="mono" style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.1em', color: 'var(--g-a)', marginBottom: 12 }}>VYNDR INTELLIGENCE</div>
           <div className="mono" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', fontSize: 12 }}>
-            {d.vyndrIntel.form != null && (<><span style={{ color: 'var(--text-2)' }}>Form</span><span style={{ color: 'var(--g-ap)', fontWeight: 700 }}>{d.vyndrIntel.form}</span><span style={{ color: '#2A3531' }}>·</span></>)}
+            {d.vyndrIntel.form != null && (<><span style={{ color: 'var(--text-2)' }}>Form</span><span style={{ color: 'var(--text-0)', fontWeight: 700 }}>{d.vyndrIntel.form}</span><span style={{ color: '#2A3531' }}>·</span></>)}
             {d.vyndrIntel.usage && (<><span style={{ color: 'var(--text-2)' }}>Usage</span><span style={{ color: 'var(--text-0)', fontWeight: 600 }}>{d.vyndrIntel.usage}</span><span style={{ color: '#2A3531' }}>·</span></>)}
             {d.vyndrIntel.matchup && (<><span style={{ color: 'var(--text-2)' }}>Matchup</span><GradeBadge grade={d.vyndrIntel.matchup} size="sm" /><span style={{ color: '#2A3531' }}>·</span></>)}
-            {d.vyndrIntel.rest && (<><span style={{ color: 'var(--text-2)' }}>Rest</span><span style={{ color: 'var(--g-a)', fontWeight: 600 }}>{d.vyndrIntel.rest}</span></>)}
+            {d.vyndrIntel.rest && (<><span style={{ color: 'var(--text-2)' }}>Rest</span><span style={{ color: 'var(--text-0)', fontWeight: 600 }}>{d.vyndrIntel.rest}</span></>)}
           </div>
         </div>
       )}