Back to Details

elevated-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Elevated Design System

高端设计系统

A sophisticated design philosophy inspired by Apple's corporate design language—creating web interfaces that feel crafted by experts at the top of their field. This approach combines minimalist precision with emotional resonance, transforming standard web components into refined, gallery-worthy experiences that command attention and inspire confidence.
这是一种受Apple企业设计语言启发的高端设计理念——打造出仿佛由顶尖领域专家精心雕琢的网页界面。该方法将极简精准度与情感共鸣相结合，把标准网页组件转化为精致、堪比画廊级别的体验，既能吸引注意力，又能激发用户信任感。

When to Use This Skill

何时使用该设计理念

Activate this skill when users request:
  • Premium landing pages or hero sections
  • Corporate marketing websites that command authority
  • Product showcases with sophisticated aesthetics
  • Feature sections that feel editorial yet professional
  • Interfaces that evoke quality, precision, and confidence
  • Apple-style minimalist corporate design
  • High-end SaaS product pages
  • Brand experiences that need to inspire trust
Trigger phrases:
  • "Make it more sophisticated"
  • "Create an Apple-style design"
  • "Design something that looks premium/expensive"
  • "Make it feel like a luxury tech brand"
  • "Use the elevated/Apple design approach"
当用户提出以下需求时，启用该设计方法：
  • 高端着陆页或首屏板块
  • 彰显权威感的企业营销网站
  • 具有精致美学的产品展示页
  • 兼具编辑感与专业性的功能板块
  • 能传递品质感、精准度与信任感的界面
  • Apple风格的极简企业设计
  • 高端SaaS产品页面
  • 需要激发用户信任感的品牌体验
触发短语：
  • "让设计更精致"
  • "打造Apple风格的设计"
  • "设计出高端/奢华感的界面"
  • "让它拥有奢侈科技品牌的质感"
  • "采用高端/Apple设计手法"

Design Philosophy

设计理念

The Pillars of Elevated Design (Apple-Inspired)

