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>

design.md

@@ -3,13 +3,13 @@ version: beta
 name: Kode Design Consultants Ltd Design System
 description: The official design system for Kode Design Consultants — tokens, components, and guidelines for building consistent KDC product and brand experiences.
 colors:
-  brand.primary: "rgb(11, 95, 255)"
-  brand.primaryHover: "#0848C2"
-  brand.primaryPressed: "#063494"
-  brand.secondary: "#FF6B00"
-  brand.accent: "#00C2A8"
+  brand.primary: "#6B35A7"
+  brand.primaryHover: "#582A8D"
+  brand.primaryPressed: "#45216E"
+  brand.ink: "#000000"
+  brand.canvas: "#F5F4F0"
   neutral.0: "#FFFFFF"
-  neutral.50: "#F7F8FA"
+  neutral.50: "#F5F4F0"
   neutral.100: "#EDEFF3"
   neutral.200: "#D9DCE3"
   neutral.300: "#B8BDC9"
@@ -31,48 +31,54 @@ colors:
   border.strong: "{colors.neutral.300}"
 typography:
   display:
-    fontFamily: "Inter"
-    fontSize: "48px"
+    fontFamily: "Opificio"
+    fontSize: "72px"
     fontWeight: 700
-    lineHeight: "56px"
-    letterSpacing: "-0.02em"
+    lineHeight: "80px"
+    letterSpacing: "-0.01em"
+  wordmarkSecondary:
+    fontFamily: "Manrope"
+    fontSize: "20px"
+    fontWeight: 200
+    lineHeight: "28px"
+    letterSpacing: "0.04em"
   headingXL:
-    fontFamily: "Inter"
+    fontFamily: "Manrope"
     fontSize: "32px"
     fontWeight: 700
     lineHeight: "40px"
   headingL:
-    fontFamily: "Inter"
+    fontFamily: "Manrope"
     fontSize: "24px"
     fontWeight: 600
     lineHeight: "32px"
   headingM:
-    fontFamily: "Inter"
+    fontFamily: "Manrope"
     fontSize: "20px"
     fontWeight: 600
     lineHeight: "28px"
   headingS:
-    fontFamily: "Inter"
+    fontFamily: "Manrope"
     fontSize: "16px"
     fontWeight: 600
     lineHeight: "24px"
   bodyL:
-    fontFamily: "Inter"
+    fontFamily: "Manrope"
     fontSize: "18px"
     fontWeight: 400
     lineHeight: "28px"
   bodyM:
-    fontFamily: "Inter"
+    fontFamily: "Manrope"
     fontSize: "16px"
     fontWeight: 400
     lineHeight: "24px"
   bodyS:
-    fontFamily: "Inter"
+    fontFamily: "Manrope"
     fontSize: "14px"
     fontWeight: 400
     lineHeight: "20px"
   caption:
-    fontFamily: "Inter"
+    fontFamily: "Manrope"
     fontSize: "12px"
     fontWeight: 500
     lineHeight: "16px"
@@ -176,9 +182,9 @@ KDS targets WCAG 2.2 AA at minimum across all components and themes.
 
 Color is organized in three layers:
 
-1. **Brand** — primary identity colors (`brand.primary`, `brand.secondary`, `brand.accent`).
-2. **Neutral** — a 12-step gray ramp powering surfaces, text, and borders.
-3. **Semantic** — meaning-bearing colors for status: success, warning, danger, info.
+1. **Brand** — the four-color brand palette: `brand.primary` (`#6B35A7` purple), `brand.ink` (`#000000`), `neutral.0` (`#FFFFFF`), and `brand.canvas` (`#F5F4F0` off-white).
+2. **Neutral** — a 12-step gray ramp powering surfaces, text, and borders. `neutral.50` is set to `brand.canvas` so the off-white reads as the natural page surface.
+3. **Semantic** — meaning-bearing colors for status: success, warning, danger, info. These sit alongside the brand palette but are not part of brand identity.
 
 Always reference *role* tokens (`text.default`, `surface.subtle`, `border.default`) in product code rather than raw palette values, so themes can swap without churn.
 
@@ -190,11 +196,18 @@ Contrast minimums:
 
 ## Typography
 
-The primary typeface is **Inter** (variable, 100–900). The monospace companion is **Roboto Mono**, used only for code, tabular figures, and technical content.
+KDS uses two brand typefaces:
 
-The scale is a modular 8-step ramp (`caption` → `display`). Use semantic tokens (`headingL`, `bodyM`) — never hardcode `font-size`. Body copy defaults to `bodyM`/16px with a 1.5 line-height for readability. Display sizes use tighter tracking (`-0.02em`) to prevent airy letterspacing at large sizes.
+- **Opificio Bold** — reserved for the **kode** wordmark and headline display moments. Available in Bold, Rounded, and Regular cuts; Bold is the canonical brand weight.
+- **Manrope** — the working typeface for all UI: headings, body, captions, and the secondary wordmark line ("design consultants"). Use the full weight ramp: ExtraLight (200), Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800).
 
-Web fonts are self-hosted from `assets/fonts/` and preloaded for the two most common weights (400, 600).
+The wordmark lockup pairs them: primary line in Opificio Bold (72pt, 52pt spacing), secondary line in Manrope ExtraLight (20pt, 76pt spacing).
+
+The UI scale is a modular 8-step ramp (`caption` → `display`). Use semantic tokens (`headingL`, `bodyM`) — never hardcode `font-size`. Body copy defaults to `bodyM`/16px with a 1.5 line-height for readability.
+
+A monospace stack (Roboto Mono fallback to system mono) is available for code and tabular figures only — it is **not** part of the brand identity.
+
+Web fonts are self-hosted from `assets/fonts/` and preloaded for Manrope Regular (400) and SemiBold (600), plus Opificio Bold for the wordmark.
 
 ## Layout