# #1 Direction 40c6776a
> light · 91° · Libre Bodoni / Old Standard TT · 10 col
| | |
|---|---|
| hash / ref | `40c6776af6502e673a46946c3932a15634b90305cb479ac5f8f7b82997572213` |
| algorithm / library | hash-design/v2 / `bd20321c36ab` |
| constraints | none |
**这份 brief 是冻结的执行规格，不是灵感板。** 每个数值都来自哈希：不要替换字体、颜色、栅格或数值，不要"顺手优化"成你习惯的样子。若与全局禁令冲突，以禁令为准；若 twist 无法照字面执行，取最接近字面的做法，并在 HTML 注释里写明。
## 映射过程 Mapping trace
| bytes | hex | parameter | rule | → result |
|---|---|---|---|---|
| 0+1 | `40 c6` | hue | 0x40c6 = 16582; 16582/65536 × 360 | **91.09°** |
| 2 | `77` | polarity · paper lightness | 119 ≥ 77 → light; L = 0.90 + 42/178 × 0.085 | **light, L 0.92** |
| 3 | `6a` | paper chroma | 106/255 × 0.045 | **0.019** |
| 4 | `f6` | accent chroma | 0.07 + 246/255 × 0.16 | **0.224** |
| 5 | `50` | accent2 hue offset | 30 + 80/255 × 300 | **+124.12°** |
| 6 | `2e` | display face | 46 mod 98 = 46 | **Libre Bodoni** |
| 7 | `67` | body face | 103 mod 62 = 41 | **Old Standard TT** |
| 8 | `3a` | display case · weight | 58 mod 4 = 2; ⌊58/4⌋ mod 2 | **lower, 400** |
| 9 | `46` | display tracking | −0.04 + 70/255 × 0.24 | **0.026em** |
| 10 | `94` | type scale ratio | 1.067 + 148/255 × 0.551 | **1.387** |
| 11 | `6c` | density | t = 108/255 | **t 0.424: base 16.5px, line-height 1.52, unit 7px** |
| 12 | `39` | grid columns · gutter | 3 + 57 mod 10; unit × (1 + ⌊57/10⌋ mod 4) | **10 columns, 14px gutter** |
| 13 | `32` | text block span · start | span 2/15, start 3/15 | **columns 2–5 of 10** |
| 14 | `a1` | first-screen height | 45 + 161/255 × 55 | **80%** |
| 15 | `56` | sections · separator | 3 + 86 mod 6; ⌊86/6⌋ mod 5 | **5 sections, boxes** |
| 16 | `34` | anchor subject · size | 52 mod 8; 25 + ⌊52/8⌋/31 × 75 | **grid-diagram, 40%** |
| 17 | `b9` | anchor position · rotation | x 9/15; ((11) − 7.5)/7.5 × 8 | **x 0.6, 3.5°** |
| 18 | `03` | motif shape · size | 3 mod 12; unit × (1 + ⌊3/12⌋ mod 8) | **stripes, 7px** |
| 19 | `05` | motif placement · angle | 5 mod 4; ⌊5/4⌋ × 180/63 | **dividers, 3°** |
| 20 | `cb` | radius · border | RADII[203 mod 8]; ⌊203/8⌋ mod 4; ⌊203/32⌋ mod 4 | **0px radius, 1px dashed border** |
| 21 | `47` | shadow · texture | 71 & 3; (71 >> 2) & 3; 3 + 4 × 0.6 | **6px hard shadow, grain 5.4%** |
| 22 | `9a` | motion property · duration | ⌊154/64⌋; (154 mod 64)/63 × 600 | **clip-path, 250ms** |
| 23 | `c5` | easing | 197 ≥ 32 → cubic-bezier from bits | **cubic-bezier(0.13, 1.2, 0.37, 1)** |
| 24 | `f8` | voice person · headline form | 248 mod 4; ⌊248/4⌋ mod 6 | **i, label** |
| 25 | `f7` | sentence length · register | 3 + (247 & 15); (247 >> 4)/15 | **10 words, register 1** |
| 26 | `b8` | twist target | 184 mod 9 | **section-heads** |
| 27 | `29` | twist operation · amount | 41 mod 10; ⌊41/10⌋ | **vertical, 4** |
| 29 | `57` | CJK display face | 87 mod 14 _(used on Chinese pages)_ | **Liu Jian Mao Cao** |
| 30 | `22` | mono face | 34 mod 8 | **Courier Prime** |
| 28, 31 | `97 13` | (unused) | recorded, not used | — |
## 内容 Content
**Subject:** 二号桥单车铺
只能使用以下事实。不得编造数字、评价、奖项或客户；缺少的信息留空或写"待补"。
- 店名：二号桥单车铺（Bridge No.2 Cycle Works）
- 地址：河西路二号桥桥洞下东侧，蓝色卷帘门，门口立着一个旧车轮
- 营业：周三至周日 10:00–20:00；周一、周二休息
- 补胎 ¥15；换内胎 ¥35（含内胎）
- 全车保养 ¥180：清洗传动、调变速和刹车、紧固全车螺丝，约 2 小时
- 手工编轮组 ¥260 起，工期 5 天
- 二手车：每辆都换过链条和刹车皮，保修 90 天
- 公路车 Fitting ¥480，约 90 分钟，需预约
- 店主：陈立平，大家叫他老陈，修车 27 年，以前在自行车厂做装配
- 周四夜骑：每周四 19:30 店门口出发，沿江一圈 24 公里，免费，自带车灯
- 门口气泵免费，24 小时可用
- 预约：电话 0571-5555-0222，或到店登记
- 不卖新车，只修车、卖二手车和零件
## 文案语气 Voice
- **Person:** first person singular ("I")
- **Headlines:** a label: a noun phrase, no verb
- **Sentences:** about 10 words on average (about 20 characters in Chinese)
- **Register:** 1 on a 0–1 scale — formal and exact
## 版式 Layout
- **Grid:** 10 columns, 14px gutters, max width 1230px
- **Text block:** columns 2–5 of 10 (left of centre)
- **First screen:** 80% of the viewport height
- **Sections:** 5, separated by each section in a bordered box on the grid
- Below 640px wide the grid collapses to one column; separators and the anchor stay.
**First-screen anchor:** a diagram drawn from the grid lines themselves; about 40% of the first screen's width, centred at 60% from the left edge, rotated 3.5°.
## 字体 Typography
- **Display**: Libre Bodoni 400/700 + italic · set at 400, lowercase, letter-spacing 0.026em — fallback `Didot, "Bodoni 72", serif`
- **Body**: Old Standard TT 400/700 + italic — fallback `Georgia, "Times New Roman", serif`
- **Mono**: Courier Prime 400 — fallback `"Courier New", monospace`
- **CJK** (Chinese pages): display Liu Jian Mao Cao, body Noto Serif SC
Scale: ratio **1.387** on a 16.5px base → -2: 8.6px · -1: 11.9px · 0: 16.5px · 1: 22.9px · 2: 31.7px · 3: 44px · 4: 61.1px · 5: 84.7px · 6: 117.5px · 7: 162.9px
```html
```
## 配色 Colour — light, hue 91.09°
Computed in OKLCH: paper L 0.92 / C 0.019 at hue 91.09°; accents at chroma 0.224, accent2 124.12° round the wheel. Text lightness is solved for contrast (ink ≥ 7.5:1, muted ≥ 4.6:1, accents ≥ 3:1 on paper).
| token | hex | role |
|---|---|---|
| paper | `#e9e4d7` | page background |
| ink | `#3e3825` | primary text |
| muted | `#696458` | secondary text |
| accent | `#987900` | the anchor and one kind of mark |
| accent2 | `#008ea6` | sparingly, under a tenth of the page |
| rule | `#b5ae9a` | lines, borders |
| panel | `#dcd6c2` | secondary background |
Contrast (WCAG):
- ink on paper: **9.21:1** — AAA — any text
- muted on paper: **4.64:1** — AA — body text OK
- ink on panel: **8.04:1** — AAA — any text
- accent on paper: **3.26:1** — large text / UI marks only (≥24px or bold ≥19px)
- accent2 on paper: **3.05:1** — large text / UI marks only (≥24px or bold ≥19px)
- #000000 on accent: **5.07:1** — AA — body text OK
- #000000 on accent2: **5.42:1** — AA — body text OK
## 密度 Density — 0.424
0.424 on the density axis (0 = airiest, 1 = most packed): base 16.5px, line-height 1.52, spacing unit 7px, section gap 110px, max width 1230px.
## 形状与材质 Shape & surface
- **Radius:** 0 — square corners everywhere
- **Borders:** 1px dashed in the rule colour
- **Shadow:** hard offset 6px 6px in ink, no blur (never a soft, blurred shadow)
- **Texture:** fine noise grain over the paper at 5.4% opacity
```css
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.054000000000000006'/%3E%3C/svg%3E"); }
```
## 母题 Motif
Parallel stripes, each about 7px, between sections, at 3°. Draw them with CSS or inline SVG in the palette colours; no icon fonts, no emoji.
## 动效 Motion
A wipe (clip-path) changes over 250ms with `cubic-bezier(0.13, 1.2, 0.37, 1)`, on hover, focus and state changes, plus the anchor once on load. Never animate every section on scroll. Under prefers-reduced-motion nothing moves.
## 变数 Twist
The section headings: set vertically (writing-mode: vertical-rl).
## 全局禁令 Global bans
- **禁用 Inter 及同类默认无衬线** (generic-sans, critical): 不得使用 Inter / Inter Tight / Inter Display / Roboto / Roboto Flex / Open Sans / Lato / Poppins / Montserrat / Nunito / Nunito Sans / Plus Jakarta Sans / Manrope / DM Sans / Outfit / Figtree / Geist / Urbanist / Sora / Lexend / Raleway / Work Sans / Space Grotesk，也不得只写 system-ui / sans-serif 当作"设计选择"。字体必须来自 brief 指定的字体对。
- **禁用紫蓝渐变** (purple-blue-gradient, critical): 禁止紫/靛/蓝系渐变背景、渐变文字（background-clip:text）、模糊彩色光斑（mesh blob / glow orb）。需要渐变时只能用 brief 调色板内的颜色，且必须有材质理由（如油墨叠印、日晒褪色）。
- **禁用居中 hero + 双按钮** (centered-hero-two-buttons, critical): 禁止"居中大标题 + 一行副标题 + 主按钮/幽灵按钮并排"的首屏。首屏结构必须来自 brief 的 layout 与 anchor。
- **禁用三张同款卡片** (identical-cards, major): 禁止 3/4/6 张结构相同的"图标 + 标题 + 两行说明"卡片排成一行。信息分组要用 brief 指定的版式手段（表格、清单、编号条款、价签、标签……），且各项尺寸/权重应有差异。
- **禁用玻璃态** (glassmorphism, major): 禁止 backdrop-filter 毛玻璃、半透明白卡片叠在彩色背景上。
- **禁用 emoji 当图标** (emoji-icons, major): 禁止用 emoji（✨🚀⚡️🎯 等）充当图标、项目符号或装饰；也不要拿通用图标库（Heroicons/Lucide/Feather）当装饰。需要图形时用 brief 母题自绘 SVG 或纯排版符号。
- **禁用空洞营销文案** (buzzword-copy, major): 禁止 unlock / unleash / seamless / seamlessly / supercharge / elevate / empower / revolutionize / revolutionary / effortless 等英文空话，以及 赋能 / 无缝 / 一站式 / 极致体验 / 颠覆 / 引领未来 / 全方位 / 助力 等中文空话。文案只能由用户提供的事实构成，按 brief 的 voice 写。
- **禁用"圆角 + 柔和大阴影"一切** (soft-shadow-rounded, major): 禁止所有块都是 12–24px 圆角加 0 10px 30px 级别的柔和投影。圆角与阴影只能按 brief tokens 使用（--radius、--shadow：硬投影或不用，绝不模糊）。
- **禁止编造事实与社会证明** (invented-facts, critical): 禁止虚构数据条（"10K+ 用户 / 99.9% 可用"）、"Trusted by" logo 墙、带头像的假评价、假奖项。只用 facts 中给出的信息；缺信息就留空位或写明待补。
- **禁用框架默认色板** (tailwind-default-palette, major): 禁止直接用 Tailwind slate/indigo/violet/sky 默认色值（如 #6366f1、#8b5cf6、#0f172a、#3b82f6），禁止"深海军蓝底 + 霓虹强调色"的开发者工具外观（除非 brief 明确如此）。颜色只能来自 brief 调色板。
- **禁用"每段都淡入上浮"** (scroll-fade-everything, minor): 禁止给每个区块都加滚动淡入上浮（AOS / data-aos / IntersectionObserver fade-up）。动效只能按 brief motion 规格，且必须尊重 prefers-reduced-motion。
- **禁用标题上方的胶囊徽标** (pill-badge-sparkle, minor): 禁止在大标题上方放 "New ✨ / Now in beta →" 一类圆角胶囊小标签。
- **禁用占位内容** (placeholder-content, major): 禁止 Lorem ipsum、"Feature One"、通用图库人物照、随机 Unsplash 图。没有真实图片时，用排版、色块、自绘 SVG 或 brief 母题代替。
- **禁用 SaaS 模板分节** (template-sections, minor): 禁止 Hero → Features → Testimonials → Pricing → FAQ → CTA 的固定套路。分节顺序来自 brief layout 的 structure，内容按事实组织。
## tokens.css
```css
/* hash-design hash-design/v2 · 40c6776a */
:root {
--paper: #e9e4d7;
--ink: #3e3825;
--muted: #696458;
--accent: #987900;
--on-accent: #000000;
--accent2: #008ea6;
--on-accent2: #000000;
--rule: #b5ae9a;
--panel: #dcd6c2;
--font-display: "Libre Bodoni", "Liu Jian Mao Cao", Didot, "Bodoni 72", serif;
--font-body: "Old Standard TT", "Noto Serif SC", Georgia, "Times New Roman", serif;
--font-mono: "Courier Prime", "Courier New", monospace;
--display-weight: 400;
--display-tracking: 0.026em;
--step-n2: 0.536rem; /* 8.6px */
--step-n1: 0.744rem; /* 11.9px */
--step-0: 1.031rem; /* 16.5px */
--step-1: 1.43rem; /* 22.9px */
--step-2: 1.984rem; /* 31.7px */
--step-3: 2.752rem; /* 44px */
--step-4: 3.817rem; /* 61.1px */
--step-5: 5.294rem; /* 84.7px */
--step-6: 7.342rem; /* 117.5px */
--step-7: 10.184rem; /* 162.9px */
--leading: 1.52;
--space-1: 7px;
--space-2: 14px;
--space-3: 21px;
--space-4: 28px;
--space-5: 35px;
--space-6: 42px;
--space-7: 49px;
--space-8: 56px;
--section-gap: 110px;
--max-width: 1230px;
--columns: 10;
--gutter: 14px;
--radius: 0px;
--border: 1px dashed var(--rule);
--shadow: 6px 6px 0 var(--ink);
--motion-duration: 250ms;
--motion-easing: cubic-bezier(0.13, 1.2, 0.37, 1);
}
html { font-size: 103.1%; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: var(--leading); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
```
## 交付前自检 Before you ship
- [ ] Fonts on the page are exactly: Libre Bodoni / Old Standard TT / Courier Prime (+ Liu Jian Mao Cao / Noto Serif SC)
- [ ] Every colour on the page comes from the 7 palette tokens above
- [ ] 10-column grid, text block in columns 2–5 of 10 (left of centre), first screen built around a diagram drawn from the grid lines themselves
- [ ] Copy uses first person singular ("I"), headlines are a label: a noun phrase, no verb, only the facts
- [ ] Radius 0px, hard 6px shadow, grain texture
- [ ] Twist applied: The section headings: set vertically (writing-mode: vertical-rl).
- [ ] `critique_page` (or `hash-design critique --brief 40c6776af6502e673a46946c3932a15634b90305cb479ac5f8f7b82997572213`) reports no critical/major findings