高端设计的核心支柱（Apple启发）

  1. Generous Whitespace as a Strategic Tool
    • Space is not empty—it's intentional, communicative, and confident
    • Large margins and padding create breathing room and hierarchy
    • Elements float in space, commanding individual attention
    • Whitespace guides the eye with purposeful rhythm
    • Apple principle: Less is exponentially more
  2. Ultra-Precise Typography
    • San Francisco-inspired system fonts with exceptional legibility
    • Light to regular weights (300-400) for sophistication
    • Dramatic scale contrasts (72px headlines, 48px subheads)
    • Tight tracking (-0.02em) for headlines, optical spacing for body
    • Text color in subtle grays (never #000000, always #1d1d1f or similar)
    • Apple principle: Typography is the interface
  3. Grid-Based Asymmetry
    • Apple's 12-column grid with intentional breaks
    • Use 7-5 or 8-4 splits for visual tension
    • Alternate scale: large hero images, compact supporting content
    • Balance asymmetry with perfect alignment
    • Create compositions that feel both free and precise
    • Apple principle: Controlled chaos breeds sophistication
  4. Restrained Color Palettes
    • Near-monochromatic with surgical color accents
    • Neutral foundation: white, off-white (#f5f5f7), cool gray (#1d1d1f)
    • Brand accent used for CTAs only (1-2% of design)
    • Gradients are subtle and purpose-driven
    • Photography and product imagery provide color, not UI
    • Apple principle: Color is a tool, not decoration
  5. Purposeful Interactions
    • Micro-interactions that feel inevitable, not surprising
    • Smooth 400-600ms transitions (slower = more premium)
    • Hover states that shift weight, not color
    • Scroll-triggered reveals with momentum
    • Touch targets are generous (44x44px minimum)
    • Apple principle: Motion with meaning
  6. Obsessive Attention to Detail
    • Sub-pixel alignment wherever possible
    • Consistent 8px baseline grid
    • Typography with optical adjustments (not just math)
    • Glass morphism and depth through layering
    • Perfect icon-to-text alignment
  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基线网格
    • 排版采用光学调整（而非仅依赖数学计算）
    • 通过毛玻璃效果与分层营造深度感
    • 图标与文本完美对齐

Typography (Apple System)

排版（Apple系统风格）

Font Stack (San Francisco-Inspired):
css
/* Tailwind Default (closest to SF Pro) */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
Font Weights:
html
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 */
Type Scale (Apple-Inspired Dramatic Hierarchy):
html
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) */
Letter Spacing (Optical Precision):
html
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) */
Line Height (Apple Standard):
html
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 */
Letter Spacing:
html
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 */
字体栈（受San Francisco启发）：
css
/* Tailwind默认字体（最接近SF Pro） */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
字重：
html
font-light     → 300  /* 正文、描述文本 - Apple的首选字重 */
font-normal    → 400  /* 标准文本，平衡感适中 */
font-medium    → 500  /* 轻微强调文本、导航项 */
font-semibold  → 600  /* 标题，但需谨慎使用 */
font-bold      → 700  /* 避免使用 - 过重，不符合高端设计风格 */
字号层级（Apple启发的极具冲击力的层级）：
html
text-xs    → 12px   /* 小字、脚注、法律文本 */
text-sm    → 14px   /* 辅助文本、说明文字 */
text-base  → 16px   /* 正文（Apple的最小字号要求） */
text-lg    → 18px   /* 大尺寸正文，提升阅读舒适度 */
text-xl    → 20px   /* 小标题、强调文本 */
text-2xl   → 24px   /* 卡片标题、板块标签 */
text-3xl   → 30px   /* 子板块标题 */
text-4xl   → 36px   /* 页面标题 */
text-5xl   → 48px   /* 首屏标题 */
text-6xl   → 60px   /* 大尺寸首屏文本 */
text-7xl   → 72px   /* 宣言式标题（Apple发布会风格） */
text-8xl   → 96px   /* 极具冲击力的标题（需极度谨慎使用） */
text-9xl   → 128px  /* iPhone发布会风格（仅用于首屏图片） */
字距（光学精准度）：
html
tracking-tighter  → -0.05em   /* 超大标题（text-8xl及以上） */
tracking-tight    → -0.025em  /* 大标题（text-5xl及以上） */
tracking-normal   → 0em       /* 正文，自然字距 */
tracking-wide     → 0.025em   /* 小文本，提升可读性 */
tracking-wider    → 0.05em    /* 大写标签 */
tracking-widest   → 0.1em     /* 微型标签（11px大写文本） */
行高（Apple标准）：
html
leading-none      → 1       /* 仅用于超大展示型文本 */
leading-tight     → 1.1     /* 大标题（text-5xl及以上） */
leading-snug      → 1.2     /* 标题（text-2xl到text-4xl） */
leading-normal    → 1.5     /* 正文 - Apple的首选行高 */
leading-relaxed   → 1.625   /* 长文本阅读 */
```html
text-xs    → 12px   /* 元数据、版权信息 */
text-sm    → 14px   /* 小尺寸正文 */
text-base  → 16px   /* 标准正文 */
text-lg    → 18px   /* 大尺寸正文 */
text-xl    → 20px   /* 小标题 */
text-2xl   → 24px   /* 卡片标题 */
text-3xl   → 30px   /* 板块标题 */
text-4xl   → 36px   /* 页面标题 */
text-5xl   → 48px   /* 首屏标题 */
text-6xl   → 60px   /* 大尺寸首屏文本 */
字距：
html
tracking-tight    → -0.025em  /* 大标题 */
tracking-normal   → 0em       /* 正文 */
tracking-wide     → 0.025em   /* 小标签 */
tracking-wider    → 0.05em    /* 大写标签 */
tracking-widest   → 0.1em     /* 超宽标签 */

Color Philosophy

色彩理念

Sophisticated Neutrals:
html
<!-- Text (Never pure black) -->
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 */
精致中性色：
html
<!-- 文本（绝不用纯黑） -->
text-slate-900  → #0f172a  /* 主文本 */
text-slate-600  → #475569  /* 次要文本 */
text-slate-500  → #64748b  /* 第三层级文本 */
text-slate-400  → #94a3b8  /* 柔和文本、标签 */

Spacing System (Apple's 8px Grid)

间距系统（Apple的8px网格）

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 */
Section Spacing (Generous, like Apple):
html
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 */
Gap & Margins (8px increments):
html
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 */
Layout Containers (Apple's Approach):
html
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 */
Responsive Padding (Apple's breakpoint strategy):
html
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 */

<!-- Section Spacing -->
py-16  → 64px   /* Minimum section */
py-24  → 96px   /* Standard section */
py-32  → 128px  /* Large section */

<!-- Margins -->
mb-8   → 32px   /* Element separation */
mb-12  → 48px   /* Section separation */
mb-16  → 64px   /* Large separation */
mb-24  → 96px   /* Dramatic separation */
Layout Containers:
html
max-w-7xl  → 1280px  /* Wide layouts */
max-w-6xl  → 1152px  /* Standard */
max-w-5xl  → 1024px  /* Narrow, focused */
8px基线（Apple标准）： 所有尺寸都应是8px的倍数，以实现完美的节奏感。
组件间距：
html
p-4   → 16px   /* 紧凑元素（徽章、胶囊按钮） */
p-6   → 24px   /* 小卡片、紧凑内容 */
p-8   → 32px   /* 标准卡片内边距（最小值） */
p-10  → 40px   /* 舒适的卡片内边距 */
p-12  → 48px   /* 大卡片、功能板块 */
p-16  → 64px   /* 超大内边距、首屏板块 */
p-20  → 80px   /* Apple发布会风格间距 */
p-24  → 96px   /* 宣言式板块 */
板块间距（充裕留白，如Apple风格）：
html
py-12  → 48px   /* 紧凑板块 */
py-16  → 64px   /* 标准板块 */
py-20  → 80px   /* 舒适的板块间距 */
py-24  → 96px   /* 大板块 */
py-32  → 128px  /* 首屏板块、极具冲击力的渐显效果 */
py-40  → 160px  /* Apple发布会风格间距 */
py-48  → 192px  /* 超高端板块 */
间隙与外边距（8px递增）：
html
gap-4   → 16px   /* 紧凑分组 */
gap-6   → 24px   /* 关联元素 */
gap-8   → 32px   /* 标准分隔 */
gap-12  → 48px   /* 板块边界 */
gap-16  → 64px   /* 大分隔 */
gap-20  → 80px   /* 极具冲击力的分隔 */
gap-24  → 96px   /* 首屏到内容的过渡 */

mb-4   → 16px    /* 段落间距 */
mb-6   → 24px    /* 子板块间距 */
mb-8   → 32px    /* 元素分隔 */
mb-12  → 48px    /* 板块分隔 */
mb-16  → 64px    /* 大分隔 */
mb-20  → 80px    /* 极具冲击力的分隔 */
mb-24  → 96px    /* 首屏到板块的过渡 */
布局容器（Apple的方法）：
html
max-w-screen-2xl → 1536px  /* 超宽布局（产品网格） */
max-w-7xl        → 1280px  /* 宽布局（Apple默认） */
max-w-6xl        → 1152px  /* 标准编辑式布局 */
max-w-5xl        → 1024px  /* 窄版、聚焦型内容 */
max-w-4xl        → 896px   /* 文章式布局 */
max-w-3xl        → 768px   /* 长文本阅读 */
max-w-2xl        → 672px   /* 舒适的阅读宽度 */
响应式内边距（Apple的断点策略）：
html
px-6 sm:px-8 lg:px-12     /* 标准响应式内边距 */
px-8 sm:px-12 lg:px-20    /* 充裕的响应式内边距 */
py-12 sm:py-16 lg:py-24   /* 板块响应式内边距 */
py-16 sm:py-24 lg:py-32   /* 首屏响应式内边距 */
```2  → 48px   /* 超大内边距 */
p-16  → 64px   /* 板块内边距 */

