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:

<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.