elevated-design

高级设计体系

一种受 Apple 企业设计语言启发的精致设计理念，旨在打造让人感觉由各领域顶尖专家精心雕琢的 Web 界面。这种方法将极简的精准感与情感共鸣相结合，把标准 Web 组件转化为精致、堪称画廊级别的体验，吸引关注并激发信心。

何时使用此技能

在用户提出以下需求时启用此技能：

• 高端落地页或主视觉区域
• 彰显权威感的企业营销网站
• 具有精致美感的产品展示
• 兼具编辑感与专业度的功能板块
• 能传递品质、精准感与信心的界面
• Apple 风格的极简企业设计
• 高端 SaaS 产品页面
• 需要建立信任感的品牌体验

触发短语：

• “让它更精致”
• “创建 Apple 风格的设计”
• “设计一个看起来高端／昂贵的东西”
• “让它有奢华科技品牌的感觉”
• “采用高级／Apple 设计方法”

设计理念

高级设计的支柱（受 Apple 启发）

1. 将充足留白作为战略工具

   • 空间并非空无一物，而是经过刻意安排、传递信息并彰显自信
   • 宽裕的边距和内边距营造呼吸感与层次
   • 元素在空间中悬浮，吸引人们单独关注
   • 留白以明确的节奏引导视线
   • Apple 原则： 少即是多，而且效果倍增

2. 极致精准的排版

   • 采用受 San Francisco 启发的系统字体，确保卓越易读性
   • 使用较轻到常规的字重（300-400），营造精致感
   • 采用鲜明的字号对比（72px 标题、48px 副标题）
   • 标题使用紧凑字距（-0.02em），正文采用视觉调整后的间距
   • 使用细腻的灰色文本（绝不使用 #000000，始终使用 #1d1d1f 或类似颜色）
   • Apple 原则： 排版就是界面

3. 基于网格的不对称布局

   • 采用 Apple 的 12 列网格，并有意打破网格
   • 使用 7-5 或 8-4 的比例，营造视觉张力
   • 交替运用不同尺度：大型主视觉图片搭配紧凑的辅助内容
   • 通过完美对齐平衡不对称
   • 打造既自由又精准的构图
   • Apple 原则： 可控的混乱孕育精致感

4. 克制的配色方案

   • 采用近乎单色的配色，并谨慎点缀色彩
   • 中性色基底：白色、米白色（#f5f5f7）、冷灰色（#1d1d1f）
   • 品牌强调色仅用于 CTA（占设计的 1-2%）
   • 渐变效果应细腻且目的明确
   • 通过摄影和产品图像，而非 UI，呈现色彩
   • Apple 原则： 色彩是工具，不是装饰

5. 有目的的交互

   • 微交互应让人感觉顺理成章，而非出人意料
   • 采用流畅的 400-600ms 过渡效果（越慢越显高端）
   • 悬停状态改变权重，而非颜色
   • 滚动触发的元素显现应带有动势
   • 触控目标应足够宽裕（至少 44x44px）
   • Apple 原则： 让动效承载意义

6. 对细节的极致关注

   • 尽可能进行亚像素级对齐
   • 统一采用 8px 基线网格
   • 排版需经过视觉调整（不只依赖数学计算）
   • 通过图层营造玻璃拟态效果与纵深感
   • 确保图标与文本完美对齐

字体排版（Apple 系统）

字体栈（受 San Francisco 启发）：

/* Tailwind Default (closest to SF Pro) */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

字体粗细：

font-light     → 300  /* Body copy, descriptions - Apple's go-to */
font-normal    → 400  /* Standard text, balanced */
font-medium    → 500  /* Subtle emphasis, nav items */
font-semibold  → 600  /* Headlines, but use sparingly */
font-bold      → 700  /* Avoid - too heavy for elevated design */

字号比例（受 Apple 启发的鲜明层次）：

text-xs    → 12px   /* Fine print, footnotes, legal */
text-sm    → 14px   /* Supporting text, captions */
text-base  → 16px   /* Body text (Apple's minimum) */
text-lg    → 18px   /* Large body, comfortable reading */
text-xl    → 20px   /* Small headings, emphasized text */
text-2xl   → 24px   /* Card titles, section labels */
text-3xl   → 30px   /* Subsection headings */
text-4xl   → 36px   /* Page titles */
text-5xl   → 48px   /* Hero headlines */
text-6xl   → 60px   /* Large hero text */
text-7xl   → 72px   /* Statement headlines (Apple events) */
text-8xl   → 96px   /* Ultra-dramatic (use with extreme restraint) */
text-9xl   → 128px  /* iPhone reveal style (hero images only) */