<!-- 板块间距 -->
py-16  → 64px   /* 最小板块间距 */
py-24  → 96px   /* 标准板块间距 */
py-32  → 128px  /* 大板块间距 */

<!-- 外边距 -->
mb-8   → 32px   /* 元素分隔 */
mb-12  → 48px   /* 板块分隔 */
mb-16  → 64px   /* 大分隔 */
mb-24  → 96px   /* 极具冲击力的分隔 */
布局容器：
html
max-w-7xl  → 1280px  /* 宽布局 */
max-w-6xl  → 1152px  /* 标准布局 */
max-w-5xl  → 1024px  /* 窄版、聚焦型布局 */

Border Radius (Larger)

圆角（更大尺寸）

html
rounded-xl   → 12px   /* Minimum for cards */
rounded-2xl  → 16px   /* Standard cards */
rounded-3xl  → 24px   /* Large images */
html
rounded-xl   → 12px   /* 卡片最小圆角 */
rounded-2xl  → 16px   /* 标准卡片圆角 */
rounded-3xl  → 24px   /* 大图片圆角 */

Apple-Inspired Button System

Apple启发的按钮系统

Primary CTA (Apple Blue):
html
<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>
Secondary Button (Outlined):
html
<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>
Tertiary Text Link (Apple style):
html
<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>
Large CTA (Hero Section):
html
<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>
Design Rules:
  • Padding: 
    px-5 py-3
    for standard, 
    px-7 py-4
    for large
  • Border radius: 
    rounded-xl
    (12px)
  • Font size: 15px (Apple's preferred button size)
  • Transitions: 
    duration-400
    for premium feel
  • Hover: Subtle color shift, never dramatic transformations
主要CTA按钮（Apple蓝色）：
html
<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>
次要按钮（轮廓型）：
html
<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风格）：
html
<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按钮（首屏板块）：
html
<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
    以体现高端质感
  • 悬停状态：微妙的颜色变化，绝不用夸张的变形

Component Patterns

组件模式

Feature Card (Elevated Style)

高端风格功能卡片

Asymmetric Large Card:
html
<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">
    
    <!-- Icon with refined treatment -->
    <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>
    
    <!-- Light typography -->
    <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>
    
    <!-- Minimal list with dots -->
    <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>
Asymmetric Compact Card:
html
<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>
非对称大尺寸卡片：
html
<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>
非对称紧凑卡片：
html
<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>

Section Header (Elevated)

高端板块标题

Minimal with Uppercase Label:
html
<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>
With Description:
html
<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>
带大写标签的极简风格：
html
<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>
带描述文本的风格：
html
<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>

Asymmetric Grid Layout

非对称网格布局

7-5 Split Pattern:
html
<div class="grid grid-cols-12 gap-8">
  <!-- Large card (7 columns) -->
  <div class="col-span-12 lg:col-span-7">
    <!-- Large content -->
  </div>
  
  <!-- Compact card (5 columns) -->
  <div class="col-span-12 lg:col-span-5">
    <!-- Compact content -->
  </div>
  
  <!-- Compact card (5 columns) -->
  <div class="col-span-12 lg:col-span-5">
    <!-- Compact content -->
  </div>
  
  <!-- Large card (7 columns) -->
  <div class="col-span-12 lg:col-span-7">
    <!-- Large content -->
  </div>
</div>
7-5分割模式：
html
<div class="grid grid-cols-12 gap-8">
  <!-- 大卡片（7列） -->
  <div class="col-span-12 lg:col-span-7">
    <!-- 大尺寸内容 -->
  </div>
  
  <!-- 紧凑卡片（5列） -->
  <div class="col-span-12 lg:col-span-5">
    <!-- 紧凑内容 -->
  </div>
  
  <!-- 紧凑卡片（5列） -->
  <div class="col-span-12 lg:col-span-5">
    <!-- 紧凑内容 -->
  </div>
  
  <!-- 大卡片（7列） -->
  <div class="col-span-12 lg:col-span-7">
    <!-- 大尺寸内容 -->
  </div>
</div>

Background Elements (Subtle)

微妙背景元素

Layered Backgrounds:
html
<section class="relative py-32 bg-white overflow-hidden">
  <!-- Ultra-subtle background -->
  <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">
    <!-- Content -->
  </div>
</section>
分层背景：
html
<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>

Closing Elements (Refined)

精致收尾元素

Subtle Divider:
html
<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>
微妙分隔线：
html
<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>

Design Rules (Apple Edition)

Apple版设计规则

Do's ✓

要做的 ✓

  • Use generous spacing - Follow the 8px grid religiously
  • Embrace light font weights - font-light (300) for almost everything
  • Create intentional asymmetry - 7-5 splits, alternating scales
  • Surgical color use - Near-monochrome with one accent color
  • Dramatic type scales - text-7xl for heroes, text-base minimum for body
  • Minimal bullets - 1px dots (w-1 h-1) or subtle checkmarks
  • Refined borders - Use Apple's #d2d2d7 or border-slate-200
  • Slow, smooth transitions - duration-400 to duration-600
  • Glass morphism - backdrop-blur with opacity for depth
  • Perfect optical alignment - Not just mathematical, but visual balance
  • Generous touch targets - Minimum 44x44px for all interactive elements
  • Editorial photography - High-res, professional, generous sizing
  • Natural shadows - Subtle, directional, mimicking light from above
  • 使用充裕留白 - 严格遵循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
  • 使用编辑级摄影作品 - 高分辨率、专业拍摄、大尺寸展示
  • 使用自然阴影 - 微妙、有方向感，模拟顶部光源

Don'ts ✗

不要做的 ✗

  • Avoid tight spacing - Never break the 8px grid
  • Skip heavy fonts - Never use font-bold (700+)
  • No rigid symmetry - Avoid 6-6, 4-4-4, 3-3-3-3 grids
  • No color chaos - Stick to neutrals + ONE accent
  • Small type - Never go below 16px for body text
  • Icon overload - Icons should whisper, not shout
  • Thick borders - Never use 2px+ borders except on buttons
  • Fast transitions - Avoid duration-150 or less
  • Flat design - Always add subtle depth through shadows or glass
  • Cluttered layouts - When in doubt, remove elements
  • Small touch targets - Never smaller than 44x44px
  • Stock photography - No generic business people smiling at laptops
  • Heavy drop shadows - Avoid pure black shadows
  • 避免紧凑间距 - 绝不能打破8px网格
  • 避免使用粗重字体 - 绝不要使用font-bold（700及以上）
  • 不要使用刻板的对称布局 - 避免6-6、4-4-4、3-3-3-3的网格分割
  • 避免色彩混乱 - 坚持中性色 + 一种强调色
  • 不要使用过小的字号 - 正文绝不要小于16px
  • 不要过度使用图标 - 图标应低调，而非醒目
  • 不要使用粗边框 - 除按钮外，绝不要使用2px及以上的边框
  • 避免快速过渡效果 - 避免使用duration-150及以下的时长
  • 不要使用扁平化设计 - 始终通过阴影或毛玻璃效果添加微妙深度
  • 避免杂乱布局 - 拿不定主意时，就移除元素
  • 不要使用过小的触控目标 - 绝不要小于44x44px
  • 不要使用库存摄影 - 不要使用通用的商务人士对着笔记本微笑的图片
  • 避免厚重的投影 - 不要使用纯黑色阴影

Typography Hierarchy

排版层级

Landing Page Example

着陆页示例

html
<!-- Hero Section -->
<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>

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

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

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

<!-- Small Labels -->
<span class="text-xs font-medium tracking-wider text-slate-400 uppercase">
  Label
</span>
html
<!-- 首屏板块 -->
<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>

Color Usage Guidelines

色彩使用指南

Primary Content

主要内容

  • Headlines: 
    text-slate-900
  • Body text: 
    text-slate-500
    or 
    text-slate-600
  • Labels: 
    text-slate-400
  • Subtle text: 
    text-slate-400
  • 标题：
    text-slate-900
  • 正文：
    text-slate-500
    或
    text-slate-600
  • 标签：
    text-slate-400
  • 微妙文本：
    text-slate-400

Backgrounds

背景

  • Page: 
    bg-white
    or 
    bg-slate-50
  • Cards: 
    bg-slate-50
    on white, or 
    bg-white
    on slate-50
  • Hover states: Shift from slate-50 to white
  • 页面：
    bg-white
    或
    bg-slate-50
  • 卡片：白色背景上使用
    bg-slate-50
    ，或slate-50背景上使用
    bg-white
  • 悬停状态：从slate-50切换为白色

Accents

强调色

  • Primary brand: Use for tiny elements only (dots, small icons)
  • Borders: 
    border-slate-100
    or 
    border-slate-200
  • Never use accent color for large areas
  • 主品牌色：仅用于微小元素（圆点、小图标）
  • 边框：
    border-slate-100
    或
    border-slate-200
  • 绝不要将强调色用于大面积区域

Animation Philosophy

动效理念

Smooth & Purposeful:
html
<!-- Standard transition -->
transition-all duration-300

<!-- Subtle hover states -->
hover:bg-white hover:border-slate-200

<!-- Refined color shifts -->
group-hover:bg-blue-100 transition-colors duration-300
Principles:
  • Transitions should feel like water, not electricity
  • Use 300ms as standard duration
  • Avoid sudden changes
  • Hover states should whisper, not shout
流畅且有意义：
html
<!-- 标准过渡效果 -->
transition-all duration-300

<!-- 微妙悬停状态 -->
hover:bg-white hover:border-slate-200

<!-- 精致的颜色变化 -->
group-hover:bg-blue-100 transition-colors duration-300
原则：
  • 过渡效果应如水般流畅，而非电光火石
  • 使用300ms作为标准时长
  • 避免突然变化
  • 悬停状态应低调，而非醒目

Responsive Approach

响应式设计方法

Mobile First with Generous Breakpoints:
html
<!-- Scale down gracefully -->
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-light">
  Headline
</h1>

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

<!-- Grid adapts -->
<div class="grid grid-cols-12 gap-6 lg:gap-8">
  <div class="col-span-12 lg:col-span-7">
移动端优先，使用充裕的断点：
html
<!-- 优雅缩小字号 -->
<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">

Complete Section Example

完整板块示例

html
<section class="relative py-32 bg-white overflow-hidden">
  <!-- Subtle background -->
  <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">
      
    <!-- Section Header -->
    <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>

    <!-- Asymmetric Grid -->
    <div class="grid grid-cols-12 gap-8">
      
      <!-- Large Card -->
      <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>

      <!-- Compact Card -->
      <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>

    <!-- Closing Element -->
    <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>
html
<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>

When to Use vs. Standard Design

何时使用高端设计 vs 标准设计

Use Elevated/Apple Design For:

使用高端/Apple设计的场景：

  • 🎯 Landing pages and marketing sites
  • 🎯 Product showcases and launch pages
  • 🎯 Premium feature sections
  • 🎯 Brand experiences and "About" pages
  • 🎯 Corporate websites that need authority
  • 🎯 High-end e-commerce product pages
  • 🎯 Portfolio presentations
  • 🎯 Event/conference websites
  • 🎯 SaaS pricing and features pages
  • 🎯 着陆页与营销网站
  • 🎯 产品展示页与发布页
  • 🎯 高端功能板块
  • 🎯 品牌体验页与“关于我们”页
  • 🎯 需要彰显权威的企业网站
  • 🎯 高端电商产品页
  • 🎯 作品集展示
  • 🎯 活动/会议网站
  • 🎯 SaaS定价与功能页

Use Standard Gixat Design For:

使用标准Gixat设计的场景：

  • 📊 Application dashboards
  • 📊 Data tables and complex forms
  • 📊 Administrative interfaces
  • 📊 Internal tools and utilities
  • 📊 High-density information displays
  • 📊 Real-time monitoring interfaces
  • 📊 应用仪表盘
  • 📊 数据表格与复杂表单
  • 📊 管理界面
  • 📊 内部工具与实用程序
  • 📊 高密度信息展示
  • 📊 实时监控界面

Hybrid Approach:

混合方法：

Combine both systems—use Elevated Design for marketing sections and Standard Design for functional app areas. The transition should feel natural:
  • Marketing pages → Elevated Design
  • Dashboard/App → Standard Design
  • Settings/Profile → Standard Design with elevated touches
将两种系统结合——营销板块使用高端设计，功能应用区域使用标准设计。过渡应自然流畅：
  • 营销页面 → 高端设计
  • 仪表盘/应用 → 标准设计
  • 设置/个人资料 → 带有高端设计细节的标准设计

Accessibility (Apple Standard)

无障碍设计（Apple标准）

Touch Targets (44x44px Minimum):
html
<!-- All interactive elements -->
<button class="min-w-[44px] min-h-[44px]">

<!-- Generous padding ensures touch target -->
<a class="inline-flex items-center px-5 py-3">  <!-- Results in 44px+ height -->
Contrast Ratios (WCAG AAA when possible):
html
<!-- Apple's text colors pass AAA contrast on white -->
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 ✓)
Reduced Motion:
css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
Screen Reader Optimizations:
html
<!-- Proper semantic structure -->
<nav aria-label="Main navigation">
<main aria-label="Main content">
<button aria-label="Close menu" aria-expanded="false">

