Sample sample-009
Rules that fired
- warn
ahd/weight-varietyOnly 2 distinct font-weight value(s) used (760, 650). The token declares multiple weights; use them.
- warn
ahd/no-indiscriminate-glassbackdrop-blur is used 2 times. If glass is the point, pick one surface; if it isn't, remove it.
- warn
ahd/tracking-per-sizeAll-caps text used with no opened letter-spacing. Open by 0.04–0.12em so the word reads as a word, not a block.
Source
The exact bytes the linter read. Lines with fires are highlighted; click a rule above to jump to its line.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AHD - Artificial Human Design</title>
<style>
:root {
color-scheme: light;
--ink: #171717;
--muted: #5f625d;
--paper: #f7f5ee;
--panel: #ffffff;
--line: #c9c4b8;
--accent: #b7382f;
--accent-2: #176d61;
--code-bg: #141512;
--code-ink: #e8e2d2;
--code-dim: #8f9887;
--max: 1120px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background:
linear-gradient(90deg, rgba(23, 23, 23, 0.035) 1px, transparent 1px),
linear-gradient(rgba(23, 23, 23, 0.03) 1px, transparent 1px),
var(--paper);
background-size: 32px 32px;
line-height: 1.45;
}
a {
color: inherit;
text-decoration: none;
}
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
border-bottom: 1px solid var(--line);
background: rgba(247, 245, 238, 0.86);
backdrop-filter: blur(12px);
}
.nav {
max-width: var(--max);
margin: 0 auto;
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.mark {
display: flex;
align-items: baseline;
gap: 12px;
min-width: 0;
}
.mark strong {
font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
font-size: 16px;
letter-spacing: 0;
}
.mark span {
color: var(--muted);
font-size: 14px;
white-space: nowrap;
}
.read-code {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 14px;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--paper);
font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
font-size: 13px;
white-space: nowrap;
}
main {
flex: 1;
}
.hero {
max-width: var(--max);
margin: 0 auto;
padding: 72px 24px 44px;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
gap: 56px;
align-items: end;
}
.kicker {
margin: 0 0 18px;
font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
font-size: 13px;
color: var(--accent);
text-transform: uppercase;
}
h1 {
margin: 0;
max-width: 760px;
font-size: clamp(48px, 7vw, 92px);
line-height: 0.92;
letter-spacing: 0;
font-weight: 760;
}
.lede {
margin: 28px 0 0;
max-width: 690px;
font-size: clamp(18px, 2vw, 23px);
color: #343631;
}
.proof {
margin-top: 32px;
display: grid;
grid-template-columns: max-content 1fr;
gap: 12px 18px;
max-width: 620px;
font-size: 15px;
}
.proof dt {
font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
color: var(--muted);
}
.proof dd {
margin: 0;
}
.terminal {
border: 1px solid #303229;
background: var(--code-bg);
color: var(--code-ink);
box-shadow: 10px 10px 0 rgba(23, 23, 23, 0.12);
}
.terminal-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 38px;
padding: 0 14px;
border-bottom: 1px solid #303229;
font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
font-size: 12px;
color: var(--code-dim);
}
.dots {
display: flex;
gap: 7px;
}
.dots i {
width: 8px;
height: 8px;
display: block;
border-radius: 50%;
background: #6e735f;
}
pre {
margin: 0;
padding: 22px;
overflow-x: auto;
}
code {
font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
font-size: 14px;
}
.prompt {
color: #9aa58e;
}
.cmd {
color: var(--code-ink);
}
.manifest {
max-width: var(--max);
margin: 0 auto;
padding: 32px 24px 64px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.manifest section {
border-top: 3px solid var(--ink);
padding-top: 18px;
background: rgba(255, 255, 255, 0.36);
}
.manifest h2 {
margin: 0 0 18px;
font-size: 24px;
letter-spacing: 0;
}
.manifest ol {
list-style: none;
margin: 0;
padding: 0;
counter-reset: item;
border-bottom: 1px solid var(--line);
}
.manifest li {
counter-increment: item;
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
padding: 13px 0;
border-top: 1px solid var(--line);
font-size: 16px;
}
.manifest li::before {
content: counter(item, decimal-leading-zero);
font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
color: var(--muted);
font-size: 13px;
padding-top: 2px;
}
.gated {
color: #33342f;
}
.gated h2 {
color: var(--accent-2);
}
footer {
border-top: 1px solid var(--line);
background: #ebe7dc;
}
.foot {
max-width: var(--max);
margin: 0 auto;
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
font-size: 13px;
color: var(--muted);
}
.foot strong {
color: var(--ink);
font-weight: 650;
}
@media (max-width: 860px) {
.hero {
grid-template-columns: 1fr;
gap: 34px;
padding-top: 48px;
}
.terminal {
max-width: 100%;
}
.manifest {
grid-template-columns: 1fr;
}
.foot {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 560px) {
.nav {
align-items: flex-start;
flex-direction: column;
}
.mark {
flex-direction: column;
gap: 2px;
}
.read-code {
width: 100%;
}
.proof {
grid-template-columns: 1fr;
gap: 4px;
}
.proof dd {
margin-bottom: 10px;
}
pre {
padding: 18px;
}
code {
font-size: 13px;
}
.manifest li {
grid-template-columns: 40px 1fr;
}
}
</style>
</head>
<body>
<div class="page">
<header>
<nav class="nav" aria-label="Primary">
<a class="mark" href="#" aria-label="AHD home">
<strong>AHD</strong>
<span>Artificial Human Design</span>
</a>
<a class="read-code" href="https://github.com/" aria-label="Read the AHD source code on GitHub">read-the-code</a>
</nav>
</header>
<main>
<section class="hero" aria-labelledby="hero-title">
<div>
<p class="kicker">Eval the artifact, not the promise</p>
<h1 id="hero-title">AHD is a design quality framework for generated interfaces.</h1>
<p class="lede">
It turns a brief into measurable design constraints, runs the output through explicit rules, and leaves a trail a designer or engineer can inspect without squinting through vibes.
</p>
<dl class="proof">
<dt>Input</dt>
<dd>Briefs, model specs, screenshots, tokens, and rule packs.</dd>
<dt>Output</dt>
<dd>Structured findings, repeatable evals, and design failures named precisely enough to fix.</dd>
</dl>
</div>
<aside class="terminal" aria-label="AHD eval command">
<div class="terminal-bar">
<span>run live eval</span>
<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>
</div>
<pre><code class="language-bash"><span class="prompt">$</span> <span class="cmd">ahd eval-live swiss-editorial --brief briefs/landing.yml --models <specs> --n 10</span></code></pre>
</aside>
</section>
<section class="manifest" aria-label="AHD manifest">
<section aria-labelledby="ships-title">
<h2 id="ships-title">What ships</h2>
<ol>
<li>brief compiler</li>
<li>28-rule linter</li>
<li>eval harness</li>
<li>vision-critic scaffold</li>
<li>MCP server</li>
<li>editor plugins</li>
<li>eight tokens</li>
</ol>
</section>
<section class="gated" aria-labelledby="gated-title">
<h2 id="gated-title">What is gated</h2>
<ol>
<li>live frontier-model calls (needs API keys)</li>
<li>live vision critique (needs multimodal key + screenshot pipeline)</li>
<li>standalone npm packages for the editor plugins</li>
<li>additional tokens</li>
</ol>
</section>
</section>
</main>
<footer>
<div class="foot">
<span><strong>Licence:</strong> FSL-1.1-Apache-2.0 for code, CC-BY-4.0 for tokens and artwork.</span>
<span>AHD / Artificial Human Design</span>
</div>
</footer>
</div>
</body>
</html>
Rendered
The same HTML rendered in a sandboxed frame. No scripts execute, no network calls are allowed; this is the same HTML the source block shows above, nothing more.
On phone-size screens the frame renders the sample at its designed viewport scaled down, so a landing page meant for a desktop still reads as a landing page. Open rendered sample in a new tab to view full size.
Every sample in this run is reachable via its cell / condition / id. The full run writeup with per-cell and per-tell tables lives at /evals/2026-04-22-swiss-n30.