Figma MCP Server — Connected

Available Tools (6):
1. get_file
   Retrieves the full node tree of a Figma file.
   Parameters: fileKey (required), depth (optional)

2. get_design_context
   Returns design properties and screenshots.
   Parameters: nodeId (required), fileKey (required)

Connection status: Active ✓

File Access Test Results:

File Key: abc123xyz
File Name: Design System v2.4
Pages: 5 (Components, Colors, Typography, Patterns, Archive)
Total Nodes: 2847
Access Level: Editor
Status: ✓ Successfully read
Response Time: 287ms

Figma MCP Diagnostic Guide:

1. Check Server Status
   Command: npm status / systemctl status figma-mcp
   Expected: Running
   
2. Verify Auth Token
   Command: echo $FIGMA_TOKEN | head -c 10
   Expected: Token starts with 'fv' or similar
   
3. Test API Connection
   Command: curl https://api.figma.com/v1/me -H "X-Figma-Token: $FIGMA_TOKEN"
   Expected: 200 OK + user data
   
Most likely issue: Invalid/expired token (fix: refresh in .env)

Token Permissions Audit:

Token Scopes:
✓ files:read
✓ file_exports:read
✗ files:write (NOT GRANTED)
✗ comments:write (NOT GRANTED)

Accessible Files: 23
Accessible Teams: 2 (Design, Product)

Permitted Operations:
✓ Read design files
✓ Export assets
✓ Extract metadata
✗ Create/edit components
✗ Manage styles
✗ Add comments

Recommendation: Add 'files:write' scope for token sync

Figma MCP Version Check:

Current Version: 2.1.3
Latest Available: 2.3.1
Update Available: YES

Changelog (2.1.3 → 2.3.1):
- 2.2.0: Added component variant queries
- 2.3.0: Improved performance, new design tokens API
- 2.3.1: Bug fixes for token export

Compatibility: Claude 3.5+ required (you have 3.8 ✓)
Risk: Low (minor version bump)

Update Command: npm update figma-mcp@latest

Available Figma Files (8 total):

DESIGN TEAM (6 files):
1. Design System v2.4 | abc123xyz | Owner | Updated: 2h ago
2. Mobile Components | def456uv | Edit | Updated: 1d ago
3. Marketing Site | ghi789wxy | View | Updated: 3d ago

PRODUCT TEAM (2 files):
4. App Prototype | jkl012zab | Edit | Updated: 30min ago
5. Archived Designs 2024 | mno345cde | View | Updated: 2w ago

Write Permission Test Results:

Test Component Creation: ✓ PASS
  Created: Test_Widget_Temporary
  Status: Verified in file
  Cleanup: Deleted

Test Style Update: ✓ PASS
  Updated color style: Colors/Primary
  Status: Verified

Test Token Push: ✓ PASS
  Pushed 5 token variables
  Status: Verified in Variables panel

Overall Write Access: ✓ ENABLED
Permission Level: Editor
Authorized Operations: Create, Edit, Delete

Figma MCP Health Dashboard

[████████████████████] 92% Overall

Server Status: ✓ RUNNING
Uptime: 7d 3h 21min
Memory: 342MB / 512MB (67%)

API Connectivity: ✓ HEALTHY
Latency: 234ms avg
Errors (24h): 0

Authentication: ✓ VALID
Token Expires: 89 days
Scopes: 4/6 optimal

File Access: ✓ OPERATIONAL
Files Accessible: 8/8
Avg Read Time: 287ms

Write Capability: ✓ ENABLED
Test Write: PASS

Warnings: None
Recommendations: Consider updating to v2.3.1 (minor improvement)

Last Check: 2min ago

File Overview: Design System v2.4

Pages (5 total):
├─ Components (892 nodes)
│  ├─ Buttons (28)
│  ├─ Forms (45)
│  └─ Navigation (18)
├─ Colors (156 nodes)
├─ Typography (89 nodes)
├─ Patterns (234 nodes)
└─ Archive (archived)

Components: 347
Variants: 892
Styles: 156 (Colors)
Tokens: 84
Nesting Depth: 5 levels
Permissions: Editor (Design Team)
Size: ~2.3MB
Last Modified: 2h ago

Frame: 'Button - Primary' Details