<!-- Hide decorative elements -->
<div aria-hidden="true">

<!-- Skip to content link -->
<a href="#main-content" class="sr-only focus:not-sr-only">
  Skip to main content
</a>
触控目标（最小44x44px）：
html
<!-- 所有交互元素 -->
<button class="min-w-[44px] min-h-[44px]">

<!-- 充裕内边距确保触控目标尺寸 -->
<a class="inline-flex items-center px-5 py-3">  <!-- 最终高度达到44px以上 -->
对比度（尽可能符合WCAG AAA标准）：
html
<!-- Apple的文本颜色在白色背景上通过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 ✓)
减少动效：
css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
屏幕阅读器优化：
html
<!-- 正确的语义结构 -->
<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>

Checklist for Apple-Style Design

Apple风格设计检查清单

Before finalizing any component, verify:
  • 8px Grid: All spacing divisible by 8
  • Typography: Using font-light (300) for most text
  • Type Scale: Dramatic hierarchy (text-7xl heroes, text-base+ body)
  • Colors: Near-monochrome with one surgical accent
  • Spacing: Generous padding (minimum p-8 for cards, py-24 for sections)
  • Border Radius: Using rounded-2xl (16px) for cards
  • Shadows: Subtle, natural direction (light from above)
  • Transitions: Slow (duration-400 to duration-600)
  • Glass Morphism: backdrop-blur with opacity where appropriate
  • Asymmetry: Using 7-5 or 8-4 grid splits
  • Touch Targets: Minimum 44x44px for all interactive elements
  • Contrast: Meeting WCAG AA at minimum
  • Reduced Motion: Respecting user preferences
  • Semantics: Proper HTML5 and ARIA labels
  • Responsive: Mobile-first with graceful scaling
This elevated design system brings Apple's corporate design excellence to web interfaces—combining minimalist precision with emotional resonance to create experiences that feel both authoritative and approachable.
在完成任何组件前，验证以下内容：
  • 8px网格：所有间距都是8px的倍数
  • 排版：大多数文本使用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的企业设计卓越性带入网页界面——将极简精准度与情感共鸣相结合，打造出既权威又亲切的用户体验。