🌍

地图项目 · 设计规范

Design System Specification

🎨

颜色系统

文本颜色

Text Primary
#222423
Text Secondary
#858c88
Text Tertiary
#6f6d73
Primary
#232224

背景颜色

Background Gray
#f7f7f7
Background Light Gray
#f1f0f2
White 90%
rgba(255,255,255,0.9)

强调色

Accent Gradient
#555cd6 → #8149f2
Accent Purple 1
#555cd6
Accent Purple 2
#8149f2
🔤

字体系统

✏️字体家族：PingFang SC (苹方)
26px / 26px
Regular, Medium
区域位置 景区 价格星级 筛选
24px / 24px
Medium
回列表 希尔顿酒店示例
22px / 22px
Medium, Semibold
北京 北京市
20px / 28px
Regular
30万家酒店
20px / 20px
Regular, Medium
住 04-12 离 04-13
18px / 18px
Regular
反馈
16px / 16px
Medium
5公里 10公里
📐

间距系统

XS
4px
SM
6px
MD
8px
LG
12px
XL
14px
2XL
16px
3XL
20px
4XL
24px
场景间距值
筛选项间距14px
按钮内间距 (水平)24px / 20px
按钮内间距 (垂直)16px
搜索栏内间距12px (垂直) / 16px (水平)
图标与文字间距6px
日期行间距4px
⭕

圆角

Small (SM)
8px
城市气泡
Medium (MD)
12px
按钮、卡片、搜索栏
Full
100px
Home Indicator
🌫

阴影

Shadow SM
0px 2px 12px 0px rgba(0,0,0,0.16)
城市气泡
Shadow LG
0px 4px 24px 0px rgba(0,0,0,0.08)
浮动按钮
✨

特效

磨砂玻璃效果
Backdrop Blur
backdrop-filter: blur(8px)
💻

CSS 变量

/* 地图项目 Design System Variables */

:root {
  /* Colors - Text */
  --color-text-primary: #222423;
  --color-text-secondary: #858c88;
  --color-text-tertiary: #6f6d73;
  --color-primary: #232224;

  /* Colors - Background */
  --color-bg-gray: #f7f7f7;
  --color-bg-light-gray: #f1f0f2;
  --color-white-90: rgba(255, 255, 255, 0.9);

  /* Colors - Accent */
  --color-accent-purple-1: #555cd6;
  --color-accent-purple-2: #8149f2;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 14px;
  --spacing-2xl: 16px;
  --spacing-3xl: 20px;
  --spacing-4xl: 24px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-sm: 0px 2px 12px 0px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);

  /* Effects */
  --blur-backdrop: 8px;

  /* Typography */
  --font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
}