字距（视觉精准度）：

tracking-tighter  → -0.05em   /* Massive headlines (text-8xl+) */
tracking-tight    → -0.025em  /* Large headlines (text-5xl+) */
tracking-normal   → 0em       /* Body text, natural spacing */
tracking-wide     → 0.025em   /* Small text for legibility */
tracking-wider    → 0.05em    /* Uppercase labels */
tracking-widest   → 0.1em     /* Micro labels (11px uppercase) */

行高（Apple 标准）：

leading-none      → 1       /* Massive display type only */
leading-tight     → 1.1     /* Large headlines (text-5xl+) */
leading-snug      → 1.2     /* Headlines (text-2xl to text-4xl) */
leading-normal    → 1.5     /* Body text - Apple's preferred */
leading-relaxed   → 1.625   /* Long-form reading */
```html
text-xs    → 12px   /* Metadata, copyright */
text-sm    → 14px   /* Small body text */
text-base  → 16px   /* Standard body */
text-lg    → 18px   /* Large body */
text-xl    → 20px   /* Small headings */
text-2xl   → 24px   /* Card titles */
text-3xl   → 30px   /* Section headings */
text-4xl   → 36px   /* Page titles */
text-5xl   → 48px   /* Hero headlines */
text-6xl   → 60px   /* Large hero text */

字距：

tracking-tight    → -0.025em  /* Large headlines */
tracking-normal   → 0em       /* Body text */
tracking-wide     → 0.025em   /* Small labels */
tracking-wider    → 0.05em    /* Uppercase labels */
tracking-widest   → 0.1em     /* Ultra-wide labels */

色彩理念

精致的中性色：

text-slate-900  → #0f172a  /* Primary text */
text-slate-600  → #475569  /* Secondary text */
text-slate-500  → #64748b  /* Tertiary text */
text-slate-400  → #94a3b8  /* Subtle text, labels */

### Spacing System (Apple's 8px Grid)

**The 8px Baseline (Apple's Standard):**
Every measurement should be divisible by 8px for perfect rhythm.

**Component Spacing:**
```html
p-4   → 16px   /* Compact elements (badges, pills) */
p-6   → 24px   /* Small cards, tight content */
p-8   → 32px   /* Standard card padding (minimum) */
p-10  → 40px   /* Comfortable card padding */
p-12  → 48px   /* Large cards, feature sections */
p-16  → 64px   /* Extra-large padding, hero sections */
p-20  → 80px   /* Apple event-style spacing */
p-24  → 96px   /* Statement sections */

板块间距（宽裕，类似 Apple）：

py-12  → 48px   /* Compact sections */
py-16  → 64px   /* Standard sections */
py-20  → 80px   /* Comfortable sections */
py-24  → 96px   /* Large sections */
py-32  → 128px  /* Hero sections, dramatic reveals */
py-40  → 160px  /* Apple event-style spacing */
py-48  → 192px  /* Ultra-premium sections */

间隙与边距（以 8px 为增量）：

gap-4   → 16px   /* Tight groups */
gap-6   → 24px   /* Related elements */
gap-8   → 32px   /* Standard separation */
gap-12  → 48px   /* Section boundaries */
gap-16  → 64px   /* Large separation */
gap-20  → 80px   /* Dramatic separation */
gap-24  → 96px   /* Hero to content transition */

mb-4   → 16px    /* Paragraph spacing */
mb-6   → 24px    /* Subsection spacing */
mb-8   → 32px    /* Element separation */
mb-12  → 48px    /* Section separation */
mb-16  → 64px    /* Large separation */
mb-20  → 80px    /* Dramatic separation */
mb-24  → 96px    /* Hero to section */

布局容器（Apple 的方法）：

max-w-screen-2xl → 1536px  /* Ultra-wide (product grids) */
max-w-7xl        → 1280px  /* Wide layouts (Apple default) */
max-w-6xl        → 1152px  /* Standard editorial */
max-w-5xl        → 1024px  /* Narrow, focused content */
max-w-4xl        → 896px   /* Article-style layouts */
max-w-3xl        → 768px   /* Long-form reading */
max-w-2xl        → 672px   /* Comfortable reading width */

响应式内边距（Apple 的断点策略）：

