视觉设计方案：基于 Vercel Docs 风格

[deepracticexs]

DeepracticeX 视觉设计方案

设计理念

基于 Vercel Docs 的极简主义风格，结合 deepractice 品牌特色，打造清晰、专业、现代的内容平台。

核心设计原则

1. 极简主义

• 少即是多：去除一切不必要的装饰
• 聚焦内容：让内容成为主角
• 留白艺术：充分的呼吸空间

2. 黑白灰主调

• 背景：纯白 #FFFFFF
• 文字：深黑 #000000
• 次要文字：灰色 #666666
• 边框：浅灰 #EAEAEA
• 代码背景：浅灰 #FAFAFA

3. 品牌色点缀

• 主品牌色：深紫 #7C3AED（deepractice 紫）
• 使用场景：链接、按钮、重要提示
• 克制使用：仅在需要强调时使用

具体设计规范

导航栏

/* 极简导航栏 - 仿 Vercel */
.navbar {
  background: #FFFFFF;
  border-bottom: 1px solid #EAEAEA;
  height: 64px;
  /* 无阴影，纯线条分割 */
}

/* Logo 区域 */
.navbar__brand {
  font-weight: 700;
  color: #000000;
}

/* 导航链接 */
.navbar__link {
  color: #666666;
  font-weight: 500;
  &:hover {
    color: #000000;
  }
}

侧边栏

/* 清爽侧边栏 */
.theme-doc-sidebar-container {
  background: #FFFFFF;
  border-right: 1px solid #EAEAEA;
}

/* 分类标题 */
.theme-doc-sidebar-item-category {
  font-weight: 600;
  color: #000000;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* 文档链接 */
.theme-doc-sidebar-item-link {
  color: #666666;
  border-radius: 4px;
  &:hover {
    color: #000000;
    background: #FAFAFA;
  }
  /* 当前页面 */
  &--active {
    color: #7C3AED;
    background: #F3E8FF;
  }
}

内容区域

/* 内容容器 */
.theme-doc-markdown {
  /* 标题样式 */
  h1 { 
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.04em;
  }
  h2 { 
    font-size: 32px;
    font-weight: 600;
    margin-top: 48px;
  }
  h3 { 
    font-size: 24px;
    font-weight: 600;
  }
  
  /* 段落 */
  p {
    line-height: 1.7;
    color: #000000;
  }
  
  /* 代码块 - Vercel 风格 */
  pre {
    background: #FAFAFA;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    /* 无阴影 */
  }
  
  /* 行内代码 */
  code {
    background: #FAFAFA;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.9em;
  }
}

组件设计

按钮

/* 主按钮 */
.button--primary {
  background: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 4px;
  font-weight: 500;
  &:hover {
    background: #333333;
  }
}

/* 次要按钮 */
.button--secondary {
  background: #FFFFFF;
  color: #000000;
  border: 1px solid #EAEAEA;
  &:hover {
    border-color: #000000;
  }
}

/* 品牌按钮（少用） */
.button--brand {
  background: #7C3AED;
  color: #FFFFFF;
  border: none;
}

提示框

/* 信息提示 - 极简风格 */
.alert {
  border-left: 4px solid;
  background: #FAFAFA;
  border-radius: 0;
  /* 无阴影，纯色块 */
}

.alert--info {
  border-left-color: #0070F3;
}

.alert--warning {
  border-left-color: #F5A623;
}

特色设计

1. 渐变标题（品牌特色）

/* 仅在首页 hero 区域使用 */
.hero__title {
  background: linear-gradient(to right, #7C3AED, #A855F7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

2. 代码块文件名（仿 Vercel）

<CodeBlock title="package.json">
{/* 代码内容 */}
</CodeBlock>

3. 复制按钮

/* 极简复制按钮 */
.theme-code-block-copy-button {
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  color: #666666;
  &:hover {
    border-color: #000000;
    color: #000000;
  }
}

响应式设计

• 移动端优先
• 断点：640px, 768px, 1024px
• 移动端隐藏侧边栏，使用汉堡菜单

动画原则

• 微动画：仅在必要时使用
• 过渡时间：200ms
• 缓动函数：ease-in-out
• 避免：花哨的动画效果

图标使用

• 优先使用 Lucide Icons（Vercel 同款）
• 保持线条简洁
• 统一 20px 尺寸

实施计划

1. 创建 custom.css 实现基础样式
2. 覆盖必要的组件样式
3. 创建自定义组件（如 CodeBlock with title）
4. 优化移动端体验
5. 性能优化（字体加载、图片优化）

---

参考链接：

• Vercel Docs
• Vercel Design System
• Figma 设计稿（待创建）