Dimensions: 160 × 48 px
Position: X=0, Y=0
Auto Layout: Flex, horizontal, gap=8
Fill: Color/Primary (value: #2563EB)

Children (3):
├─ Icon [Component] 
│  └─ Instance: icons/check-solid
│     Override: Size=16×16
├─ Text: "Click Me"
│  └─ Font: Inter, 14px, weight 600
│  └─ Color: Color/White (#FFFFFF)
└─ Hover State [Component]
   └─ Instance: Overlay/Hover

Constraints: Horizontal center, fixed height
Export: button-primary.svg

Text Content Inventory: [FILE_KEY]

Total Text Nodes: 247

HEADINGS (28):
✓ Page: Components > Buttons
  "Primary Button" | Inter 18px bold | Color: Primary
  "Secondary Button" | Inter 18px bold

BODY COPY (89):
✓ Page: Patterns > Card
  "Lorem ipsum dolor sit amet..." | Inter 14px regular
  "Click here to learn more" | Inter 14px, underline

LABELS (56):
✓ "First Name" | 12px, color: Secondary
✓ "Email Address" | 12px

PLACEHOLDER TEXT (18) ⚠️:
✓ "[NEEDS COPY]" in 3 locations
✓ "TODO" in 2 locations

DATA: CSV Export Available

Asset Inventory: [FILE_KEY]

IMAGE FILLS (12):
✓ Page: Patterns > Hero
  Source: unsplash.com/photos/abc123
  Dimensions: 1200×600
  Embedded: Yes
  Size: ~340KB

ICON COMPONENTS (34):
✓ Icons/Check (16×16, 24×24, 32×32 variants)
✓ Icons/Arrow (12 directions)
✓ Icons/Social (8 variants)

EXPORT SETTINGS (23):
✓ Button Primary → button-primary.svg
✓ Icons/Check → icons/check.svg
✓ Hero Image → hero.png

UNUSED ASSETS (2) ⚠️:
✓ Old_Brand_Logo (safe to delete)
✓ Placeholder_Image_v1

Total Asset Footprint: ~4.2MB
Recommendation: Export unused assets, optimize images

Page Breakdown: [FILE_KEY]

Page 1: COMPONENTS (892 nodes) ✓ ACTIVE
├─ Purpose: Published component library
├─ Sections: Buttons, Forms, Navigation, Cards
├─ Last Updated: 2h ago
└─ Status: Well-organized

Page 2: COLORS (156 nodes) ✓ ACTIVE
├─ Purpose: Color palette & tokens
├─ Sections: Brand Colors, Semantic Colors, Gradients
├─ Last Updated: 1w ago
└─ Status: Good

Page 3: TYPOGRAPHY (89 nodes) ✓ ACTIVE
├─ Purpose: Type scale & styles
├─ Last Updated: 3w ago

Page 4: PATTERNS (234 nodes) ⚠️ NEEDS REVIEW
├─ Purpose: Common UI patterns
├─ Status: Last updated 2 months ago

Page 5: ARCHIVE (289 nodes) 🗂️ ARCHIVED
├─ Purpose: Old designs (safe to delete)
├─ Recommendation: Move to separate file

Overall Health: Good organization, consider archiving page 5

Component Spec: Button

Metadata:
- Name: Buttons/Primary
- Dimensions: 160×48 (variable)
- Location: Components page, frame "Buttons"
- Published: Yes

Variants (12 total):
- Size: Small (32h), Medium (48h), Large (56h)
- State: Default, Hover, Active, Disabled
- Icon: With Icon, Without Icon

Variant Matrix:
[Small, Default, No Icon] ✓ Exists
[Small, Hover, No Icon] ✓ Exists
[Medium, Default, With Icon] ✓ Exists
... (12 total)

Component Props:
1. label: string = "Click me"
2. size: enum(small, medium, large) = medium
3. state: enum(default, hover, active, disabled) = default
4. icon: boolean = false

Colors:
- Background: Color/Primary (#2563EB)
- Text: Color/White (#FFFFFF)
- Border: None

Typography:
- Font: Inter
- Size: 14px (medium)
- Weight: 600 (semibold)

Nested Components:
- Icons/Check (optional)

Constraints:
- Horizontal: Center
- Vertical: Top

Suggestion: Ready for React component generation

Color Audit: [FILE_KEY]

Unique Colors: 34 total

PRIMARY COLORS:
✓ #2563EB (Brand Primary)
  Used in: 28 elements
  Style: Colors/Primary
  
✓ #DC2626 (Brand Error)
  Used in: 12 elements
  Style: Colors/Error

DUPLICATES FOUND (2) ⚠️:
✗ #1E40AF (used 3x) ≈ #2563EB (should consolidate)
✗ #F87171 (used 2x) ≈ #DC2626 (should consolidate)

UNUSED COLORS (3) 🗑️:
- #9CA3AF (gray, no usage)
- #A78BFA (purple, old brand)
- #FEF3C7 (yellow, deprecated)

NEUTRAL PALETTE:
#000000 (black, headings, 45x)
#FFFFFF (white, backgrounds, 89x)
#6B7280 (gray-500, body text, 23x)
#F3F4F6 (gray-100, backgrounds, 34x)

CONTRAST ISSUES (1) ⚠️:
- #A0AEC0 on #FFFFFF = 3.2:1 (below WCAG AA)

Export Formats:
✓ CSS Variables
✓ Tailwind Config
✓ JSON Tokens

Layer Visibility & Lock Audit: [FILE_KEY]

HIDDEN LAYERS (8 total):

✓ Page: Components > Buttons
  "OLD Button Styles (v1)" | 5 child layers
  Recommendation: Safe to delete (superseded)
  
✓ Page: Components > Forms
  "Unused input variants" | 3 child layers
  Recommendation: Safe to delete
  
✓ Page: Archive
  "2023 designs" | 43 child layers
  Recommendation: Move to separate archive file

LOCKED LAYERS (12 total):

✓ Page: Components
  "Master Components" | 45 items
  Reason: Prevent accidental edits
  Status: Appropriate
  
✓ Page: Colors
  "Color Grid (reference)" | locked
  Reason: Documentation reference
  Status: Appropriate

STRANDED CONTENT (2) ⚠️:
✓ "Hidden old logo" | No reference | Recommend: Delete
✓ "temp sketch" | Hidden for 3 months | Recommend: Delete

RECOMMENDATIONS:
1. Delete 7 truly unused hidden layers (safe)
2. Archive old 2023 designs to separate file
3. Audit locked layers quarterly
4. Consider new organization system for versions

Cleanup Checklist: ☐ Review ☐ Backup ☐ Execute

Version History: [FILE_KEY]

Version 2.4.0 | TODAY at 2:15 PM | Sarah Chen (Designer)
- Added 3 new button variants
- Updated color tokens for better contrast
- Status: Current

Version 2.3.2 | MARCH 13 | Mike Johnson (Designer)
- Bug fixes: corrected font sizes in typography page
- Minor UI polish
- Rollback available

Version 2.3.1 | MARCH 10 | Sarah Chen (Designer)
- Major: Redesigned form components
- Breaking change: Old form variants deprecated
- ⚠️ Note: Affects implementations

Version 2.3.0 | MARCH 5 | Design Team
- Added 8 new color tokens
- Updated spacing system
- Added documentation page

Version 2.2.0 | FEBRUARY 28 | Sarah Chen
- Major refactor: Reorganized component structure
- Added variant system
- ⚠️ Breaking change for developers

Version 2.1.0 | FEBRUARY 14 | Initial DS v2 launch

Suggested Rollback Points:
- To fix form issues: v2.3.0 (pre-redesign)
- To restore old colors: v2.2.0

Search Results: [SEARCH_PATTERN] in [FILE_KEY]

Matches Found: 14

1. ✓ Button - Primary (Component)
   Path: Components > Buttons > Button - Primary
   Type: Component
   Instances: 28
   
2. ✓ Button - Secondary (Component)
   Path: Components > Buttons > Button - Secondary
   Type: Component
   Instances: 15
   
3. ✓ Button (Group)
   Path: Patterns > Card > Button
   Type: Group
   Dimensions: 160×48
   Position: X=100, Y=200
   
4. ✓ Button Hover State (Component)
   Path: Components > Buttons > States > Button Hover State
   Type: Component
   
... (10 more matches)

Navigation:
[Go to Button - Primary] [Go to Button - Secondary] [Go to all Buttons]

Color Token Palette: [FILE_KEY]

PRIMARY COLORS:
{
  "color-primary-50": {"value": "#EFF6FF", "rgb": "rgb(239, 246, 255)", "contrast": "N/A"},
  "color-primary-500": {"value": "#2563EB", "rgb": "rgb(37, 99, 235)", "contrast": "4.8:1 ✓"},
  "color-primary-900": {"value": "#1E3A8A", "rgb": "rgb(30, 58, 138)", "contrast": "7.2:1 ✓"}
}

NEUTRAL COLORS:
{
  "color-neutral-0": {"value": "#FFFFFF"},
  "color-neutral-50": {"value": "#F9FAFB"},
  "color-neutral-900": {"value": "#111827"}
}

EXPORTS:
✓ colors.json (JSON)
✓ colors.css (CSS variables)
✓ colors.js (ES6)
✓ colors.scss (SCSS maps)

Contrast Summary:
✓ All semantic colors meet WCAG AA
✓ Primary on white: 4.8:1
✓ Neutral-900 on white: 21:1

Deprecated Colors (3):
⚠️ old-brand-blue (#3B5998) — Replace with primary-500
⚠️ old-brand-red (#E64646) — Replace with error-500

{
  "color": {
    "primary": {
      "50": {
        "value": "#EFF6FF",
        "description": "Lightest primary color for backgrounds",
        "usage": "Hover states, light backgrounds",
        "wcag": "N/A"
      },
      "500": {
        "value": "#2563EB",
        "description": "Primary brand color",
        "usage": "Buttons, links, active states",
        "wcag": "4.8:1 (white background)"
      },
      "900": {
        "value": "#1E3A8A",
        "description": "Darkest primary for high contrast",
        "usage": "Text on light backgrounds, focus states",
        "wcag": "7.2:1 (white background)"
      }
    },
    "neutral": {
      "0": {"value": "#FFFFFF"},
      "50": {"value": "#F9FAFB"},
      "900": {"value": "#111827"}
    }
  }
}

:root {
  --color-primary-50: #EFF6FF;
  --color-primary-500: #2563EB;
  --color-primary-900: #1E3A8A;
  --color-neutral-0: #FFFFFF;
}

Typography Scale: [FILE_KEY]

FONT FAMILIES:
- Primary: Inter
- Display: Montserrat
- Mono: IBM Plex Mono

DISPLAY SIZES:
- typography-display-large: 72px, weight 700, line-height 1.2
- typography-display-medium: 64px, weight 600, line-height 1.2
- typography-display-small: 56px, weight 600, line-height 1.3

HEADING SIZES:
- typography-h1: 48px, weight 700, line-height 1.2
- typography-h2: 36px, weight 700, line-height 1.2
- typography-h3: 28px, weight 600, line-height 1.3
- typography-h4: 24px, weight 600, line-height 1.3

BODY SIZES:
- typography-body-lg: 18px, weight 400, line-height 1.6
- typography-body-base: 16px, weight 400, line-height 1.6
- typography-body-sm: 14px, weight 400, line-height 1.5

CAPTION/LABEL:
- typography-caption: 12px, weight 500, line-height 1.4
- typography-label: 14px, weight 500, line-height 1.4

Hierarchy Validation: ✓ OPTIMAL
- Good contrast between sizes
- Consistent line-height ratios
- Clear semantic grouping

Exports:
✓ typography.json
✓ typography.css
✓ typography.scss

/* Typography CSS Variables */
:root {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --typography-h1: var(--font-primary), 48px, 700, 1.2;
  --typography-body-base: var(--font-primary), 16px, 400, 1.6;
}

/* Utility Classes */
.text-h1 {
  font: 700 48px/1.2 var(--font-primary);
  letter-spacing: -0.5px;
}

.text-body {
  font: 400 16px/1.6 var(--font-primary);
  letter-spacing: 0;
}

/* Responsive Variants */
@media (max-width: 768px) {
  .text-h1 { font-size: 36px; }
  .text-body { font-size: 14px; }
}

/* SCSS Mixin */
@mixin typography($style) {
  @if $style == 'h1' {
    font: 700 48px/1.2 var(--font-primary);
  }
}

/* Font Face */
@font-face {
  font-family: 'Inter';
  src: url('Inter-Regular.woff2') format('woff2');
  font-weight: 400;
}

Spacing System: [FILE_KEY]

IDENTIFIED SCALE:
- 4px (micro-spacing)
- 8px (extra-small)
- 12px (small)
- 16px (base)
- 20px (medium)
- 24px (large)
- 32px (extra-large)
- 40px (2xl)
- 48px (3xl)

BY PURPOSE:

COMPONENT PADDING:
- Buttons: 12px horizontal, 8px vertical
- Cards: 24px all sides
- Form inputs: 12px horizontal, 10px vertical

COMPONENT GAPS:
- Button groups: 8px
- Form layouts: 12px
- Grid items: 16px

CONTENT PADDING:
- Page margins: 24px (mobile), 40px (desktop)
- Section spacing: 48px
- List item spacing: 16px

INCONSISTENCIES FOUND (2):
⚠️ Button padding varies: 8px, 10px, 12px (should standardize to 8px)
⚠️ Card spacing: 24px and 32px used (should standardize to 24px)

TOKENS:
spacing-xs: 4px
spacing-sm: 8px
spacing-md: 16px
spacing-lg: 24px
spacing-xl: 40px

{
  "spacing": {
    "xs": { "value": "4px", "description": "Micro-spacing for tight layouts", "usage": "Icon gaps, tight spacing" },
    "sm": { "value": "8px", "description": "Small spacing", "usage": "Button padding, component gaps" },
    "md": { "value": "16px", "description": "Base spacing", "usage": "Default padding, list spacing" },
    "lg": { "value": "24px", "description": "Large spacing", "usage": "Card padding, section gaps" },
    "xl": { "value": "40px", "description": "Extra-large spacing", "usage": "Page margins, large sections" },
    "2xl": { "value": "48px", "description": "2x large", "usage": "Major section spacing" },
    "3xl": { "value": "64px", "description": "3x large", "usage": "Page-level spacing" }
  }
}

/* CSS */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
}

/* Tailwind */
theme: {
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '40px'
  }
}

Border Radius System: [FILE_KEY]

IDENTIFIED SCALE:
✓ 0px (radius-none) — Square elements
✓ 4px (radius-sm) — Tight components
✓ 8px (radius-md) — Default (buttons, inputs, cards)
✓ 12px (radius-lg) — Large components
✓ 16px (radius-xl) — Extra-large components
✓ 999px (radius-full) — Circular elements

USAGE PATTERNS:
- Buttons: 8px (87% of buttons)
- Inputs: 4px (92% of inputs)
- Cards: 12px (100% of cards)
- Images: 0px or 999px (100%)
- Badges: 4px (100%)

VALIDATION: ✓ CONSISTENT
- Good semantic separation
- Appropriate scale for component hierarchy

TOKENS:
radius-none: 0px
radius-sm: 4px
radius-md: 8px
radius-lg: 12px
radius-xl: 16px
radius-full: 999px

CSS:
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-full { border-radius: var(--radius-full); }

Shadow & Elevation System: [FILE_KEY]

IDENTIFIED SCALE (5 levels):

Elevation 1 (shadow-sm):
- X: 0, Y: 1px, Blur: 2px, Spread: 0
- Color: rgba(0,0,0, 0.05)
- Usage: Subtle depth, hover states
- CSS: box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

Elevation 2 (shadow-md):
- X: 0, Y: 4px, Blur: 6px, Spread: -2px
- Color: rgba(0,0,0, 0.1)
- Usage: Cards, default depth
- CSS: box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1);

Elevation 3 (shadow-lg):
- X: 0, Y: 10px, Blur: 15px, Spread: -3px
- Color: rgba(0,0,0, 0.1)
- Usage: Modals, floating elements

Elevation 4 (shadow-xl):
- X: 0, Y: 20px, Blur: 25px, Spread: -5px
- Color: rgba(0,0,0, 0.1)
- Usage: Popovers, top-layer elements

USAGE:
- Default cards: shadow-md (100%)
- Button hover: shadow-sm (89%)
- Modals: shadow-xl (100%)

VALIDATION: ✓ CONSISTENT
- Good elevation hierarchy
- Appropriate blur/spread ratios

TOKENS:
shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.1)
shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1)
shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1)

