diff --git a/packages/adapter/functions/_helpers.scss b/packages/adapter/functions/_helpers.scss
index c094dbb..6a179ab 100644
--- a/packages/adapter/functions/_helpers.scss
+++ b/packages/adapter/functions/_helpers.scss
@@ -7,118 +7,292 @@
 @use "@pepabo-inhouse/constants/variables" as constants;
 @use "../error-message";
 
+/// 状態のパターンを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-states()
+///   // enabled, hover, focused, selected, activated, dragged, disabled, mixed,
 @function get-states() {
   @return constants.$states;
 }
 
+/// セマンティックカラーの名称を配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-semantic-intentions()
+///   // informative, neutral, positive, notice, negative, attention,
 @function get-semantic-intentions() {
   @return constants.$semantic-intentions;
 }
 
+/// Implicationのタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-implications()
+///   // interactive, favorite, rate
 @function get-implications() {
   @return constants.$implications;
 }
 
+/// 行間の密度のタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-densities()
+///   // dense,normal,comfort
 @function get-densities() {
   @return constants.$densities;
 }
 
+/// （テキストなどの）強調を表すタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-emphasises()
+///   // high_emphasis, mid_emphasis, low_emphasis
 @function get-emphasises() {
   @return constants.$emphasises;
 }
 
+/// サイズのタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-sizes()
+///   // xxs, xs, s, m, l, xl, xxl, xxxl
 @function get-sizes() {
   @return constants.$sizes;
 }
 
+/// （アニメーションなどにおける）transitionの値を取得します
+///
+/// @group helper
+/// @example
+///   functions.get-transition-value()
+///   // 0
 @function get-transition-value() {
   @return constants.$transition-value;
 }
 
+/// （カラーの指定などに利用する）優先度のタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-priorities()
+///   // primary, secondary, tertiary
 @function get-priorities() {
   @return constants.$priorities;
 }
 
+/// シェイプのパターンを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-shapes()
+///   // circle, square
 @function get-shapes() {
   @return constants.$shapes;
 }
 
+/// 明るさ（ライトモード/ダークモード）のタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-brightnesses()
+///   // light, dark
 @function get-brightnesses() {
   @return constants.$brightnesses;
 }
 
+/// 幅のサイズタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-widths()
+///   // auto, full, half, third
 @function get-widths() {
   @return constants.$widths;
 }
 
+/// 並び順のタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-orders()
+///   // asc, desc
 @function get-orders() {
   @return constants.$orders;
 }
 
+/// positionのパターンを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-positions()
+///   // relative, fixed, sticky
 @function get-positions() {
   @return constants.$positions;
 }
 
+/// Elevationのレベルを配列で取得します
+///
+/// @group helper
+/// @example
+///   function.get-elevation-levels
+///   // 0, 1, 2, 3, 4, 5, 6
 @function get-elevation-levels() {
   @return constants.$elevation-levels;
 }
 
+/// Layerのレベルを配列で取得します
+///
+/// @group helper
+/// @example
+///   function.get-layer-levels()
+///   // 1, 2, 3, 4, 5, 6
 @function get-layer-levels() {
   @return constants.$layer-levels;
 }
 
+/// Minor Stackを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-minor-stack-types()
+///   // over, on
 @function get-minor-stack-types() {
   @return constants.$minor-stack-types;
 }
 
+/// ヘッダーのアピアランス（表現）タイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-header-appearances()
+///   // white, filled, transparent
 @function get-header-appearances() {
   @return constants.$header-appearances;
 }
 
+/// scrimの表示スタイルを表すタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-scrim-appearances()
+///   // hollow, transparent
 @function get-scrim-appearances() {
   @return constants.$scrim-appearances;
 }
 
+/// ボトムナビゲーションのアピアランス（表現）タイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-bottom-navigation-appearances()
+///   // white, outline
 @function get-bottom-navigation-appearances() {
   @return constants.$bottom-navigation-appearances;
 }
 
+/// ボトムナビゲーションに配置できるアイテムの最小値を取得します
+///
+/// @group helper
+/// @example
+///   functions.get-bottom-navigation-item-min-length()
+///   // 3
 @function get-bottom-navigation-item-min-length() {
   @return constants.$bottom-navigation-item-min-length;
 }
 
+/// ボトムナビゲーションに配置できるアイテムの最大値を取得します
+///
+/// @group helper
+/// @example
+///   functions.get-bottom-navigation-item-max-length()
+///   // 5
 @function get-bottom-navigation-item-max-length() {
   @return constants.$bottom-navigation-item-max-length;
 }
 
+/// ボタンのアピアランス（表現）タイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-button-appearances()
+///   // flat, outlined, solid, white, transparent, hollow
 @function get-button-appearances() {
   @return constants.$button-appearances;
 }
 
+/// ボタンのカラータイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-button-colors()
+///   // neutral, negative, interactive, favorit
 @function get-button-colors() {
   @return constants.$button-colors;
 }
 
+/// セルのサイズパターンを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-cell-sizes()
+///   // s, m, l
 @function get-cell-sizes() {
   @return constants.$cell-sizes;
 }
 
+/// avatarのサイズを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-avatar-sizes()
+///   // xs, s, m, l
 @function get-avatar-sizes() {
   @return constants.$avatar-sizes;
 }
 
+/// Interactive Tableのアラインタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   function.get-interactive-table-align-values()
+///   // start, end
 @function get-interactive-table-align-values() {
   @return constants.$interactive-table-align-values;
 }
 
+/// tableのアラインタイプを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-table-align-values()
+///   // start, end
 @function get-table-align-values() {
   @return constants.$table-align-values;
 }
 
+/// thumbnailのサイズパターンを配列で取得します
+///
+/// @group helper
+/// @example
+///   functions.get-thumbnail-sizes()
+///   // s, m, l
 @function get-thumbnail-sizes() {
   @return constants.$thumbnail-sizes;
 }
 
+/// 背景色がlightかdarkかを判定します
+///
+/// @group helper
+/// @example
+///   functions.get-background-brightness(#ffffff)
+///   // light
 @function get-background-brightness($background-color) {
   $min-contrast: 3.1;
 
@@ -131,10 +305,22 @@
   }
 }
 
+/// Major Stackの範囲を配列で取得します
+///
+/// @group helper
+/// @example
+///    functions.get-major-stack-range()
+///    10000
 @function get-major-stack-range() {
   @return constants.$major-stack-range;
 }
 
+/// Major Stack対応するz-indexを取得します
+///
+/// @group helper
+/// @example
+///    functions.get-major-stack-z-index($layer: 2)
+///    20000
 @function get-major-stack-z-index($layer: 1) {
   $available-layer-levels: get-layer-levels();
 
@@ -148,10 +334,22 @@
   @return get-major-stack-range() * $layer;
 }
 
+/// ElevationのMinor Stack(over)の範囲を取得します
+///
+/// @group helper
+/// @example
+///   functions.get-minor-stack-over-range()
+///   // 1000
 @function get-minor-stack-over-range() {
   @return constants.$minor-stack-over-range;
 }
 
