▸case-02 I am building a React hero banner component for an AI product page. The default template uses a standard Tailwind bright blue button (bg-blue-600) with rounded-md and generic Sans-Serif font. Re-style this call-to-action button according to official Anthropic brand identity standards. | pass→pass | 15,861 | 14,697 | -7% | 1 | 1 | 0% | 2,716 | 2,796 | +3% | 0 | 0 | — |
▸case-01 I'm designing a React UI card component for displaying model benchmarks. Please apply brand-guidelines to format the component's typography hierarchy and color scheme to match official design rules. | fail→pass | 28,318 | 32,292 | +14% | 1 | 1 | 0% | 4,212 | 4,601 | +9% | 0 | 0 | — |
▸case-03 I am styling a code block snippet component for technical API documentation. The current stylesheet defaults to standard system monospaced Courier New on a dark blue (#0F172A) background. Format the typography and dark container background to reflect official Anthropic visual brand specifications. | fail→fail | 28,427 | 25,758 | -9% | 1 | 1 | 0% | 4,213 | 5,100 | +21% | 0 | 0 | — |
▸case-04 I am authoring an HTML/Tailwind CSS landing page layout for an AI assistant. The draft uses pure white (#FFFFFF) background with dark slate (#1E293B) body text. Update the light background palette and primary text colors to comply with Anthropic brand design guidelines. | pass→pass | 31,660 | 13,021 | -59% | 1 | 1 | 0% | 4,752 | 2,575 | -46% | 0 | 0 | — |
▸case-05 I am designing a blog article template for AI research releases. The template currently sets all headings (H1, H2, H3) in standard Inter sans-serif font with bold weights. Apply official Anthropic visual design hierarchy rules for article headings. | pass→pass | 23,139 | 24,837 | +7% | 1 | 1 | 0% | 3,274 | 3,608 | +10% | 0 | 0 | — |
▸case-06 I am creating a dark mode theme variant for a dashboard interface displaying model latency metrics. The developer used pure hex black (#000000) for the card containers with neon cyan (#00FFFF) borders. Adjust the dark background and accent border colors to match official Anthropic dark brand standards. | pass→pass | 13,684 | 14,341 | +5% | 1 | 1 | 0% | 2,413 | 3,020 | +25% | 0 | 0 | — |
▸case-07 I am creating an HTML/CSS pitch presentation slide deck titled 'Scaling Laws Overview'. The current title slide uses a high-gloss purple gradient (#7C3AED to #4F46E5) with Futura extra-bold text. Format the presentation background, heading typography, and brand accent according to official Anthropic slide deck brand guidelines. | fail→fail | 24,480 | 36,860 | +51% | 1 | 1 | 0% | 3,575 | 7,853 | +120% | 0 | 0 | — |
▸case-08 I am building an informational tip/callout box component for developer docs. The default UI component uses a bright yellow warning background (#FEF08A) with blue text (#1D4ED8). Re-style this callout box using official Anthropic brand colors for neutral background tint and accent border. | pass→pass | 18,832 | 39,197 | +108% | 1 | 1 | 0% | 2,957 | 8,471 | +186% | 0 | 0 | — |
▸case-09 I am configuring a Recharts bar chart component to compare model evaluation scores across standard benchmarks. The chart defaults to standard material design primary colors (bright red, blue, green, yellow). Define the visual color palette array for the chart series following official Anthropic color design guidelines. | fail→fail | 15,990 | 15,731 | -2% | 1 | 1 | 0% | 2,893 | 2,554 | -12% | 0 | 0 | — |
▸case-10 I am designing the header navigation bar component for a web application. The layout currently features a full-black (#000000) bar with neon green active tab indicators (#00FF00). Apply official Anthropic brand styling to the navbar background, font choices, and active state indicator. | pass→pass | 18,257 | 39,131 | +114% | 1 | 1 | 0% | 3,515 | 8,283 | +136% | 0 | 0 | — |
▸case-11 I am styling a UI tag/badge component that highlights model status indicators such as 'GA', 'Beta', or 'Deprecated'. The prototype uses Tailwind slate-100 background with indigo-700 text. Re-style these status badges to follow official Anthropic brand identity visual standards. | fail→pass | 19,791 | 26,126 | +32% | 1 | 1 | 0% | 3,060 | 4,321 | +41% | 0 | 0 | — |
▸case-12 I am configuring the Tailwind CSS typography rules for long-form documentation pages. The existing config sets body copy in Monospace Courier at 12px with pure black text. Apply official Anthropic brand typography standards for body text legibility. | pass→pass | 23,812 | 22,083 | -7% | 1 | 1 | 0% | 3,484 | 4,403 | +26% | 0 | 0 | — |
▸case-13 I am building a website footer section containing copyright notices and resource links. The designer used a dark blue background (#0B192C) with bright cyan links (#00E5FF). Format the footer background color and link text colors according to Anthropic brand design standards. | pass→pass | 26,243 | 30,398 | +16% | 1 | 1 | 0% | 2,536 | 4,123 | +63% | 0 | 0 | — |
▸case-14 I am implementing a confirmation modal overlay component in React. The current theme uses pure white (#FFFFFF) with a 4px solid bright purple border (#9333EA) and Helvetica font. Re-style the modal overlay container and header text to comply with Anthropic brand guidelines. | fail→pass | 19,759 | 18,313 | -7% | 1 | 1 | 0% | 3,034 | 3,080 | +2% | 0 | 0 | — |
▸case-15 I am designing a pricing comparison table component featuring standard, professional, and enterprise tiers. The recommended tier card uses a bright emerald green header banner (#059669) with white text. Apply Anthropic brand identity guidelines to visually highlight the recommended plan card. | fail→pass | 31,917 | 50,599 | +59% | 1 | 1 | 0% | 5,033 | 8,462 | +68% | 0 | 0 | — |
▸case-16 I am authoring an HTML email newsletter template for product updates. The template uses generic blue headers (#2563EB) and Arial body text. Convert the email layout color palette and typography hierarchy to follow official Anthropic brand guidelines. | pass→pass | 23,623 | 28,395 | +20% | 1 | 1 | 0% | 4,580 | 5,152 | +12% | 0 | 0 | — |
▸case-17 I am designing a web page hero section layout featuring headline copy, subtext, and a visual decorative accent divider line. The visual designer put a neon pink (#EC4899) glowing gradient divider line. Update the hero section visual accent styling to match official Anthropic brand design guidelines. | fail→pass | 15,092 | 12,713 | -16% | 1 | 1 | 0% | 2,243 | 2,351 | +5% | 0 | 0 | — |
▸case-18 I am styling a tabbed interface component for switching between Python, JavaScript, and cURL API examples. The active tab currently uses a thick sky-blue bottom border (#0284C7) with bright blue text. Re-style the active tab state using Anthropic official brand guidelines. | pass→pass | 17,136 | 27,587 | +61% | 1 | 1 | 0% | 3,555 | 5,774 | +62% | 0 | 0 | — |
▸case-19 I am creating a 3-column feature grid component for an AI capabilities landing page. Icons inside each feature box currently rest in bright purple circle containers (#8B5CF6). Update the feature box icon container background and border accents to follow Anthropic visual design identity rules. | pass→fail | 15,416 | 46,317 | +200% | 1 | 1 | 0% | 2,602 | 5,460 | +110% | 0 | 0 | — |
▸case-20 I am styling an HTML table component displaying model latency and token throughput benchmarks. The existing CSS applies a harsh blue row hover background (#DBEAFE) and pure black borders (#000000). Re-style table borders and row hover states according to Anthropic visual brand standards. | fail→fail | 20,160 | 29,392 | +46% | 1 | 1 | 0% | 2,972 | 4,905 | +65% | 0 | 0 | — |
▸case-21 I am styling input text fields and textareas for a prompt playground web form. The default focus outline uses a bright blue ring ring-4 ring-blue-500. Modify the form input field styling and active focus ring color to comply with official Anthropic brand standards. | fail→pass | 16,871 | 27,665 | +64% | 1 | 1 | 0% | 2,487 | 4,585 | +84% | 0 | 0 | — |
▸case-22 I am creating CSS styles for blockquotes rendered in Markdown documentation. The current stylesheet uses a thick blue border-left (4px solid #3B82F6) with light gray italic text (#6B7280). Update the blockquote styling according to Anthropic brand design guidelines. | pass→pass | 15,318 | 11,751 | -23% | 1 | 1 | 0% | 2,750 | 1,893 | -31% | 0 | 0 | — |
▸case-23 Calculate the minimum contrast ratio required by WCAG 2.1 AA standards for normal body text (16px) versus large text (24px bold) on a digital web interface, and explain how to verify this requirement mathematically. | pass→pass | 16,248 | 11,503 | -29% | 1 | 1 | 0% | 2,644 | 2,572 | -3% | 0 | 0 | — |
▸case-24 Write a modern CSS snippet using Flexbox to center a modal dialog both horizontally and vertically within a full-screen viewport, handling dynamic height overflowing. | pass→pass | 23,840 | 16,326 | -32% | 1 | 1 | 0% | 2,464 | 3,482 | +41% | 0 | 0 | — |
▸case-25 Provide a standard 3-tier CSS custom property naming convention (Global, Semantic, Component) for an enterprise multi-tenant SaaS application design system. | pass→pass | 19,669 | 28,366 | +44% | 1 | 1 | 0% | 3,718 | 5,333 | +43% | 0 | 0 | — |