Audit readiness
Action requiredQ2 · Apex Industries
62 of 127 controls passing · window opens Aug 12.
Components
Plaque
The status plate — a flat, friendly tinted plate. Heavier than Badge, lighter than Card: where a badge is a quiet text label and a card is a contained surface, a plaque is the fixed plate a surface carries — a report status, a license state, a lifecycle position, an instrument readout. Bold by design, which forces sparing use: high signal density, not information density.
The three tone axes
Nine tones over three axes. Cardinal is the neutral readout — form (numerals, words) carries the magnitude. The severity tones ride the same register as Badge, Toast, and Banner, and each auto-pairs its Lucide severity glyph. The lifecycle tones keep the same shape while the tint drains across the lifecycle.
Cardinal — the neutral readout
127 controlsQ2 program
Severity — info / affirm / caution / critical
In reviewLicense currentAction requiredLicense lapsed
Lifecycle — position, drained tint
ActiveInactiveArchivedDeleted
Severity is never color alone
The four severity tones auto-pair the shared Lucide severity glyph — the same set Badge, Toast, and Banner use — so a plaque satisfies ADR-0017 without the caller doing anything. Pass icon to substitute a more specific glyph; an explicit icon replaces the default but cannot remove it. The label text must still carry the state in words — never let the glyph be the only difference between two states.
Custom severity glyph
License current
Materiality
Flat and solid, like everything in this system. A button is a solid color fill you press; a plaque is a soft color tint you read. Nothing about it invites a press. (The engraved-metal treatment below the tokens — glint, shimmer, rivets — belongs to the proposed system; here a plaque is honestly flat.)
- Plate
- A solid, soft color tint — the *-100 severity tints — with friendly rounded corners. Opaque and flat; no glass, no metal.
- Type
- Solid severity-colored text and icon on the tint — deep tone on light, bright tone on dark. Type is just type here; engraving is the proposed system’s treatment.
- Shimmer
- None — shimmer is the proposed system’s metal cue. The official plate is matte by nature, and plaques never animate under either brand.
- Matte everywhere
- The proposed system reserves matte for the oxidation tones (affirm, critical); here every plate is flat and matte — that IS the material.
- Rivets
- None — rivets are the proposed system’s mounted-metal cue. The official plate sits flush with the surface.
One per surface
A plaque carries more meaning alone than five outline badges would — but only if it stays alone. One per surface; two at most. Reserve it for the label that genuinely never moves; transient feedback is a toast, a filterable label is a chip, a row status is a badge.
In application
Accessibility
- The label is the accessible name. A plaque is a static <span> — screen readers announce the visible text. The severity glyph is aria-hidden reinforcement, so never ship an icon-only plaque.
- Severity is never color alone. Severity tones auto-pair their Lucide glyph (ADR-0017), and the words themselves must differ between states — color and glyph are both reinforcement.
- Not interactive, not focusable. No tab stop, no role, no hover state. If a plaque needs a click, it has the wrong component — promote it to a Button or Selector.
- Contrast and high-contrast modes. Severity text rides the deep tone steps on the light tints and the bright steps on the dark plate — verified against the official palette. Under prefers-contrast: more and forced-colors any decorative treatment drops away, leaving plain text on the plate.
API
- tone?: PlaqueTone
- One of cardinal (default) · info · affirm · caution · critical · active · inactive · archived · deleted.
- icon?: ReactNode
- Leading Lucide icon. Severity tones default to their shared severity glyph; an explicit icon substitutes it (but cannot remove it). Non-severity tones render no icon unless one is given.
- children: ReactNode
- The label. Words must carry the state — never icon-only.
- ...HTMLAttributes<HTMLSpanElement>
- Everything else forwards to the underlying <span>.
Usage
Severity plaque with the automatic glyphtsx
import { Plaque } from '@halo-compliance/ui'
// Severity tones auto-pair their Lucide glyph (ADR-0017):
<Plaque tone="caution">Action required</Plaque>
// The neutral readout (default tone, no icon):
<Plaque>127 controls</Plaque>Substituting a more specific glyphtsx
import { BadgeCheck } from 'lucide-react'
// An explicit icon substitutes the default glyph — it can't remove it:
<Plaque tone="affirm" icon={<BadgeCheck strokeWidth={1.75} aria-hidden="true" />}>
License current
</Plaque>Anti-patterns
- Don't make a plaque interactive. No hover states, no clicks, no filters. A label that wants to be pressed is a Button; a label that filters is a chip with a remove affordance.
- Don't stack plaques. One per surface, two at the absolute most. Three statuses side by side means none of them is THE status — demote the extras to badges.
- Don't use a plaque for transient feedback. A plaque is a fixed label for state that holds — "License lapsed", not "Saved!". Transient outcomes are toasts; persistent-but-dismissable conditions are banners.
- Don't reach for a plaque when a badge will do. Table rows, list items, and inline mentions take badges — the calm read. The plaque is for the one place the status IS the headline: a detail hero, a report card, a readiness panel.