Opacity System: [FILE_KEY]

IDENTIFIED SCALE:
- 0% (opacity-none) — Invisible/hidden
- 10% (opacity-extra-light) — Subtle overlays
- 25% (opacity-light) — Light interaction feedback
- 50% (opacity-medium) — Disabled states
- 75% (opacity-dark) — Hover/focus overlays
- 100% (opacity-full) — Fully opaque

USE CASES:

DISABLED STATES (50% opacity):
✓ Disabled buttons (gray text at 50%)
✓ Disabled inputs (background at 50%)
✓ Disabled form elements (icons at 50%)

HOVER/FOCUS (75% opacity):
✓ Hover overlay on images
✓ Focus state on interactive elements
✓ Active state indicator

OVERLAYS (10-25% opacity):
✓ Modal backgrounds (black at 10%)
✓ Backdrop overlay (black at 25%)
✓ Loading overlay (25%)

SUBTLE INTERACTIONS (10% opacity):
✓ Tooltip backgrounds
✓ Light emphasis (25%)

TOKENS:
opacity-none: 0
opacity-extra-light: 10%
opacity-light: 25%
opacity-medium: 50%
opacity-dark: 75%
opacity-full: 100%

CSS:
:root {
  --opacity-none: 0;
  --opacity-light: 0.25;
  --opacity-medium: 0.5;
  --opacity-dark: 0.75;
  --opacity-full: 1;
}

