diff --git a/README.md b/README.md
index 49a969f..c76f79f 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,10 @@
Hand-drawn, sketchy React charts and flowcharts.
+   
+
+> These badges? We ship them. See [`Badge`](src/components/Badge.tsx) and the `render-badge` / `render-github-badge` MCP tools.
+
**D3 does the math. Rough.js does the drawing. A Vibe engine dials in the aesthetic.**
diff --git a/assets/badges/drawn-with.svg b/assets/badges/drawn-with.svg
new file mode 100644
index 0000000..bbd4344
--- /dev/null
+++ b/assets/badges/drawn-with.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/badges/license.svg b/assets/badges/license.svg
new file mode 100644
index 0000000..94ec89d
--- /dev/null
+++ b/assets/badges/license.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/badges/npm.svg b/assets/badges/npm.svg
new file mode 100644
index 0000000..5b3ea2f
--- /dev/null
+++ b/assets/badges/npm.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/badges/vibe.svg b/assets/badges/vibe.svg
new file mode 100644
index 0000000..7077478
--- /dev/null
+++ b/assets/badges/vibe.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/scripts/render-readme-badges.mjs b/scripts/render-readme-badges.mjs
new file mode 100644
index 0000000..136aa22
--- /dev/null
+++ b/scripts/render-readme-badges.mjs
@@ -0,0 +1,50 @@
+// Render the static badge row that lives at the top of README.md.
+// Eats our own dog food: uses the new Badge component to produce its own
+// marketing badges. Re-run when you bump the version or want to refresh the
+// look:
+//
+// npm run build
+// node scripts/render-readme-badges.mjs
+//
+// Writes SVGs into assets/badges/*.svg.
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { createElement as h } from 'react';
+import { Badge } from '../dist/index.js';
+import { renderToSVGString } from '../dist/server.js';
+
+const outDir = join(process.cwd(), 'assets', 'badges');
+mkdirSync(outDir, { recursive: true });
+
+// Use a system font (sans-serif) to keep the README badges tiny — embedding
+// the bundled Caveat font would bloat each SVG to ~70 KB. GitHub renders SVGs
+// as resources, so the four-badge row would weigh ~280 KB. Sacrificing
+// the script-y font on the badges is worth it for the README chrome.
+const BRAND = {
+ palette: ['#3a4f63', '#c47a3a'],
+ font: 'sans-serif',
+};
+
+const badges = [
+ { file: 'npm.svg', label: 'npm', value: 'v0.2.0', tone: 'info', icon: 'tag' },
+ { file: 'license.svg', label: 'license', value: 'MIT', tone: 'neutral', icon: 'license' },
+ { file: 'drawn-with.svg', label: 'drawn with', value: 'rough.js', tone: 'neutral' },
+ { file: 'vibe.svg', label: 'default vibe', value: 'chaotic_notebook', tone: 'info', icon: 'star' },
+];
+
+for (const b of badges) {
+ const svg = renderToSVGString(
+ h(Badge, {
+ label: b.label,
+ value: b.value,
+ tone: b.tone,
+ icon: b.icon,
+ brand: BRAND,
+ seed: 7,
+ }),
+ );
+ writeFileSync(join(outDir, b.file), svg);
+ console.log(` ${b.file}`);
+}
+
+console.log(`\nWrote ${badges.length} badges → ${outDir}`);