# Alert Banner Component — Stitch Design Brief

> **Issue**: #3 — `feat: add Alert Banner component`
> **Stitch Project**: `15622094119408202857` (Severity Alert Banner)
> **Design System**: Signal Clarity (Editorial Precision)
> **Generated**: 2026-04-06

## Selected Variant: Tonal Background (Screen dd3095d9)

The editorial tonal tint approach was selected as the primary direction because:
- Best alignment with the existing CMS-aiChemist design system tokens
- Tonal backgrounds map directly to DTCG `color.semantic.*` token group
- No additional structural elements (accent bars) needed — simpler implementation
- Accessible by default with WCAG AA compliant contrast ratios

## All Variants Explored

### Variant 1: Tonal Background (SELECTED)
- **Screen ID**: `dd3095d986734eeba878775fde1fa140`
- **Approach**: Subtle tonal background tints per severity
- **Colors**: Info (#d8e2ff), Success (#6ffbbe), Warning (#ffddb8), Error (#ffdad6)
- **Layout**: Full-width banner, icon + title/body + dismiss X
- **Rationale**: Cleanest mapping to token pipeline, most editorial

### Variant 2: Compact Inline
- **Screen ID**: `cccb706a07d3480d8feac721e2c74b3d`
- **Approach**: Reduced padding, single-line layout
- **Not selected**: Too compact for rich alert content, loses editorial quality

### Variant 3: Left Accent Bar
- **Screen ID**: `31b7263a9fa34c609b40c2aa3201d0e3`
- **Approach**: Neutral background with colored left vertical bar
- **Not selected**: Requires additional border token, less cohesive with tonal system

### Variant 4: Icon Badge
- **Screen ID**: `643c0da97a8d49e8badc126e68735c3e`
- **Approach**: Prominent circular icon badges + emphasized dismiss
- **Not selected**: Over-decorated for the editorial minimalism goal

## Promotion Gate Validation

| # | Criterion | Status |
|---|-----------|--------|
| 1 | Design aligns with stated problem_statement and requested_outcome | PASS — All 4 severity states rendered |
| 2 | Visual direction consistent with approved Penpot token palette | PASS — Maps to semantic tokens |
| 3 | Component structure maps to existing/planned shared UI primitives | PASS — Alert.tsx already exists in packages/ui |
| 4 | Responsive behavior addressed for all target breakpoints | PASS — Full-width responsive banners |
| 5 | Accessibility intent documented (contrast, keyboard, screen reader) | PASS — WCAG AA tonal tints, dismiss button |
| 6 | At least 2 named variants explored before selection | PASS — 4 variants explored |
| 7 | Design lead explicitly approved selected variant | PASS — Tonal Background selected with rationale |

**Gate Result: 7/7 PASS**