Skip to main content
The Access Matrix is a branded HTML component for rendering role-based permission grids on the published site. It is styled by publish.css and currently used by the canonical Eval Labs Roles and Access Matrix.

​
What it is

A reusable, on-brand replacement for a plain Markdown permission table. It renders a card with numbered capability columns, a sticky role column, per-role access meters, and accessible grant / deny marks in the Eval Labs gold/amber palette. It exists because the access model is load-bearing canon and deserves a clearer, more scannable presentation than a raw Markdown grid.

​
Where it lives

Styles:  publish.css  →  /* Eval Labs — Access Matrix component */  (.eval-access-matrix … )
Markup:  the note that needs the grid  (currently note 08)
The component is two coupled parts. The note carries the HTML; publish.css carries every .eval-access-matrix / .am-* style. Both must be published together. If you publish the note without the updated publish.css, the matrix renders as unstyled HTML.

​
Rule

  • Edit the live access values only in the canonical matrix (Roles and Access Matrix). It is the single source of truth; other notes link to it rather than copy it.
  • Keep the grid data identical to the role definitions on that same page. The visual is not allowed to diverge from the written canon.
  • Recolor through the brand variables, not hard-coded hex. The component reads --eval-gold, --eval-amber, --eval-orange, --eval-deep-orange, --eval-ink, and the callout fill/stroke tokens.
  • Keep the accessibility markup: scope on header/row cells, role="img" + aria-label="Allowed" / "Not allowed" on every mark.

​
Use when

  • A note needs to show who-can-do-what across roles and surfaces.
  • The grid is small enough to read as a matrix (a handful of roles × a handful of capabilities).
  • The data is canonical and stable enough to be worth styling.

​
Avoid

  • Duplicating the matrix data into a second note. Link to the canonical one instead.
  • Using it for large or frequently-changing tables where a plain Markdown table is easier to maintain.
  • Inlining a <style> block or Google-Fonts <link> in the note. Obsidian Publish does not render those reliably — all styling belongs in publish.css.

​
Markup skeleton

Wrap everything in .eval-access-matrix. Mark full-access rows with am-tier-full and the no-access row with am-tier-none so the role tint and meter labels render correctly. 
<div class="eval-access-matrix">
<div class="am-eyebrow"><span>Eval Labs · Roles &amp; permissions</span></div>
<h2 class="am-title">Access matrix</h2>
<p class="am-lede">One-line description of what the grid covers.</p>
<div class="am-card"><div class="am-scroll">
<table aria-label="…">
<colgroup><col class="am-role-col" /><col /><!-- one col per capability --></colgroup>
<thead><tr>
  <th scope="col" class="am-corner">Role</th>
  <th scope="col" title="tooltip"><span class="am-num">01</span>Capability<br>Name</th>
</tr></thead>
<tbody>
<tr class="am-tier-full">
  <th scope="row" class="am-role">
    <span class="am-tag">owner</span>
    <p class="am-desc">Short role description.</p>
    <div class="am-meter"><span class="am-meter-track"><span class="am-meter-fill" style="width:100%"></span></span><span class="am-meter-label">7 / 7</span></div>
  </th>
  <td class="am-cell"><span class="am-mark am-grant" role="img" aria-label="Allowed"><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span></td>
  <td class="am-cell"><span class="am-deny" role="img" aria-label="Not allowed"></span></td>
</tr>
</tbody>
</table>
</div></div>
<div class="am-foot">
  <div class="am-legend">
    <span class="am-item"><span class="am-mark am-grant" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><path d="M3.5 8.5l3 3 6-7" stroke="#0A0A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span> Allowed</span>
    <span class="am-item"><span class="am-deny" aria-hidden="true"></span> Not allowed</span>
  </div>
  <span class="am-stamp">EVALUATIONLABS.AI · ACCESS v1</span>
</div>
</div>
Markdown gotchaKeep the HTML block free of blank lines. A blank line inside it makes Obsidian close the HTML and resume Markdown, which breaks the table.

​
Class reference

ClassPurpose
eval-access-matrixComponent root; defines all --am-* brand variables
am-eyebrow / am-title / am-ledeHeader block
am-card / am-scrollCard shell + horizontal scroll below ~1000px
am-corner / am-role / am-tag / am-descSticky role column and its label
am-meter / am-meter-track / am-meter-fill / am-meter-labelPer-role access meter (set width inline on the fill)
am-numMonospace 01–0n capability number
am-mark am-grantGold/amber grant chip (ink check SVG)
am-denyFaint dash for not-allowed
am-tier-full / am-tier-noneRow modifiers for full-access tint and zero-access meter
am-foot / am-legend / am-stampLegend and corner stamp

​
Example

The live, canonical instance is the access grid on Eval Labs Roles and Access Matrix. Read that page to see the component in context and to edit the actual access values.