從零開始打造設計系統

為什麼要打造設計系統？

設計系統不只是一組元件的集合 — 它是設計與開發之間的共享語言。當我著手建立 Neo-Wire 設計系統時，我想要的是一個有意識、有系統、且易於維護的東西。

核心原則

一致性優於創意 — 每個決策都應該服務於系統
簡單優先 — 從最小化開始，只在需要時增加複雜度
開發者體驗很重要 — 如果難以使用，就不會被使用

CSS 自訂屬性作為基礎

整個系統建立在 CSS 自訂屬性之上：

:root {
  --nw-bg: #F5F0E8;
  --nw-ink: #1A1A1A;
  --nw-accent: #C45D2C;
  --nw-muted: #8C8577;
}

這讓主題切換變得簡單，並保持系統的彈性。

排版

我們使用兩種字體：

IBM Plex Mono 用於標題、標籤和程式碼
DM Sans 用於內文

以等寬字體為主的方式，讓介面具有技術感和藍圖般的質感，與 Neo-Wire 美學一致。

元件模式

每個元件遵循一個簡單的模式：

---
interface Props {
  variant?: 'default' | 'accent';
}

const { variant = 'default' } = Astro.props;
---

<div class:list={['component', variant]}>
  <slot />
</div>

學到的經驗

在建構元件之前，先從間距和排版開始
使用 border 和 box-shadow 而非 background 來增加視覺重量
虛線創造出「藍圖」感，同時不會太重
早期就在明暗兩種情境下測試

最好的設計系統是你的團隊真正會使用的那個。

接下來

在下一篇文章中，我會深入探討元件架構，以及我們如何用最少的媒體查詢來處理響應式設計。