{
  "$schema": "https://tokens.studio/schema.json",
  "$version": "1.0.0",
  "metadata": {
    "created": "2026-03-15",
    "updated": "2026-03-15",
    "source": "[FILE_KEY]",
    "author": "Design Team"
  },
  "color": {
    "primary": {
      "50": { "value": "#EFF6FF" },
      "500": { "value": "#2563EB" },
      "900": { "value": "#1E3A8A" }
    },
    "neutral": {
      "0": { "value": "#FFFFFF" },
      "900": { "value": "#111827" }
    }
  },
  "typography": {
    "h1": { "value": { "fontFamily": "Inter", "fontSize": "48px", "fontWeight": "700", "lineHeight": "1.2" } },
    "body": { "value": { "fontFamily": "Inter", "fontSize": "16px", "fontWeight": "400", "lineHeight": "1.6" } }
  },
  "spacing": {
    "xs": { "value": "4px" },
    "sm": { "value": "8px" },
    "md": { "value": "16px" }
  },
  "shadow": {
    "sm": { "value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
    "md": { "value": "0 4px 6px -2px rgba(0, 0, 0, 0.1)" }
  }
}

EXPORTS:
✓ tokens.json
✓ tokens.css
✓ tokens.scss
✓ tailwind.config.js
✓ tokens.js

VALIDATION: ✓ All tokens valid
Format: ✓ W3C compliant
Completeness: ✓ 100% (347 tokens)

Token Diff Report: [FILE_KEY_1] vs [FILE_KEY_2]

NEW TOKENS (12):
✓ color-success-500: #10B981 (in v2 only)
✓ color-warning-500: #F59E0B (in v2 only)
✓ typography-label-lg: 14px (in v2 only)

CHANGED TOKENS (8):
⚠️ color-primary-500:
  - v1: #2563EB
  - v2: #3B82F6 (BREAKING)
  
⚠️ spacing-md:
  - v1: 16px
  - v2: 12px (BREAKING)

REMOVED TOKENS (2):
✗ color-legacy-blue: #1E40AF (deprecated in v2)
✗ spacing-extra-large: 64px (consolidated into xl)

BREAKING CHANGES (3):
1. Primary color changed (affects all buttons/links)
2. Spacing scale adjusted (affects layouts)
3. Typography scale updated (affects text sizes)

RECOMMENDATION:
→ Use v2 as source of truth
→ Plan migration with 2-week runway
→ Update all implementations of changed tokens
→ Retire 2 deprecated tokens
→ Add 12 new tokens to codebase

Token Validation Report: [FILE_KEY]

TOTAL TOKENS: 347
VALIDATION SCORE: 87% (Good, room for improvement)

UNUSED TOKENS (12) 🗑️:
✗ color-legacy-red: #E64646 (never used, can delete)
✗ color-legacy-blue: #1E40AF (never used, can delete)
✗ spacing-extra-extra-large: 96px (orphaned, consolidate)

DUPLICATE TOKENS (4) ⚠️:
✗ color-primary-500 = #2563EB (same as primary-default)
✗ color-neutral-900 = #111827 (same as text-primary)
✗ spacing-md = 16px (same as spacing-base)

NAMING VIOLATIONS (3) ⚠️:
✗ primaryColor (should be color-primary)
✗ med_spacing (should be spacing-md)
✗ FontLarge (should be typography-lg)

MISSING DOCUMENTATION (8):
✗ shadow-custom-1 (no description)
✗ color-custom-purple (purpose unknown)

CONTRAST ISSUES (2) ❌ WCAG AA FAILURE:
✗ color-neutral-500 on color-neutral-100 = 2.8:1 (needs 4.5:1)
✗ color-gray-600 on color-gray-200 = 3.1:1 (needs 4.5:1)

REMEDIATION CHECKLIST:
☐ Delete 12 unused tokens
☐ Consolidate 4 duplicate tokens
☐ Rename 3 tokens to follow conventions
☐ Add documentation to 8 tokens
☐ Fix 2 contrast issues

ESTIMATED EFFORT: 2-3 hours
IMPACT: High (cleaner system, easier maintenance)

Component Inventory: [FILE_KEY]

Total Components: 47
Total Variants: 234
Component Coverage: 87% (well-adopted)

BUTTONS (8 components):
✓ Button/Primary | Variants: 12 | Instances: 287 | 64×48
✓ Button/Secondary | Variants: 8 | Instances: 156 | 64×48
✓ Button/Ghost | Variants: 4 | Instances: 89 | 64×48

FORM INPUTS (12 components):
✓ Input/Text | Variants: 6 | Instances: 203 | 320×40
✓ Input/Checkbox | Variants: 3 | Instances: 95 | 20×20

NAVIGATION (5 components):
✓ NavBar | Variants: 2 | Instances: 34 | Variable
✓ Breadcrumbs | Variants: 1 | Instances: 12 | Variable

DEPRECATED (2) ⚠️:
✗ OldButton (replace with Button/Primary)
✗ LegacyInput (replace with Input/Text)

Mostly Used:
1. Button/Primary (287 instances)
2. Input/Text (203 instances)
3. Badge (156 instances)

Component Variants: Button/Primary

Variant Properties (3):
1. size: small | medium | large
2. state: default | hover | active | disabled
3. icon: none | with-icon

Variant Combinations (24 total):
✓ [small, default, none] — exists
✓ [small, default, with-icon] — exists
✓ [small, hover, none] — exists
✓ [small, hover, with-icon] — exists
✓ [small, active, none] — exists
...
✓ [large, disabled, with-icon] — exists

✗ Missing: None (all combinations present)

Defaults:
- size: medium
- state: default
- icon: none

Variant Naming: [size]-[state]-[icon]
Example: medium-hover-with-icon ✓ Consistent

Component Props: Button/Primary

| Prop | Type | Default | Description | Validation |
|------|------|---------|---|---|
| label | string | "Click me" | Button text | max 50 chars |
| size | enum | "medium" | Button size (small/medium/large) | — |
| disabled | boolean | false | Disable button | — |
| icon | boolean | false | Show icon | — |
| onClick | function | — | Click handler | Required |

Dependencies:
- If icon=true, iconName prop must be provided
- disabled=true → disables onClick

TypeScript:
interface ButtonProps {
  label: string;
  size: 'small' | 'medium' | 'large';
  disabled?: boolean;
  icon?: boolean;
  onClick: () => void;
}

Usage:
<Button label="Submit" size="large" onClick={handleSubmit} />

Component Usage: Button/Primary

Total Instances: 287 (across file)
Adoption Rate: 92% (highly used)

BY PAGE:
- Components: 12 instances (master + examples)
- Patterns: 45 instances (in pattern templates)
- Marketing Site: 124 instances (primary CTA)
- App Prototype: 89 instances (in flows)
- Archive: 17 instances (old designs)

BY VARIANT:
- medium-default: 142 instances (49%) — Most popular
- large-default: 89 instances (31%)
- small-default: 34 instances (12%)
- medium-hover: 22 instances (8%)

ADOPTION TREND: ↑ Increasing
- January: 156 instances
- February: 198 instances
- March: 287 instances

OBSERVATION: Excellent adoption, good distribution
RECOMMENDATION: Maintain current component design, monitor for new variants

Component Dependency Tree: Card

Card (main)
├─ Icon/Decorative (child)
│  └─ SVG (asset)
├─ Heading (child - typography)
│  └─ Text (primitive)
├─ Content (child)
│  └─ Text (primitive)
└─ Button/Primary (child - component)
   ├─ Icon/Check (nested child)
   └─ Text (primitive)

Nesting Depth: 3 levels ✓ Reasonable
Circular Dependencies: None ✓ Good
Child Components: 2 (Button/Primary, Icon/Decorative)
Primitive Elements: 4 (Text, SVG)

Data Flow:
Card ← Title/Description (text overrides)
      ← Button state (prop override)
      ← Icon color (style override)

Complexity: Moderate (good for maintainability)
Recommendation: Current structure is optimal

Detached Component Instances: [FILE_KEY]

Total Detached: 8 instances ⚠️

Detached from Button/Primary (5):
✗ Page: Marketing Site > Hero
  Element: "CTA Button variant"
  Status: Custom styling (differs from original)
  Recommendation: Reattach or create new variant
  
✗ Page: Archive > Old Designs
  Element: "Special Button (2023)"
  Status: Intentional override (old design)
  Recommendation: Safe to delete or archive

Detached from Card (2):
✗ Page: Patterns > Featured Card
  Element: "Featured Card variant"
  Status: Minor customization
  Recommendation: Create proper variant instead

Detached from Icon/Check (1):
✗ Page: Components > Icon variants
  Status: Color override
  Recommendation: Reattach to Icon/Check, use color variant

RISK ASSESSMENT:
- High Risk (2): Significant deviations from original
- Medium Risk (4): Minor customizations
- Low Risk (2): In archived pages (safe)

CLEANUP PLAN:
1. Reattach 4 low-deviation instances
2. Create 3 proper variants
3. Archive 2 old detached instances

ESTIMATED TIME: 30 minutes

# Button/Primary Component

## Overview
Primary action button for important user actions.

## Use Cases
- Submit forms
- Confirm actions
- Primary navigation

## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| label | string | — | Button text |
| size | enum | medium | small, medium, large |
| disabled | boolean | false | Disable button |

## Do's and Don'ts
✓ Do: Use for primary actions
✗ Don't: Use for secondary actions
✓ Do: Ensure label is descriptive
✗ Don't: Use vague labels like "Click here"

## Accessibility
- Includes proper ARIA labels
- Keyboard navigable (Tab/Space/Enter)
- Focus visible indicator

## Design Tokens Used
- color-primary-500 (background)
- color-white (text)
- shadow-md (elevation)

## Code Example
```jsx
<Button label="Submit" size="large" onClick={handleSubmit} />
```

Component Version Comparison: Button/Primary

Version 1.0 → Version 2.0

PROPERTY CHANGES:
✓ New prop: icon (boolean)
✓ New prop: loading (boolean)
⚠️ Changed: size values (sm/md/lg → small/medium/large)

STYLE CHANGES:
⚠️ Color: #2563EB → #3B82F6 (slightly lighter)
⚠️ Border radius: 6px → 8px
✓ Added: transition effect (100ms ease)

VARIANT CHANGES:
✓ Added: loading state
✓ Added: icon variants (8 variants)
⚠️ Removed: deprecated outline variant

BREAKING CHANGES (3):
1. Size prop value change (sm → small)
2. Color value updated
3. outline variant removed

MIGRATION GUIDE:
1. Update size prop: 'md' → 'medium'
2. Update color references: #2563EB → #3B82F6
3. Replace outline buttons with secondary variant
4. Test loading states

ESTIMATED EFFORT: 4 hours
RISK: Medium (3 breaking changes)

Unused Components Audit: [FILE_KEY]

Unused Components Found: 7

DELETION CANDIDATES (5):
✗ OldButton (v1.0)
  Last Modified: 6 months ago
  Instances: 0
  Status: Deprecated (replaced by Button/Primary)
  Space: 45KB
  Recommendation: DELETE
  
✗ LegacyCard
  Last Modified: 8 months ago
  Instances: 0
  Status: Archive (old design)
  Space: 32KB
  Recommendation: DELETE

CONSOLIDATION CANDIDATES (2):
⚠️ Button/Primary-backup (exact duplicate of Button/Primary)
  Recommendation: DELETE (consolidate)
  Space: 12KB
  
⚠️ Icon/Arrow-old (similar to Icon/Arrow)
  Recommendation: DELETE or consolidate
  Space: 8KB

TOTAL SPACE SAVINGS: 97KB (2% file size)

CLEANUP CHECKLIST:
☐ Verify OldButton is deprecated
☐ Check if Button/Primary-backup is referenced anywhere
☐ Backup file (safety)
☐ Delete 7 unused components
☐ Run validation

RISK: Low (all truly unused)

Component Naming Audit: [FILE_KEY]

Naming Convention: Type/Name/State
Expected Format: [ComponentType]/[ComponentName]/[Variant]

COMPLIANCE: 78% (good, room for improvement)

INCONSISTENCIES FOUND (8):

✗ PrimaryButton (should be: Button/Primary)
✗ Btn_Secondary (should be: Button/Secondary)
✗ CARD (should be: Card)
✗ formInput (should be: Input/Text)
✗ NavBarTop (should be: Navigation/Bar)
✗ icon-check (should be: Icon/Check)
✗ badge_success (should be: Badge/Success)
✗ TextSmall (should be: Typography/Label)

DUPLICATES (2):
⚠️ Button (main) vs. button (variant) — conflicting casing
⚠️ Icon/Arrow vs. Icon/arrow — conflicting casing

CONFUSING NAMES (3):
⚠️ "Element" (too generic, unclear purpose)
⚠️ "Item" (too vague, should be "List/Item")
⚠️ "Special" (not descriptive)

HIERARCHY VIOLATIONS (2):
⚠️ Button/Primary/Large (too deep, should be: Button/Primary with size variant)
⚠️ Form/Input/Text/Required (should be: Input/Text with required state)

RENAMING PLAN:
1. Rename 8 inconsistent components
2. Consolidate 2 duplicate casing issues
3. Rename 3 confusing components
4. Flatten 2 hierarchy violations

IMPACT: Medium (update documentation, update instances: 347 components affected)
ESTIMATED EFFORT: 3-4 hours

// Button.tsx
import React from 'react';
import styles from './Button.module.css';

interface ButtonProps {
  label: string;
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: () => void;
}

/**
 * Primary action button component
 * @param props - Button properties
 */
export const Button: React.FC<ButtonProps> = ({
  label,
  size = 'medium',
  disabled = false,
  onClick
}) => {
  return (
    <button
      className={`${styles.button} ${styles[size]}`}
      disabled={disabled}
      onClick={onClick}
      aria-label={label}
    >
      {label}
    </button>
  );
};

// Button.stories.tsx
export const Primary = () => <Button label="Click me" />;
export const Large = () => <Button label="Submit" size="large" />;

<template>
  <button
    :class="['button', `button--${size}`]"
    :disabled="disabled"
    @click="$emit('click')"
    :aria-label="label"
  >
    {{ label }}
  </button>
</template>

<script setup lang="ts">
defineProps<{
  label: string;
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
}>();

defineEmits<{
  click: [];
}>();
</script>

<style scoped>
.button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.button--medium {
  font-size: 16px;
}
</style>

<button class="btn btn--primary btn--medium">
  Click me
</button>

<style>
:root {
  --btn-padding: 12px 24px;
  --btn-radius: 8px;
  --color-primary: #2563EB;
}

.btn {
  padding: var(--btn-padding);
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: all 150ms ease;
}

.btn--primary {
  background: var(--color-primary);
  color: white;
}

.btn--primary:hover {
  opacity: 0.9;
}

.btn--medium {
  font-size: 16px;
}

@media (max-width: 768px) {
  .btn { padding: 10px 16px; }
}
</style>

<button class="px-6 py-3 bg-blue-500 text-white rounded-lg font-semibold hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50 transition-colors">
  Click me
</button>

<!-- Responsive variant -->
<button class="px-3 py-2 sm:px-4 sm:py-2 md:px-6 md:py-3 bg-blue-500 hover:bg-blue-600">
  Responsive Button
</button>

<!-- Dark mode -->
<button class="bg-blue-500 dark:bg-blue-700 text-white dark:text-gray-100">
  Dark mode supported
</button>

import React from 'react';
import {
  View,
  Text,
  Pressable,
  StyleSheet,
  Platform,
  GestureResponderEvent,
} from 'react-native';

interface ButtonProps {
  label: string;
  size?: 'small' | 'medium' | 'large';
  onPress?: (event: GestureResponderEvent) => void;
}

export const Button: React.FC<ButtonProps> = ({
  label,
  size = 'medium',
  onPress,
}) => {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.button,
        styles[size],
        pressed && styles.pressed,
      ]}
    >
      <Text style={styles.text}>{label}</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  button: {
    paddingHorizontal: 24,
    paddingVertical: 12,
    backgroundColor: '#2563EB',
    borderRadius: Platform.OS === 'ios' ? 8 : 4,
    alignItems: 'center',
  },
  medium: {
    paddingVertical: 12,
  },
  pressed: {
    opacity: 0.8,
  },
  text: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
});

