DESIGN.md

# RESMP.DEV visual system

The system combines an editorial serif hierarchy, instrument-panel grids, dark warning boards, and the RESMP palette. Its labels remain functional and avoid literal references to its cultural influences:

| Token | Value | Use |
| --- | --- | --- |
| Ink | `#101012` | Dark technical field and type |
| Paper | `#f1f0e9` | Warm technical paper |
| Signal acid | `#b6f238` | Dominant identity line work, active state, and controls |
| Structural violet | `#6f36d9` | Supporting mass and primary chart candidate |
| Warning red | `#e2382f` | Hard boundary and warning rail |

## Primary mark

`brand-composition-engine-master.png` is the 1024 px GPT-Image-2 source. `brand-composition-engine.png` is the 512 px web derivative used by the organization card and benchmark instrument. The mark represents heterogeneous artifacts entering a shared system. Use it once per surface as an identity anchor; do not repeat it as a watermark or substitute it for the RESMP.DEV name.

## Reusable benchmark chart

Copy `benchmark-chart.js` and `benchmark-component.css`, then provide JSON inside the element:

```html
<link rel="stylesheet" href="benchmark-component.css">
<script type="module" src="benchmark-chart.js"></script>

<resmp-benchmark-chart>
  <script type="application/json">
  {
    "title": "MODEL EVALUATIONS",
    "higherIsBetter": true,
    "series": [{"id":"candidate","label":"CANDIDATE","color":"#6f36d9"}],
    "groups": [{"name":"STEM","panels":[
      {"name":"MATH","values":{"candidate":62.4}}
    ]}]
  }
  </script>
</resmp-benchmark-chart>
```

Or set `document.querySelector('resmp-benchmark-chart').config` to the same object. The component supports positive and negative values, direct value labels, fixed series ordering, responsive one-column panels, print output, and SVG export.

`benchmark.html` is the complete 4 × 3 small-multiples reference implementation. Its values are explicitly labeled demonstration data.