diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 72c84c2f1..f61311f1e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -572,3 +572,24 @@ marginはそのコンポーネントを使う側が設定する
 
 ### indexというファイル名を使うな
 ESMではディレクトリインポートは廃止されているのと、ディレクトリインポートせずともファイル名が index だと何故か一部のライブラリ？でディレクトリインポートだと見做されてエラーになる
+
+## CSS Recipe
+
+### Lighten CSS vars
+
+``` css
+color: hsl(from var(--accent) h s calc(l + 10));
+```
+
+### Darken CSS vars
+
+``` css
+color: hsl(from var(--accent) h s calc(l - 10));
+```
+
+### Add alpha to CSS vars
+
+``` css
+color: color(from var(--accent) srgb r g b / 0.5);
+```
+