+/// ElevationのMinor Stack(on)の範囲を取得します
+///
+/// @group helper
+/// @example
+///   functions.get-minor-stack-on-range()
+///   // 10
 @function get-minor-stack-on-range() {
   @return constants.$minor-stack-on-range;
 }
@@ -160,6 +358,12 @@
   @return constants.$minor-stack-types;
 }
 
+/// マイナースタックを表すz-indexを取得します
+///
+/// @group helper
+/// @example
+///   functions.get-minor-stack-z-index($type: over, $level: 2)
+///   // 2000
 @function get-minor-stack-z-index($type: over, $level: 1) {
   $available-types: get-minor-stack-types();
   $available-levels: get-elevation-levels();
@@ -185,6 +389,12 @@
   }
 }
 
+/// ボタンのoverlayタイプを取得します
+///
+/// @group helper
+/// @example
+///   functions.get-button-background-overlay-brightness(flat,  light,  light)
+///   // light
 @function get-button-background-overlay-brightness(
   $appearance: flat,
   $brightness: light,
@@ -198,16 +408,31 @@
   }
 }
 
+/// （未使用？）
+///
+/// @group helper
 @function get-foreground-brightness($background-color) {
   @return if(get-foreground-brightness($background-color) == dark, light, dark);
 }
 
+/// 値が数値かどうかを判定します
+///
+/// @group helper
+/// @example
+///   functions.is-number(3)
+///   // true
 @function is-number($value) {
   @return meta.type-of($value) == "number";
 }
 
 $available-hexadecimal-chars: "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "A", "B", "C", "D", "E", "F";
 
+/// 値がカラーコードかどうかを判定します
+///
+/// @group helper
+/// @example
+///   functions.is-color-code(#000000)
+///   // true
 @function is-color-code($value) {
   $length: string.length("#{$value}");
 
@@ -231,8 +456,8 @@ $available-hexadecimal-chars: "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
   @return true;
 }
 
-// 二色間のコントラスト比を計算する
-// 参考: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// 二色間のコントラスト比を計算する
+/// 参考: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function -compose-contrast-ratio($background, $foreground) {
   $background-luminance: -compose-luminance($background) + 0.05;
   $foreground-luminance: -compose-luminance($foreground) + 0.05;
@@ -240,8 +465,8 @@ $available-hexadecimal-chars: "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
   @return math.div(math.max($background-luminance, $foreground-luminance), math.min($background-luminance, $foreground-luminance));
 }
 
-// 輝度を計算する
-// 参考: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// 輝度を計算する
+/// 参考: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function -compose-luminance($color) {
   $red: -compose-linear-channel-value(color.red($color));
   $green: -compose-linear-channel-value(color.green($color));
diff --git a/packages/adapter/functions/color/_background.scss b/packages/adapter/functions/color/_background.scss
index 47f9897..7a70bb5 100644
--- a/packages/adapter/functions/color/_background.scss
+++ b/packages/adapter/functions/color/_background.scss
@@ -9,6 +9,12 @@ $background-color-tokens: map.get(
   background
 );
 
+/// 汎用的に使えるbackground colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-background-color($name: light, $type: well)
+///   // ”f7f8fa”
 @function get-background-color($name: light, $type: base) {
   $base-tokens: map.get($background-color-tokens, base);
   $brand-colors: brand, accent;
@@ -51,6 +57,12 @@ $background-color-tokens: map.get(
   }
 }
 
+/// モーダルなオーバーレイなどで使うscrimのbackground colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-scrim-background-color()
+///   // ”rgba(0, 0, 0, 0.32)”
 @function get-scrim-background-color() {
   @return map.get($background-color-tokens, scrim);
 }
diff --git a/packages/adapter/functions/color/_border.scss b/packages/adapter/functions/color/_border.scss
index c292fe2..8bbd8c3 100644
--- a/packages/adapter/functions/color/_border.scss
+++ b/packages/adapter/functions/color/_border.scss
@@ -14,6 +14,12 @@ $border-color-tokens: map.get(
   border
 );
 
