Migrate from Penpot to Figma and add NSW brand colour palette

Replace self-hosted Penpot MCP references with the official Figma Remote
MCP server (OAuth, HTTP transport). Swap placeholder semantic colours in
tokens.css for the NSW Design System brand palette extracted from Figma
(blues, reds, oranges, greens, greys) and add typography size tokens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.claude/settings.json

@@ -33,19 +33,10 @@
       "WebFetch(domain:vite.dev)",
       "WebFetch(domain:github.com)",
       "WebFetch(domain:npmjs.com)",
-      "WebFetch(domain:help.penpot.app)",
+      "WebFetch(domain:figma.com)",
-      "WebFetch(domain:penpot.app)",
+      "WebFetch(domain:help.figma.com)",
+      "WebFetch(domain:developers.figma.com)",
       "WebFetch(domain:developer.mozilla.org)"
     ]
-  },
-  "mcpServers": {
-    "storybook": {
-      "type": "http",
-      "url": "http://localhost:6006/mcp"
-    },
-    "penpot": {
-      "type": "http",
-      "url": "http://localhost:4401/mcp"
-    }
   }
 }

ARCHITECTURE.md

@@ -16,8 +16,8 @@ SDC-Frontend is a React component library and design system that will serve as t
 ## 2. Token Pipeline
 
 ```
-Penpot (design tool, self-hosted)
+Figma (design tool)
-  ↓  Penpot MCP / manual export
+  ↓  Figma MCP / get_variable_defs
 src/tokens/tokens.css (@theme block)
   ↓  Tailwind CSS v4 reads @theme
   ↓  Generates utility classes + CSS custom properties
@@ -101,11 +101,11 @@ src/
 
 ## 7. Design Tool Integration
 
-### Penpot (self-hosted at 192.168.50.211:9001)
+### Figma
-- MCP server runs locally via `npx @penpot/mcp@stable` (port 4401)
+- Project file: https://www.figma.com/design/mrabO6AtxN3ektGiTk0I9c/ResearchInsights (file key: `mrabO6AtxN3ektGiTk0I9c`)
-- MCP plugin must be installed and active in the Penpot browser session
+- MCP server: Official Figma Remote MCP at `https://mcp.figma.com/mcp` (HTTP transport, OAuth auth)
-- Tools available: `high_level_overview`, `execute_code`, `penpot_api_info`, `export_shape`, `import_image`
+- Key tools: `get_design_context`, `get_variable_defs`, `get_screenshot`, `search_design_system`, `use_figma`
-- Design tokens in Penpot use W3C DTCG format — export as JSON, convert to `@theme` values
+- Design tokens extracted via `get_variable_defs` → mapped to `@theme` values in `tokens.css`
 
 ### Storybook MCP
 - Available at `localhost:6006/mcp` when Storybook dev server is running

CLAUDE.md

