Redpine — Brand Guide

Info (system status)

Scheduled maintenance tonight

Some AI-assisted features will be briefly unavailable from 02:00 to 02:30 UTC.

Success (confirmation)

Incident #4872 resolved

All sites are operational. Root cause analysis queued for review.

Warning (attention required)

Camera offline at Site 12 — Gate B

Lost connection 14 minutes ago. Dispatching field technician.

Danger (emergency)

Active incident — PPE violation detected at Site 7

Two workers in restricted zone without required equipment. Response team en route (ETA 3m).

Usage

import { StickyBanner } from "@/components/patterns/sticky-banner"

<StickyBanner
  severity="danger"
  title="Active incident"
  description="Response team en route"
  action={<Button size="sm">Open response</Button>}
  onDismiss={() => setShow(false)}
/>

Accessibility

role="alert" + aria-live="assertive" for danger severity (interrupts screen reader).
role="status" + aria-live="polite" for other severities (queues after current speech).
Dismiss button has aria-label="Dismiss banner".
Icons are aria-hidden — severity is communicated via color + aria-live, not icon alt text.
Focus ring honors global 3px red outline on dismiss button when focused via keyboard.