Design System Component Review

Template Overview

Unified software user experiences depend on rigorous component governance across design, engineering, and accessibility stakeholders. The Design System Component Review template audits proposed UI components against WCAG standards, design token architecture, and cross-platform interaction guidelines in plain Markdown.

Markdown Template Structure

Copy the block below or click Download .md File to add this template directly to your personal vault:

---
title: "Component Review: [Component Name] - [Version]"
date: [YYYY-MM-DD]
component_name: "[Modal Dialog / Data Table / Pill Button / Callout]"
design_lead: "[[Lead Product Designer]]"
engineering_lead: "[[Lead Frontend Engineer]]"
a11y_reviewer: "[[Accessibility Specialist]]"
approval_status: "APPROVED / REVISIONS REQUIRED / PROTOTYPE"
tags: [design-system, ui, ux, accessibility, components, tokens]
---

# Design System Component Review — [Component Name]

## 1. Component Intent & Interaction Specification
- **Component Purpose:** Provide accessible, keyboard-traversable modal dialog overlays that preserve background focus traps.
- **Platform Scope:** macOS desktop client (native Apple design system parity) and web documentation.

## 2. Design Token & Visual Style Compliance
| Visual Property | Specified Design Token | Fallback Value | Token Compliance Status |
|---|---|---|---|
| Background Surface | `var(--surface-overlay)` | `#ffffff` / `#1c1c1e` (Dark) | Verified Token |
| Border Hairline | `var(--border-subtle)` | `rgba(0,0,0,0.08)` | Verified Token |
| Text Primary | `var(--ink)` | `#1d1d1f` / `#f5f5f7` (Dark) | Verified Token |
| Accent Tone | `var(--brand)` | `#0071e3` | Verified Token |

## 3. Accessibility & Keyboard Navigation Audit (WCAG 2.2 AA)
- **Contrast Ratios:** Text to surface ratio is 7.2:1 (exceeds WCAG AAA standard of 7:1).
- **Keyboard Traversal:** `Tab` and `Shift+Tab` cycle strictly within modal boundaries; `Esc` key cleanly closes dialog.
- **Screen Reader Announcements:** ARIA labels (`aria-modal="true"`, `role="dialog"`) verified via macOS VoiceOver.
- **Reduced Motion:** When user prefers reduced motion, fade transitions replace spring transform zooms.

## 4. Implementation Directives & Review Consensus
- [ ] [[Lead Frontend Engineer]] Package component into core design token library with full TypeScript prop definitions.
- [ ] [[Lead Product Designer]] Publish updated Figma component variants to the shared team UI kit.
- [ ] Final Status: **APPROVED FOR PRODUCTION SHIP**.

Filled Real-World Example

Here is a realistic example demonstrating how this template captures actual deliberations:

---
title: "Component Review: Callout Block v2"
date: 2026-10-09
component_name: "Markdown Callout Block"
design_lead: "[[Clara Jensen]]"
engineering_lead: "[[Marcus Vance]]"
a11y_reviewer: "[[Simon Ross]]"
approval_status: "APPROVED"
tags: [design-system, ui, accessibility, components]
---

# Design System Component Review — Callout Block v2

## 1. Review Summary
Clara and Marcus audited the updated Callout Block component. Simon Ross verified that the color contrast ratios across all 13 Obsidian-compatible callout types meet WCAG 2.2 AA standards with zero reliance on pure color to convey meaning.

## 2. Decision
The component was approved unanimously and tagged for release in Design Kit v3.2.

When to Use and When to Avoid

When to Use

• Use during design system governance reviews before publishing components to shared UI libraries.
• Use to certify WCAG accessibility compliance, keyboard navigation, and design token consistency.
• Use to align design and frontend engineering on component API properties and interaction states.

When to Avoid

• Avoid using for one-off bespoke marketing graphics or slide presentations.
• Avoid using for backend database schema reviews.

On-Device AI Integration

Summarize your recording in Oyma with this local instruction:

Analyze the design system component review audio recording:
1. Extract component specifications, design token mappings, and styling decisions discussed.
2. Summarize accessibility evaluations including contrast ratios, focus traps, VoiceOver behavior, and reduced motion.
3. Record the formal approval status and assigned frontend implementation tasks.
Output in clean, structured Markdown.

Your data remains securely on your Mac with zero cloud exposure.