feat(brand): adopt official Kode brand guidelines

- Brand palette: purple #6B35A7 (primary), #000000 (ink), #FFFFFF, #F5F4F0 (canvas)
- Typography: Manrope (UI, 200-800) + Opificio Bold (wordmark/display); drop Inter
- design.md: add wordmarkSecondary token, new display scale (Opificio 72/80)
- foundations: refresh swatches and typography README to match guidelines
- assets/fonts: replace Inter folder with Manrope; add Opificio cuts (Bold/Rounded/Regular)
- fonts.css: register Manrope variable + Opificio cuts; keep Roboto Mono for code only
- examples/web: render the kode wordmark lockup on the off-white canvas
- brand-guidelines: real specs (lockup, palette, typography, logo variant rules)
- README: add brand-at-a-glance, bump version to beta

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

assets/fonts/fonts.css

@@ -1,14 +1,41 @@
-/* KDC Design System — font-face declarations.
+/* Kode Design Consultants — font-face declarations.
    Self-host these files from /assets/fonts/. */
 
+/* Manrope — primary UI typeface (variable, 200–800). */
 @font-face {
-  font-family: "Inter";
+  font-family: "Manrope";
   font-style: normal;
-  font-weight: 100 900;
+  font-weight: 200 800;
   font-display: swap;
-  src: url("./Inter/Inter-Regular.woff2") format("woff2");
+  src: url("./Manrope/Manrope-Variable.woff2") format("woff2-variations"),
+       url("./Manrope/Manrope-Regular.woff2") format("woff2");
 }
 
+/* Opificio — display / wordmark only.
+   Three cuts: Bold (canonical), Rounded, Regular. */
+@font-face {
+  font-family: "Opificio";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./Opificio/Opificio-Bold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Opificio Rounded";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./Opificio/Opificio-Rounded.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Opificio";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./Opificio/Opificio-Regular.woff2") format("woff2");
+}
+
+/* Roboto Mono — code / tabular figures only. Not a brand typeface. */
 @font-face {
   font-family: "Roboto Mono";
   font-style: normal;