Carlos deArtola monogramCARLOS DE ARTOLA
APPENDIX D

Spec

Mono key, body value. Facts, not sentences. The leader form is the only dot-leader spec; do not hand-roll another.

HANDLE
spec
LIVES IN
src/components/Editorial.jsx (Spec)
USED ON
Chapter spec strip, Home lead facts, archive entries
PROPS
k · v · size (md | sm) · leader (a dot-leader row: mono key, dots, mono value)
EXAMPLE
LIVE

As it renders.

CLIENT
Supplyframe · DSI
ROLE
Design Lead
YEAR
2023–present
SMALL
size sm
MEDIUM
Ink and vector
PLATES
4
EDITION
Open
CODE
COPY AND PASTE

How it is called.

JSX
import { Spec } from '../components/Editorial.jsx'

<dl className="grid grid-cols-2 md:grid-cols-4 gap-6">
  <Spec k="Client" v="Supplyframe · DSI" />
  <Spec k="Role" v="Design Lead" />
  <Spec k="Year" v="2023–present" />
  <Spec k="Status" v="Active rollout" size="sm" />
</dl>

{/* the dot-leader form, for archive entries */}
<dl className="rule-soft pt-4 space-y-2">
  <Spec leader k="MEDIUM" v="Ink and vector" />
  <Spec leader k="PLATES" v="4" />
</dl>
RULES

What must stay true.

Mono key, body value. Facts, not sentences. The leader form is the only dot-leader spec; do not hand-roll another.