diff --git a/miniprogram/utils/__tests__/safeArea.style.test.mjs b/miniprogram/utils/__tests__/safeArea.style.test.mjs
new file mode 100644
index 000000000..d21e306c0
--- /dev/null
+++ b/miniprogram/utils/__tests__/safeArea.style.test.mjs
@@ -0,0 +1,15 @@
+import assert from 'node:assert/strict'
+import { buildSafeAreaCssVarsStyle } from '../safeAreaCss.js'
+
+const style = buildSafeAreaCssVarsStyle({
+  topSafeHeight: 44,
+  navContentHeight: 40,
+  headerHeight: 84,
+  capsuleRightSafeWidth: 96,
+})
+
+assert.equal(style['--sq-safe-top'], '44px')
+assert.equal(style['--sq-nav-height'], '40px')
+assert.equal(style['--sq-header-height'], '84px')
+assert.equal(style['--sq-capsule-right-safe'], '96px')
+console.log('ok')
diff --git a/miniprogram/utils/safeArea.js b/miniprogram/utils/safeArea.js
index d6e6aa500..bc3a3710f 100644
--- a/miniprogram/utils/safeArea.js
+++ b/miniprogram/utils/safeArea.js
@@ -1,3 +1,7 @@
+import { buildSafeAreaCssVarsStyle } from './safeAreaCss.js'
+
+export { buildSafeAreaCssVarsStyle }
+
 const DEFAULT_NAV_CONTENT_HEIGHT = 44
 const DEFAULT_GAP = 8
 const DEFAULT_HORIZONTAL_PADDING = 8
@@ -79,3 +83,7 @@ export function getGlobalSafeArea() {
   const app = getApp?.()
   return app?.globalData?.safeArea || computeSafeAreaMetrics()
 }
+
+export function getSafeAreaStyle() {
+  return buildSafeAreaCssVarsStyle(getGlobalSafeArea())
+}
diff --git a/miniprogram/utils/safeAreaCss.js b/miniprogram/utils/safeAreaCss.js
new file mode 100644
index 000000000..48a7fa4d6
--- /dev/null
+++ b/miniprogram/utils/safeAreaCss.js
@@ -0,0 +1,8 @@
+export function buildSafeAreaCssVarsStyle(metrics) {
+  return {
+    '--sq-safe-top': `${metrics.topSafeHeight}px`,
+    '--sq-nav-height': `${metrics.navContentHeight}px`,
+    '--sq-header-height': `${metrics.headerHeight}px`,
+    '--sq-capsule-right-safe': `${metrics.capsuleRightSafeWidth}px`,
+  }
+}