美學與粗獷主義：我如何在交匯點設計 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（一個不存在的標記）時，版面無聲地崩壞了。修正方式是改用 --spacing-xs，而不是創造新的標記。⁴

我移除了什麼（以及為什麼）

沒有漸層

漸層有兩個用途：視覺趣味和深度模擬。在一個以內容為核心的網站（部落格文章、專案描述）上，漸層會與內容爭奪視覺注意力。我移除了所有漸層，讓內容本身成為視覺焦點。

沒有插圖或圖示

沒有裝飾性 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 暴露了瀏覽器底層的分頁管理系統（垂直分頁、工作區、分割檢視）。這種結構誠實是粗獷主義的。視覺執行（漸層主題、流暢動畫）讓分頁管理變得愉悅而非冰冷。⁹

平衡點

最有效的方法是將粗獷主義原則用於結構，將美學原則用於執行：

核心要點

給設計師： - 將粗獷主義原則用於結構（版面、資訊架構、色彩），將美學原則用於執行（排版、間距、微互動）；這種組合能產生既誠實又令人愉悅的介面 - 移除每一個裝飾性元素，然後問什麼壞了；如果什麼都沒壞，那裝飾就是不必要的 - 把一種模式設計好，而不是把兩種模式設計得馬馬虎虎；我的純深色模式方法比妥協的明暗切換產生更連貫的系統

給開發者： - 以 CSS 自訂屬性實作設計標記，不使用任意值；如果系統中不存在某個間距，應修正設計而非新增一次性的值 - 將微互動視為功能性回饋；150ms 的懸停過渡傳達可互動性，而 2 秒的進場動畫則什麼有用的資訊都沒傳達

給產品領導者： - 將美學定位與使用者情境相匹配；專業工具傾向粗獷主義，消費性產品傾向美學，而最優秀的產品找到了交匯點

參考資料