▸case-08 We are designing color token names for an alert modal in our enterprise app. A designer suggested naming the background token 'color-red-500' or 'color-light-red' so everyone knows the hue. Should design tokens be named based on visual properties like color or based on functional purpose? | pass→pass | 11,056 | 11,951 | +8% | 1 | 1 | 0% | 2,006 | 2,437 | +21% | 0 | 0 | — |
▸case-01 We are organizing a design system in Figma and need a systematic naming structure for our Primary Button component and its associated background color tokens. Please provide the standard naming formats for the component layer hierarchy and the design tokens for standard, hover, and active states. | fail→pass | 11,300 | 7,775 | -31% | 1 | 1 | 0% | 2,343 | 1,935 | -17% | 0 | 0 | — |
▸case-02 I am preparing a set of SVG icons and hero section vector illustrations for export. Can you provide the recommended naming conventions for these graphics files and system asset items to keep them scannable and searchable for engineering? | fail→pass | 15,572 | 10,621 | -32% | 1 | 1 | 0% | 2,576 | 2,363 | -8% | 0 | 0 | — |
▸case-03 We are refactoring our web UI component library built with React. Developers are currently using mixed casing styles like camelCase for component functions and snake_case for prop names like 'button_type'. What casing standards should we adopt for React component names and React prop names to maintain codebase clarity? | pass→pass | 11,727 | 10,110 | -14% | 1 | 1 | 0% | 2,323 | 2,374 | +2% | 0 | 0 | — |
▸case-04 Our frontend team is writing global CSS stylesheet rules for design system components. Some developers want to use camelCase selectors like 'primaryButtonHover' while others want PascalCase. What standard casing pattern should be enforced for CSS selectors? | pass→pass | 11,439 | 10,706 | -6% | 1 | 1 | 0% | 1,980 | 2,150 | +9% | 0 | 0 | — |
▸case-05 Our Figma workspace has over 50 pages created by different designers, titled with designer names like 'Sarah Work' or random dates. What structural naming standard should we enforce for Figma pages to keep the file navigable? | fail→pass | 15,287 | 10,988 | -28% | 1 | 1 | 0% | 2,512 | 1,963 | -22% | 0 | 0 | — |
▸case-06 In our Figma component library, designers are naming master components in lowercase with spaces like 'primary button standard'. What exact casing convention should be used for component names in design files? | fail→pass | 12,501 | 7,865 | -37% | 1 | 1 | 0% | 2,037 | 1,483 | -27% | 0 | 0 | — |
▸case-07 When exporting source vector artwork files or image assets from design tools, team members name files unpredictably like 'final_header_v2_edit.png'. What structured naming pattern should we mandate for export file names? | fail→pass | 10,929 | 12,857 | +18% | 1 | 1 | 0% | 1,941 | 2,537 | +31% | 0 | 0 | — |
▸case-09 To keep token keys short in our JSON config files, a developer proposes truncating terms like 'btn-bg-prim-hvr' instead of writing full words. Is heavy abbreviation considered a good practice when naming design system assets? | pass→pass | 12,665 | 10,856 | -14% | 1 | 1 | 0% | 2,189 | 2,163 | -1% | 0 | 0 | — |
▸case-10 A contributor is proposing token strings that combine slashes, underscores, and hyphens in a single key like 'color_bg/button-primary_hover'. Is mixing different separators within design tokens recommended? | pass→pass | 9,972 | 10,339 | +4% | 1 | 1 | 0% | 1,826 | 2,110 | +16% | 0 | 0 | — |
▸case-11 Our design system serves 40 engineers and designers, but manual PR code reviews regularly miss naming typos and casing mismatches. How should we enforce naming rules systematically across the workflow? | pass→pass | 15,768 | 14,811 | -6% | 1 | 1 | 0% | 2,775 | 2,637 | -5% | 0 | 0 | — |
▸case-12 Our design token naming rules are currently mentioned across five different Notion notes, Slack pinned messages, and README files. Where should the team document naming conventions? | pass→pass | 11,642 | 9,858 | -15% | 1 | 1 | 0% | 1,820 | 1,821 | +0% | 0 | 0 | — |
▸case-13 When browsing graphic assets in our asset directory, files appear in random order making it hard for developers to find matching icons or illustrations. How should asset names be structured to improve sorting and grouping? | pass→pass | 11,402 | 11,392 | -0% | 1 | 1 | 0% | 2,113 | 2,357 | +12% | 0 | 0 | — |
▸case-14 Before releasing a batch of new component names and token definitions to the entire engineering team, what process step should design system leads use to review and finalize proposed names? | fail→pass | 11,046 | 8,554 | -23% | 1 | 1 | 0% | 1,618 | 1,633 | +1% | 0 | 0 | — |
▸case-15 We are creating a design token key for a card component's interactive border state during dark mode. A developer suggests using a 3-part key like 'card-border-active'. What precise token segment sequence should be used? | fail→fail | 11,177 | 9,499 | -15% | 1 | 1 | 0% | 2,040 | 1,860 | -9% | 0 | 0 | — |
▸case-16 In Figma, we want to organize our navigation menu item component variants so Figma automatically creates nested component submenus. Should we separate component hierarchy parts with hyphens or slashes? | fail→pass | 6,429 | 5,989 | -7% | 1 | 1 | 0% | 1,219 | 1,319 | +8% | 0 | 0 | — |
▸case-17 We are adding a 16px search glass icon asset to our design repository. A contributor named it 'search_icon_16px_v1'. What precise asset naming pattern should be applied for icons? | pass→pass | 9,479 | 5,504 | -42% | 1 | 1 | 0% | 1,794 | 1,308 | -27% | 0 | 0 | — |
▸case-18 We are adding a vector illustration for our payment success page. The team proposed 'success_vector_green'. What precise asset naming pattern should be applied for illustrations? | fail→pass | 9,267 | 6,550 | -29% | 1 | 1 | 0% | 1,567 | 1,305 | -17% | 0 | 0 | — |
▸case-19 We want to configure Stylelint to strictly enforce kebab-case naming for all CSS class selectors across our design system components. Which exact built-in Stylelint rule key should we add to our configuration file? | pass→pass | 3,280 | 3,994 | +22% | 1 | 1 | 0% | 598 | 977 | +63% | 0 | 0 | — |
▸case-20 When configuring StyleDictionary to transform design token JSON paths into CSS custom variable names, which built-in transform key formats CTI token paths into kebab-case variable names? | pass→pass | 3,891 | 4,694 | +21% | 1 | 1 | 0% | 731 | 1,085 | +48% | 0 | 0 | — |
▸case-21 We want to configure ESLint to automatically catch lowercased or camelCased React component declarations in our design system component library. Which rule from eslint-plugin-react enforces PascalCase component naming? | pass→pass | 8,468 | 7,063 | -17% | 1 | 1 | 0% | 1,513 | 1,655 | +9% | 0 | 0 | — |
▸case-22 When formatting design token JSON files according to the W3C Design Tokens Community Group specification, what exact property key name must be used to define a token's value? | pass→pass | 3,196 | 3,161 | -1% | 1 | 1 | 0% | 598 | 786 | +31% | 0 | 0 | — |