import SwiftUI

struct PrimaryButton: View {
  let label: String
  let size: ButtonSize = .medium
  var action: (() -> Void)? = nil
  
  @Environment(\.colorScheme) var colorScheme
  
  var body: some View {
    Button(action: action ?? {}) {
      Text(label)
        .font(size.font)
        .foregroundColor(.white)
        .frame(height: size.height)
        .frame(maxWidth: .infinity)
        .background(Color.blue)
        .cornerRadius(8)
    }
    .accessibilityLabel(label)
  }
}

enum ButtonSize {
  case small, medium, large
  
  var font: Font {
    switch self {
    case .small: return .caption
    case .medium: return .body
    case .large: return .headline
    }
  }
  
  var height: CGFloat {
    switch self {
    case .small: return 32
    case .medium: return 48
    case .large: return 56
    }
  }
}

#Preview {
  PrimaryButton(label: "Click me", size: .medium)
}

import 'package:flutter/material.dart';

class PrimaryButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;
  final ButtonSize size;
  
  const PrimaryButton({
    required this.label,
    required this.onPressed,
    this.size = ButtonSize.medium,
  });
  
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
        padding: size.padding,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
      onPressed: onPressed,
      child: Text(
        label,
        style: TextStyle(
          fontSize: size.fontSize,
          fontWeight: FontWeight.w600,
          color: Colors.white,
        ),
      ),
    );
  }
}

