TheoR.net DSRD · TheoR.net

Preface

HUMANS.md

I have written this document first and foremost to allow copying TheoR.net’s design system to other websites by simply linking it to an AI agent. It can, with time, to evolve to be barely readable. I also include minimum details specific to implementation of this particular website — like components styles —; if you are interested, instead head to the GitHub repository If I forget to update this link, up-to-date version is always available at About page. .

AGENTS.md

Welcome our overlords! May this document please you, and serve you well.

Main

TL;DR: TheoR.net’s design is minimalist, text-first, and information-dense. Inspirations include Joe Carlsmith’s website, Gwern and Dan Luu My list of favourite personal websites is not limited to those: I endorse Callum McDougall’s https://www.perfectlynormal.co.uk/, Slate Star Codex https://slatestarcodex.com/ and others . It is designed to feel snappy with small buttons, sharp edges, minimal animations, no shadows, small gaps and spacings, and contrast colors. It prefers to use OS system UI for fonts, work well on devices of all sizes while maintaining optimal readability.

Reference HTML

The following standalone HTML page captures the complete design system. An agent can use it as a self-contained starting point for building pages in the same style.

Download dsrd-reference.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TheoR.net</title>
<style>
/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Theme tokens ─── */
:root {
  color-scheme: light only;
  --color-bg: #fff;
  --color-bg-subtle: #f8f8f8;
  --color-bg-muted: #f0f0f0;
  --color-text: #111;
  --color-text-muted: #444;
  --color-text-subtle: #666;
  --color-link: #005;
  --color-link-hover: #00a;
  --color-link-visited: #551a8b;
  --color-border: #ccc;
  --color-border-subtle: #e0e0e0;
  --color-accent: #005;
  --color-accent-hover: #00a;
  --color-highlight: #ff9;
  --color-highlight-subtle: #ffc;
  --color-success: #060;
  --color-warning: #850;
  --color-error: #900;
  --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-mono: 'Consolas', 'Monaco', 'Liberation Mono', monospace;
  --leading-tight: 1.2;
  --leading-normal: 1.45;
  --width-content: 70ch;
  --width-page: 85rem;
  --height-header: 2.5rem;
  --ease-out: ease-out;
  --transition-fast: 50ms;
  --transition-normal: 100ms;
}

/* ─── Base ─── */
html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}
body { min-height: 100vh; }
::selection { background: var(--color-highlight); }

/* ─── Typography ─── */
h1, h2, h3, h4 { font-weight: 700; line-height: var(--leading-tight); color: var(--color-text); }
h1 { font-size: 1.5rem;  margin-bottom: 0.75rem; }
h2 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
h3 { font-size: 1.1rem;  margin-top: 1rem;  margin-bottom: 0.25rem; }
h4 { font-size: 1rem;    margin-top: 0.75rem; margin-bottom: 0.25rem; }
p  { margin-bottom: 0.75rem; }
strong { font-weight: 700; }
em { font-style: italic; }

/* ─── Links ─── */
a { color: var(--color-link); text-decoration: underline; }
a:hover { color: var(--color-link-hover); }
a:visited { color: var(--color-link-visited); }

/* ─── Lists ─── */
ul, ol { margin-bottom: 0.75rem; padding-left: 1.25rem; }
ul { list-style: disc; }
ol { list-style: decimal; }
li { margin-bottom: 0.25rem; }

/* ─── Code ─── */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 4px;
  background: var(--color-bg-muted);
}
pre {
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--color-bg-muted);
  overflow-x: auto;
  font-size: 0.875rem;
}
pre code { padding: 0; background: none; }

/* ─── Blockquote ─── */
blockquote {
  margin: 0.75rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
}
blockquote p:last-child { margin-bottom: 0; }

/* ─── Table ─── */
table { width: 100%; margin: 0.75rem 0; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.25rem 0.5rem; text-align: left; border: 1px solid var(--color-border); }
th { font-weight: 700; background: var(--color-bg-subtle); }

