web-design-base-v1 是做什麼的？
標準。 每個網站都應針對其主題進行藝術指導，不能讓人誤認為是模板，每一個細節在技術上都必須正確，並以排版作為主要工具。
方法。 閱讀主題，命名一個具體的視覺概念，建立系統，規劃內容，然後編碼。系統存在於第一行程式碼之前，因為編碼時的選擇會逐漸偏向預設值。
0. 如何閱讀此技能
| 層級 | 含義 |
|---|---|
| 閘門 | 在最後檢查。未通過閘門的頁面不算完成。 |
| 必須 / 必須不 | 預設法則。僅在使用者要求時偏離；用一句話說明。 |
| 應該 | 強烈預設。當主題需要時，可靜默偏離。 |
| 可以 | 在符合主題的前提下允許使用。 |
優先級：閘門 1 和 2（無障礙性）> 使用者的明確要求 > 必須 > 應該 > 可以。如果使用者要求的內容違反了閘門，則建構最接近且能通過的版本，並說明您做了哪些變更。在同一層級內，更具體的規則優先。
範例是示範，而非模板。 下方的每個色板、字型配對、渡輪時刻表和程式碼值都只顯示了格式。將它們原封不動地複製到不相關的主題是此技能最常見的失敗方式。如果您照搬了某個列出的色板或配對，請在計劃中用一個關於該主題的事實來證明其合理性。
1. 五個閘門
- 首次繪製與無 JavaScript。 英雄標題在首次幀即應可見：未移位、未裁切（包括 Ä Ö Ü 上的分音符號）、永不動畫化。在禁用 JavaScript 或開啟減少動畫模式時，頁面應完整呈現。
- 對比度。 內文 ≥ 7:1，淡化文字和作為文字使用的強調色 ≥ 4.5:1，大標題 ≥ 4.5:1，結構性邊框、焦點環和 UI 元件 ≥ 3:1。針對每個實際使用的文字/表面組合進行計算，而非假設（§6）。
- 色板紀律。 背景色、墨色、一個強調色，加上背景/墨色的淡色版本。無漸層、發光、玻璃態或彩色陰影。
- 完整性。 每個區塊都有實質內容（§8），每個連結都有明確的目標位置，每個必要的狀態都存在。
- 特定性。 如果色板和字型可以原封不動地移動到另一個不同的主題，則工作尚未完成。
2. 選擇模式
| 模式 | 適用場合 | 適用的規則 |
|---|---|---|
| 展示 | 登陸頁、作品集、商店前台、編輯、活動、企業 | 除了 §12 以外的所有規則 |
| 產品 UI | 儀表板、管理後台、工具、應用程式、表單密集型流程 | §1–§6、§10、§11、§12；跳過英雄原型和區塊池 |
| 文件 | 文件、手冊、模型卡 | 展示模式的排版和顏色，產品 UI 的結構（目錄、程式碼、狀態） |
| 審核 | "審查/改進我的頁面" | 列出發現的問題，僅修復有問題的部分，保留現有品牌識別 |
| 迭代 | "改變 X" | 僅更改指定的記號或規則及其直接依賴項；不做靜默重構 |
當使用者提供品牌（顏色、標誌、字型）時，該品牌即為色板和字型。計算其對比度。如果品牌強調色作為文字使用時未達到 4.5:1 的標準，則僅將其用於大尺寸或非文字元素，並添加相同色相但更深色的文字變體。
3. 建構方法
在編碼前撰寫計劃：12–16 行使用者的語言（迭代模式：3 行的差異）。
3.1 閱讀主題。 訪客必須做什麼或理解什麼？該主題在其真實場景（港口、鑄造廠、實驗室、廚房、法庭、檔案館）中看起來、聽起來和感覺起來是什麼樣子？他們必須記住的一件事是什麼？
3.2 命名視覺概念。 用一句話命名一個來自該主題的具體物體、材料或慣例。例如渡輪航線："一張印製的出發時刻表：粗體壓縮數字、帶有標線的行列、將告示板作為英雄區塊。" 抽象形容詞（"現代、乾淨、大膽"）和顏色列表不算是概念。 原創性測試：說出此類別中通用網站擁有的三件事，並確認此設計沒有其中任何一件。
3.3 在計劃中以表格形式建立系統：
| 欄位 | 值 |
|---|---|
| 色板 | bg（背景）、ink（墨色）、accent（強調色，十六進位碼）、其命名的素材、每個使用配對的計算對比度 |
| 字型 | 展示字型 + 內文字型、與主題相關的理由、最長的單字及其行動版尺寸 |
| 英雄區塊 | 原型（§7.1）+ 一行字的理由 |
| 佈局 | 基礎邏輯（§7.2）以及各區塊如何變化 |
| 動畫 | 一個標誌性模式 + 可選的支援模式 |
| 區塊 | 依序排列，每個區塊都有其功能和形式 |
| 標誌性時刻 | 訪客會記住的一件事 |
3.4 規劃內容。 列出每個區塊，附帶具體的事實、步驟、名稱、數字、日期、價格。如果內部一致且已標記（§8.3），則允許虛構內容。
4. 基礎
4.1 Head 是設計的一部分
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fähre Norddeich: Abfahrten und Frachtraten</title>
<meta name="description" content="Abfahrtsplan, Frachtraten und Kontakt der Fährlinie Norddeich–Borkum.">
<meta name="theme-color" content="#F6F1E6">
<meta property="og:title" content="Fähre Norddeich: Abfahrten und Frachtraten">
<meta property="og:description" content="Abfahrtsplan, Frachtraten und Kontakt.">
<meta property="og:locale" content="de_DE">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23C0430B'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Public+Sans:wght@400;500;600&display=swap">
<script>
/* Motion gate: hidden start states exist only if this class is set (§9) */
if (!matchMedia("(prefers-reduced-motion: reduce)").matches && "IntersectionObserver" in window)
document.documentElement.classList.add("js-motion");
</script>
<style>/* §4.2 base, §4.3 tokens, then components */</style>
</head>
- 必須：
lang與內容匹配，title和description是具體的，字型 URL 與 §5 中選擇的字體家族相符並以display=swap結尾，存在 favicon（以避免 404 且看起來完成度高）。 - 必須不：空的 head，在德語內容上使用
lang="en"，字型未使用display=swap。 - 隱私（歐盟/德國）。 從 Google 伺服器載入 Google Fonts 會傳輸訪客的 IP 地址；德國法院已將其視為 GDPR 問題。對於原型來說是可以接受的。對於生產環境，請在報告中說明字型應自行託管（woff2 檔案，
@font-face）。如果環境封鎖外部字型，則後備字型堆疊（§4.5）仍必須看起來是經過設計的。
4.2 基礎 CSS
每個頁面都從這個基礎開始。它可以防止移位、裁切和繼承導致的排版錯誤。
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h, 0px); }
body {
background: var(--bg); color: var(--ink);
font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6;
font-synthesis: none; /* no fake bold/italic if a weight is not loaded */
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, table, form { margin: 0; }
ul, ol { padding-inline-start: 1.25em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; } /* links stay recognizable */
nav a, .btn { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[id] { scroll-margin-top: var(--header-h, 0px); }
table { border-collapse: collapse; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--on-accent); }
.container { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.skip-link { position: absolute; inset-inline-start: -9999px; }
.skip-link:focus { inset-inline-start: var(--gutter); inset-block-start: 0.75rem; z-index: 20;
background: var(--accent); color: var(--on-accent); padding: 0.75rem 1rem; }
- 必須不：對內容使用
100vw，使用overflow: hidden來裁剪類型，在英雄標題上使用負邊距或transform。接受字型的自然側邊距，而非嘗試光學校正。 - 必須將所有文字放在
.container內。英雄標題與內文的左邊緣對齊，除非計劃中指定了偏移佈局。 - 必須使用
min-height: 100vh; min-height: 100svh;來設定全高英雄區塊（svh行在支援的情況下優先，因此行動瀏覽器工具列不會切斷英雄區塊）。 - 內文使用
rem，切勿使用固定的px，以便訪客瀏覽器的字型設定仍然有效。
4.3 記號
每個顏色、字型、尺寸和間距值都位於一個區塊中。將範例值替換為您自己的色板（§6）。
:root {
color-scheme: light; /* "dark" for dark palettes: form controls and scrollbars follow */
--bg: #F6F1E6; --bg-soft: #ECE3D3;
--ink: #1C1A17; --ink-muted: #635A4C; /* muted: labels and captions only */
--accent: #C0430B; --on-accent: #F6F1E6; /* text on accent fills */
--line: #857A66; /* structural rules: ≥ 3:1 on bg and bg-soft */
--line-soft: #C9BEA8; /* decorative hairlines only */
--focus: var(--accent); /* re-assigned inside inverted bands */
--font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
--font-text: "Public Sans", "Segoe UI", sans-serif;
--step-hero: clamp(3.25rem, 1rem + 11vw, 13rem);
--step-h2: clamp(2.25rem, 1rem + 5vw, 6rem);
--step-label: 0.8125rem;
--space-xs: 0.5rem; --space-s: 1rem;
--space-m: clamp(1.5rem, 1rem + 2vw, 3rem);
--space-l: clamp(3rem, 2rem + 4vw, 6.5rem);
--space-xl: clamp(5rem, 3rem + 8vw, 11rem);
--gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
--measure: 66ch;
--header-h: 0px; /* set to the sticky header height, else 0 */
--rule: 1px solid var(--line);
}
必須：規則中的每個值都來自這些記號。必須不：在規則中使用內聯十六進位碼，或框架預設色板（如 gray-500、slate-200）。流體尺寸混合使用 rem 和 vw，以便瀏覽器縮放和字型設定仍然可以縮放它們（純 vw 會忽略縮放）。
4.4 語言和區域
- 內容使用請求的語言。
lang屬性與之匹配。Sie/du 的使用保持一致。 - 德語：在窄欄上使用
hyphens: auto（需要正確的lang）；字型子集必須涵蓋 äöüß 以及 „ “ ‚ ‘ –。使用印刷引號（„…“），在德語頁面上不要使用英語行銷詞語，在數字和單位之間使用 （如12 kg、9:30 Uhr），日期格式為1. November 2026。 - 德國企業網站需要在頁尾包含 Impressum 和 Datenschutz 連結（對於原型來說，頁內示範區塊是允許的）。自 2025 年起，BFSG 使無障礙性成為許多面向消費者的電子商務服務的法律義務；WCAG 2.1 AA 是基本要求，而此技能的閘門已經超過了這個標準。
4.5 能在網路故障時倖存下來的字型
選擇相同類別的後備字型（壓縮字型 → "Arial Narrow"；襯線字型 → Georgia；無襯線字型 → system-ui）。兩個後備字型必須保持明顯的視覺差異，以便在字型載入失敗時頁面仍能保持其層級結構。僅載入您使用的字重。展示字型使用的字重必須存在於已載入的字型家族中（參見 §5）。
4.6 斷點與 375 像素
行動優先。斷點：480、760、1024、1320 像素。在 375 像素寬度下：無水平滾動，英雄標題 ≤ 5 行，最長的單字能容納，觸控目標 ≥ 44 × 44 像素，黏性頁首不會覆蓋錨點（--header-h），每個雙欄佈局都有針對行動版設計的形式。
最長單字規則。 可用寬度 ≈ 375 − 2 × 19 ≈ 335 像素。最大英雄字型尺寸（像素）≈ 335 ÷（最長單字的字數 × 寬度因子）。寬度因子：壓縮字型 0.42、襯線字型 0.52、無襯線字型 0.58、擴展字型 0.68。將 clamp() 的最小值設定為該值。"Frachtabfertigung"（17 個字母）使用壓縮字型，允許約 47 像素，因此上述的 52 像素最小值會造成溢出：降低最小值或加入軟連字號（Fracht­abfertigung）。切勿讓較長的德語複合詞強制在英雄區塊中使用 overflow-wrap: anywhere。
5. 排版：主要工具
僅使用兩個字型家族：一個展示字型，一個內文字型。
| 展示字型 | 內文字型 | 適合 |
|---|---|---|
| Big Shoulders Display | Public Sans | 時刻表、物流、貨運、運動 |
| Barlow Condensed | Barlow | 交通、標誌、俱樂部、活動 |
| Fraunces | Karla | 食品、手工藝、印刷、接待 |
| Instrument Serif（僅 400 字重） | Work Sans | 編輯、時尚、建築 |
| Newsreader | Libre Franklin | 法律、機構、研究 |
| Familjen Grotesk | Source Serif 4 | 雜誌、文化、非營利組織 |
| IBM Plex Mono（展示字型） | IBM Plex Sans | 實驗室、工具、資料、文件 |
| Archivo（寬度軸 112–125） | Spline Sans | 港口、工業、產品說明書 |
| Anton（僅 400 字重） | Barlow | 活動、場地、海報 |
| Bodoni Moda | Karla | 奢侈品、畫廊、拍賣會 |
這些是起點。根據主題選擇；為非物流主題選擇第一行意味著您是按位置而非主題選擇的。檢查字型實際的軸線和字重：Instrument Serif 和 Anton 只有一個字重，因此 "heavy" 不可用，font-synthesis: none 可防止瀏覽器偽造它；Archivo 需要在 URL 中指定 wdth（Archivo:wdth,[email protected],700..900）並在 CSS 中使用 font-stretch。
必須不將 Inter、Roboto、Arial、Poppins、Playfair Display、Lora 或 Merriweather 作為標識配對。必須不的所有字型只用一個家族。將等寬字型用作展示字型是允許的...
[內容已截斷]