enum ButtonSize {
  small(padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), fontSize: 14),
  medium(padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12), fontSize: 16),
  large(padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16), fontSize: 18);
  
  final EdgeInsets padding;
  final double fontSize;
  
  const ButtonSize({required this.padding, required this.fontSize});
}

/* Mobile-first responsive design */
.container {
  width: 100%;
  padding: 16px;
  font-size: 14px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
  .container {
    width: 90%;
    padding: 24px;
    font-size: 16px;
  }
  
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .container {
    width: 1200px;
    padding: 40px;
  }
  
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Touch targets minimum 44x44px */
.button {
  min-height: 44px;
  min-width: 44px;
}

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    label: { control: 'text' },
    size: { control: 'select', options: ['small', 'medium', 'large'] },
    disabled: { control: 'boolean' },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    label: 'Click me',
    size: 'medium',
    disabled: false,
  },
};

export const Large: Story = {
  args: {
    ...Primary.args,
    size: 'large',
  },
};

export const Disabled: Story = {
  args: {
    ...Primary.args,
    disabled: true,
  },
};

export const AllSizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '10px' }}>
      <Button label="Small" size="small" />
      <Button label="Medium" size="medium" />
      <Button label="Large" size="large" />
    </div>
  ),
};

/* Button.module.css */
:root {
  --color-primary: #2563EB;
  --radius: 8px;
  --transition: all 150ms ease;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
}

