UI & UX
AuraScore 81/100

IDE Code Diff Syntax Theme Accessibility Overhaul

Write a design-to-engineering briefing email to frontend leads outlining tokenized syntax highlighting upgrades for code review interfaces.

Use this template when code diffing tools exhibit poor visual contrast or color-blindness collisions. It frames syntax token refactoring into an actionable engineering and design systems sprint.

Template

Role: Lead Design Systems Engineer & Accessibility Specialist specializing in developer environments, IDE themes, and code review interfaces.

Context

  • Code Review Tool: {{tool_name}}
  • Accessibility Standard: {{wcag_conformance_target}}
  • Key Token Conflict: {{syntax_token_conflict}}
  • Developer Insights: {{developer_feedback_summary}}
  • Design Token Palette: {{color_palette_tokens}}
  • Target Release: {{rollout_milestone}}

Task

Draft a comprehensive briefing email to frontend tech leads and engineering managers announcing a structural redesign of syntax highlighting and diff indicators in {{tool_name}} to fulfill {{wcag_conformance_target}} and resolve {{syntax_token_conflict}}.

Method

  1. Synthesize {{developer_feedback_summary}} to demonstrate how current diff syntax harms readability during code reviews.
  2. Detail the contrast ratio failures in {{syntax_token_conflict}} across both dark and light theme modes.
  3. Present the semantic token model powered by {{color_palette_tokens}} that decouples syntax highlighting from diff addition/deletion states.
  4. Introduce redundant visual signifiers (gutters, line prefixes, textured backgrounds) that remove sole reliance on red/green hue perception.
  5. Explain how the proposed token mapping integrates cleanly with existing AST-based code tokenizers.
  6. Outline a zero-regression migration path for custom user-defined themes and legacy plugin overrides.
  7. Provide testing protocols involving automated contrast linters and screen-magnifier usability sessions.
  8. Establish milestone deliverables leading up to the targeted {{rollout_milestone}} release.

Constraints

  • The output MUST be formatted as a professional engineering alignment email.
  • Design token references MUST follow modern design token architecture naming conventions (e.g., color.diff.added.surface).
  • MUST NOT recommend dropping support for legacy dark themes; focus on non-destructive semantic variable mapping.
  • Length must remain between 400 and 600 words.

Output format

  • Subject: Design System Update: Accessible Syntax Highlighting & Diff Tokenization for {{tool_name}}
  • Context & Problem Statement: Feedback synthesis and {{wcag_conformance_target}} compliance gaps (1 concise section)
  • Technical Specification: Token Architecture Table/Mapping (3-5 core token mappings with contrast values)
  • Implementation & Rollout Roadmap: Phased schedule targeting {{rollout_milestone}}
  • Action Items for Frontend Engineers: 2-3 specific technical next steps

Self-review

  • Does the email explicitly resolve {{syntax_token_conflict}} using {{color_palette_tokens}}?
  • Are the accessibility constraints aligned directly with {{wcag_conformance_target}} criteria?
  • Is the engineering guidance concrete enough for immediate frontend sprint estimation?
AuraScore breakdown
81/100Provisional
Instruction clarity15/15 · Strong

Explicit role, a named task, and discrete steps the model can follow.

Context architecture12/12 · Strong

Background, inputs and variables the model needs before it starts.

Constraint engineering12/12 · Strong

Hard boundaries — what the model must and must not do.

Output specification6/14 · Thin

A named, field-level shape for the response.

Reasoning structure10/10 · Strong

Ordered work items that force analysis before an answer.

Model compatibility10/10 · Strong

Length and structure that travel across frontier models.

Token efficiency5/10 · Thin

Signal density — instruction weight without padding.

Reusability7/7 · Strong

Documented variables so the scaffold adapts to new inputs.

Robustness3/5 · Adequate

Quality bar, assumptions and behaviour when inputs are thin.

Observed performance1/5 · Thin

How much real usage the template has behind it.

design-visual
design-ui-ux
software-engineering-debugging
ui-ux
accessibility
design-systems