diff --git a/src/_all.scss b/src/_all.scss
index 67965c2..c403ad6 100644
--- a/src/_all.scss
+++ b/src/_all.scss
@@ -1,4 +1,5 @@
 // Master SCSS entry for flavor build - imports all component styles
+@use './tokens';
 @use './AppBar';
 @use './Avatar';
 @use './Breadcrumbs';
diff --git a/src/_tokens.scss b/src/_tokens.scss
new file mode 100644
index 0000000..9d0a026
--- /dev/null
+++ b/src/_tokens.scss
@@ -0,0 +1,34 @@
+@use '@pepabo-inhouse/adapter' as adapter;
+
+// Publish inhouse design tokens as CSS custom properties so consumer
+// applications can reference them directly (e.g. `var(--wip-color-...)`)
+// without hardcoding hex values. The build pipeline in
+// `scripts/build-flavor-css.mjs` resolves adapter calls per flavor and
+// rescopes `:root` to `[data-flavor="xxx"]` for the combined stylesheet.
+
+// Color names are quoted so Sass treats them as identifiers in interpolation
+// (unquoted `red`, `green`, etc. would be parsed as the CSS color value).
+// Adapter functions also accept unquoted strings, so they continue to work.
+$primitive-mono: ('black', 'white');
+$primitive-spectrum: ('gray', 'blue', 'green', 'red', 'yellow');
+$spectrum-levels: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
+
+$semantic-intents: ('neutral', 'informative', 'positive', 'negative', 'notice');
+
+:root {
+  @each $name in $primitive-mono {
+    --wip-color-primitive-#{$name}-1000: #{adapter.get-primitive-color($name, 1000)};
+  }
+
+  @each $name in $primitive-spectrum {
+    @each $level in $spectrum-levels {
+      --wip-color-primitive-#{$name}-#{$level}: #{adapter.get-primitive-color($name, $level)};
+    }
+  }
+
+  @each $name in $semantic-intents {
+    @each $level in $spectrum-levels {
+      --wip-color-semantic-#{$name}-#{$level}: #{adapter.get-semantic-color($name, $level)};
+    }
+  }
+}
diff --git a/src/docs/Color.mdx b/src/docs/Color.mdx
index 2cc786e..0efaac3 100644
--- a/src/docs/Color.mdx
+++ b/src/docs/Color.mdx
@@ -78,6 +78,22 @@ wip-ui のカラーシステムは [inhouse のカラートークン](https://de
 - **Callout**: `informative`、`neutral`、`negative`、`notice`、`positive`
 - **Typography**: `high_emphasis`、`medium_emphasis`、`low_emphasis`、`informative`、`positive`、`notice`、`negative`
 
+## CSS 変数として参照する
+
+`wip-ui/styles.css` または `wip-ui/css/{flavor}.css` を読み込むと、カラートークンが CSS カスタムプロパティとして公開されます。アプリ側の CSS から直接参照できるので、`#f4f4f5` のようなハードコードは不要です。
+
+```css
+.my-card {
+  background-color: var(--wip-color-semantic-neutral-100);
+  color: var(--wip-color-semantic-neutral-800);
+}
+```
+
+- セマンティックカラー: `--wip-color-semantic-{intent}-{level}`（例: `--wip-color-semantic-neutral-100`）
+- プリミティブカラー: `--wip-color-primitive-{color}-{level}`（例: `--wip-color-primitive-gray-100`）
+
+コンポーネント実装と同様、アプリ側でも基本はセマンティックカラーを使用してください。
+
 ## アクセシビリティ
 
 色だけで情報を伝えないでください。色覚に依存しないよう、アイコンやテキストなど他の区別手段を併用してください。