+/// 汎用的に使えるborder colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-border-color($brightness: light, $name: high_emphasis)
+///   // ”rgba(57, 60, 65, 0.3)”
 @function get-border-color($brightness: light, $name: high_emphasis) {
   $tokens: map.get($border-color-tokens, base);
   $available-brightnesses: helpers.get-brightnesses();
@@ -43,10 +49,22 @@ $border-color-tokens: map.get(
   @return map.get($brightness-tokens, $name);
 }
 
+/// avatarのborder colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-avatar-border-color()
+///   // ”rgba(0, 0, 0, 0)”
 @function get-avatar-border-color() {
   @return map.get($border-color-tokens, avatar);
 }
 
+/// buttonのborder colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-button-border-color($appearance: flat, $color: neutral, $state: enabled)
+///   // ”transparent”
 @function get-button-border-color(
   $appearance: flat,
   $color: neutral,
@@ -104,6 +122,12 @@ $border-color-tokens: map.get(
   }
 }
 
+/// checkboxのborder colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-checkbox-border-color($states: (enabled))
+///   //”rgba(57, 60, 65, 0.2)”
 @function get-checkbox-border-color($states: (enabled)) {
   $available-states: helpers.get-states();
 
@@ -124,6 +148,12 @@ $border-color-tokens: map.get(
 }
 
 /// @deprecated この関数は非推奨です
+/// focus ringのcolorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-focus-ring-color($color: neutral)
+///   //”#9297a1”
 @function get-focus-ring-color($color: neutral) {
   $available-colors: list.join(
     helpers.get-semantic-intentions(),
@@ -182,10 +212,22 @@ $border-color-tokens: map.get(
   }
 }
 
+/// interactive-listのborder colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-interactive-list-border-color()
+///   // ”rgba(57, 60, 65, 0.2)”
 @function get-interactive-list-border-color() {
   @return map.get($border-color-tokens, interactive-list);
 }
 
+/// interactive-tableのborder colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-interactive-table-border-color($element: header)
+///   // “rgba(57, 60, 65, 0.3)”
 @function get-interactive-table-border-color($element: header) {
   $tokens: map.get($border-color-tokens, interactive-table);
   $available-elements: header, data;
@@ -200,6 +242,12 @@ $border-color-tokens: map.get(
   @return map.get($tokens, $element);
 }
 
+/// radioのborder colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-radio-border-color($states: (enabled))
+///   // ”rgba(57, 60, 65, 0.2)”
 @function get-radio-border-color($states: (enabled)) {
   $available-states: helpers.get-states();
 
@@ -219,10 +267,22 @@ $border-color-tokens: map.get(
   }
 }
 
+/// side-navigationのborder colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-side-navigation-border-color()
+///   // ”rgba(57, 60, 65, 0.2)”
 @function get-side-navigation-border-color() {
   @return map.get($border-color-tokens, side-navigation);
 }
 
+/// textfieldとselectで共通するfield部分のborder colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-field-border-color(neutral, enabled)
+///   // ”#afb3ba”
 @function get-field-border-color($color: neutral, $state: enabled) {
   $tokens: map.get($border-color-tokens, field);
   $color-tokens: map.get($tokens, $color);
diff --git a/packages/adapter/functions/color/_button.scss b/packages/adapter/functions/color/_button.scss
index 656c737..d702f2c 100644
--- a/packages/adapter/functions/color/_button.scss
+++ b/packages/adapter/functions/color/_button.scss
@@ -9,6 +9,12 @@ $button-color-tokens: map.get(
   button
 );
 
+/// buttonのbackground colorを取得します。注意事項あり
+///
+/// @group color
+/// @example
+///   functions.get-button-color(neutral)
+///   // “#585c63”
 @function get-button-color($color: neutral) {
   $tokens: map.get($button-color-tokens, base);
   $available-colors: helpers.get-button-colors();
diff --git a/packages/adapter/functions/color/_implication.scss b/packages/adapter/functions/color/_implication.scss
index fe45f01..bd6cb78 100644
--- a/packages/adapter/functions/color/_implication.scss
+++ b/packages/adapter/functions/color/_implication.scss
@@ -9,6 +9,12 @@ $implication-color-tokens: map.get(
   implication
 );
 
+/// implication colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-implication-color(interactive, 600)
+///   // ”#1f7acc”
 @function get-implication-color($name: interactive, $level: 1000) {
   $available-implications: helpers.get-implications();
 
diff --git a/packages/adapter/functions/color/_overlay.scss b/packages/adapter/functions/color/_overlay.scss
index db39123..56c4db6 100644
--- a/packages/adapter/functions/color/_overlay.scss
+++ b/packages/adapter/functions/color/_overlay.scss
@@ -9,6 +9,12 @@ $overlay-color-tokens: map.get(
   overlay
 );
 
+/// checkbox, radioなどinteractiveな要素にhoverやfocusしたときのoverlay colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-background-overlay-color(light, enabled)
+///   // “rgba(0, 0, 0, 0)”
 @function get-background-overlay-color($brightness: light, $state: enabled) {
   $tokens: map.get($overlay-color-tokens, background);
   $available-brightnesses: helpers.get-brightnesses();
@@ -33,6 +39,12 @@ $overlay-color-tokens: map.get(
   @return map.get($brightness-tokens, $state);
 }
 
+/// 画像にhoverやfocusしたときのoverlay colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-image-overlay-color(enabled)
+///   // “rgba(0, 0, 0, 0)”
 @function get-image-overlay-color($state: enabled) {
   $tokens: map.get($overlay-color-tokens, image);
   $available-states: helpers.get-states();
diff --git a/packages/adapter/functions/color/_primitive.scss b/packages/adapter/functions/color/_primitive.scss
index 03e85ae..f5b8c9b 100644
--- a/packages/adapter/functions/color/_primitive.scss
+++ b/packages/adapter/functions/color/_primitive.scss
@@ -9,6 +9,12 @@ $primitive-color-tokens: map.get(
   primitive
 );
 
+/// 汎用的に使えるprimitive colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-primitive-color($name: blue, $level: 600)
+///   // “#1f7acc”
 @function get-primitive-color($name, $level: 1000) {
   $primitive-color-name: map.get($primitive-color-tokens, "#{$name}");
 
diff --git a/packages/adapter/functions/color/_semantic.scss b/packages/adapter/functions/color/_semantic.scss
index 630573a..19ee38e 100644
--- a/packages/adapter/functions/color/_semantic.scss
+++ b/packages/adapter/functions/color/_semantic.scss
@@ -9,6 +9,12 @@ $semantic-color-tokens: map.get(
   semantic
 );
 
+/// 意味が付与されたsemantic colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-semantic-color(informative, 600)
+///   // “#1f7acc”
 @function get-semantic-color($intention: neutral, $level: 1000) {
   $available-semantics: helpers.get-semantic-intentions();
 
diff --git a/packages/adapter/functions/color/_surface.scss b/packages/adapter/functions/color/_surface.scss
index e33a6bc..bf4161d 100644
--- a/packages/adapter/functions/color/_surface.scss
+++ b/packages/adapter/functions/color/_surface.scss
@@ -13,6 +13,13 @@ $surface-color-tokens: map.get(
   surface
 );
 
+/// 汎用的に使えるsurface colorを取得します。
+/// ページやビューなど最下層でbackground colorを持つ要素の上に乗った、形のあるオブジェクト表面の色がsurface colorです。
+///
+/// @group color
+/// @example
+///   functions.get-surface-color(light, secondary)
+///   // “#f7f8fa”
 @function get-surface-color($brightness: light, $priority: primary) {
   $tokens: map.get($surface-color-tokens, base);
   $available-brightnesses: helpers.get-brightnesses();
@@ -37,10 +44,22 @@ $surface-color-tokens: map.get(
   @return map.get($brightness-tokens, $priority);
 }
 
+/// avatarのsurface colorを取得します。
+///
+/// @group color
+/// @example
+///   functions.get-avatar-surface-color()
+///   // “#f7f8fa”
 @function get-avatar-surface-color() {
   @return map.get($surface-color-tokens, avatar);
 }
 
+/// bottom-navigationのsurface colorを取得します。
+///
+/// @group color
+/// @example
+///   function get-bottom-navigation-surface-color(filled)
+///   // “#1f7acc”
 @function get-bottom-navigation-surface-color($appearance: white) {
   $tokens: map.get($surface-color-tokens, bottom-navigation);
   $available-appearances: helpers.get-bottom-navigation-appearances();
@@ -55,6 +74,12 @@ $surface-color-tokens: map.get(
   @return map.get($tokens, $appearance);
 }
 
+/// solidなappearanceのbuttonのグラデーションを構成するscrimのcolorを取得します。
+///
+/// @group color
+/// @example
+///   function.get-solid-button-scrim-color(start)
+///   // “rgba(255, 255, 255, 0.25)”
 @function get-solid-button-scrim-color($position: start) {
   $tokens: map.get(map.get(map.get($surface-color-tokens, button), solid), scrim);
   $available-positions: start, end;
@@ -69,6 +94,12 @@ $surface-color-tokens: map.get(
   @return map.get($tokens, $position);
 }
 
+/// buttonのsurface colorを取得します。
+///
+/// @group color
+/// @example
+///   function.get-button-surface-color($appearance: flat, $brightness: light, $color: neutral, $state: enabled)
+///   // “#585c63”
 @function get-button-surface-color(
   $appearance: flat,
   $brightness: light,
@@ -156,6 +187,13 @@ $surface-color-tokens: map.get(
   }
 }
 
+/// 最終的なbutton表面の色を定義したbackground-imageのグラデーションを取得します。
+/// 内部でget-button-surface-color()を使っています。
+///
+/// @group color
+/// @example
+///   function.get-button-surface-image($appearance: flat, $brightness: light, $color: neutral, $own-brightness: light, $state: enabled)
+///   // “linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(#585c63, #585c63)”
 @function get-button-surface-image(
   $appearance: flat,
   $brightness: light,
@@ -243,6 +281,12 @@ $surface-color-tokens: map.get(
   }
 }
 
+/// checkboxのsurfaceのcolorを取得します。
+///
+/// @group color
+/// @example
+///   function.get-checkbox-surface-color(enabled)
+///   // “#ffffff”
 @function get-checkbox-surface-color($states: (enabled)) {
   $tokens: map.get($surface-color-tokens, checkbox);
   $available-states: helpers.get-states();
@@ -263,6 +307,12 @@ $surface-color-tokens: map.get(
   }
 }
 
+/// ヘッダーの背景色を取得します
+///
+/// @group color
+/// @example
+///   functions.get-header-surface-color($appearance: filled)
+///   // #1f7acc
 @function get-header-surface-color($appearance: white) {
   $header-tokens: map.get($surface-color-tokens, header);
   $available-appearances: helpers.get-header-appearances();
@@ -277,12 +327,24 @@ $surface-color-tokens: map.get(
   @return map.get($header-tokens, #{$appearance});
 }
 
+/// プログレスインジケーターの全体を表すtrack（溝）部分のカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.get-progress-indicator-track-surface-color()
+///   // #e5f3ff
 @function get-progress-indicator-track-surface-color() {
   $tokens: map.get($surface-color-tokens, progress-indicator);
 
   @return map.get($tokens, track);
 }
 
+/// プログレスインジケーターの進捗を表すindicator部分のカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.get-progress-indicator-indicator-surface-color()
+///   // #3e93de
 @function get-progress-indicator-indicator-surface-color() {
   $tokens: map.get($surface-color-tokens, progress-indicator);
 
@@ -293,10 +355,25 @@ $surface-color-tokens: map.get(
   @return get-surface-color($brightness: light, $priority: primary);
 }
 
+/// スケルトン背景の背景色を取得します
+///
+/// @group color
+/// @example
+///   functions.get-skeleton-surface-color()
+///   // rgba(0, 0, 0, 0.2)
 @function get-skeleton-surface-color() {
   @return map.get($surface-color-tokens, skeleton);
 }
 
+/// フィールド要素の背景色を取得します
+///
+/// @group color
+/// @example
+///   functions.get-field-surface-color(
+///     $color: neutral,
+///     $state: enabled
+///   )
+///   // #f7f8fa
 @function get-field-surface-color($color: neutral, $state: enabled) {
   $tokens: map.get($surface-color-tokens, field);
   $color-tokens: map.get($tokens, $color);
diff --git a/packages/adapter/functions/color/_text.scss b/packages/adapter/functions/color/_text.scss
index 73f937d..9927477 100644
--- a/packages/adapter/functions/color/_text.scss
+++ b/packages/adapter/functions/color/_text.scss
@@ -11,6 +11,12 @@ $text-color-tokens: map.get(
   text
 );
 
+/// テキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.get-text-color($brightness: light, $name: high_emphasis),
+///   // #393c41
 @function get-text-color($brightness: light, $name: high_emphasis) {
   $tokens: map.get($text-color-tokens, base);
   $available-brightnesses: helpers.get-brightnesses();
@@ -44,6 +50,15 @@ $text-color-tokens: map.get(
   @return map.get($brightness-tokens, $name);
 }
 
+/// ボトムナビゲーションのテキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.get-bottom-navigation-text-color(
+///     $appearance: white,
+///     $state: enabled
+///   ),
+///   // rgba(57, 60, 65, 0.6)
 @function get-bottom-navigation-text-color(
   $appearance: white,
   $state: enabled
@@ -71,6 +86,17 @@ $text-color-tokens: map.get(
   @return map.get($appearance-tokens, $state);
 }
 
+/// ボタンのテキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.get-button-text-color(
+///     $appearance: flat,
+///     $brightness: light,
+///     $color: neutral,
+///     $state: enabled
+///   ),
+///   // #ffffff
 @function get-button-text-color(
   $appearance: flat,
   $brightness: light,
@@ -141,6 +167,12 @@ $text-color-tokens: map.get(
   }
 }
 
+/// チェックボックスのテキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.get-checkbox-text-color($states: (enabled)),
+///   // #ffffff
 @function get-checkbox-text-color($states: (enabled)) {
   $tokens: map.get($text-color-tokens, checkbox);
   $available-states: helpers.get-states();
@@ -161,12 +193,23 @@ $text-color-tokens: map.get(
   }
 }
 
+/// インタラクティブリストのテキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.get-interactive-list-title-text-color(),
+///   // #393c41
 @function get-interactive-list-title-text-color() {
   $tokens: map.get($text-color-tokens, interactive-list);
 
   @return map.get($tokens, title);
 }
 
+/// インタラクティブリストのleadingおよびtrailingのテキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.interactive-list-edge-element-text-color(enabled)
 @function get-interactive-list-edge-element-text-color($state: enabled) {
   $tokens: map.get($text-color-tokens, interactive-list);
   $edge-element-tokens: map.get($tokens, edge-element);
@@ -182,6 +225,11 @@ $text-color-tokens: map.get(
   @return map.get($edge-element-tokens, $state);
 }
 
+/// インタラクティブリストのタイトルのテキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.interactive-list-body-title-text-color(enabled)
 @function get-interactive-list-body-title-text-color($state: enabled) {
   $tokens: map.get($text-color-tokens, interactive-list);
   $body-tokens: map.get($tokens, body);
@@ -198,6 +246,11 @@ $text-color-tokens: map.get(
   @return map.get($body-title-tokens, $state);
 }
 
+/// インタラクティブリストのデスクリプションのテキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.interactive-list-body-description-text-color(enabled)
 @function get-interactive-list-body-description-text-color($state: enabled) {
   $tokens: map.get($text-color-tokens, interactive-list);
   $body-tokens: map.get($tokens, body);
@@ -214,10 +267,21 @@ $text-color-tokens: map.get(
   @return map.get($body-description-tokens, $state);
 }
 
+/// インタラクティブテーブルのテキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.get-interactive-table-text-color()
 @function get-interactive-table-text-color() {
   @return map.get($text-color-tokens, interactive-table);
 }
 
+/// ラジオボタンのテキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.get-radio-text-color($states: (enabled)),
+///   // #ffffff
 @function get-radio-text-color($states: (enabled)) {
   $tokens: map.get($text-color-tokens, radio);
   $available-states: helpers.get-states();
@@ -238,6 +302,15 @@ $text-color-tokens: map.get(
   }
 }
 
+/// フィールド要素のテキストカラーを取得します
+///
+/// @group color
+/// @example
+///   functions.get-field-text-color(
+///     $color: neutral,
+///     $state: enabled
+///   ),
+///   // #393c41
 @function get-field-text-color($color: neutral, $state: enabled) {
   $tokens: map.get($text-color-tokens, field);
   $color-tokens: map.get($tokens, $color);
diff --git a/packages/adapter/functions/opacity/_border.scss b/packages/adapter/functions/opacity/_border.scss
index d08e3e8..e24de3f 100644
--- a/packages/adapter/functions/opacity/_border.scss
+++ b/packages/adapter/functions/opacity/_border.scss
@@ -9,6 +9,12 @@ $border-opacity-tokens: map.get(
 );
 
 /// @deprecated この関数は非推奨です
+/// Focusが当たっていることを示す枠線の透過率を取得します。
+///
+/// @group Opacity
+/// @example
+///   functions.get-focus-ring-opacity()
+///   // 0.15
 @function get-focus-ring-opacity() {
   @return map.get($border-opacity-tokens, focus-ring);
 }
diff --git a/packages/adapter/functions/opacity/_surface.scss b/packages/adapter/functions/opacity/_surface.scss
index 096fc59..ad2bd6e 100644
--- a/packages/adapter/functions/opacity/_surface.scss
+++ b/packages/adapter/functions/opacity/_surface.scss
@@ -8,12 +8,25 @@ $surface-opacity-tokens: map.get(
   surface
 );
 
+/// disabledの要素の表面の透過率を取得します
+///
+/// @group Opacity
+/// @example
+///   functions.get-disabled-surface-opacity()
+///   // 0.38
 @function get-disabled-surface-opacity() {
   $tokens: map.get($surface-opacity-tokens, base);
 
   @return map.get($tokens, disabled);
 }
 
+/// Hollow Button（写真やイラスト、色面の上に乗せる際に使うボタン）の表面の透過率を取得します。
+///
+/// @todo →要確認
+/// @group Opacity
+/// @example
+///   functions.get-hollow-button-surface-opacity()
+///   // 0.15
 @function get-hollow-button-surface-opacity() {
   $tokens: map.get($surface-opacity-tokens, button);
 
diff --git a/packages/adapter/functions/shadow/_button.scss b/packages/adapter/functions/shadow/_button.scss
index f3d725f..9e3de0c 100644
--- a/packages/adapter/functions/shadow/_button.scss
+++ b/packages/adapter/functions/shadow/_button.scss
@@ -3,12 +3,24 @@
 
 $button-shadow-tokens: map.get(map.get(tokens.$tokens, shadow), button);
 
+/// solid buttonのhighlight表示を行うためのscrim（box-shadow）の値を取得します。
+///
+/// @group Shadow
+/// @example
+///   functions.get-solid-button-highlight-box-shadow()
+///   // 0px 1px 1px 0px rgba(255, 255, 255, 0.5)
 @function get-solid-button-highlight-box-shadow() {
   $solid-button-tokens: map.get($button-shadow-tokens, solid);
 
   @return map.get($solid-button-tokens, highlight);
 }
 
+/// solid buttonのshadow表示を行うためのscrim（box-shadow）の値を取得します
+///
+/// @group Shadow
+/// @example
+///   functions.get-solid-button-shadow-box-shadow()
+///   // 0px -1px 1px 0px rgba(0, 0, 0, 0.1)
 @function get-solid-button-shadow-box-shadow() {
   $solid-button-tokens: map.get($button-shadow-tokens, solid);
 
diff --git a/packages/adapter/functions/shadow/_elevation.scss b/packages/adapter/functions/shadow/_elevation.scss
index 5d022fa..8b8dc11 100644
--- a/packages/adapter/functions/shadow/_elevation.scss
+++ b/packages/adapter/functions/shadow/_elevation.scss
@@ -6,6 +6,12 @@
 
 $elevation-shadow-tokens: map.get(map.get(tokens.$tokens, shadow), elevation);
 
+/// Suerfaceの階層を表すElevationを表現するためのbox-shadowの値を取得します。
+///
+/// @group Shadow
+/// @example
+///   functions.get-elevation-box-shadow($level: 1)
+///   // 0px -0.1px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 0px rgba(0, 0, 0, 0)
 @function get-elevation-box-shadow($level: 0) {
   $available-levels: helpers.get-elevation-levels();
 
diff --git a/packages/adapter/functions/shadow/_focus-ring.scss b/packages/adapter/functions/shadow/_focus-ring.scss
index 2a5be44..406cca1 100644
--- a/packages/adapter/functions/shadow/_focus-ring.scss
+++ b/packages/adapter/functions/shadow/_focus-ring.scss
@@ -5,6 +5,12 @@
 @use "../helpers";
 
 /// @deprecated この関数は非推奨です。代わりに package/adapter/functions/outline/_focus-ring.scss を参照してください。
+/// 要素へのFocusを表すFocus ringを表現するbox-shadowの値を取得します。
+///
+/// @group Shadow
+/// @example
+///   functions.get-focus-ring-box-shadow()
+///   // 0 0 0 0.25rem rgba(146, 151, 161, 0.15)
 @function get-focus-ring-box-shadow($color: neutral) {
   $width: border-size.get-focus-ring-size();
   $opacity: border-opacity.get-focus-ring-opacity();
diff --git a/packages/adapter/functions/size/_border.scss b/packages/adapter/functions/size/_border.scss
index 4ce2d3b..dd0cb8a 100644
--- a/packages/adapter/functions/size/_border.scss
+++ b/packages/adapter/functions/size/_border.scss
@@ -9,6 +9,12 @@ $border-size-tokens: map.get(
   border
 );
 
+/// https://github.com/pepabo/inhouse-tokens/blob/main/tokens/pepper/size/border.yamlの中から引数$levelに応じたborder sizeを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-border-size(m)
+///   // ”0.0625rem”
 @function get-border-size($level: m) {
   $tokens: map.get($border-size-tokens, base);
   $available-levels: helpers.get-sizes();
@@ -23,10 +29,22 @@ $border-size-tokens: map.get(
   @return map.get($tokens, $level);
 }
 
+/// 基本的なavatarのborder sizeを取得します。
+///
+/// @group size
+/// @example
+///   get-avatar-border-size()
+///   // ”0”
 @function get-avatar-border-size() {
   @return map.get($border-size-tokens, avatar);
 }
 
+/// buttonのborder sizeを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-button-border-size($appearance: flat)
+///   // ”0.0625rem”
 @function get-button-border-size($appearance: flat) {
   $tokens: map.get($border-size-tokens, button);
   $available-appearances: helpers.get-button-appearances();
@@ -41,14 +59,32 @@ $border-size-tokens: map.get(
   @return map.get($tokens, "#{$appearance}");
 }
 
+/// 基本的なcheckboxのborder sizeを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-checkbox-border-size()
+///   // ”0.0625rem”
 @function get-checkbox-border-size() {
   @return map.get($border-size-tokens, checkbox);
 }
 
+/// 基本的なfocus ringのborder sizeを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-focus-ring-size()
+///   // 0.25rem
 @function get-focus-ring-size() {
   @return map.get($border-size-tokens, focus-ring);
 }
 
+/// 基本的なindicatorのborder sizeを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-progress-indicator-border-size()
+///   // 0.25rem
 @function get-progress-indicator-border-size($size: l) {
   $tokens: map.get($border-size-tokens, progress-indicator);
   $available-sizes: ("s", "m", "l");
@@ -63,10 +99,22 @@ $border-size-tokens: map.get(
   @return map.get($tokens, $size);
 }
 
+/// 基本的なradio buttonのborder sizeを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-radio-border-size()
+///   // 0.0625rem
 @function get-radio-border-size() {
   @return map.get($border-size-tokens, radio);
 }
 
+/// 基本的なtableのborder sizeを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-table-border-size()
+///   // 0.0625rem
 @function get-table-border-size() {
   @return map.get($border-size-tokens, table);
 }
diff --git a/packages/adapter/functions/size/_boundary.scss b/packages/adapter/functions/size/_boundary.scss
index 5454c1a..1facbb6 100644
--- a/packages/adapter/functions/size/_boundary.scss
+++ b/packages/adapter/functions/size/_boundary.scss
@@ -9,14 +9,32 @@ $boundary-size-tokens: map.get(
   boundary
 );
 
+/// 画面サイズの$levelのセットを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-boundary-sizes()
+///   // "xxs, xs, s, m, l, xl”
 @function get-boundary-sizes() {
   @return map.keys($boundary-size-tokens);
 }
 
+/// 画面サイズの$levelのセットの最初のkeyを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-boundary-size-first-key()
+///   // ”xxs”
 @function get-boundary-size-first-key() {
   @return list.nth(get-boundary-sizes(), 1);
 }
 
+/// 画面サイズの$levelに対応するsizeを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-boundary-size(m)
+///   // ”800px”
 @function get-boundary-size($level: m) {
   $available-levels: helpers.get-sizes();
 
diff --git a/packages/adapter/functions/size/_content.scss b/packages/adapter/functions/size/_content.scss
index c36af81..168d4a3 100644
--- a/packages/adapter/functions/size/_content.scss
+++ b/packages/adapter/functions/size/_content.scss
@@ -9,10 +9,22 @@ $content-size-tokens: map.get(
   content
 );
 
+/// コンテンツの$levelのセットを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-content-sizes()
+///   // "xs, s, m, l, xl”
 @function get-content-sizes() {
   @return map.keys($content-size-tokens);
 }
 
+/// コンテンツの$levelに対応するsizeを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-content-size(m)
+///   // “960px”
 @function get-content-size($level: m) {
   $available-levels: get-content-sizes();
 
diff --git a/packages/adapter/functions/size/_gap.scss b/packages/adapter/functions/size/_gap.scss
index e7484d5..4c0bf23 100644
--- a/packages/adapter/functions/size/_gap.scss
+++ b/packages/adapter/functions/size/_gap.scss
@@ -9,6 +9,11 @@ $gap-size-tokens: map.get(
   gap
 );
 
+/// $levelに対応するgap sizeを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-gap-size($level: m)
 @function get-gap-size($level: m) {
   $tokens: map.get($gap-size-tokens, base);
   $available-levels: helpers.get-sizes();
diff --git a/packages/adapter/functions/size/_height.scss b/packages/adapter/functions/size/_height.scss
index 03aa1fd..c950e9b 100644
--- a/packages/adapter/functions/size/_height.scss
+++ b/packages/adapter/functions/size/_height.scss
@@ -9,6 +9,12 @@ $height-tokens: map.get(
   height
 );
 
+/// interactive component heightの$levelのセットを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-interactive-component-height-keys()
+///   // "xs, s, m, l, xl”
 @function get-interactive-component-height-keys() {
   $tokens: map.get($height-tokens, base);
   $interactive-component-tokens: map.get($tokens, interactive-component);
@@ -16,6 +22,12 @@ $height-tokens: map.get(
   @return map.keys($interactive-component-tokens);
 }
 
+/// $levelに対応するinteractive component heightを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-interactive-component-height($level: m)
+///   // “2.5rem”
 @function get-interactive-component-height($level: m) {
   $tokens: map.get($height-tokens, base);
   $interactive-component-tokens: map.get($tokens, interactive-component);
@@ -31,6 +43,12 @@ $height-tokens: map.get(
   @return map.get($interactive-component-tokens, $level);
 }
 
+/// $levelに対応するavatar heightを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-avatar-height($level: m)
+///   // “2.5rem”
 @function get-avatar-height($level: m) {
   $tokens: map.get($height-tokens, avatar);
   $available-levels: helpers.get-sizes();
@@ -45,18 +63,37 @@ $height-tokens: map.get(
   @return map.get($tokens, $level);
 }
 
+/// bottom navigationのbody heightを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-bottom-navigation-body-height()
+///   // ”3.5rem”
 @function get-bottom-navigation-body-height() {
   $tokens: map.get($height-tokens, bottom-navigation);
 
   @return map.get($tokens, body);
 }
 
+/// bottom navigationのpicture heightを取得します。
+///
+/// @todo pict-heightしか使ってなくてpict-widthは使ってないのでは？
+/// @group size
+/// @example
+///   functions.get-bottom-navigation-pict-height()
+///   // “1.5rem”
 @function get-bottom-navigation-pict-height() {
   $tokens: map.get($height-tokens, bottom-navigation);
 
   @return map.get($tokens, pict);
 }
 
+/// $levelに対応するアイコンのみのbuttonのpicture heightを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-icon-only-button-pict-height(m)
+///   // “1.5rem”
 @function get-icon-only-button-pict-height($level: m) {
   $tokens: map.get($height-tokens, button);
   $pict-tokens: map.get($tokens, pict);
@@ -73,52 +110,106 @@ $height-tokens: map.get(
   @return map.get($icon-only-tokens, $level);
 }
 
+/// checkboxの外側の枠のheightを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-checkbox-parent-height()
+///   // “1.5rem”
 @function get-checkbox-parent-height() {
   $tokens: map.get($height-tokens, checkbox);
 
   @return map.get($tokens, parent);
 }
 
+/// checkboxの内側のheightを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-checkbox-child-height()
+///   // “1.25rem”
 @function get-checkbox-child-height() {
   $tokens: map.get($height-tokens, checkbox);
 
   @return map.get($tokens, child);
 }
 
+/// header heightを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-header-height()
+///   // “3.5rem”
 @function get-header-height() {
   @return map.get($height-tokens, header);
 }
 
+/// interactive listのpicture heightを取得します。
+///
+/// @group size
+/// @example
+///   functions.get-interactive-list-pict-height()
+///   // “1.5rem”
 @function get-interactive-list-pict-height() {
   $tokens: map.get($height-tokens, interactive-list);
 
   @return map.get($tokens, pict);
 }
 
+/// interactive listのtrailingおよびleadingの高さを取得します
+///
+/// @group size
+/// @example
+///   functions.get-interactive-list-edge-element-height()
+///   // ”2rem”
 @function get-interactive-list-edge-element-height() {
   $tokens: map.get($height-tokens, interactive-list);
 
   @return map.get($tokens, edge-element);
 }
 
+/// interactive tableのpictの高さを取得します
+///
+/// @group size
+/// @example
+///   functions.get-interactive-table-pict-height()
+///   // 1.5rem
 @function get-interactive-table-pict-height() {
   $tokens: map.get($height-tokens, interactive-table);
 
   @return map.get($tokens, pict);
 }
 
+/// circle progress indicatorの高さを取得します
+///
+/// @group size
+/// @example
+///   functions.get-circular-progress-indicator-height()
+///   // 3
 @function get-circular-progress-indicator-height() {
   $tokens: map.get($height-tokens, progress-indicator);
 
   @return map.get($tokens, circular);
 }
 
+/// radioをラップする要素の高さを取得します
+///
+/// @group size
+/// @example
+///   functions.get-radio-parent-height()
+///   // 1.5rem
 @function get-radio-parent-height() {
   $tokens: map.get($height-tokens, radio);
 
   @return map.get($tokens, parent);
 }
 
+/// radioの子要素のbackgroundの高さを取得します
+///
+/// @group size
+/// @example
+///   functions.get-radio-child-background-height()
+///   // 1.25rem
 @function get-radio-child-background-height() {
   $tokens: map.get($height-tokens, radio);
   $child-tokens: map.get($tokens, child);
@@ -126,6 +217,12 @@ $height-tokens: map.get(
   @return map.get($child-tokens, background);
 }
 
+/// radioの子要素のforegroundの高さを取得します
+///
+/// @group size
+/// @example
+///   functions.get-radio-child-foreground-height()
+///   // 0.75rem
 @function get-radio-child-foreground-height() {
   $tokens: map.get($height-tokens, radio);
   $child-tokens: map.get($tokens, child);
@@ -133,6 +230,12 @@ $height-tokens: map.get(
   @return map.get($child-tokens, foreground);
 }
 
+/// thumbnailの高さを取得します
+///
+/// @group size
+/// @example
+///   functions.get-thumbnail-height($level: m)
+///   // 3.5rem
 @function get-thumbnail-height($level: m) {
   $tokens: map.get($height-tokens, thumbnail);
   $available-levels: helpers.get-sizes();
diff --git a/packages/adapter/functions/size/_radius.scss b/packages/adapter/functions/size/_radius.scss
index c6fcc6c..419ba6b 100644
--- a/packages/adapter/functions/size/_radius.scss
+++ b/packages/adapter/functions/size/_radius.scss
@@ -9,6 +9,12 @@ $radius-size-tokens: map.get(
   radius
 );
 
+/// $levelに応じたradiusの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-radius-size($level: m)
+///   // 0.25rem
 @function get-radius-size($level: m) {
   $tokens: map.get($radius-size-tokens, base);
   $available-levels: helpers.get-sizes();
@@ -23,6 +29,12 @@ $radius-size-tokens: map.get(
   @return map.get($tokens, $level);
 }
 
+/// $levelに応じたavatarのサイズを取得します
+///
+/// @group size
+/// @example
+///   functions.get-avatar-radius-size($level: m)
+///   // 1.25rem
 @function get-avatar-radius-size($level: m) {
   $tokens: map.get($radius-size-tokens, avatar);
   $available-levels: helpers.get-sizes();
@@ -37,10 +49,22 @@ $radius-size-tokens: map.get(
   @return map.get($tokens, $level);
 }
 
+/// buttonのradiusの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-button-radius-size()
+///   // 0.25rem
 @function get-button-radius-size() {
   @return map.get($radius-size-tokens, button);
 }
 
+/// thumbnailのradiusの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-thumbnail-radius-size()
+///   // 0rem
 @function get-thumbnail-radius-size() {
   @return map.get($radius-size-tokens, thumbnail);
 }
diff --git a/packages/adapter/functions/size/_scale.scss b/packages/adapter/functions/size/_scale.scss
index 6964fa6..9bac555 100644
--- a/packages/adapter/functions/size/_scale.scss
+++ b/packages/adapter/functions/size/_scale.scss
@@ -9,6 +9,12 @@ $sizing-scale-tokens: map.get(
   scale
 );
 
+/// $levelに応じたscale（16が基準のscale、remなどで使う）を取得する
+///
+/// @group size
+/// @example
+///   functions.get-sizing-scale-size()
+///   // 1rem
 @function get-sizing-scale-size($level: 16) {
   $value: map.get($sizing-scale-tokens, "#{$level}");
 
diff --git a/packages/adapter/functions/size/_spacing.scss b/packages/adapter/functions/size/_spacing.scss
index 2de85df..9fc37ad 100644
--- a/packages/adapter/functions/size/_spacing.scss
+++ b/packages/adapter/functions/size/_spacing.scss
@@ -9,6 +9,9 @@ $spacing-size-tokens: map.get(
   spacing
 );
 
+/// $evelに応じたspacingの値を取得します
+///
+/// @group size
 @function get-spacing-size($level: m) {
   $tokens: map.get($spacing-size-tokens, base);
   $available-levels: helpers.get-sizes();
@@ -23,6 +26,12 @@ $spacing-size-tokens: map.get(
   @return map.get($tokens, $level);
 }
 
+/// cellの垂直方向のspacingの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-cell-vertical-spacing-size($density: normal)
+///   // 0.75rem
 @function get-cell-vertical-spacing-size($density: normal) {
   $tokens: map.get($spacing-size-tokens, cell);
   $vertical-tokens: map.get($tokens, vertical);
@@ -38,6 +47,12 @@ $spacing-size-tokens: map.get(
   @return map.get($vertical-tokens, $density);
 }
 
+/// interactive listのspacingの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-interactive-list-spacing-size()
+///   // 0.5rem
 @function get-interactive-list-spacing-size() {
   @return map.get($spacing-size-tokens, interactive-list);
 }
diff --git a/packages/adapter/functions/size/_width.scss b/packages/adapter/functions/size/_width.scss
index 079d340..b36dbcd 100644
--- a/packages/adapter/functions/size/_width.scss
+++ b/packages/adapter/functions/size/_width.scss
@@ -9,6 +9,12 @@ $width-tokens: map.get(
   width
 );
 
+/// $width（full, half, third, auto）に応じた割合（calc）を取得します
+///
+/// @group size
+/// @example
+///   functions.get-width($width: third)
+///   // calc(100% / 3)
 @function get-width($width: auto) {
   $available-widths: helpers.get-widths();
 
@@ -32,6 +38,12 @@ $width-tokens: map.get(
   }
 }
 
+/// $levelに応じたavatarのwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-avatar-width($level: m)
+///   // 2.5rem
 @function get-avatar-width($level: m) {
   $tokens: map.get($width-tokens, avatar);
   $available-levels: helpers.get-sizes();
@@ -46,12 +58,26 @@ $width-tokens: map.get(
   @return map.get($tokens, $level);
 }
 
+/// bottom navigationのpictのwidthの値を取得します
+///
+/// @todo pictの説明を追加する
+/// @group size
+/// @example
+///   functions.get-bottom-navigation-pict-width()
+///   // 1.5rem
 @function get-bottom-navigation-pict-width() {
   $tokens: map.get($width-tokens, bottom-navigation);
 
   @return map.get($tokens, pict);
 }
 
+/// $levelに応じたicon buttonのpictのwidthの値を取得します
+///
+/// @todo pictの説明を追加する
+/// @group size
+/// @example
+///   functions.get-icon-only-button-pict-width($level: m)
+///   // 1.5rem
 @function get-icon-only-button-pict-width($level: m) {
   $tokens: map.get($width-tokens, button);
   $pict-tokens: map.get($tokens, pict);
@@ -68,60 +94,122 @@ $width-tokens: map.get(
   @return map.get($icon-only-tokens, $level);
 }
 
+/// checkboxをラップする要素のwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-checkbox-parent-width()
+///   // 1.5rem
 @function get-checkbox-parent-width() {
   $tokens: map.get($width-tokens, checkbox);
 
   @return map.get($tokens, parent);
 }
 
+/// checkboxの子要素のwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-checkbox-child-width()
+///   // 1.25rem
 @function get-checkbox-child-width() {
   $tokens: map.get($width-tokens, checkbox);
 
   @return map.get($tokens, child);
 }
 
+/// description listのleading要素のwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-description-list-leading-width()
+///   // 3rem
 @function get-description-list-leading-width() {
   $tokens: map.get($width-tokens, description-list);
 
   @return map.get($tokens, leading);
 }
 
+/// interactive listのpictの値を取得します
+///
+/// @todo pictの説明を追加する
+/// @group size
+/// @example
+///   functions.get-interactive-list-pict-width()
+///   // 1.5rem
 @function get-interactive-list-pict-width() {
   $tokens: map.get($width-tokens, interactive-list);
 
   @return map.get($tokens, pict);
 }
 
+/// interactive list のleadingおよびtrailing要素のwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-interactive-list-edge-element-width()
+///   // 2rem
 @function get-interactive-list-edge-element-width() {
   $tokens: map.get($width-tokens, interactive-list);
 
   @return map.get($tokens, edge-element);
 }
 
+/// interactive tableのpictのwidthの値を取得します
+///
+/// @todo pictの説明を追加する
+/// @group size
+/// @example
+///   functions.get-interactive-table-pict-width()
+///   // 1.5rem
 @function get-interactive-table-pict-width() {
   $tokens: map.get($width-tokens, interactive-table);
 
   @return map.get($tokens, pict);
 }
 
+/// listのleading要素のwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-list-leading-width()
+///   // 3rem
 @function get-list-leading-width() {
   $tokens: map.get($width-tokens, list);
 
   @return map.get($tokens, leading);
 }
 
+/// circular progress indicatorのwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-circular-progress-indicator-width()
+///   // 3rem
 @function get-circular-progress-indicator-width() {
   $tokens: map.get($width-tokens, progress-indicator);
 
   @return map.get($tokens, circular);
 }
 
+/// radioボタンの親要素のwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-radio-parent-width()
+///   // 1.5rem
 @function get-radio-parent-width() {
   $tokens: map.get($width-tokens, radio);
 
   @return map.get($tokens, parent);
 }
 
+/// radioボタンの子要素のbackgroundのwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-radio-child-background-width()
+///   // 1.25rem
 @function get-radio-child-background-width() {
   $tokens: map.get($width-tokens, radio);
   $child-tokens: map.get($tokens, child);
@@ -129,6 +217,12 @@ $width-tokens: map.get(
   @return map.get($child-tokens, background);
 }
 
+/// radioボタンの子要素のforegroundのwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-radio-child-foreground-width()
+///   // 0.75rem
 @function get-radio-child-foreground-width() {
   $tokens: map.get($width-tokens, radio);
   $child-tokens: map.get($tokens, child);
@@ -136,10 +230,22 @@ $width-tokens: map.get(
   @return map.get($child-tokens, foreground);
 }
 
+/// side navigationのwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-side-navigation-width()
+///   // 16rem
 @function get-side-navigation-width() {
   @return map.get($width-tokens, side-navigation);
 }
 
+/// $levelに応じたthumbnailのwidthの値を取得します
+///
+/// @group size
+/// @example
+///   functions.get-thumbnail-width($level: m)
+///   // 3.5rem
 @function get-thumbnail-width($level: m) {
   $tokens: map.get($width-tokens, thumbnail);
   $available-levels: helpers.get-sizes();
diff --git a/packages/adapter/functions/typography/_font-family.scss b/packages/adapter/functions/typography/_font-family.scss
index a07db2a..6f95a08 100644
--- a/packages/adapter/functions/typography/_font-family.scss
+++ b/packages/adapter/functions/typography/_font-family.scss
@@ -8,6 +8,12 @@ $font-family-tokens: map.get(
   font-family
 );
 
+/// font-familyを一つ取得します。
+///
+/// @group typography
+/// @example
+///   functions.get-font-family($name: sans-japanese)
+///   // "'Noto Sans JP'”
 @function get-font-family($name) {
   $value: map.get($font-family-tokens, $name);
 
@@ -18,6 +24,12 @@ $font-family-tokens: map.get(
   @return $value;
 }
 
+/// font-familyのセットを取得します。
+///
+/// @group typography
+/// @example
+///   functions.compose-font-stack($name: japanese)
+///   // "'Open Sans', 'Noto Sans JP', apple-system, BlinkMacSystemFont, Roboto, 'Lucida Grande', Helvetica, Arial, sans-serif”
 @function compose-font-stack($name) {
   @if $name == latin {
     @return #{map.get($font-family-tokens, sans-latin)},
diff --git a/packages/adapter/functions/typography/_font-size.scss b/packages/adapter/functions/typography/_font-size.scss
index fd7d924..ea649f5 100644
--- a/packages/adapter/functions/typography/_font-size.scss
+++ b/packages/adapter/functions/typography/_font-size.scss
@@ -5,10 +5,19 @@
 
 $font-size-tokens: map.get(map.get(tokens.$tokens, size), font);
 
+/// tokenで定義されているsizeのkeyを取得します
+///
+/// @group typography
 @function get-font-size-keys() {
   @return map.keys(map.get($font-size-tokens, base));
 }
 
+/// 基本的なfont sizeを取得します。
+///
+/// @group typography
+/// @example
+///   functions.get-font-size($level: m)
+///   // 1rem
 @function get-font-size($level: m) {
   $tokens: map.get($font-size-tokens, base);
   $available-levels: get-font-size-keys();
diff --git a/packages/adapter/functions/typography/_line-height.scss b/packages/adapter/functions/typography/_line-height.scss
index 472057b..0f3acc0 100644
--- a/packages/adapter/functions/typography/_line-height.scss
+++ b/packages/adapter/functions/typography/_line-height.scss
@@ -6,6 +6,12 @@
 
 $line-height-tokens: map.get(map.get(tokens.$tokens, size), line-height);
 
+/// 基本的なline heightを取得します。
+///
+/// @group typography
+/// @example
+///   functions.get-line-height($level: m, $density: normal)
+///   // 1.5rem
 @function get-line-height($density: normal, $level: m) {
   $tokens: map.get($line-height-tokens, base);
   $available-densities: helpers.get-densities();
diff --git a/packages/adapter/functions/typography/_text-style.scss b/packages/adapter/functions/typography/_text-style.scss
index 9154aa1..87a910f 100644
--- a/packages/adapter/functions/typography/_text-style.scss
+++ b/packages/adapter/functions/typography/_text-style.scss
@@ -1,6 +1,13 @@
 @use "./font-size";
 @use "./line-height";
 
+/// font-sizeとline-heightのリストを取得します。
+/// ※ Sassのリスト型として取得されるので、使うことはほぼなさそうです。代わりに `text()` の利用を検討してください。
+///
+/// @group typography
+/// @example
+///   functions.get-text-style($level: m, $density: normal)
+///   // (font-size: 1rem, line-height: 1.5rem)
 @function get-text-style($density: normal, $level: m) {
   $value: (
     font-size: font-size.get-font-size($level),