px-6 sm:px-8 lg:px-12     /* Standard responsive padding */
px-8 sm:px-12 lg:px-20    /* Generous responsive padding */
py-12 sm:py-16 lg:py-24   /* Section responsive padding */
py-16 sm:py-24 lg:py-32   /* Hero responsive padding */
```2  → 48px   /* Extra large padding */
p-16  → 64px   /* Section padding */


py-16  → 64px   /* Minimum section */
py-24  → 96px   /* Standard section */
py-32  → 128px  /* Large section */


mb-8   → 32px   /* Element separation */
mb-12  → 48px   /* Section separation */
mb-16  → 64px   /* Large separation */
mb-24  → 96px   /* Dramatic separation */

布局容器：

max-w-7xl  → 1280px  /* Wide layouts */
max-w-6xl  → 1152px  /* Standard */
max-w-5xl  → 1024px  /* Narrow, focused */

圆角（更大）

rounded-xl   → 12px   /* Minimum for cards */
rounded-2xl  → 16px   /* Standard cards */
rounded-3xl  → 24px   /* Large images */

---

Apple 风格按钮系统

主要 CTA（Apple 蓝）：

<a href="#" class="inline-flex items-center justify-center gap-2 px-5 py-3 bg-[#0071e3] text-white text-[15px] font-normal rounded-xl hover:bg-[#0077ED] transition-all duration-400">
  <span>Buy now</span>
</a>

次要按钮（描边）：

<button class="inline-flex items-center justify-center gap-2 px-5 py-3 border-2 border-[#0071e3] text-[#0071e3] text-[15px] font-normal rounded-xl hover:bg-[#0071e3]/5 transition-all duration-400">
  <span>Learn more</span>
</button>

第三级文本链接（Apple 风格）：

<a href="#" class="inline-flex items-center gap-1.5 text-[#0071e3] text-[15px] font-normal hover:underline">
  <span>Learn more</span>
  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
  </svg>
</a>

大型 CTA（主视觉区域）：

<a href="#" class="inline-flex items-center justify-center gap-2 px-7 py-4 bg-[#0071e3] text-white text-base font-normal rounded-xl hover:bg-[#0077ED] transition-all duration-400 shadow-lg hover:shadow-xl">
  <span>Get started</span>
</a>

设计规则：

• 内边距：标准按钮使用 px-5 py-3，大型按钮使用 px-7 py-4
• 圆角：rounded-xl（12px）
• 字号：15px（Apple 偏好的按钮字号）
• 过渡效果：使用 duration-400，营造高级质感
• 悬停效果：轻微调整颜色，避免过于明显的变化

---

组件模式

功能卡片（悬浮样式）

非对称大型卡片：

<div class="col-span-12 lg:col-span-7 group">
  <div class="relative h-full bg-slate-50 border border-slate-100 rounded-2xl p-10 hover:bg-white hover:border-slate-200 transition-all duration-300">
    
    
    <div class="mb-8">
      <div class="inline-flex items-center justify-center w-16 h-16 rounded-xl border border-blue-200 bg-blue-50">
        <i class="ri-icon-name text-3xl text-[#1b75bc]"></i>
      </div>
    </div>
    
    
    <h3 class="text-2xl font-light text-slate-900 mb-4 tracking-tight">
      Feature Title
    </h3>
    
    <p class="text-base text-slate-500 leading-relaxed mb-8 max-w-xl">
      Description with refined tone and generous spacing.
    </p>
    
    
    <div class="space-y-3 pt-6 border-t border-slate-200">
      <div class="flex items-center gap-3 text-sm text-slate-600">
        <div class="w-1 h-1 rounded-full bg-[#1b75bc]"></div>
        <span class="font-light">Feature item</span>
      </div>
    </div>
  </div>
</div>

非对称紧凑型卡片：

<div class="col-span-12 lg:col-span-5 group">
  <div class="relative h-full bg-slate-50 border border-slate-100 rounded-2xl p-8 hover:bg-white hover:border-slate-200 transition-all duration-300">
    
    <div class="mb-6">
      <div class="inline-flex items-center justify-center w-14 h-14 rounded-xl border border-purple-200 bg-purple-50">
        <i class="ri-icon-name text-2xl text-purple-600"></i>
      </div>
    </div>
    
    <h3 class="text-xl font-light text-slate-900 mb-3 tracking-tight">
      Feature Title
    </h3>
    
    <p class="text-sm text-slate-500 leading-relaxed mb-6">
      Refined description.
    </p>
    
    <div class="space-y-2.5 pt-4 border-t border-slate-200">
      <div class="flex items-center gap-2.5 text-xs text-slate-600">
        <div class="w-1 h-1 rounded-full bg-[#1b75bc]"></div>
        <span class="font-light">Feature item</span>
      </div>
    </div>
  </div>
</div>

分区标题（悬浮样式）

带大写标签的极简样式：

<div class="mb-24">
  <p class="text-[11px] font-medium tracking-[0.2em] text-slate-400 uppercase mb-6">
    Section Label
  </p>
  <h2 class="text-5xl sm:text-6xl font-light text-slate-900 tracking-tight leading-[1.1] max-w-3xl">
    Primary headline with dramatic scale.
    <span class="text-slate-400">Optional subtle accent.</span>
  </h2>
</div>

带描述的样式：

<div class="mb-20">
  <p class="text-xs font-medium tracking-wider text-slate-400 uppercase mb-4">
    Features
  </p>
  <h2 class="text-4xl sm:text-5xl font-light text-slate-900 tracking-tight leading-tight mb-6">
    Everything your garage needs.
    <br/>
    <span class="text-slate-400">Nothing it doesn't.</span>
  </h2>
  <p class="text-lg text-slate-500 max-w-2xl">
    Refined description with generous spacing and thoughtful typography.
  </p>
</div>

非对称网格布局

7-5 分割模式：

<div class="grid grid-cols-12 gap-8">
  
  <div class="col-span-12 lg:col-span-7">
    
  </div>
  
  
  <div class="col-span-12 lg:col-span-5">
    
  </div>
  
  
  <div class="col-span-12 lg:col-span-5">
    
  </div>
  
  
  <div class="col-span-12 lg:col-span-7">
    
  </div>
</div>

背景元素（微妙）

分层背景：

<section class="relative py-32 bg-white overflow-hidden">
  
  <div class="absolute inset-0 opacity-[0.03]">
    <div class="absolute top-20 left-10 w-96 h-96 rounded-full bg-[#1b75bc]"></div>
    <div class="absolute bottom-20 right-10 w-96 h-96 rounded-full bg-slate-900"></div>
  </div>
  
  <div class="relative">
    
  </div>
</section>

收尾元素（精致）

微妙分隔线：

<div class="mt-24 text-center">
  <div class="inline-flex items-center gap-2 text-xs text-slate-400 tracking-wider">
    <div class="w-12 h-px bg-slate-200"></div>
    <span class="uppercase">Crafted for excellence</span>
    <div class="w-12 h-px bg-slate-200"></div>
  </div>
</div>

---

设计规则（Apple 版）

建议 ✓

• 使用宽松的间距 - 严格遵循 8px 网格
• 采用较细的字体字重 - 几乎所有内容都使用 font-light（300）
• 打造有意为之的非对称布局 - 7-5 分割、交替缩放
• 精准使用颜色 - 以近乎单色为主，只用一种强调色
• 采用鲜明的字号层级 - 主视觉使用 text-7xl，正文至少使用 text-base
• 尽量少用项目符号 - 使用 1px 圆点（w-1 h-1）或微妙的勾号
• 使用精致的边框 - 采用 Apple 的 #d2d2d7 或 border-slate-200
• 采用缓慢、平滑的过渡效果 - 使用 duration-400 到 duration-600
• 运用玻璃拟态 - 使用带不透明度的 backdrop-blur 营造层次感
• 实现精准的视觉对齐 - 不只追求数学上的对齐，也要兼顾视觉平衡
• 提供宽裕的触控区域 - 所有交互元素至少为 44x44px
• 使用编辑风格摄影 - 高分辨率、专业且尺寸充足
• 采用自然阴影 - 阴影轻柔且有方向感，模拟来自上方的光线

避免 ✗

• 避免间距过紧 - 不要破坏 8px 网格
• 避免使用粗重字体 - 不要使用 font-bold（700+）
• 避免僵硬对称 - 避免 6-6、4-4-4、3-3-3-3 网格
• 避免颜色杂乱 - 仅使用中性色和一种强调色
• 避免字号过小 - 正文字号不要低于 16px
• 避免图标过多 - 图标应轻声提示，而非喧宾夺主
• 避免粗边框 - 除按钮外，不要使用 2px 或更粗的边框
• 避免快速过渡 - 避免使用 duration-150 或更短时长
• 避免扁平设计 - 始终通过阴影或玻璃效果增添微妙层次感
• 避免布局杂乱 - 犹豫时就删减元素
• 避免触控区域过小 - 尺寸不得小于 44x44px
• 避免图库照片 - 不要使用通用的商务人士对着笔记本电脑微笑的照片
• 避免厚重的投影 - 避免使用纯黑色阴影

---

字体层级

落地页示例

<h1 class="text-6xl sm:text-7xl font-light text-slate-900 tracking-tight leading-[1.05]">
  Primary Headline
</h1>
<p class="text-xl text-slate-500 font-light mt-6 max-w-2xl leading-relaxed">
  Supporting description with generous sizing.
</p>


<h2 class="text-5xl font-light text-slate-900 tracking-tight mb-16">
  Section Title
</h2>


<h3 class="text-2xl font-light text-slate-900 mb-4">
  Subsection Heading
</h3>


<p class="text-base text-slate-500 leading-relaxed">
  Body copy with comfortable line height.
</p>


<span class="text-xs font-medium tracking-wider text-slate-400 uppercase">
  Label
</span>

---

颜色使用指南

主要内容

• 标题：text-slate-900
• 正文：text-slate-500 或 text-slate-600
• 标签：text-slate-400
• 次要文本：text-slate-400

背景

• 页面：bg-white 或 bg-slate-50
• 卡片：白色背景上使用 bg-slate-50，或 slate-50 背景上使用 bg-white
• 悬停状态：从 slate-50 过渡到白色

强调色

• 品牌主色：仅用于微小元素（圆点、小图标）
• 边框：border-slate-100 或 border-slate-200
• 不要在大面积区域使用强调色

---

动画理念

平滑且恰到好处：

transition-all duration-300


hover:bg-white hover:border-slate-200


group-hover:bg-blue-100 transition-colors duration-300

原则：

• 过渡效果应如水流般自然，而非电流般突兀
• 标准时长使用 300ms
• 避免突然变化
• 悬停状态应轻声提示，而非喧宾夺主

---

响应式方案

移动端优先，断点设置宽松：

<h1 class="text-4xl sm:text-5xl lg:text-6xl font-light">
  Headline
</h1>


<div class="px-6 py-16 sm:px-8 sm:py-24 lg:px-12 lg:py-32">


<div class="grid grid-cols-12 gap-6 lg:gap-8">
  <div class="col-span-12 lg:col-span-7">

---

完整分区示例

<section class="relative py-32 bg-white overflow-hidden">
  
  <div class="absolute inset-0 opacity-[0.03]">
    <div class="absolute top-20 left-10 w-96 h-96 rounded-full bg-[#1b75bc]"></div>
    <div class="absolute bottom-20 right-10 w-96 h-96 rounded-full bg-slate-900"></div>
  </div>

  <div class="relative max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
      
    
    <div class="mb-24">
      <p class="text-[11px] font-medium tracking-[0.2em] text-slate-400 uppercase mb-6">
        Features
      </p>
      <h2 class="text-5xl sm:text-6xl font-light text-slate-900 tracking-tight leading-[1.1] max-w-3xl">
        Everything your garage needs.
        <br/>
        <span class="text-slate-400">Nothing it doesn't.</span>
      </h2>
    </div>

    
    <div class="grid grid-cols-12 gap-8">
      
      
      <div class="col-span-12 lg:col-span-7 group">
        <div class="relative h-full bg-slate-50 border border-slate-100 rounded-2xl p-10 hover:bg-white hover:border-slate-200 transition-all duration-300">
          <div class="mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-xl border border-blue-200 bg-blue-50">
              <i class="ri-calendar-event-line text-3xl text-[#1b75bc]"></i>
            </div>
          </div>
          
          <h3 class="text-2xl font-light text-slate-900 mb-4 tracking-tight">
            Never miss an appointment
          </h3>
          
          <p class="text-base text-slate-500 leading-relaxed mb-8 max-w-xl">
            Customers book online 24/7 while automatic reminders keep your schedule full and your team productive.
          </p>
          
          <div class="space-y-3 pt-6 border-t border-slate-200">
            <div class="flex items-center gap-3 text-sm text-slate-600">
              <div class="w-1 h-1 rounded-full bg-[#1b75bc]"></div>
              <span class="font-light">24/7 online booking</span>
            </div>
            <div class="flex items-center gap-3 text-sm text-slate-600">
              <div class="w-1 h-1 rounded-full bg-[#1b75bc]"></div>
              <span class="font-light">Auto SMS/email reminders</span>
            </div>
          </div>
        </div>
      </div>

      
      <div class="col-span-12 lg:col-span-5 group">
        <div class="relative h-full bg-slate-50 border border-slate-100 rounded-2xl p-8 hover:bg-white hover:border-slate-200 transition-all duration-300">
          <div class="mb-6">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-xl border border-purple-200 bg-purple-50">
              <i class="ri-file-list-3-line text-2xl text-purple-600"></i>
            </div>
          </div>
          
          <h3 class="text-xl font-light text-slate-900 mb-3 tracking-tight">
            Digital job tracking
          </h3>
          
          <p class="text-sm text-slate-500 leading-relaxed mb-6">
            Replace paper trails with real-time updates customers can follow.
          </p>
          
          <div class="space-y-2.5 pt-4 border-t border-slate-200">
            <div class="flex items-center gap-2.5 text-xs text-slate-600">
              <div class="w-1 h-1 rounded-full bg-[#1b75bc]"></div>
              <span class="font-light">Instant estimates</span>
            </div>
          </div>
        </div>
      </div>

    </div>

    
    <div class="mt-24 text-center">
      <div class="inline-flex items-center gap-2 text-xs text-slate-400 tracking-wider">
        <div class="w-12 h-px bg-slate-200"></div>
        <span class="uppercase">Crafted for automotive excellence</span>
        <div class="w-12 h-px bg-slate-200"></div>
      </div>
    </div>

  </div>
</section>

---

何时使用与标准设计的对比

适用于悬浮式 / Apple 风格设计的场景：

• 🎯 落地页和营销网站
• 🎯 产品展示和发布页面
• 🎯 高端功能分区
• 🎯 品牌体验和“关于”页面
• 🎯 需要彰显权威感的企业网站
• 🎯 高端电商产品页面
• 🎯 作品集展示
• 🎯 活动 / 会议网站
• 🎯 SaaS 定价和功能页面

适用于标准 Gixat 设计的场景：

• 📊 应用仪表板
• 📊 数据表格和复杂表单
• 📊 管理界面
• 📊 内部工具和实用工具
• 📊 高密度信息展示
• 📊 实时监控界面

混合方案：

结合两套系统——营销区域采用提升版设计，功能性应用区域采用标准设计。过渡应自然流畅：

• 营销页面 → 提升版设计
• 仪表板/应用 → 标准设计
• 设置/个人资料 → 标准设计并融入提升版设计的细节

---

无障碍（Apple 标准）

触控目标（最小 44x44px）：

<button class="min-w-[44px] min-h-[44px]">


<a class="inline-flex items-center px-5 py-3">  

对比度（尽可能达到 WCAG AAA）：

text-[#1d1d1f] on bg-white → 15.8:1 (AAA ✓)
text-[#424245] on bg-white → 10.2:1 (AAA ✓)
text-[#6e6e73] on bg-white → 5.4:1 (AA ✓)

减少动态效果：

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

屏幕阅读器优化：

<nav aria-label="Main navigation">
<main aria-label="Main content">
<button aria-label="Close menu" aria-expanded="false">


<div aria-hidden="true">


<a href="#main-content" class="sr-only focus:not-sr-only">
  Skip to main content
</a>

---

Apple 风格设计清单

完成任何组件前，请确认：

• 8px 网格：所有间距均可被 8 整除
• 字体：大多数文本使用 font-light（300）
• 字号比例：层级鲜明（主视觉使用 text-7xl，正文使用 text-base 或更大字号）
• 颜色：接近单色，仅使用一种精准点缀色
• 间距：留白充足（卡片最小使用 p-8，区块使用 py-24）
• 圆角：卡片使用 rounded-2xl（16px）
• 阴影：柔和自然（光线从上方照射）
• 过渡：缓慢（duration-400 至 duration-600）
• 玻璃拟态：在适当场景使用带透明度的 backdrop-blur
• 非对称布局：使用 7-5 或 8-4 网格划分
• 触控目标：所有交互元素最小为 44x44px
• 对比度：至少达到 WCAG AA
• 减少动态效果：尊重用户偏好
• 语义：使用恰当的 HTML5 和 ARIA 标签
• 响应式：采用移动优先设计，并实现平滑缩放

---

这套提升版设计系统将 Apple 卓越的企业级设计带入 Web 界面——将极简的精准与情感共鸣相结合，打造既令人信服又亲切易用的体验。