@@ -10,6 +10,7 @@
 ### Added
 
 - **16 theme keys for fonts, dividers and corners** (additive; every one defaults to exactly what the grid drew before). `grid.headerFontFamily` / `headerFontWeight` / `cellFontFamily` / `cellFontWeight` (`--ogx-grid-header-font-family`, `--ogx-grid-header-font-weight` default 600, `--ogx-grid-cell-font-family`, `--ogx-grid-cell-font-weight`), `grid.headerPaddingX` (`--ogx-grid-header-padding-x`, defaults to the cell padding), `grid.borderWidth` (`--ogx-grid-border-width`, 1px) and `grid.borderRadius` (`--ogx-grid-border-radius`, defaults to `--ogx-border-radius-lg`), `grid.columnDividerWidth` / `headerColumnDividerWidth` / `rowDividerWidth` (`--ogx-grid-column-divider-width`, `--ogx-grid-header-column-divider-width`, `--ogx-grid-row-divider-width`, 1px; `0` hides them) and `grid.columnDividerColor` / `rowDividerColor` (`--ogx-grid-column-divider-color`, `--ogx-grid-row-divider-color`, default the grid border colour), and `overlays.fontFamily` / `fontWeight` / `fontSize` (`--ogx-overlay-font-*`) for the column menu, header filter menu, toolbar panels and AI panel. The hard-coded 1px divider borders of cells, rows, header rows, column-group rows, the header filter row, aggregation footer cells and the right-pinned edge now read these variables (logical `border-inline-*` properties kept). A new browser test (`lib/theme/defaultThemeBaseline.browser.test.tsx`) compares computed styles and element boxes of eleven grids (plain, pinned with column groups and selection, dark and compact presets, header filters and their menu, aggregation footer, toolbar panels, column menu) with a baseline captured before the change, in Chromium, Firefox and WebKit: no differences. Guide: *Fonts, dividers and corners* and the *hide the dividers* recipe in `docs/customization/theming.md`.
+- **Theme Builder demo page** (`/theme-builder`, under Customization, linked from the Theming page). Grouped, collapsible controls with a reset each: colour picker plus text field, font family (presets or custom), weight 300–800 and size, sliders for heights, padding, widths and radius, and show/hide switches for body column dividers, header dividers and row dividers (they set the width to 0). A live preview grid (toolbar, pinned column, selected row, row grouping, density switch, a button that opens the column menu) in `DataGridThemeProvider`. A Light / Dark switch picks which theme is edited and previewed; "Start from" loads a built-in preset. Copy theme (TypeScript, only values that differ from the defaults, light, dark or both; clipboard API with a fallback), Download `.ts`, Share via URL (`#theme=…`, restored on load). WCAG AA contrast hints for seven text/background pairs (warnings only) and a collapsed Advanced JSON editor for every theme key. Controls move into a drawer when the page is narrower than about 1,060 px. The demo smoke test also runs it in Firefox and WebKit.
 
 ### Internal
 
 
@@ -5,6 +5,8 @@ OpenGridX ships with a complete design-token system built on CSS custom properti
 1. **`DataGridThemeProvider`** — the recommended React API (maps a typed `GridTheme` object → CSS variables)
 2. **Raw CSS override** — set any `--ogx-*` variable yourself on a wrapper element or `:root`
 
+To design a theme without writing code, use the **[Theme Builder](https://opencorestack.github.io/OpenGridX/theme-builder)** demo page: controls for colours, fonts, sizes, borders and dividers, buttons and menus, edited separately for light and dark mode on a live grid, with WCAG AA contrast hints. It copies or downloads the result as a `GridTheme` (only the values that differ from the defaults) and can share it as a link (`#theme=…`).
+
 ---
 
 ## Quick Start — `DataGridThemeProvider`
 
@@ -1,6 +1,6 @@
 # Theme Builder demo page — proposal
 
-Status: **proposal, awaiting approval** · Target: next minor (with the new theme keys it needs)
+Status: **approved 2026-10-13 — implemented** · Target: next minor (with the new theme keys it needs)
 
 ## Goal