BHDicaire

Cross-site reuse

Reuse is a contract, not a visual resemblance.

When the same component, layout, partial, content rule, or operational behaviour appears on more than one site, start from one shared pattern. Variation is allowed when the functional need is real, named, and repeatable.

Rule#

Use one shared implementation when the behaviour is the same. Use a documented variation when the behaviour is intentionally different.

Token-first visual changes#

When a shared visual decision changes, update the token source before changing component CSS. Colours, type, spacing, radii, borders, shadows, motion and named layout constraints belong in the token system when they are reusable decisions. CSS composes those tokens into selectors, states and component behaviour; it does not become a second source of visual values.

Use Token-first implementation for the boundary, exceptions and verification rule. A one-off layout formula may stay in CSS when it describes local geometry rather than a reusable visual value.

Reuse before variation#

  • Prefer shared partials, shared class names, and shared page patterns for shared behaviour.
  • Rename a pattern when it outgrows the first page that used it.
  • Keep brand-specific colours, imagery, and tone separate from structural behaviour.
  • Treat a fork as temporary unless the difference has an owner and a reason.
  • Document the reason for a variation where the next maintainer will look for it.

Good variation#

A variation is justified when it changes the job the pattern does:

  • a different data shape
  • a different interaction model
  • a different privacy or legal requirement
  • a different brand expression with the same underlying contract
  • a temporary migration state with a planned end

Bad variation#

A variation is weak when it only reflects where the work started:

  • a homepage-specific name for a section pattern
  • a brand copy of a shared layout with only colour changes
  • a second partial because the first one was hard to find
  • duplicated JavaScript that handles the same interaction

Ownership#

The owning page carries the rule and rationale. Related pages may summarize or link to it, but they should not create a second source of truth.