Sample sample-002
Rules that fired
- warn
ahd/weight-varietyOnly 2 distinct font-weight value(s) used (500, 700). The token declares multiple weights; use them.
- 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: #151515;
--muted: #5f625e;
--paper: #f7f5ef;
--panel: #ffffff;
--line: #d8d4c8;
--accent: #b83a2f;
--accent-dark: #81251f;
--terminal: #111512;
--terminal-text: #d9f2dc;
--terminal-muted: #8ea993;
--mark: #e7dfc8;
--max: 1120px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
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(21, 21, 21, 0.035) 1px, transparent 1px),
linear-gradient(180deg, rgba(21, 21, 21, 0.03) 1px, transparent 1px),
var(--paper);
background-size: 42px 42px;
line-height: 1.5;
}
a {
color: inherit;
}
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
}
header {
border-bottom: 1px solid var(--line);
background: rgba(247, 245, 239, 0.92);
}
.nav {
max-width: var(--max);
margin: 0 auto;
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
display: flex;
align-items: baseline;
gap: 12px;
text-decoration: none;
}
.brand strong {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 17px;
letter-spacing: 0;
}
.brand span {
color: var(--muted);
font-size: 14px;
}
.nav a.repo {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 13px;
text-decoration: none;
border: 1px solid var(--ink);
padding: 9px 12px;
background: var(--ink);
color: var(--paper);
}
main {
flex: 1;
}
.hero {
max-width: var(--max);
margin: 0 auto;
padding: 68px 24px 44px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
gap: 42px;
align-items: end;
}
h1 {
margin: 0;
max-width: 760px;
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
font-size: clamp(46px, 7vw, 92px);
line-height: 0.92;
letter-spacing: 0;
}
.dek {
margin: 28px 0 0;
max-width: 680px;
font-size: clamp(18px, 2vw, 23px);
color: #2a2a28;
}
.position {
margin-top: 28px;
display: grid;
gap: 12px;
max-width: 650px;
color: var(--muted);
font-size: 16px;
}
.terminal {
background: var(--terminal);
color: var(--terminal-text);
border: 1px solid #2f3a31;
box-shadow: 0 18px 50px rgba(20, 20, 18, 0.18);
}
.terminal-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
border-bottom: 1px solid #2f3a31;
color: var(--terminal-muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 12px;
}
.dots {
display: flex;
gap: 7px;
}
.dots i {
width: 9px;
height: 9px;
border-radius: 999px;
background: #52645a;
display: block;
}
pre {
margin: 0;
padding: 22px;
overflow-x: auto;
white-space: pre;
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 14px;
line-height: 1.7;
}
.prompt {
color: #91c59a;
user-select: none;
}
.manifest-wrap {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.42);
}
.manifest {
max-width: var(--max);
margin: 0 auto;
padding: 42px 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--line);
}
.manifest section {
background: var(--paper);
padding: 28px;
min-height: 100%;
}
.manifest h2 {
margin: 0 0 18px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 15px;
letter-spacing: 0;
text-transform: uppercase;
}
.manifest ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 11px;
}
.manifest li {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
align-items: start;
font-size: 16px;
}
.manifest li::before {
content: "";
width: 13px;
height: 13px;
margin-top: 6px;
border: 1px solid var(--ink);
background: var(--mark);
}
.manifest section:nth-child(2) li::before {
background: transparent;
border-color: var(--accent);
}
.note {
max-width: var(--max);
margin: 0 auto;
padding: 30px 24px 48px;
display: grid;
grid-template-columns: minmax(0, 0.7fr) minmax(280px, 0.3fr);
gap: 34px;
align-items: start;
}
.note p {
margin: 0;
max-width: 760px;
font-size: 18px;
}
.note a {
justify-self: end;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 14px;
background: var(--accent);
color: #fffaf2;
text-decoration: none;
font-weight: 700;
border: 1px solid var(--accent-dark);
}
footer {
margin-top: auto;
border-top: 1px solid var(--line);
background: #ebe7db;
}
.footer-inner {
max-width: var(--max);
margin: 0 auto;
padding: 18px 24px;
display: flex;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
color: #4c4d49;
font-size: 14px;
}
@media (max-width: 860px) {
.hero {
grid-template-columns: 1fr;
padding-top: 48px;
}
.terminal {
width: 100%;
}
.manifest {
grid-template-columns: 1fr;
}
.note {
grid-template-columns: 1fr;
}
.note a {
justify-self: start;
}
}
@media (max-width: 560px) {
.nav {
align-items: flex-start;
flex-direction: column;
}
.brand {
flex-direction: column;
gap: 2px;
}
.hero {
padding-left: 18px;
padding-right: 18px;
}
.manifest {
padding-left: 18px;
padding-right: 18px;
}
.manifest section {
padding: 22px;
}
.note,
.footer-inner {
padding-left: 18px;
padding-right: 18px;
}
code {
font-size: 13px;
}
}
</style>
</head>
<body>
<div class="page">
<header>
<nav class="nav" aria-label="Primary">
<a class="brand" href="#">
<strong>AHD</strong>
<span>Artificial Human Design</span>
</a>
<a class="repo" href="https://github.com/ahd-design/ahd" aria-label="Read the AHD source code on GitHub">read-the-code</a>
</nav>
</header>
<main>
<section class="hero" aria-labelledby="title">
<div>
<h1 id="title">Design evals for people who can see the problem.</h1>
<p class="dek">AHD turns taste into repeatable checks: briefs, rules, live runs, and critique hooks for teams tired of reviewing another plausible interface by hand.</p>
<div class="position">
<p>It is not a lecture about bad generated pages. It is a working framework for naming the failure modes, running the same brief across models, and keeping the artifacts inspectable.</p>
<p>The output is deliberately plain: code, tokens, rules, manifests, and the parts that still need keys or infrastructure.</p>
</div>
</div>
<aside class="terminal" aria-label="Run the live eval">
<div class="terminal-bar">
<span>eval-live</span>
<span class="dots" aria-hidden="true"><i></i><i></i><i></i></span>
</div>
<pre><code class="language-bash"><span class="prompt">$</span> ahd eval-live swiss-editorial --brief briefs/landing.yml --models <specs> --n 10</code></pre>
</aside>
</section>
<div class="manifest-wrap">
<div class="manifest" aria-label="Manifest">
<section aria-labelledby="ships">
<h2 id="ships">What ships</h2>
<ul>
<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>
</ul>
</section>
<section aria-labelledby="gated">
<h2 id="gated">What is gated</h2>
<ul>
<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>
</ul>
</section>
</div>
</div>
<section class="note" aria-label="Project position">
<p>AHD is for teams who want generated design to face the same kind of review pressure as code: explicit fixtures, repeatable runs, visible constraints, and no decorative proof that cannot be inspected.</p>
<a href="https://github.com/ahd-design/ahd">read-the-code</a>
</section>
</main>
<footer>
<div class="footer-inner">
<span>Artificial Human Design</span>
<span>Licence: FSL-1.1-Apache-2.0 for code, CC-BY-4.0 for tokens and artwork.</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.