▸case-04 We are establishing accessible color pairs for our SaaS application text elements. For normal body text (16px regular) on a white background (#FFFFFF), what minimum WCAG 2.1 AA contrast ratio must our body text hex color achieve? | pass→pass | 3,172 | 5,496 | +73% | 1 | 1 | 0% | 551 | 1,420 | +158% | 0 | 0 | — |
▸case-21 We are configuring font pairing roles for a news portal app. Should we use a single mono font across the entire interface, or how should Primary and Secondary font roles be distributed between body UI text and editorial headings? | fail→pass | 13,676 | 13,053 | -5% | 1 | 1 | 0% | 2,472 | 2,440 | -1% | 0 | 0 | — |
▸case-01 I'm setting up a design system for a SaaS dashboard and need a modular typography scale. Please provide the font sizes for UI elements from captions to display text, the numerical font weights to use, line height ratios for body vs headings, and letter spacing rules for uppercase and large text. | fail→fail | 18,452 | 15,025 | -19% | 1 | 1 | 0% | 4,035 | 3,218 | -20% | 0 | 0 | — |
▸case-02 We are refreshing our mobile web app's text styling. Can you design a responsive typographic system specifying base text size requirements, line length guidelines, mobile font size adjustments for headings, and standard font pairings for UI, headers, and code snippets? | fail→pass | 17,916 | 17,946 | +0% | 1 | 1 | 0% | 3,834 | 4,377 | +14% | 0 | 0 | — |
▸case-03 I need a complete typographic specification for an editorial blog platform. Outline the hierarchy including sizes, weight mappings, line heights suited for long-form reading vs titles, tracking adjustments, and responsive scaling recommendations. | fail→fail | 20,612 | 19,050 | -8% | 1 | 1 | 0% | 4,279 | 4,479 | +5% | 0 | 0 | — |
▸case-05 Our marketing landing page is experiencing high layout shift (CLS) due to custom web font loading. What CSS font-display strategy and resource preloading tags should we implement in HTML to minimize Flash of Unstyled Text (FOUT)? | pass→pass | 14,556 | 14,683 | +1% | 1 | 1 | 0% | 2,904 | 3,409 | +17% | 0 | 0 | — |
▸case-06 We are building a responsive 12-column desktop layout grid in CSS grid/flexbox for a 1440px desktop viewport. What standard column count and structural grid parameters should be configured for the page layout? | pass→pass | 12,178 | 12,082 | -1% | 1 | 1 | 0% | 2,509 | 3,120 | +24% | 0 | 0 | — |
▸case-07 We are creating a compact data table in our analytics platform. Designers suggested setting caption text to 10px and small secondary labels to 12px to fit more rows. What specific font sizes should we assign to captions and small body text in our design system? | fail→pass | 10,470 | 11,330 | +8% | 1 | 1 | 0% | 1,818 | 2,566 | +41% | 0 | 0 | — |
▸case-08 For our documentation site section titles, the template team proposed using 28px for H2 and 22px for H3. What font sizes does our standard typographic scale assign to Heading 2 and Heading 3? | fail→pass | 11,318 | 2,402 | -79% | 1 | 1 | 0% | 2,172 | 901 | -59% | 0 | 0 | — |
▸case-09 We are designing marketing hero banners and need a display font size. The developer wants a fixed single value of 36px. What font size range is allocated for display text in a standard modular typography scale? | pass→pass | 9,682 | 6,987 | -28% | 1 | 1 | 0% | 1,914 | 1,730 | -10% | 0 | 0 | — |
▸case-10 Our front-end developer is setting up CSS variables for font weights and asked whether to use named strings like 'light' or custom numbers like 300 and 800. What numerical font weights should be mapped for regular, semibold, and bold text? | pass→pass | 8,720 | 7,118 | -18% | 1 | 1 | 0% | 1,694 | 1,784 | +5% | 0 | 0 | — |
▸case-11 In our CSS reset, the junior dev applied a global line-height of 1.4 across all HTML elements, including headings and body paragraphs. What line height ratio should be used specifically for normal body text versus tight headings? | pass→pass | 7,199 | 5,987 | -17% | 1 | 1 | 0% | 1,372 | 1,489 | +9% | 0 | 0 | — |
▸case-12 When styling giant h1 titles on our web page, the designer noticed the letters look too spread out and suggested adding positive tracking (+0.03em). What letter spacing value should be applied to large headings to maintain tight display text? | fail→pass | 6,842 | 5,850 | -14% | 1 | 1 | 0% | 1,337 | 1,520 | +14% | 0 | 0 | — |
▸case-13 Our navigation badges and table header labels use ALL CAPS text. The developer left letter-spacing at default 0. What tracking adjustment should be applied to uppercase labels to improve legibility? | pass→pass | 8,666 | 6,452 | -26% | 1 | 1 | 0% | 1,640 | 1,624 | -1% | 0 | 0 | — |
▸case-14 To fit extra content on mobile viewports without scrolling, our product team suggested reducing the main reading body text from standard size down to 13px on smartphones. What is the minimum base font size required for body readability? | pass→pass | 11,524 | 10,156 | -12% | 1 | 1 | 0% | 2,266 | 2,311 | +2% | 0 | 0 | — |
▸case-15 Our SaaS web app displays JSON payloads, API endpoints, and database logs inside dashboard cards. A designer suggested using the primary UI sans-serif font for code blocks to maintain visual uniformity. What font category should be designated for technical content and code snippets? | pass→pass | 10,066 | 7,402 | -26% | 1 | 1 | 0% | 1,740 | 1,853 | +6% | 0 | 0 | — |
▸case-16 A designer submitted a brand UI kit containing 12 distinct font sizes (11px, 13px, 15px, 17px, 19px, 21px, 25px, 29px, 35px, 42px, 50px, 60px) used across standard application screens. How many font sizes should typically be active in regular daily use to maintain visual consistency? | fail→pass | 11,567 | 6,533 | -44% | 1 | 1 | 0% | 1,899 | 1,645 | -13% | 0 | 0 | — |
▸case-17 When translating desktop layouts to mobile viewports, the frontend team is unsure whether to shrink body text or shrink titles. What is the standard responsive strategy regarding heading sizes on mobile devices? | pass→pass | 11,511 | 11,379 | -1% | 1 | 1 | 0% | 2,149 | 2,536 | +18% | 0 | 0 | — |
▸case-18 Our marketing blog full-width container allows body text paragraphs to stretch across 120 characters per line on ultra-wide desktop monitors. What is the optimal character length per line for comfortable body reading? | pass→pass | 8,746 | 7,188 | -18% | 1 | 1 | 0% | 1,603 | 1,608 | +0% | 0 | 0 | — |
▸case-19 A junior UI engineer asked why we shouldn't just pick arbitrary font size numbers like 13px, 17px, 22px, 31px, and 43px when designing an interface hierarchy. What underlying principle ensures harmonic proportions across text sizes? | pass→pass | 12,526 | 11,472 | -8% | 1 | 1 | 0% | 2,392 | 2,430 | +2% | 0 | 0 | — |
▸case-20 Before finalizing our typography scale implementation in Figma and CSS, the team wants to populate component mockups using 'Lorem ipsum dolor sit amet' placeholder text. What testing practice should be followed instead of testing with dummy text? | pass→pass | 10,398 | 9,236 | -11% | 1 | 1 | 0% | 1,668 | 1,746 | +5% | 0 | 0 | — |
▸case-22 Our editorial platform features multi-page investigative articles. Readers report eye fatigue when reading long paragraphs set to tight 1.2 line height. What line height ratio should be selected for long-form reading content? | fail→pass | 10,532 | 7,665 | -27% | 1 | 1 | 0% | 1,952 | 1,830 | -6% | 0 | 0 | — |
▸case-23 A web developer is configuring standard paragraph styles in CSS and asked whether body text should have tight tracking (-0.02em) or wide tracking (+0.05em) applied. What letter spacing should be assigned to regular body text? | pass→pass | 8,108 | 6,492 | -20% | 1 | 1 | 0% | 1,398 | 1,398 | 0% | 0 | 0 | — |
▸case-24 After defining font sizes, weights, line heights, and letter spacing values in our design token repository, what final step is recommended to ensure team-wide compliance across design and engineering? | fail→pass | 9,896 | 8,837 | -11% | 1 | 1 | 0% | 1,598 | 1,778 | +11% | 0 | 0 | — |
▸case-25 When defining CSS @font-face rules and font utility classes, our developer is unsure which numeric value maps to Medium font weight. Should Medium be mapped to 300 or 500? | pass→pass | 6,032 | 5,508 | -9% | 1 | 1 | 0% | 1,232 | 1,463 | +19% | 0 | 0 | — |