▸case-01 We are building a dark theme for our SaaS dashboard. The UI designer suggested using black drop shadows (`box-shadow: 0 8px 16px rgba(0,0,0,0.6)`) to convey card and modal elevation over the #121212 background. Evaluate this approach and specify how surface elevation should be indicated in dark UI. | pass→pass | 14,252 | 15,626 | +10% | 1 | 1 | 0% | 2,735 | 3,291 | +20% | 0 | 0 | — |
▸case-02 For our dark mode theme, our frontend developer set body text color to pure `#FFFFFF` on a `#121212` background to maximize contrast. Review this decision and state the recommended text color standard for dark mode body text. | pass→pass | 11,100 | 10,814 | -3% | 1 | 1 | 0% | 2,148 | 2,358 | +10% | 0 | 0 | — |
▸case-03 When porting our brand's vibrant electric blue `#0055FF` accent color to dark mode, our team plans to boost its saturation to `#0033FF` so it pops off the dark background. Evaluate this plan and specify the required primary color saturation adjustment. | fail→pass | 11,742 | 11,048 | -6% | 1 | 1 | 0% | 2,171 | 2,414 | +11% | 0 | 0 | — |
▸case-04 We are defining design tokens for our dark theme layout structure consisting of page background, content cards, and dropdown overlay menus. Detail the surface lightness hierarchy ordering across these three UI layers. | pass→pass | 11,611 | 13,372 | +15% | 1 | 1 | 0% | 1,937 | 2,690 | +39% | 0 | 0 | — |
▸case-05 Our dev team proposes automated dark mode by applying `filter: invert(1)` to our light CSS stylesheet across all UI components. Provide a design review of this approach and explain what should be done instead. | pass→pass | 16,022 | 16,911 | +6% | 1 | 1 | 0% | 2,690 | 3,241 | +20% | 0 | 0 | — |
▸case-06 In our dark mode web application, bright product hero images look glaring when surrounded by dark surfaces. Our team is considering leaving images untouched or replacing all photography. Recommend an image treatment technique for dark mode media. | pass→pass | 13,326 | 11,212 | -16% | 1 | 1 | 0% | 2,150 | 2,236 | +4% | 0 | 0 | — |
▸case-07 We are reviewing dark mode typography contrast ratios for accessibility compliance. A designer proposes `#666666` text on `#121212` background for subtle secondary text. State the minimum required contrast ratio threshold for body text in dark mode UX. | pass→pass | 3,966 | 5,439 | +37% | 1 | 1 | 0% | 797 | 1,344 | +69% | 0 | 0 | — |
▸case-08 Our product manager wants to know if we should rely solely on the system OS dark mode setting (`prefers-color-scheme`) or build an explicit dark/light mode toggle switch in the application settings menu. Recommend the complete dark mode selection architecture. | pass→pass | 15,092 | 15,098 | +0% | 1 | 1 | 0% | 3,000 | 2,978 | -1% | 0 | 0 | — |
▸case-09 Our design system team wants to outline UI elements in dark mode using strong solid black borders (`border: 1px solid #000000`). Review this border choice and specify how borders should be styled on dark surfaces. | pass→pass | 12,057 | 12,840 | +6% | 1 | 1 | 0% | 2,552 | 2,760 | +8% | 0 | 0 | — |
▸case-10 We have vector illustrations and corporate logos originally created with dark lines for light backgrounds. How should brand logos and vector illustrations be handled when adapting an app for dark mode? | pass→pass | 15,712 | 16,211 | +3% | 1 | 1 | 0% | 2,629 | 3,247 | +24% | 0 | 0 | — |
▸case-11 Our engineering team is setting up theme switching and wants to hardcode hex colors directly into CSS rules using conditional class names like `.dark .card { background: #1e1e1e; }`. Evaluate this implementation and recommend the best practice for clean theme switching. | pass→pass | 13,075 | 14,756 | +13% | 1 | 1 | 0% | 2,338 | 3,680 | +57% | 0 | 0 | — |
▸case-12 Our QA team tests dark mode themes on high-brightness monitors under well-lit office fluorescent lighting. Evaluate this testing setup and specify the required testing condition for dark mode UI. | pass→pass | 12,614 | 13,369 | +6% | 1 | 1 | 0% | 2,037 | 2,400 | +18% | 0 | 0 | — |
▸case-13 When users toggle between light and dark themes on our portal, the UI instantly flips colors without transition styling, causing an abrupt flash. What best practice should be applied to the theme toggle experience? | pass→pass | 11,554 | 10,763 | -7% | 1 | 1 | 0% | 2,065 | 2,292 | +11% | 0 | 0 | — |
▸case-14 Our app uses deep dark red `#800000` for form error alerts in light mode. Our developer wants to reuse this exact deep red hex code in dark mode on `#121212` surfaces. Review this choice and explain how system feedback colors must be adapted. | pass→pass | 13,023 | 13,521 | +4% | 1 | 1 | 0% | 2,377 | 2,751 | +16% | 0 | 0 | — |
▸case-15 When assessing screen reader accessibility during theme switches, what specific screen reader announcement requirement should be verified when a user toggles dark mode? | pass→pass | 7,915 | 7,440 | -6% | 1 | 1 | 0% | 1,483 | 1,646 | +11% | 0 | 0 | — |
▸case-16 Our marketing banner component loads full-bleed background images in dark mode that feature large bright white sky areas. Evaluate this image content choice for dark theme UX. | pass→pass | 11,493 | 12,976 | +13% | 1 | 1 | 0% | 2,153 | 2,455 | +14% | 0 | 0 | — |
▸case-17 In our dark mode surface hierarchy system, tooltips and contextual popup menus need a designated surface token level relative to background (#121212), elevated cards, and modal dialogs. Specify where tooltips and popups sit in the surface lightness hierarchy. | pass→pass | 12,688 | 7,169 | -43% | 1 | 1 | 0% | 2,342 | 1,719 | -27% | 0 | 0 | — |
▸case-18 A team member argues that dark mode design is simply about swapping background colors while keeping overall screen luminance high. State the primary eye-comfort goal regarding overall screen luminance in dark UI design. | pass→pass | 3,331 | 4,101 | +23% | 1 | 1 | 0% | 567 | 996 | +76% | 0 | 0 | — |
▸case-19 Our release checklist checks dark mode styling on the main feed page, but omits secondary components like date pickers, code blocks, and scrollbars assuming they inherit light styles fine. Evaluate this checklist policy. | fail→pass | 15,307 | 11,956 | -22% | 1 | 1 | 0% | 2,166 | 2,269 | +5% | 0 | 0 | — |
▸case-20 We are designing a new light mode color palette for an enterprise portal. We need guidance on picking light background hex codes, establishing shadow elevations for light cards, and defining key pastel accent hues for a daylight interface. Provide the complete light mode design specification. | fail→fail | 18,748 | 20,876 | +11% | 1 | 1 | 0% | 4,186 | 5,268 | +26% | 0 | 0 | — |
▸case-21 Provide the exact CSS `@media (forced-colors: active)` implementation details and browser vendor quirks for Windows High Contrast Mode system color overrides on custom form controls. | fail→fail | 19,471 | 22,465 | +15% | 1 | 1 | 0% | 3,668 | 4,772 | +30% | 0 | 0 | — |
▸case-22 Write a `@media print` CSS stylesheet that strips background colors, converts text to pure black, formats page breaks for table headers, and formats URLs for printed physical documents. | fail→fail | 11,044 | 11,904 | +8% | 1 | 1 | 0% | 2,396 | 2,783 | +16% | 0 | 0 | — |