.button--primary {
  background-color: var(--color-primary);
  color: white;
}

.button--primary:hover {
  background-color: #1d4ed8;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button--primary:active {
  transform: scale(0.98);
}

.button--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button--medium {
  padding: 12px 24px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .button--medium {
    padding: 10px 16px;
    font-size: 14px;
  }
}

<!-- icon-check.svg -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M20 6L9 17l-5-5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

// Icon.tsx
import React from 'react';

interface IconProps {
  name: 'check' | 'arrow' | 'close';
  size?: number;
  color?: string;
}

export const Icon: React.FC<IconProps> = ({ name, size = 24, color = 'currentColor' }) => {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth="2"
    >
      {/* Icon paths would go here */}
    </svg>
  );
};

/* CSS Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.button {
  animation: fadeIn 300ms ease-out;
  transition: background-color 150ms ease, transform 100ms ease;
}

.button:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .button {
    animation: none;
    transition: none;
  }
}

// Framer Motion equivalent
import { motion } from 'framer-motion';

export const AnimatedButton = () => (
  <motion.button
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ duration: 0.3, ease: 'easeOut' }}
    whileHover={{ backgroundColor: '#1d4ed8', y: -2 }}
  />
);

// Accessible Button Component
<button
  type="button"
  aria-label="Submit form"
  aria-disabled={isDisabled}
  disabled={isDisabled}
  className={`btn btn--primary ${isDisabled ? 'btn--disabled' : ''}`}
  onClick={handleClick}
  onKeyDown={handleKeyDown}
>
  Submit
</button>

// Accessible Dialog
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
>
  <h2 id="dialog-title">Confirm Action</h2>
  <p id="dialog-desc">Are you sure you want to proceed?</p>
  <button aria-label="Confirm action">Yes</button>
  <button aria-label="Cancel action">No</button>
</div>

/* Contrast ratio check */
/* Button text on primary background: 21:1 ✓ WCAG AAA */
/* Focus indicator: 2px solid border */
button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

// pages/Home.tsx
import React from 'react';
import { Button } from '../components/Button';
import { Card } from '../components/Card';

export const HomePage: React.FC = () => {
  return (
    <main className="page page--home">
      <section className="hero">
        <h1>Welcome</h1>
        <p>Get started with our product</p>
        <Button label="Get Started" size="large" />
      </section>
      
      <section className="features">
        <div className="grid">
          <Card title="Feature 1" />
          <Card title="Feature 2" />
          <Card title="Feature 3" />
        </div>
      </section>
    </main>
  );
};

export default HomePage;

Created Figma Component: Button/Primary
✓ Component structure created
✓ Styles applied (colors, typography)
✓ 12 variants configured (size × state × icon)
✓ Component properties set up
✓ Design tokens linked
✓ Auto-layout configured
✓ Published to library
Location: [FILE_KEY] > Components > Button/Primary

Token Sync Report: [FILE_KEY]
✓ Synced: 347 tokens
✓ New: 12 tokens
✓ Updated: 23 tokens
✓ Removed: 2 tokens
✓ Validation: PASSED
Status: Complete

Text Update Report: [FILE_KEY]
✓ Updated: 45 text nodes
⚠️ Skipped: 3 (no matching pattern)
✗ Failed: 0
Status: Complete

Styles Created: [FILE_KEY]
✓ Colors: 34 styles
✓ Typography: 12 styles
✓ Effects: 8 styles
Total: 54 styles published
Status: Complete

Component Set Created: Button/Primary
✓ Variants: 12 total
✓ Properties: size, state, icon
✓ Auto-layout: configured
✓ Styles: applied
✓ Published: Yes
Status: Ready for use

Layout Updates: [ELEMENT_NAME]
✓ Auto-layout: flex → grid
✓ Gap: 8px → 12px
✓ Padding: updated
✓ Affected instances: 23
Status: Complete

Batch Rename Report: [FILE_KEY]
✓ Renamed: 87 layers
⚠️ Skipped: 5 (duplicates)
✗ Failed: 0
Status: Complete

Variables Created: [FILE_KEY]
✓ Colors: 34
✓ Numbers: 12
✓ Strings: 8
Total: 54 variables
Status: Published

Instance Overrides Updated: [COMPONENT_NAME]
✓ Updated: 23 instances
✓ Overrides: text, color
Status: Complete

Icon Library Synced: [FILE_KEY]
✓ Icons: 34 total
✓ Created: 12 new
✓ Updated: 8 existing
✓ Organized: 4 categories
Status: Published