/* ─── Horizontal rule ─── */
hr { margin: 1.5rem 0; border: none; border-top: 1px solid var(--color-border); }

/* ─── Header ─── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.header-nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--width-page);
  margin: 0 auto;
  padding: 0.5rem 1rem;
}
.site-logo {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--color-text); text-decoration: none;
}
.site-logo:hover { color: var(--color-link); }
.nav-links { display: flex; align-items: center; gap: 1rem; }
.nav-link {
  font-size: 0.875rem; color: var(--color-text-muted); text-decoration: none;
}
.nav-link:hover { color: var(--color-link); }
.nav-link.active { color: var(--color-text); font-weight: 700; }

/* ─── Page grid (3-column: sidebar | content | sidebar) ─── */
.page-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--width-content)) 1fr;
  max-width: var(--width-page);
  margin: 0 auto;
  padding: 0 1rem;
}
@media (max-width: 1024px) {
  .page-grid { grid-template-columns: 1fr; padding: 0 0.75rem; }
}
@media (max-width: 640px) {
  .page-grid { padding: 0 0.5rem; }
  .header-nav { padding: 0.5rem 0.5rem; }
}

/* ─── Main content area ─── */
.content { grid-column: 2; padding: 1rem 0; }

/* ─── Callout ─── */
.callout {
  margin: 0.75rem 0; border-left: 3px solid var(--color-border);
  background: var(--color-bg-subtle);
}
.callout-title {
  padding: 0.25rem 0.5rem; font-weight: 700; font-size: 0.875rem;
  border-bottom: 1px solid var(--color-border-subtle);
}
.callout-body { padding: 0.5rem; }
.callout-body > *:last-child { margin-bottom: 0; }
.callout[data-type="note"] { border-left-color: var(--color-accent); }
.callout[data-type="tip"]  { border-left-color: var(--color-success); }
.callout[data-type="warn"] { border-left-color: var(--color-warning); }

/* ─── Footer ─── */
.page-footer {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem; color: var(--color-text-muted);
}

/* ─── Utility ─── */
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.mono { font-family: var(--font-mono); }
</style>
</head>
<body>

<header class="header">
  <nav class="header-nav">
    <a href="/" class="site-logo">TheoR.net</a>
    <div class="nav-links">
      <a href="/" class="nav-link active">Home</a>
      <a href="/about-home-theor-net" class="nav-link">About</a>
      <a href="/blog" class="nav-link">Blog</a>
    </div>
  </nav>
</header>

<div class="page-grid">
  <div class="content">
    <h1>Page Title</h1>
    <p class="text-muted text-sm">2026-02-08</p>

    <h2>Section heading</h2>
    <p>Body text uses <code>system-ui</code> at 16 px with a line-height of 1.45. <strong>Bold</strong> and <em>italic</em> work as expected. Links look like <a href="#">this</a>.</p>

    <h3>Sub-section</h3>
    <p>The design is minimalist and text-first. No shadows, no border-radius beyond 2–4 px, and transitions stay under 100 ms.</p>

    <ul>
      <li>Unordered list item</li>
      <li>Another item with <code>inline code</code></li>
    </ul>

    <ol>
      <li>Ordered list item</li>
      <li>Second item</li>
    </ol>

    <blockquote><p>Blockquote — left-bordered, muted text color.</p></blockquote>

    <pre><code>// Code block
const greeting = "Hello, world";
console.log(greeting);</code></pre>

    <table>
      <thead><tr><th>Column A</th><th>Column B</th><th>Column C</th></tr></thead>
      <tbody>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
      </tbody>
    </table>

    <div class="callout" data-type="note">
      <div class="callout-title">Note</div>
      <div class="callout-body"><p>Callout box with accent left border.</p></div>
    </div>

    <div class="callout" data-type="tip">
      <div class="callout-title">Tip</div>
      <div class="callout-body"><p>Green-bordered variant for tips.</p></div>
    </div>

    <hr />
    <div class="page-footer">
      <p>Footer area — thin top border, muted text, smaller font.</p>
    </div>
  </div>
</div>

</body>
</html>