diff --git a/scratch/design-kit/README.md b/scratch/design-kit/README.md
index 7dd8d18..9ca42f6 100644
--- a/scratch/design-kit/README.md
+++ b/scratch/design-kit/README.md
@@ -22,10 +22,11 @@ the card's group; the Design System pane uses it to build its index.
- Markup in the cards mirrors real call sites in `src/lib/components/` and
`src/routes/`. When a primitive's markup changes in the app, update its
card.
-- Fonts: the app loads Hanken Grotesk, Spectral, and JetBrains Mono via
- fontsource. The kit does not, so previews fall back to the system stacks
- declared in the tokens. Shapes and colours are accurate; letterforms are
- approximate.
+- Fonts: `fonts.css` bundles the real families (Hanken Grotesk, Spectral,
+ JetBrains Mono; latin subsets, SIL OFL) copied from the same fontsource
+ packages the app loads, so previews use the actual letterforms. When the
+ app's font versions change, re-copy the woff2 files from
+ `node_modules` into `fonts/`.
## Viewing locally
@@ -39,11 +40,12 @@ present to approve the plan):
1. `list_projects`, or `create_project` the first time.
2. `finalize_plan` with writes for `styles/*.css`, `*.html`, `kit.css`,
- and `kit.js`, with this directory as `localDir`.
-3. `write_files` uploading the stylesheets into the project's `styles/`
- and the cards plus the two kit scaffold files at the project root. The
- symlink means `localPath: styles/tokens.css` resolves to the shipped
- file.
+ `kit.js`, `fonts.css`, and `fonts/*.woff2`. Use the repository root as
+ `localDir`: the tool refuses to read through the `styles/` symlink
+ (it resolves outside this directory), so the stylesheets upload from
+ `src/lib/styles/` directly.
+3. `write_files` uploading the stylesheets into the project's `styles/`,
+ and the cards, scaffold, and font files at their kit-relative paths.
Re-run the sync whenever a primitive or token changes. The sync is one-way,
repo to project; never edit the system inside the project.
diff --git a/scratch/design-kit/fonts.css b/scratch/design-kit/fonts.css
new file mode 100644
index 0000000..aff8cdc
--- /dev/null
+++ b/scratch/design-kit/fonts.css
@@ -0,0 +1,44 @@
+/* The real families, latin subsets, copied from the fontsource packages
+ the app loads (all SIL OFL). Family names match tokens.css. */
+@font-face {
+ font-family: 'Hanken Grotesk Variable';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 100 900;
+ src: url(./fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
+}
+@font-face {
+ font-family: 'Spectral';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 400;
+ src: url(./fonts/spectral-latin-400-normal.woff2) format('woff2');
+}
+@font-face {
+ font-family: 'Spectral';
+ font-style: italic;
+ font-display: swap;
+ font-weight: 400;
+ src: url(./fonts/spectral-latin-400-italic.woff2) format('woff2');
+}
+@font-face {
+ font-family: 'Spectral';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 500;
+ src: url(./fonts/spectral-latin-500-normal.woff2) format('woff2');
+}
+@font-face {
+ font-family: 'Spectral';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 600;
+ src: url(./fonts/spectral-latin-600-normal.woff2) format('woff2');
+}
+@font-face {
+ font-family: 'JetBrains Mono Variable';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 100 800;
+ src: url(./fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
+}
diff --git a/scratch/design-kit/fonts/hanken-grotesk-latin-wght-normal.woff2 b/scratch/design-kit/fonts/hanken-grotesk-latin-wght-normal.woff2
new file mode 100644
index 0000000..518e2c4
Binary files /dev/null and b/scratch/design-kit/fonts/hanken-grotesk-latin-wght-normal.woff2 differ
diff --git a/scratch/design-kit/fonts/jetbrains-mono-latin-wght-normal.woff2 b/scratch/design-kit/fonts/jetbrains-mono-latin-wght-normal.woff2
new file mode 100644
index 0000000..cd5102a
Binary files /dev/null and b/scratch/design-kit/fonts/jetbrains-mono-latin-wght-normal.woff2 differ
diff --git a/scratch/design-kit/fonts/spectral-latin-400-italic.woff2 b/scratch/design-kit/fonts/spectral-latin-400-italic.woff2
new file mode 100644
index 0000000..1e0f383
Binary files /dev/null and b/scratch/design-kit/fonts/spectral-latin-400-italic.woff2 differ
diff --git a/scratch/design-kit/fonts/spectral-latin-400-normal.woff2 b/scratch/design-kit/fonts/spectral-latin-400-normal.woff2
new file mode 100644
index 0000000..71700f8
Binary files /dev/null and b/scratch/design-kit/fonts/spectral-latin-400-normal.woff2 differ
diff --git a/scratch/design-kit/fonts/spectral-latin-500-normal.woff2 b/scratch/design-kit/fonts/spectral-latin-500-normal.woff2
new file mode 100644
index 0000000..440edbb
Binary files /dev/null and b/scratch/design-kit/fonts/spectral-latin-500-normal.woff2 differ
diff --git a/scratch/design-kit/fonts/spectral-latin-600-normal.woff2 b/scratch/design-kit/fonts/spectral-latin-600-normal.woff2
new file mode 100644
index 0000000..3f56161
Binary files /dev/null and b/scratch/design-kit/fonts/spectral-latin-600-normal.woff2 differ
diff --git a/scratch/design-kit/kit.css b/scratch/design-kit/kit.css
index c84342f..c75704c 100644
--- a/scratch/design-kit/kit.css
+++ b/scratch/design-kit/kit.css
@@ -1,3 +1,5 @@
+@import './fonts.css';
+
/* Card scaffold shared by every preview. The system CSS comes from
styles/; this file only lays out the three theme panes. */
body {
diff --git a/scratch/design-kit/type.html b/scratch/design-kit/type.html
index 6017fcb..3a0c34f 100644
--- a/scratch/design-kit/type.html
+++ b/scratch/design-kit/type.html
@@ -47,9 +47,9 @@
- The kit falls back to system faces; the app loads the real families via fontsource.
- Sizes are ad hoc today; a small named ramp is proposed in the primitive consolidation
- brief.
+ The kit bundles the real families (latin subsets of the same fontsource files the app
+ loads). Sizes are ad hoc today; a small named ramp is proposed in the primitive
+ consolidation brief.