@@ -15,7 +15,7 @@ Before beginning any significant piece of work, write a plan as a markdown file
 Before choosing a library, pattern, or approach: identify your options, research the latest documentation (don't rely on training knowledge for version-specific details), verify it works within the project constraints, and state your reasoning — especially when you considered and rejected alternatives.
 
 ### Ask, Don't Assume
-If you need information you don't have — about infrastructure, the team's workflow, the Penpot setup, design intent, or anything unclear — ask me. Do not fill gaps with assumptions. A question costs a moment; a wrong assumption costs hours.
+If you need information you don't have — about infrastructure, the team's workflow, the Figma setup, design intent, or anything unclear — ask me. Do not fill gaps with assumptions. A question costs a moment; a wrong assumption costs hours.
 
 ### Architecture Governance
 `ARCHITECTURE.md` is the living contract for this project. Before starting any task, re-read the relevant section. If you need to deviate, propose the change to me first, then update the document. If you discover something new, add it. Never let the codebase and architecture drift apart.
@@ -124,15 +124,17 @@ import { cn } from '@/lib/utils'
 
 ## MCP Integrations
 
-- **Penpot MCP** — reads design specs from the self-hosted Penpot instance. Requires Penpot open in browser with the MCP plugin active, and `npx @penpot/mcp@stable` running locally.
+MCP servers are configured via `claude mcp add` (stored in `~/.claude.json`) or `.mcp.json` in the project root. **Do not** put `mcpServers` in `.claude/settings.json` or `.claude/settings.local.json` — Claude Code ignores MCP config in those files.
-- **Storybook MCP** — runs at `localhost:6006/mcp` alongside the Storybook dev server. Provides component docs, story generation, and a11y testing.
+
+- **Figma MCP** — Official Figma Remote MCP server at `https://mcp.figma.com/mcp`. Uses HTTP transport with OAuth authentication. Add via: `claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp`, then authenticate when prompted. Project file: `https://www.figma.com/design/mrabO6AtxN3ektGiTk0I9c/ResearchInsights` (file key: `mrabO6AtxN3ektGiTk0I9c`).
+- **Storybook MCP** — runs at `localhost:6006/mcp` alongside the Storybook dev server. Provides component docs, story generation, and a11y testing. Add via: `claude mcp add --transport http storybook http://localhost:6006/mcp`
 
 ### Design-to-Code Workflow
-1. Use Penpot MCP `high_level_overview` to understand the design file
+1. Use Figma MCP `get_design_context` to inspect a selected component or frame
-2. Use `execute_code` with `findShapes()` to inspect specific components
+2. Use `get_variable_defs` to extract design variables (colours, typography, spacing)
-3. Extract CSS with `penpot.generateStyle()`
+3. Map variables to design tokens in `src/tokens/tokens.css`
-4. Build React component using design tokens from `src/tokens/tokens.css`
+4. Build React component using design tokens
-5. Verify in Storybook that the component matches the Penpot design
+5. Verify in Storybook that the component matches the Figma design
 
 ---
 

src/tokens/tokens.css

@@ -1,29 +1,63 @@
 @theme {
-  /* Surface colors */
+  /* Typography - Font Family */
-  --color-bg: #f5f6f8;
+  --font-sans: 'Public Sans Variable', system-ui, sans-serif;
-  --color-surface: #ffffff;
-  --color-border: #e2e5ea;
 
-  /* Text colors */
+  /* Typography - Font Sizes & Line Heights */
-  --color-text: #1a1d23;
+  --text-h1: 48px;
-  --color-text-secondary: #5f6672;
+  --text-h1--line-height: 1.25;
+  --text-h2: 32px;
+  --text-h2--line-height: 1.25;
+  --text-h3: 24px;
+  --text-h3--line-height: 1.333;
+  --text-h4: 20px;
+  --text-h4--line-height: 1.4;
+  --text-h5: 16px;
+  --text-h5--line-height: 1.5;
+  --text-h6: 14px;
+  --text-h6--line-height: 1.43;
+  --text-intro: 20px;
+  --text-intro--line-height: 1.4;
+  --text-body: 16px;
+  --text-body--line-height: 1.5;
+  --text-small: 14px;
+  --text-small--line-height: 1.357;
+  --text-caption: 12px;
+  --text-caption--line-height: 1.5;
 
-  /* Primary */
+  /* Blues */
-  --color-primary: #2563eb;
+  --color-blue-01: #002664;
-  --color-primary-hover: #1d4ed8;
+  --color-blue-02: #146CFD;
-  --color-primary-light: #eff4ff;
+  --color-blue-03: #69B3E7;
+  --color-blue-04: #CBEDFD;
+  --color-blue-05: #EBF5FF; /* extrapolated: ultra-light background */
 
-  /* Semantic: Success */
+  /* Reds */
-  --color-success: #16a34a;
+  --color-red-01: #3E0014;
-  --color-success-bg: #dcfce7;
+  --color-red-02: #D7153A;
+  --color-red-03: #F5C5D0;
+  --color-red-04: #FDDDE5;
+  --color-red-05: #FFF5F8; /* extrapolated: ultra-light background */
 
-  /* Semantic: Warning */
+  /* Oranges */
-  --color-warning: #d97706;
+  --color-orange-01: #7A3300; /* extrapolated: dark */
-  --color-warning-bg: #fef9c3;
+  --color-orange-02: #EC6608;
+  --color-orange-03: #F5B98A;
+  --color-orange-04: #FEF0E4; /* extrapolated: light background */
 
-  /* Semantic: Error */
+  /* Greens */
-  --color-error: #dc2626;
+  --color-green-01: #005C35; /* extrapolated: dark */
-  --color-error-bg: #fee2e2;
+  --color-green-02: #00A651;
+  --color-green-03: #89E5B3;
+  --color-green-04: #E0F8EA; /* extrapolated: light background */
+
+  /* Greys */
+  --color-grey-01: #3D3D3D;
+  --color-grey-02: #6D7278;
+  --color-grey-03: #C0C0C0;
+  --color-grey-04: #E0E0E0;
+  --color-off-white: #F4F4F4;
+  --color-surface: #FAFAFA;
+  --color-white: #FFFFFF;
 
   /* Radius */
   --radius-sm: 4px;