+2

.claude/DARK_MODE.md

reviewed

··· 20 20 21 21 ## Design Principles 22 22 23 23 + **Why we target AAA, not just AA**: Most sites target WCAG AA (4.5:1). We go higher because deck building happens at 2am, zoomed out to 50%, on variable monitors, scanning long card lists. Higher contrast means faster scanning and less eye strain. Legibility is a feature. 24 24 + 23 25 **60-30-10 rule**: 60% background, 30% secondary/text, 10% accent. Don't overuse the accent color. 24 26 25 27 **Text contrast for AAA (7.0+)**:

+4 -1

src/components/deck/DraggableCard.tsx

reviewed

··· 104 104 {primaryFace ? primaryFace.name : isLoading ? "" : "Unknown Card"} 105 105 </span> 106 106 {violations && violations.length > 0 && ( 107 107 - <span title={violations.map((v) => v.message).join("\n")}> 107 107 + <span 108 108 + title={violations.map((v) => v.message).join("\n")} 109 109 + className="self-center" 110 110 + > 108 111 <AlertTriangle 109 112 className={`w-4 h-4 flex-shrink-0 ${ 110 113 violations.some((v) => v.severity === "error")