<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>MARMAR Context | Evidence-first moodboard</title>
<style>
@font-face {
font-family: Inter;
src: url("/assets/inter-regular.ttf");
}
@font-face {
font-family: Inter;
src: url("/assets/inter-semibold.ttf");
font-weight: 600;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #f8f8f8;
color: #1f2937;
font: 14px/1.65 Inter, system-ui, sans-serif;
}
main {
max-width: 1180px;
margin: auto;
padding: 48px 28px;
}
h1 {
font-size: 42px;
letter-spacing: -1.7px;
line-height: 1.12;
max-width: 650px;
margin: 18px 0;
}
h2 {
font-size: 20px;
letter-spacing: -0.5px;
}
p {
color: #6b7280;
}
.eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.4px;
}
header {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
padding-bottom: 35px;
border-bottom: 1px solid #e5e7eb;
}
.swatches {
display: flex;
gap: 8px;
}
.swatches i {
display: block;
width: 40px;
height: 40px;
border-radius: 9px;
border: 1px solid #e5e7eb;
}
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
margin: 28px 0;
}
.card {
border: 1px solid #e5e7eb;
border-radius: 12px;
background: white;
overflow: hidden;
}
.copy {
padding: 20px 24px;
}
.ref {
height: 290px;
background: #f1f2f3;
display: flex;
justify-content: center;
padding: 16px;
}
.ref img {
max-width: 100%;
height: 100%;
object-fit: contain;
}
a {
color: #157154;
text-underline-offset: 3px;
}
.caption {
font-size: 11px;
}
.wire {
padding: 24px;
}
.toolbar {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 16px;
}
.tag {
background: #f0f6f3;
color: #146749;
border: 1px solid #b5d4c7;
border-radius: 5px;
padding: 4px 8px;
font-size: 11px;
}
.group {
background: #f8f8f8;
padding: 8px 12px;
font-size: 11px;
color: #6b7280;
margin-top: 16px;
}
.row {
display: flex;
justify-content: space-between;
padding: 15px 12px;
border-bottom: 1px solid #e5e7eb;
gap: 15px;
}
.row small {
display: block;
color: #6b7280;
}
.row strong {
font-size: 14px;
}
.note {
border-left: 3px solid #179671;
padding-left: 16px;
}
.wide {
grid-column: 1/-1;
}
.compare {
display: flex;
gap: 12px;
margin: 18px 0;
}
.compare > div {
flex: 1;
padding: 16px;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.compare b {
display: block;
font-size: 28px;
}
.compare small {
color: #6b7280;
}
footer {
font-size: 12px;
}
@media (max-width: 720px) {
header,
.grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 32px;
}
.wide {
grid-column: auto;
}
.ref {
height: 220px;
}
main {
padding: 26px 18px;
}
}
</style>
</head>
<body>
<main>
<header>
<div>
<div class="eyebrow">
MARMAR Context · Data presentation · 24 October 2026
</div>
<h1>Less dashboard furniture.<br />More patient context.</h1>
<p>
A working moodboard for how information is organized, compared and
reviewed. Keep the MARMAR brand. Make the evidence easier to read.
</p>
</div>
<div>
<h2>The palette stays.</h2>
<div class="swatches">
<i style="background: #fff"></i><i style="background: #f8f8f8"></i
><i style="background: #e5e7eb"></i
><i style="background: #1f2937"></i
><i style="background: #179671"></i>
</div>
<p>
White surfaces, gray structure, dark text and restrained MARMAR
green. Amber communicates unresolved review; it is not decoration.
</p>
</div>
</header>
<div class="grid">
<section class="card">
<div class="ref">
<img
src="https://cdn.collectui.com/media/HSexuGLWAAACpyz.avif"
alt="Yuri Gokoryan support dashboard reference, with grouped rows and status labels"
/>
</div>
<div class="copy">
<div class="eyebrow">Reference 01 / Grouping</div>
<h2>Give related data a shared home.</h2>
<p>
Borrow the clear section headers, aligned values and status
labels. For MARMAR: medication, lab, history and identity groups
with source links attached to every fact.
</p>
<a
class="caption"
href="https://collectui.com/designs/dashboard-ui-design-inspiration/c9916838-e613-488e-8faa-b0b342133cf2"
>AI Support Agent Dashboard UI · Yuri Gokoryan · Collect UI</a
>
</div>
</section>
<section class="card">
<div class="ref">
<img
src="https://cdn.collectui.com/media/HJu3rRnbsAAZOsK.avif"
alt="Collect UI table reference showing consistent rows and aligned columns"
/>
</div>
<div class="copy">
<div class="eyebrow">Reference 02 / Scanability</div>
<h2>Make every row predictable.</h2>
<p>
Consistent row rhythm, quiet dividers and compact filters help
people compare information. For MARMAR: fact and dose on the left,
a labelled review decision on the right.
</p>
<a
class="caption"
href="https://collectui.com/designs/dashboard-ui-design-inspiration/438c1b31-7d4c-45f3-b247-6a192b45ab21"
>Full view · Collect UI table collection</a
>
</div>
</section>
<section class="card">
<div class="copy">
<div class="eyebrow">
MARMAR application / Original layout study
</div>
<h2>The review is the main event.</h2>
<p>
Keep original records alongside extracted facts. Hide optional
workspace utilities behind a disclosure. Replace oversized
counters with one compact progress strip.
</p>
</div>
<div class="wire">
<div class="toolbar">
<strong>Patient context</strong
><span class="tag">2 of 3 reviewed</span>
</div>
<div class="group">MEDICATIONS · 2 facts</div>
<div class="row">
<div>
<strong>Metformin</strong
><small>500 mg · 1 tablet · twice daily</small
><small>Prescription · line 3 ↗</small>
</div>
<span class="tag">Included</span>
</div>
<div class="row">
<div>
<strong>Amlodipine</strong
><small>2.5 mg · 1 tablet · once daily</small
><small>Clarification · line 2 ↗</small>
</div>
<span>Needs review</span>
</div>
<div class="group">LABS & MEASUREMENTS · 1 fact</div>
<div class="row">
<div>
<strong>eGFR 76</strong
><small>mL/min/1.73m² · 13 Oct 2026</small>
</div>
<span class="tag">Included</span>
</div>
</div>
</section>
<section class="card">
<div class="copy">
<div class="eyebrow">MARMAR application / Comparison</div>
<h2>Explain what changed.</h2>
<p>
Two clearly labelled result columns distinguish the
medication-only check from the check with reviewed context. Show
actual rule counts, then the findings and evidence underneath.
</p>
<div class="compare">
<div>
<small>MEDICATIONS ONLY</small><b>0</b
><small>rule findings</small>
</div>
<div style="background: #f4f9f6; border-color: #b5d4c7">
<small>WITH CONTEXT</small><b>1</b><small>rule finding</small>
</div>
</div>
<p class="note">
Illustrative synthetic kidney scenario, not a clinical outcome. A
zero count does not establish safety.
</p>
<h2>Progressive disclosure.</h2>
<p>
Extraction diagnostics and backup tools remain available. Save
failures, unresolved conflicts and review requirements stay
visible.
</p>
</div>
</section>
</div>
<footer>
<a href="/">Open the redesigned workspace</a> · Reference images belong
to their original creators; shown for design research. Layout studies
use fictional data.
</footer>
</main>
</body>
</html>