# CMP-7 — Components stay consistent with their design-system defaults and with sibling-page usage — overriding a default's colour/contrast/shape, or breaking a control group's shared resting affordance, is a finding unless justified

L2 · judgment · Components & patterns

**Fails when:** a design-system component default is overridden in a way that changes colour, contrast, or shape with no recorded reason · a component is used differently here than on sibling pages with no reason · members of one control group (toggle set, segmented control) do not share a resting affordance — only the selected one reads as interactive

## Requirement

Use design-system components at their defaults. When you override a default — a colour,
a contrast pairing, a shape (radius, border, fill) — treat that as a deliberate decision
that must be justified and recorded, not a silent one-off. Three things stay consistent:

1. **A component matches its design-system default** unless an override is recorded with a
   reason. Overriding a default's text/background colour, its contrast, or its shape is a
   finding unless justified.
2. **A component matches how the same component is used on sibling pages.** If the avatar,
   badge, button, or chip is rendered one way across the product and differently here, the
   divergence is a finding unless there is a reason.
3. **Members of one control group share a resting affordance.** In a toggle set or
   segmented control, every member reads as interactive at rest — not only the selected
   one. If the unselected members look like plain text, the group fails this control.

## Rationale

The triggering incident (attendance loop run, issue #5 / HF-19): an `AvatarFallback`
overrode the design-system default text colour (`text-primary-foreground` →
`text-foreground`) while every other page used the default. The result was dark initials
on a blue `bg-primary` — an A11Y-1 contrast fail at 3.32:1 (L0) that survived the critique
and two evaluator passes before a human caught it by eye. A companion case: a toggle where
only the *selected* option carried a resting affordance, so the unselected members read as
plain text.

A11Y-1 catches the *contrast consequence* of such an override after the fact. Nothing
caught the *consistency* class that admits it — "you overrode a default", "this differs
from sibling pages", "this control group's members don't share an affordance". CMP-7 names
that class so the divergence is caught where it starts, not only when it happens to break
contrast. It complements, not duplicates: `checks/contrast` (the mechanical contrast
backstop) and the HF-18 procedural fix (preserved elements are still graded, never waved
through).

See also [[CMP-11]] — a related but distinct self-consistency check: a component's own
nested interactive child (a focus ring, active-state fill) against its own container
geometry, proposed from a later incident.

## Passes when

- Components render at their design-system defaults; any override is recorded with a
  reason (a waiver or a decision-record note).
- The same component looks and behaves the same here as on sibling pages.
- Every member of a toggle set / segmented control shows a resting affordance, so the
  group reads as a set of choices, not one button plus some text.

## Fails when

- A design-system component default is overridden in a way that changes colour, contrast,
  or shape with no recorded reason.
- A component is used differently here than on sibling pages with no reason.
- Members of one control group do not share a resting affordance — only the selected one
  reads as interactive.

## Evaluator guidance

Read the surface's components against their design-system defaults and against the same
component on sibling pages. When you find an override, check whether it is recorded with a
reason; if it changes colour or contrast, re-check it under A11Y-1. Inspect every
toggle/segmented group for a shared resting affordance.

This control is judgment: the evaluator is the enforcement, and no script covers any half
of it. `checks/component-manifest.py` is the nearest analogue in the checks layer — it
compares component usage against a product's declared manifest — but it does not decide
this control, and citing it as a precedent for a deterministic override-detection
sub-check here would be citing a check that does not grade CMP-7.

## Do not flag

- A *deliberate, recorded* override — one with a waiver carrying a real reason, or a
  documented decision. The control protects against silent divergence, not justified
  design decisions.
- A product's documented nuance calibration (accent / tone per `standards`).
- Semantic colour-coding itself — that is never the finding here (per the review skill's
  originality criterion). The finding is the *unjustified divergence*, not the use of
  colour or a variant.