web-design-base-v1 是做什么的？
标准。 每个网站都为其自身主题进行艺术指导，不能与模板混淆，在每一个细节上技术正确，并以排版作为主要工具。
方法。 阅读主题，命名一个具体的视觉概念，构建系统，规划内容，然后编码。系统存在于第一行代码之前，因为编码时所做的选择会逐渐偏向默认值。
0. 如何阅读本技能
| 级别 | 含义 |
|---|---|
| 关卡 | 在最后检查。未通过关卡的页面不算完成。 |
| 必须 / 禁止 | 默认法则。仅在用户要求时才可偏离；并用一句话说明。 |
| 应该 | 强默认值。当主题需要时可静默偏离。 |
| 可以 | 当对主题有用时允许。 |
优先级：关卡 1 和 2（可访问性）→ 用户的明确请求 → 必须 → 应该 → 可以。如果用户要求的内容违反了某个关卡，则构建最接近且能通过的版本，并说明你更改的内容。在同一级别内，更具体的规则优先。
示例是演示，而非模板。 下面的每个调色板、字体配对、渡轮时刻表和代码值都展示了一个良好答案的格式。将一个示例原封不动地复制到一个不相关的主题中，是本技能最常见的失败。如果你照原样选择了列出的调色板或配对，请在计划中用关于主题的事实来证明其合理性。
1. 五个关卡
- 首次绘制和无 JS。 英雄标题从第一帧开始可见：不移动，不裁剪（包括 ÄÖÜ 上的分音符点），永不动画。在禁用 JavaScript 或开启减少运动的情况下，页面必须完整。
- 对比度。 正文文本 ≥ 7:1，柔和文本和作为文本的强调色 ≥ 4.5:1，大标题 ≥ 4.5:1，结构边框、焦点环和 UI 部件 ≥ 3:1。针对每个实际使用的文本/表面配对进行计算，绝不假设（第 6 节）。
- 调色板纪律。 背景、墨水、一个强调色，加上背景/墨水的色调。无渐变、发光、毛玻璃效果或彩色阴影。
- 完整性。 每个部分都有实际内容（第 8 节），每个链接都有指向性的目标，每个必需的状态都存在。
- 特异性。 如果调色板和字体可以原封不动地搬到另一个不同的主题上，则工作未完成。
2. 选择模式
| 模式 | 用途 | 适用的规则 |
|---|---|---|
| 展示 | 落地页、作品集、店铺前端、编辑、活动、公司 | 除第 12 节外的所有内容 |
| 产品界面 | 仪表盘、管理后台、工具、应用、表单密集型流程 | 第 1–6 节、第 10 节、第 11 节、第 12 节；跳过英雄原型和节池 |
| 文档 | 文档、手册、模型卡片 | 展示模式下的排版和颜色，产品界面模式下的结构（目录、代码、状态） |
| 审计 | “审查/改进我的页面” | 列出发现，仅修补损坏的部分，保留现有设计风格 |
| 迭代 | “更改 X” | 仅更改命名的标记或规则及其直接依赖项；不进行静默重构 |
当用户提供品牌（颜色、标志、字体）时，品牌就是调色板和字体。计算其对比度。如果品牌强调色作为文本时未达到 4.5:1，则仅将其用于大型或非文本元素，并添加同色调的更深色文本变体。
3. 构建方法
在编码前编写计划：使用用户的语言写 12–16 行（迭代模式：写 3 行差异）。
3.1 阅读主题。 访问者必须做什么或理解什么？主题在其真实场景（港口、铸造厂、实验室、厨房、法庭、档案馆）中看起来、听起来和感觉如何？他们必须记住的唯一一件事是什么？
3.2 命名视觉概念。 用一句话命名主题中的一个具体对象、材料或惯例。示例（渡轮线）：“一个打印的出发时刻表：粗体紧缩的数字、带线行的表格、作为英雄的公告板。”抽象形容词（“现代、简洁、大胆”）和颜色列表不是概念。 原创性测试：说出一个通用网站在该类别中通常具有的三样东西，并确认此设计没有其中任何一样。
3.3 在计划中构建系统作为表格：
| 字段 | 值 |
|---|---|
| 调色板 | bg、ink、accent（十六进制）、其命名的材料、每个使用配对的已计算比率 |
| 字体 | display + text 字体，与主题相关的理由，最长单词及其移动端尺寸 |
| 英雄 | 原型（第 7.1 节）+ 一行证明 |
| 布局 | 基础逻辑（第 7.2 节）以及各部分如何使其变化 |
| 动效 | 一个签名模式 + 可选的辅助模式 |
| 章节 | 有序排列，每个都有其职责和形式 |
| 签名时刻 | 访问者会记住的一件事情 |
3.4 规划内容。 列出每个部分，包含具体的事实、步骤、名称、数据、日期、价格。如果内部一致且有标记（第 8.3 节），允许虚构内容。
4. 基础
4.1 头部是设计的一部分
<!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 并使页面看起来完整）。 - 禁止：空的头部，在德语文案上使用
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; /* 如果未加载某个字重，则不显示伪粗体/斜体 */
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; } /* 链接保持可识别 */
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"：表单控件和滚动条跟随 */
--bg: #F6F1E6; --bg-soft: #ECE3D3;
--ink: #1C1A17; --ink-muted: #635A4C; /* muted：仅用于标签和说明文字 */
--accent: #C0430B; --on-accent: #F6F1E6; /* 强调色填充上的文本 */
--line: #857A66; /* 结构规则：在 bg 和 bg-soft 上 ≥ 3:1 */
--line-soft: #C9BEA8; /* 仅用于装饰性细线 */
--focus: var(--accent); /* 在反转的背景带中重新分配 */
--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; /* 设置为粘性头部的高度，否则为 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 px
移动优先。断点：480、760、1024、1320 px。在 375 px 处：无水平滚动，英雄标题 ≤ 5 行，最长单词适配，触摸目标 ≥ 44 × 44 px，粘性头部不覆盖锚点（--header-h），每个两列布局都有设计好的移动端形式。
最长单词规则。 可用宽度 ≈ 375 − 2 × 19 ≈ 335 px。英雄标题最大像素尺寸 ≈ 335 ÷（最长单词的字母数 × 宽度因子）。宽度因子：紧缩 0.42、衬线 0.52、无衬线 0.58、扩展 0.68。将 clamp() 的最小值设置为该值。"Frachtabfertigung"（17 个字母）在紧缩字体中允许 ≈ 47 px，因此上面的 52 px 最小值会导致溢出：降低最小值或添加软连字符（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 只有一个字重，因此“粗体”不可用，font-synthesis: none 阻止浏览器伪造它；Archivo 需要在 URL 中包含 wdth（Archivo:wdth,[email protected],700..900）和在 CSS 中使用 font-stretch。
禁止使用 Inter、Roboto、Arial、Poppins、Playfair Display、Lora 或 Merriweather 作为设计的字体配对。禁止对所有内容使用同一种字体族。等宽字体作为显示...