diff --git a/docs/zh/beamng/css-snippets.md b/docs/zh/beamng/css-snippets.md
new file mode 100644
index 00000000..d9d0ac06
--- /dev/null
+++ b/docs/zh/beamng/css-snippets.md
@@ -0,0 +1,189 @@
+!!! warning "本页面正在建设中！"
+
+```
+本站点目前正处于积极开发与维护阶段。
+
+觉得您可以提供帮助？请点击页面右侧的铅笔图标参与编辑！
+此操作适用于站内的任何页面。
+```
+
+# BeamNG.drive CSS Code 的片段
+
+## 常见变量
+
+=== BeamNG Orange
+
+```
+```css
+var(--bng-orange) /*Common orange*/
+var(--bng-orange-shade1) /*70% opacity*/
+var(--bng-orange-shade2) /*40% opacity*/
+var(--bng-orange-shade1opaque)
+var(--bng-orange-shade2opaque)
+```
+```
+
+=== Monochrome
+
+```
+```css
+--- Monochrome
+var(--bng-black-8) /*80% opacity (duplicate --bng-black-o8)*/
+var(--bng-black-6) /*60% opacity (duplicate --bng-black-o6)*/
+var(--bng-black-4) /*40% opacity (duplicate --bng-black-o4)*/
+var(--bng-black-2) /*20% opacity (duplicate --bng-black-o2)*/
+
+var(--dark-neutral-grey)
+var(--neutral-grey)
+var(--light-neutral-grey)
+var(--dark-grey)
+var(--dark-grey-alpha) /*80% opacity*/
+
+var(--black-1) /*70% opacity*/
+var(--black-2) /*40% opacity (duplicate --bng-black-o4)*/
+
+var(--white-1) /*80% opacity*/
+var(--white-2) /*40% opacity*/
+var(--white-3) /*20% opacity*/
+```
+```
+
+=== BeamNG 界面颜色调色板
+
+```
+=== Orange
+
+	```css
+	var(--bng-orange-50)
+	var(--bng-orange-100)
+	var(--bng-orange-200)
+	var(--bng-orange-300)
+	var(--bng-orange-b400)
+	var(--bng-orange-500)
+	var(--bng-orange-600)
+	var(--bng-orange-700)
+	var(--bng-orange-800)
+	var(--bng-orange-900)
+	```
+
+=== Cool Gray
+
+	```css
+	var(--bng-cool-gray-50)
+	var(--bng-cool-gray-100)
+	var(--bng-cool-gray-200)
+	var(--bng-cool-gray-300)
+	var(--bng-cool-gray-400)
+	var(--bng-cool-gray-500)
+	var(--bng-cool-gray-600)
+	var(--bng-cool-gray-700)
+	var(--bng-cool-gray-800)
+	var(--bng-cool-gray-900)
+	```
+
+=== Ter Blue
+	```css
+	var(--bng-ter-blue-50)
+	var(--bng-ter-blue-100)
+	var(--bng-ter-blue-200)
+	var(--bng-ter-blue-300)
+	var(--bng-ter-blue-400)
+	var(--bng-ter-blue-500)
+	var(--bng-ter-blue-600)
+	var(--bng-ter-blue-700)
+	var(--bng-ter-blue-800)
+	var(--bng-ter-blue-900)
+	```
+
+=== Add Blue
+	```css
+	var(--bng-add-blue-50)
+	var(--bng-add-blue-100)
+	var(--bng-add-blue-200)
+	var(--bng-add-blue-300)
+	var(--bng-add-blue-400)
+	var(--bng-add-blue-500)
+	var(--bng-add-blue-600)
+	var(--bng-add-blue-700)
+	var(--bng-add-blue-800)
+	var(--bng-add-blue-900)
+	```
+
+=== Add Green
+	```css
+	var(--bng-add-green-50)
+	var(--bng-add-green-100)
+	var(--bng-add-green-200)
+	var(--bng-add-green-300)
+	var(--bng-add-green-400)
+	var(--bng-add-green-500)
+	var(--bng-add-green-600)
+	var(--bng-add-green-700)
+	var(--bng-add-green-800)
+	var(--bng-add-green-900)
+	```
+
+=== Add Yellow
+	```css
+	var(--bng-add-yellow-50)
+	var(--bng-add-yellow-100)
+	var(--bng-add-yellow-200)
+	var(--bng-add-yellow-300)
+	var(--bng-add-yellow-400)
+	var(--bng-add-yellow-500)
+	var(--bng-add-yellow-600)
+	var(--bng-add-yellow-700)
+	var(--bng-add-yellow-800)
+	var(--bng-add-yellow-900)
+	```
+
+=== Add Peach
+	```css
+	var(--bng-add-peach-50)
+	var(--bng-add-peach-100)
+	var(--bng-add-peach-200)
+	var(--bng-add-peach-300)
+	var(--bng-add-peach-400)
+	var(--bng-add-peach-500)
+	var(--bng-add-peach-600)
+	var(--bng-add-peach-700)
+	var(--bng-add-peach-800)
+	var(--bng-add-peach-900)
+	```
+
+=== Add Red
+	```css
+	var(--bng-add-red-50)
+	var(--bng-add-red-100)
+	var(--bng-add-red-200)
+	var(--bng-add-red-300)
+	var(--bng-add-red-400)
+	var(--bng-add-red-500)
+	var(--bng-add-red-600)
+	var(--bng-add-red-700)
+	var(--bng-add-red-800)
+	var(--bng-add-red-900)
+	```
+```
+
+=== 额外颜色预设
+
+```
+```css
+var(--bng-filter-orange) /*Filter preset to force SVGs to use bng-orange*/
+var(--bng-black-o8) /*80% opacity*/
+var(--bng-black-o6) /*60% opacity*/
+var(--bng-black-o4) /*40% opacity*/
+var(--bng-black-o2) /*20% opacity*/
+```
+```
+
+=== 圆角预设
+
+```
+```css
+var(--bng-corners-1) /*0.25rem*/
+var(--bng-corners-2) /*0.50rem*/
+var(--bng-corners-3) /*1.00rem*/
+```
+```