Visual Diff Report: '[COMPONENT_NAME]'
✓ Dimensions: PASS (160×48)
⚠️ Color: MISMATCH (#2563EB vs #3B82F6)
✓ Spacing: PASS
✗ Hover state: MISMATCH (shadow missing)
Issues: 2 | Critical: 1 | Warning: 1

Spacing Audit: '[COMPONENT_NAME]'
✓ Padding: 12px (matches)
⚠️ Gap: 8px (design) vs 6px (code) - MISMATCH
✓ Touch target: 48px (meets 44px minimum)
Matches: 4/6 | Issues: 1

Typography Audit: '[COMPONENT_NAME]'
✓ Font: Inter (matches)
✓ Size: 16px (matches)
⚠️ Weight: 600 (code) vs 500 (design) - MISMATCH
✓ Line-height: 1.6 (matches)
Matches: 3/4 | Issues: 1

Color Audit: '[COMPONENT_NAME]'
✓ Primary: #2563EB (matches)
⚠️ Hover: #3B82F6 (code) vs #1d4ed8 (design) - MISMATCH
✓ Contrast: 4.8:1 (WCAG AA ✓)
Matches: 3/4 | Issues: 1

Border Radius Audit: '[COMPONENT_NAME]'
✓ All corners: 8px (matches)
Matches: 4/4 | Issues: 0 | Status: PASS

Shadow Audit: '[COMPONENT_NAME]'
✓ Default: 0 4px 6px rgba(0,0,0,0.1) (matches)
⚠️ Hover: offset/blur mismatch
Matches: 3/4 | Issues: 1

Responsive Breakpoint Test: '[COMPONENT_NAME]'
✓ Mobile (320px): PASS
✓ Tablet (768px): PASS
⚠️ Desktop (1024px): Layout mismatch
Breakpoints tested: 3 | Passed: 2 | Failed: 1

Icon Audit: [FILE_KEY]
✓ Icon/Check 16px: PASS
✓ Icon/Check 24px: PASS
✓ Icon/Check 32px: PASS
Icons tested: 34 | Passed: 34 | Failed: 0

Grid Alignment Check: [FILE_KEY]
✓ Elements aligned: 89%
⚠️ Misaligned: 3 elements
Recommendation: Realign 3 elements to 8px grid

Touch Target Audit: '[COMPONENT_NAME]'
✓ Compliant: 12/12 (100%)
✓ All targets ≥44×44px
Status: PASS

Contrast Audit: '[COMPONENT_NAME]'
✓ WCAG AA: 12/12 (100%)
✓ WCAG AAA: 10/12 (83%)
⚠️ 2 elements need darker text
Recommendation: Adjust colors for AAA compliance

Full QA Report: '[COMPONENT_NAME]'
✓ Visual: PASS
✓ Spacing: PASS
⚠️ Typography: 1 issue
✓ Colors: PASS
✓ Radius: PASS
✓ Shadows: PASS
✓ Responsive: PASS
✓ Icons: PASS
✓ Grid: PASS
✓ Touch targets: PASS
✓ Contrast: PASS
✓ Accessibility: PASS

Overall Score: 92% (Very Good)
Critical Issues: 0
Warnings: 1

Component Catalog Generated
✓ Components: 47
✓ Pages: 47 (one per component)
✓ Examples: 234 (all variants)
✓ Code snippets: 47
Status: Published to Storybook

Color Documentation
✓ Colors: 34 total
✓ Swatches: generated
✓ Usage examples: 34
✓ Accessibility: WCAG AA compliant
Status: Published

Typography Guide
✓ Font families: 3
✓ Sizes: 12 variants
✓ Specimens: generated
✓ Usage examples: complete
Status: Published

Spacing Reference
✓ Scale: 7 levels (4px-64px)
✓ Use cases: documented
✓ Visuals: generated
✓ Code examples: complete
Status: Published

Icon Reference
✓ Icons: 34 total
✓ Grid: generated
✓ Sizes: 3 variants each
✓ Colors: 5 variants each
Status: Published

API Documentation: Button
✓ Props: 5 documented
✓ Types: TypeScript definitions
✓ Examples: 8 code samples
✓ Patterns: 5 common uses
Status: Published

Style Guide
✓ Pages: 12 total
✓ Sections: colors, type, spacing, components, patterns
✓ Examples: 234 total
Status: Published as PDF

Pattern Library
✓ Patterns: 15 total
✓ Examples: per pattern
✓ Code: provided
✓ Guidelines: documented
Status: Published

Changelog
✓ Versions: 12 total
✓ Changes: documented
✓ Breaking changes: 3
✓ New features: 8
Status: Published

Onboarding Guide
✓ Sections: 8
✓ Steps: 24 total
✓ Examples: 15
✓ FAQ: 12 items
Status: Published

Batch Export
✓ Components: 47
✓ Files: 47 generated
✓ Documentation: included
✓ Index: created
Status: Ready for download

Token Batch Export
✓ Colors: 34
✓ Typography: 12
✓ Spacing: 7
✓ Shadows: 8
✓ Formats: 5 (JSON/CSS/SCSS/JS/Tailwind)
Status: Ready

Documentation Batch
✓ Components: 47 docs
✓ API: documented
✓ Tokens: documented
✓ Style guide: generated
✓ Patterns: 15 documented
Status: Complete

Mass Rename Report
✓ Renamed: 156 layers
⚠️ Skipped: 8 (duplicates)
✗ Failed: 0
Status: Complete

Image Batch Export
✓ Images: 34
✓ Optimized: 34/34
✓ Folders: organized
✓ Manifest: created
Status: Complete

Batch Style Update
✓ Styles updated: 23
✓ Components affected: 134
✓ Validation: passed
Status: Complete

Component Batch Audit
✓ Components: 47
✓ Issues found: 12
✓ Unused: 3
✓ Naming violations: 5
Status: Complete

Accessibility Scan
✓ Elements scanned: 847
⚠️ Issues found: 12
✗ Critical: 2 (contrast)
⚠️ Warnings: 10
Status: Complete

Design Handoff
✓ Components: 47
✓ Assets: exported
✓ Code: provided
✓ Specs: documented
Status: Ready for handoff

Sprint Components
✓ Needed: 12 components
✓ Dependencies: mapped
✓ Status: 8 ready, 4 in progress
✓ Priority: assigned

Review Checklist
✓ Items: 24 total
✓ Categories: 8
✓ Checkboxes: ready
Status: Ready to use

Sync Summary
✓ Design: 100% complete
✓ Code: 75% implemented
✓ Gaps: 8 components
✓ Plan: Alignment in 2 weeks

PR Description
✓ Changes: 12 components
✓ Description: detailed
✓ Testing: documented
✓ Screenshots: included
Status: Ready to post

Release Notes
✓ Version: 2.4.0
✓ New features: 8
✓ Improvements: 5
✓ Breaking changes: 1
Status: Ready to publish

Presentation
✓ Progress: 78%
✓ Completed: 45 items
✓ In-progress: 12 items
✓ Timeline: on track
Status: Ready

Status Tracker
✓ Components: 47
✓ Designed: 47/47 (100%)
✓ Coded: 35/47 (74%)
✓ Tested: 30/47 (64%)
✓ Documented: 25/47 (53%)
Overall: 72% complete

Token Sync Pipeline
✓ Trigger: Daily at 9am
✓ Extract: automated
✓ Generate: automated
✓ Validate: automated
✓ Deploy: automated
Status: Active

Webhook Listener
✓ Endpoint: configured
✓ Events: all file changes
✓ Status: active
✓ Last event: 5min ago
Status: Monitoring

Lint Rules
✓ Rules: 12 created
✓ Integration: CI/CD
✓ Reports: automated
Status: Active

Token Merge
✓ Files: 3 merged
✓ Tokens: 347 total
✓ Conflicts: 5 (resolved)
Status: Complete

Test Generation
✓ Components: 47
✓ Test cases: 234
✓ Code: generated
Status: Ready

Full DS Pipeline
✓ Trigger: Git push or Figma change
✓ Tokens: sync ✓
✓ Components: generate ✓
✓ Docs: generate ✓
✓ Tests: run ✓
✓ Validate: ✓
✓ Deploy: ✓
✓ Notify: ✓
Status: Fully automated