diff --git a/README.md b/README.md
index 656e335..496b210 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,31 @@
-[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=for-the-badge)](LICENSE)
-[![conventional commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=for-the-badge)](https://conventionalcommits.org)
-[![docs driven](https://img.shields.io/badge/docs-driven-blue.svg?style=for-the-badge)](CONTRIBUTING.md)
-![gitHub commit activity](https://img.shields.io/github/commit-activity/m/osapi-io/specs?style=for-the-badge)
-
-# specs
-
-The design docs for [osapi-io]. How each repository is built and why, in one
-place, kept current as they change. No product code here.
+<p align="center">
+  <picture>
+    <source srcset="asset/logo-dark.svg" media="(prefers-color-scheme: dark)">
+    <source srcset="asset/logo-light.svg" media="(prefers-color-scheme: light)">
+    <img src="asset/logo-dark.svg" alt="specs" width="610">
+  </picture>
+</p>
+
+<p align="center">The design docs for osapi-io. Written before the code, corrected when the code proves them wrong.</p>
+
+<p align="center">
+  <a href="LICENSE"><img alt="license" src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=for-the-badge"></a>
+  <a href="https://conventionalcommits.org"><img alt="conventional commits" src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=for-the-badge"></a>
+  <a href="CONTRIBUTING.md"><img alt="docs driven" src="https://img.shields.io/badge/docs-driven-blue.svg?style=for-the-badge"></a>
+  <a href="https://just.systems"><img alt="built with just" src="https://img.shields.io/badge/Built_with-Just-black?style=for-the-badge&logo=just&logoColor=white"></a>
+  <img alt="github commit activity" src="https://img.shields.io/github/commit-activity/m/osapi-io/specs?style=for-the-badge">
+</p>
+
+<p align="center">
+<b>Doc-driven: the page is the design, then the description.</b>
+</p>
+
+<p align="center">
+You design something by writing its page, build it, then correct the page where
+building proved it wrong. Same page all three times, so nothing is converted from
+one form into another, because that conversion is where the design and the docs
+drift apart.
+</p>
 
 ## Usage
 
diff --git a/asset/logo-dark.svg b/asset/logo-dark.svg
new file mode 100644
index 0000000..d688a89
--- /dev/null
+++ b/asset/logo-dark.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 80" width="288" height="80" role="img" aria-label="specs">
+  <title>specs</title>
+  <rect x="8" y="8" width="16" height="32" fill="#8a8a8a"/>
+  <rect x="8" y="56" width="16" height="16" fill="#3b82f6"/>
+  <rect x="24" y="8" width="16" height="16" fill="#8a8a8a"/>
+  <rect x="24" y="40" width="16" height="32" fill="#3b82f6" opacity="0.25"/>
+  <rect x="56" y="8" width="16" height="32" fill="#8a8a8a"/>
+  <rect x="56" y="40" width="16" height="32" fill="#3b82f6"/>
+  <rect x="72" y="8" width="16" height="16" fill="#8a8a8a"/>
+  <rect x="72" y="40" width="16" height="16" fill="#3b82f6"/>
+  <rect x="88" y="8" width="16" height="32" fill="#8a8a8a"/>
+  <rect x="88" y="40" width="16" height="16" fill="#3b82f6"/>
+  <rect x="120" y="8" width="16" height="32" fill="#8a8a8a"/>
+  <rect x="120" y="40" width="16" height="32" fill="#3b82f6"/>
+  <rect x="136" y="8" width="16" height="16" fill="#8a8a8a"/>
+  <rect x="136" y="40" width="16" height="32" fill="#3b82f6"/>
+  <rect x="152" y="8" width="16" height="16" fill="#8a8a8a"/>
+  <rect x="152" y="56" width="16" height="16" fill="#3b82f6"/>
+  <rect x="184" y="8" width="16" height="32" fill="#8a8a8a"/>
+  <rect x="184" y="40" width="16" height="32" fill="#3b82f6" opacity="0.25"/>
+  <rect x="200" y="8" width="16" height="16" fill="#8a8a8a"/>
+  <rect x="200" y="56" width="16" height="16" fill="#3b82f6"/>
+  <rect x="216" y="8" width="16" height="16" fill="#8a8a8a"/>
+  <rect x="216" y="56" width="16" height="16" fill="#3b82f6"/>
+  <rect x="248" y="8" width="16" height="32" fill="#8a8a8a" opacity="0.25"/>
+  <rect x="248" y="56" width="16" height="16" fill="#3b82f6"/>
+  <rect x="264" y="8" width="16" height="16" fill="#8a8a8a"/>
+  <rect x="264" y="40" width="16" height="32" fill="#3b82f6"/>
+</svg>
diff --git a/asset/logo-light.svg b/asset/logo-light.svg
new file mode 100644
index 0000000..375e75d
--- /dev/null
+++ b/asset/logo-light.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 80" width="288" height="80" role="img" aria-label="specs">
+  <title>specs</title>
+  <rect x="8" y="8" width="16" height="32" fill="#6f6f6f"/>
+  <rect x="8" y="56" width="16" height="16" fill="#1d4ed8"/>
+  <rect x="24" y="8" width="16" height="16" fill="#6f6f6f"/>
+  <rect x="24" y="40" width="16" height="32" fill="#1d4ed8" opacity="0.25"/>
+  <rect x="56" y="8" width="16" height="32" fill="#6f6f6f"/>
+  <rect x="56" y="40" width="16" height="32" fill="#1d4ed8"/>
+  <rect x="72" y="8" width="16" height="16" fill="#6f6f6f"/>
+  <rect x="72" y="40" width="16" height="16" fill="#1d4ed8"/>
+  <rect x="88" y="8" width="16" height="32" fill="#6f6f6f"/>
+  <rect x="88" y="40" width="16" height="16" fill="#1d4ed8"/>
+  <rect x="120" y="8" width="16" height="32" fill="#6f6f6f"/>
+  <rect x="120" y="40" width="16" height="32" fill="#1d4ed8"/>
+  <rect x="136" y="8" width="16" height="16" fill="#6f6f6f"/>
+  <rect x="136" y="40" width="16" height="32" fill="#1d4ed8"/>
+  <rect x="152" y="8" width="16" height="16" fill="#6f6f6f"/>
+  <rect x="152" y="56" width="16" height="16" fill="#1d4ed8"/>
+  <rect x="184" y="8" width="16" height="32" fill="#6f6f6f"/>
+  <rect x="184" y="40" width="16" height="32" fill="#1d4ed8" opacity="0.25"/>
+  <rect x="200" y="8" width="16" height="16" fill="#6f6f6f"/>
+  <rect x="200" y="56" width="16" height="16" fill="#1d4ed8"/>
+  <rect x="216" y="8" width="16" height="16" fill="#6f6f6f"/>
+  <rect x="216" y="56" width="16" height="16" fill="#1d4ed8"/>
+  <rect x="248" y="8" width="16" height="32" fill="#6f6f6f" opacity="0.25"/>
+  <rect x="248" y="56" width="16" height="16" fill="#1d4ed8"/>
+  <rect x="264" y="8" width="16" height="16" fill="#6f6f6f"/>
+  <rect x="264" y="40" width="16" height="32" fill="#1d4ed8"/>
+</svg>