▸case-02 When designing dark mode for our React UI library, our designer suggested adding stronger, darker drop shadows (`box-shadow: 0 10px 20px rgba(0,0,0,0.8)`) on elevated card components to make them pop against dark background surfaces. How should surface depth and elevation be handled in dark mode? | pass→pass | 15,371 | 14,339 | -7% | 1 | 1 | 0% | 2,893 | 2,792 | -3% | 0 | 0 | — |
▸case-15 Our design system team is defining the supported color mode variations for our enterprise web application. Beyond light and dark modes, what additional color modes should be planned for accessibility and user preference needs? | pass→pass | 12,658 | 14,658 | +16% | 1 | 1 | 0% | 2,262 | 2,691 | +19% | 0 | 0 | — |
▸case-01 We are building a multi-tenant web platform that needs to support both dark mode and seasonal white-label branding across our component library. Please map out a recommended multi-tiered token architecture and token strategy for this setup. Format your answer as a structured proposal covering architectural layers, theme categorizations, and concrete technical implementation choices. | fail→pass | 23,896 | 20,026 | -16% | 1 | 1 | 0% | 4,545 | 4,294 | -6% | 0 | 0 | — |
▸case-03 In our Tailwind CSS design system, we are creating a dark mode palette by copying our saturated light mode brand primary colors (`#0055FF` vibrant blue, `#FF0055` punchy red) straight onto dark neutral backgrounds (`#121212`). Should we maintain full saturation for brand consistency or adjust the color saturation for dark mode? | pass→pass | 11,893 | 14,347 | +21% | 1 | 1 | 0% | 2,493 | 2,910 | +17% | 0 | 0 | — |
▸case-04 Our marketing web application has custom vector SVG graphics and hero illustrations that look great in light mode. When users switch to dark mode, the illustrations maintain white fill backgrounds, causing harsh visual contrast. How should design systems address graphic assets in dark mode? | pass→pass | 15,914 | 14,492 | -9% | 1 | 1 | 0% | 2,600 | 2,760 | +6% | 0 | 0 | — |
▸case-05 We are structuring design tokens in Style Dictionary for a white-label enterprise platform. A developer proposes adding a 4th layer called 'Brand Override Tokens' on top of Component Tokens (`Global -> Semantic -> Component -> Brand Override`). Where in a multi-layered token system should theme and brand overrides actually be applied? | pass→pass | 16,800 | 14,709 | -12% | 1 | 1 | 0% | 2,804 | 2,852 | +2% | 0 | 0 | — |
▸case-06 When implementing runtime dark mode switching in a React web app using CSS custom properties, should the application rely solely on user explicit toggles saved in `localStorage`, or should OS-level system preferences be integrated? If so, how? | pass→pass | 15,192 | 14,544 | -4% | 1 | 1 | 0% | 3,145 | 3,069 | -2% | 0 | 0 | — |
▸case-07 Our SaaS web app needs to cater to both power users needing high data density (dense tables, tight padding) and casual users preferring spacious layouts. How should density variations be categorized and integrated within a multi-mode design system architecture? | pass→pass | 16,877 | 18,470 | +9% | 1 | 1 | 0% | 3,301 | 3,748 | +14% | 0 | 0 | — |
▸case-08 In our component library documentation for button and modal components, developers are confused about which properties can be overridden by brand themes and which properties must remain constant across all themes (such as accessibility focus ring widths or core layout bounds). What documentation strategy should be established for tokens? | pass→pass | 15,519 | 16,628 | +7% | 1 | 1 | 0% | 2,603 | 3,303 | +27% | 0 | 0 | — |
▸case-09 Our QA team currently tests components only in the default light brand theme before releasing UI component package updates. What testing practice should be mandated for a design system supporting multiple brands, color modes, and densities? | pass→pass | 11,839 | 12,133 | +2% | 1 | 1 | 0% | 2,071 | 2,340 | +13% | 0 | 0 | — |
▸case-10 When converting our light mode theme to dark mode, we simply inverted our foreground text colors from `#111111` on white to `#FFFFFF` on `#000000`. However, bright white text on pure black creates harsh eye strain and halation effects. What consideration should guide text color decisions on dark surfaces? | pass→pass | 12,434 | 14,508 | +17% | 1 | 1 | 0% | 2,288 | 2,691 | +18% | 0 | 0 | — |
▸case-11 We need to allow users to switch white-label tenant themes at runtime in a Next.js application without reloading the page or downloading separate full CSS bundles. What technical mechanism should be used for token delivery and runtime theme switching? | pass→pass | 15,589 | 12,826 | -18% | 1 | 1 | 0% | 2,963 | 2,503 | -16% | 0 | 0 | — |
▸case-12 Our design team is setting up Figma files for a component library that supports Light, Dark, High Contrast, and seasonal white-label themes. How should tokens be modeled in Figma to mirror the code implementation? | pass→pass | 16,514 | 19,436 | +18% | 1 | 1 | 0% | 3,280 | 3,656 | +11% | 0 | 0 | — |
▸case-13 How should token source files be structured in a repository for a multi-brand design system that compiles CSS variables for primary, white-label, and seasonal themes? | pass→pass | 17,765 | 16,486 | -7% | 1 | 1 | 0% | 3,315 | 3,607 | +9% | 0 | 0 | — |
▸case-14 When building a multi-brand design system, a project manager asks whether we should hardcode separate CSS stylesheets for each brand or adopt a tokens-first architectural rule. How should themes be constructed in the system? | pass→pass | 14,793 | 13,308 | -10% | 1 | 1 | 0% | 2,536 | 2,745 | +8% | 0 | 0 | — |
▸case-16 Our multi-tenant platform requires supporting corporate primary styling, regional sub-brands, partner white-label clients, and short-term promotional events. How should these visual identities be categorized within the theme architecture? | pass→pass | 17,724 | 16,609 | -6% | 1 | 1 | 0% | 2,751 | 3,186 | +16% | 0 | 0 | — |
▸case-17 In a 3-tier token architecture for a web component library, what is the specific role of Layer 1 (Global Tokens), and should semantic application logic or theme overrides happen directly at this layer? | pass→pass | 14,005 | 12,664 | -10% | 1 | 1 | 0% | 2,505 | 2,441 | -3% | 0 | 0 | — |
▸case-18 What is the role of Layer 3 tokens in a design system architecture, and how do they interact with Layer 2 semantic tokens for components like buttons or inputs? | pass→pass | 16,373 | 14,295 | -13% | 1 | 1 | 0% | 3,005 | 2,890 | -4% | 0 | 0 | — |
▸case-19 When converting a high-brightness light dashboard to a dark mode palette, our developer proposes mathematically inverting all RGB channels (`255 - R`, `255 - G`, `255 - B`). Why is pure mathematical inversion problematic, and what rule should be followed instead? | pass→pass | 14,496 | 12,253 | -15% | 1 | 1 | 0% | 2,484 | 2,323 | -6% | 0 | 0 | — |
▸case-20 We are setting up fluid typography scales in CSS for our marketing landing page using `clamp(1rem, 2.5vw, 2rem)` for header text across viewport breakpoints. How should `clamp()` syntax be formatted in modern CSS? | pass→fail | 10,833 | 11,370 | +5% | 1 | 1 | 0% | 2,011 | 2,393 | +19% | 0 | 0 | — |
▸case-21 We are writing an accessible Modal dialog component in plain JavaScript and HTML. How do we implement keyboard focus trapping so pressing Tab while inside the modal keeps focus inside the modal elements? | pass→pass | 13,605 | 14,125 | +4% | 1 | 1 | 0% | 2,750 | 3,448 | +25% | 0 | 0 | — |
▸case-22 In our React CSS grid layout, cards in the same row have varying text content and currently collapse to unequal heights. How do we ensure all card containers in a row stretch to equal height using CSS Flexbox or CSS Grid? | pass→pass | 10,644 | 10,218 | -4% | 1 | 1 | 0% | 2,117 | 2,347 | +11% | 0 | 0 | — |