美学与粗野主义：我如何在交汇点设计blakecrosley.com

我设计blakecrosley.com时没有使用任何颜色、渐变、插图或装饰元素。仅有纯黑（#000000）背景上的白色字体，通过5%、10%、40%和65%的不透明度层级构建整个视觉层次。网站在Lighthouse性能测试中获得100/100的满分，实现了我所称的”诚实之美”：结构清晰与精确工艺的统一。¹

TL;DR

数字设计中的粗野主义将界面剥离至结构诚实：原始排版、可见网格、极简装饰。美学则增添精致：和谐的色彩关系、精确的间距、微交互。最引人注目的现代产品（Linear、Notion、Arc Browser）正是在这一交汇点上运作。我在同样的交汇点上构建了blakecrosley.com，本文记录了具体的CSS决策、我移除了什么，以及为什么诚实与工艺之间的张力比单独遵循任何一个原则都能产生更好的界面。

我的设计系统：以粗野主义为基础

非色彩调色板

大多数设计系统从调色板开始。而我的从调色板的缺席开始：

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

没有品牌色。没有超越不透明度层级的语义色彩。整个视觉层次通过四个透明度层级运作：100%（主要）、65%（次要）、40%（第三级）和10%（结构边框）。这在原则上是粗野主义的：材料（暗底之上的光）被直接使用，而非加以装饰。²

这个决定是深思熟虑的。在我的16个产品设计研究中，我注意到我最尊重的产品（Linear、Vercel、Raycast）使用克制的色彩方案，让排版和间距承担层次构建的工作。使用8种以上语义色彩的产品往往将颜色作为结构清晰度的替代品。

排版作为主要层次手段

没有颜色来承载层次，排版承载一切：

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display:  5rem;     /* 80px - hero headlines */
  --font-size-7xl:      3.875rem; /* 62px */
  --font-size-base:     1rem;     /* 16px - body text */
  --font-size-xs:       0.75rem;  /* 12px - metadata */
}

系统字体，而非自定义网络字体。这既是粗野主义的选择（使用平台的原生材料），也是性能的选择（零字体加载延迟，有助于实现Lighthouse满分）。展示尺寸（80px）配合紧凑的字间距（-0.03em）赋予标题庄重感而无需装饰。正文16px配合宽松的行高（1.7）优先考虑可读性而非信息密度。³

8点间距系统

每个间距值都源自8点基准：

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

没有任意值。如果某个间距在系统中不存在，那是设计的问题，而非系统的问题。我在一次副标题边距中使用了--spacing-2xs（一个不存在的token）后吸取了教训，布局无声地崩溃了。修复方法是改用--spacing-xs，而不是创建新的token。⁴

我移除了什么（以及为什么）

没有渐变

渐变有两个用途：视觉趣味和深度模拟。在一个以内容为核心的网站（博客文章、项目描述）上，渐变会与内容争夺视觉注意力。我移除了所有渐变，让内容本身成为视觉焦点。

没有插图或图标

没有装饰性SVG，没有主视觉插图，没有图标库。摄影是唯一的非排版视觉元素（首页上的个人照片）。每张照片使用4/3宽高比容器，仅有border-radius——没有阴影、没有覆盖层、没有色彩处理。

没有盒阴影（默认状态）

默认状态的元素没有阴影。悬停状态添加微妙的深度感：

.lab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

阴影仅作为功能性反馈出现（此元素可交互且您正在与之交互），绝不作为装饰。

没有亮色模式

网站没有prefers-color-scheme媒体查询。它完全在暗色模式下运行。这是一个刻意的不妥协选择：与其维护两套视觉系统并不可避免地在两者之间妥协，我选择把一套系统做好。纯黑背景（#000000而非#0a0a0a或#1a1a1a）为排版提供了最大对比度。⁵

美学的切入点

单纯的粗野主义结构会产生敌意感。我设计中的美来自执行的工艺，而非装饰：

微交互作为功能性反馈

每个交互元素都有过渡效果，但没有任何过渡是为了纯粹的美感享受而存在：

:root {
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a::after {
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav a:hover::after {
  transform: scaleX(1); /* Underline grows from left */
}

导航链接在悬停时显示下划线（功能性：确认可交互性）。项目卡片缩放至1.08倍（功能性：指示可点击区域）。移动端汉堡菜单动画变为X（功能性：传达状态变化）。没有任何动画缺乏功能目的。⁶

卡片组的入场动画

卡片以交错的translateY(16px)动画进入：

@keyframes socialCardIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

这服务于功能目的：它传达了内容已加载，并将注意力引向新出现的元素。交错效果（每张卡片延迟100ms）创造了一种节奏，帮助用户扫视整组内容。动画时长500ms，采用cubic-bezier缓动——快到不会延迟交互，平滑到感觉经过精心打磨。

毛玻璃效果头部

唯一接近装饰性的元素：

.header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-overlay); /* rgba(0,0,0,0.8) */
}

模糊的头部服务于功能目的：它表明内容在导航栏后方滚动，确立头部作为持久层的地位。但模糊效果也增添了视觉工艺——这是设计中为数不多的将美学与功能并重的时刻之一。

找到相同平衡的产品

Linear：粗野主义结构，精美执行

Linear的项目管理界面信息密集、键盘驱动，面向专业用户。没有插图，没有渐进式引导。结构是粗野主义的。执行是精美的：精确的排版、和谐的暗色主题、流畅的60fps动画。每个像素都服务于一个目的。这个目的以工艺来实现。⁷

Notion：原始区块，精炼系统

Notion将其底层数据模型（区块）直接暴露给用户。结构诚实是粗野主义的。精致体现在交互设计中：流畅的拖放、响应式的内联编辑，以及使区块系统感觉毫不费力的命令面板。⁸

Arc Browser：粗野主义导航，精美外壳

Arc暴露了浏览器的底层标签管理系统（垂直标签、工作区、分屏视图）。结构诚实是粗野主义的。视觉执行（渐变主题、流畅动画）使标签管理变得愉悦而非冰冷。⁹

平衡点

最有效的方法是将粗野主义原则用于结构，将美学原则用于执行：

核心要点

给设计师： - 将粗野主义原则用于结构（布局、信息架构、色彩），将美学原则用于执行（排版、间距、微交互）；两者结合产生既诚实又令人愉悦的界面 - 移除每一个装饰元素，然后观察什么会崩溃；如果什么都没有崩溃，那些装饰就是不必要的 - 把一种模式做好，而不是两种模式都做得平庸；我的纯暗色方案比妥协的亮/暗切换产生了更连贯的系统

给开发者： - 将设计token实现为CSS自定义属性，不使用任意值；如果系统中不存在某个间距值，应修正设计而非添加一次性的值 - 将微交互视为功能性反馈；150ms的悬停过渡传达了可交互性，而2秒的入场动画则没有传达任何有用信息

给产品负责人： - 将美学定位与用户场景相匹配；专业工具偏向粗野主义，消费者产品偏向美学，而最好的产品在两者的交汇点上

参考文献