Specimen Card

Labeled frame that pairs a context token + "feel" descriptor with arbitrary live component children — proves how a brand voice/tone renders on real components.

Tone-by-context preview

A SpecimenCard labels a live component with its context token (e.g. "error") and an optional italic feel descriptor (e.g. "warm, accountable"). The card is only the frame — children are real components rendered inside it.

errorwarm, accountable

Payment failed

We couldn't process your card — double-check your details and try again.

For brand-voice proof blocks, stack multiple specimens and attach a SpecimenCardFooter to attribute the voice traits in use.

onboardingclear, encouraging

Installation

npx visor add specimen-card

This copies two files into your project:

components/ui/specimen-card/specimen-card.tsx — the component
components/ui/specimen-card/specimen-card.module.css — the styles

Usage

import {
  SpecimenCard,
  SpecimenCardFooter,
} from '@/components/ui/specimen-card/specimen-card';

// Tone-by-context grid card
<SpecimenCard context="error" feel="warm, accountable">
  <Alert variant="destructive">
    <AlertTitle>Payment failed</AlertTitle>
    <AlertDescription>We couldn't process your card.</AlertDescription>
  </Alert>
</SpecimenCard>

// Speaking block with voice-key attribution
<SpecimenCard context="onboarding">
  <Button>Get started free</Button>
  <Button variant="outline">Explore the docs</Button>
  <SpecimenCardFooter>voice — precise · warm · direct</SpecimenCardFooter>
</SpecimenCard>

API Reference

SpecimenCardProps

Prop	Type	Default	Description
`context`*	`string`	—	Context token label (e.g. "error", "empty", "loading"). Rendered uppercase in the label row.
`feel`	`string`	—	Italic feel descriptor pairing the context (e.g. "warm, accountable").
`className`	`string`	—	Additional CSS class names to merge onto the element.

The component also accepts all standard <div> HTML attributes.

SpecimenCardFooterProps

SpecimenCardFooter accepts all standard <div> HTML attributes. Place it as the last child of SpecimenCard to render a hairline-separated footer for voice-key or attribution text.