# #2 Direction f8342870
> dark · 349° · Marcellus SC / Libre Franklin · 10 col
| | |
|---|---|
| hash / ref | `f834287036f795a0d543a7b7c52a6444e1a6ae63bdc8c8667f2b677dc2b0acbd` |
| algorithm / library | hash-design/v2 / `bd20321c36ab` |
| constraints | none |
**This brief is a frozen spec, not a mood board.** Every value comes from the hash: do not swap fonts, colours, the grid or the numbers for ones you prefer. Global bans override everything; if the twist cannot apply literally, apply the nearest literal reading and say so in an HTML comment.
## 映射过程 Mapping trace
| bytes | hex | parameter | rule | → result |
|---|---|---|---|---|
| 0+1 | `f8 34` | hue | 0xf834 = 63540; 63540/65536 × 360 | **349.04°** |
| 2 | `28` | polarity · paper lightness | 40 < 77 → dark; L = 0.14 + 40/76 × 0.12 | **dark, L 0.203** |
| 3 | `70` | paper chroma | 112/255 × 0.045 | **0.02** |
| 4 | `36` | accent chroma | 0.07 + 54/255 × 0.16 | **0.104** |
| 5 | `f7` | accent2 hue offset | 30 + 247/255 × 300 | **+320.59°** |
| 6 | `95` | display face | 149 mod 98 = 51 | **Marcellus SC** |
| 7 | `a0` | body face | 160 mod 62 = 36 | **Libre Franklin** |
| 8 | `d5` | display case · weight | 213 mod 4 = 1; ⌊213/4⌋ mod 1 | **upper, 400** |
| 9 | `43` | display tracking | −0.04 + 67/255 × 0.24 | **0.023em** |
| 10 | `a7` | type scale ratio | 1.067 + 167/255 × 0.551 | **1.428** |
| 11 | `b7` | density | t = 183/255 | **t 0.718: base 15px, line-height 1.43, unit 6px** |
| 12 | `c5` | grid columns · gutter | 3 + 197 mod 10; unit × (1 + ⌊197/10⌋ mod 4) | **10 columns, 24px gutter** |
| 13 | `2a` | text block span · start | span 10/15, start 2/15 | **columns 1–8 of 10** |
| 14 | `64` | first-screen height | 45 + 100/255 × 55 | **67%** |
| 15 | `44` | sections · separator | 3 + 68 mod 6; ⌊68/6⌋ mod 5 | **5 sections, bands** |
| 16 | `e1` | anchor subject · size | 225 mod 8; 25 + ⌊225/8⌋/31 × 75 | **number, 93%** |
| 17 | `a6` | anchor position · rotation | x 6/15; ((10) − 7.5)/7.5 × 8 | **x 0.4, 2.5°** |
| 18 | `ae` | motif shape · size | 174 mod 12; unit × (1 + ⌊174/12⌋ mod 8) | **arrows, 42px** |
| 19 | `63` | motif placement · angle | 99 mod 4; ⌊99/4⌋ × 180/63 | **markers, 69°** |
| 20 | `bd` | radius · border | RADII[189 mod 8]; ⌊189/8⌋ mod 4; ⌊189/32⌋ mod 4 | **4px radius, 3px solid border** |
| 21 | `c8` | shadow · texture | 200 & 3; (200 >> 2) & 3; 3 + 12 × 0.6 | **no shadow, line-screen 10.2%** |
| 22 | `c8` | motion property · duration | ⌊200/64⌋; (200 mod 64)/63 × 600 | **colour, 80ms** |
| 23 | `66` | easing | 102 ≥ 32 → cubic-bezier from bits | **cubic-bezier(0.13, 0.6, 0.63, 1)** |
| 24 | `7f` | voice person · headline form | 127 mod 4; ⌊127/4⌋ mod 6 | **none, question** |
| 25 | `2b` | sentence length · register | 3 + (43 & 15); (43 >> 4)/15 | **14 words, register 0.13** |
| 26 | `67` | twist target | 103 mod 9 | **section-heads** |
| 27 | `7d` | twist operation · amount | 125 mod 10; ⌊125/10⌋ | **repeat, 12** |
| 29 | `b0` | CJK display face | 176 mod 14 _(used on Chinese pages)_ | **Noto Serif SC** |
| 30 | `ac` | mono face | 172 mod 8 | **IBM Plex Mono** |
| 28, 31 | `c2 bd` | (unused) | recorded, not used | — |
## 内容 Content
**Subject:** Causeway — a music festival on Skerrow Island
Use only these facts. Do not invent numbers, reviews, awards or customers; leave gaps visibly empty.
- Name: Causeway — a one-day music festival on Skerrow Island
- Date: Saturday 19 June 2027
- The island is reached on foot over a 1.2 km tidal causeway
- Causeway open for arrivals 09:40–13:10 and for departures 22:15–01:30 (that day's tide times)
- Nobody crosses outside those windows; the harbour boat is for emergencies only
- Capacity: 900 people
- Tickets: £54 adult, £27 for ages 12–17, free under 12; on sale 1 March 2027
- Two stages: the Boathouse (indoors, 220 people) and the Field (outdoors)
- Field line-up: The Lantern Choir, Mara Quist, Seven Herons, Low Orbit Brass
- Boathouse line-up: Ada Fenwick (solo cello), Tomasz & the Weir, Kelp, Ruth Ono Trio
- The last set ends at 21:45 so everyone reaches the causeway in time
- No single-use plastic on the island: bring a cup, or buy an enamel one for £6
- Food from two island kitchens; cash and card
- Organised by the Skerrow Island Trust, a volunteer charity; profits go to repairing the sea wall
- Fourth year of the festival, first held in 2024
- Wear boots: parts of the causeway are wet sand and seaweed
## 文案语气 Voice
- **Person:** impersonal: no pronouns, facts stated plainly
- **Headlines:** a question the facts answer
- **Sentences:** about 14 words on average (about 28 characters in Chinese)
- **Register:** 0.13 on a 0–1 scale — spoken and casual
## 版式 Layout
- **Grid:** 10 columns, 24px gutters, max width 1340px
- **Text block:** columns 1–8 of 10 (flush left)
- **First screen:** 67% of the viewport height
- **Sections:** 5, separated by full-width bands alternating paper and panel
- Below 640px wide the grid collapses to one column; separators and the anchor stay.
**First-screen anchor:** one number taken from the facts; about 93% of the first screen's width, centred at 40% from the left edge, rotated 2.5°.
## 字体 Typography
- **Display**: Marcellus SC 400 · set at 400, UPPERCASE, letter-spacing 0.023em — fallback `"Trajan Pro", Georgia, serif`
- **Body**: Libre Franklin 400/500/600/700/800/900 + italic — fallback `"Franklin Gothic Book", Arial, sans-serif`
- **Mono**: IBM Plex Mono 400/500/600 — fallback `"Courier New", monospace`
- **CJK** (Chinese pages): display Noto Serif SC, body Noto Sans SC
Scale: ratio **1.428** on a 15px base → -2: 7.4px · -1: 10.5px · 0: 15px · 1: 21.4px · 2: 30.6px · 3: 43.7px · 4: 62.4px · 5: 89.1px · 6: 127.2px · 7: 181.6px
```html
```
## 配色 Colour — dark, hue 349.04°
Computed in OKLCH: paper L 0.203 / C 0.02 at hue 349.04°; accents at chroma 0.104, accent2 320.59° 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 | `#1e1318` | page background |
| ink | `#dcc3ce` | primary text |
| muted | `#8c7d83` | secondary text |
| accent | `#a75f84` | the anchor and one kind of mark |
| accent2 | `#8b6aa4` | sparingly, under a tenth of the page |
| rule | `#4d3a43` | lines, borders |
| panel | `#2d1d24` | secondary background |
Contrast (WCAG):
- ink on paper: **10.97:1** — AAA — any text
- muted on paper: **4.63:1** — AA — body text OK
- ink on panel: **9.7:1** — AAA — any text
- accent on paper: **3.97:1** — large text / UI marks only (≥24px or bold ≥19px)
- accent2 on paper: **4.04:1** — large text / UI marks only (≥24px or bold ≥19px)
- #000000 on accent: **4.61:1** — AA — body text OK
- #000000 on accent2: **4.7:1** — AA — body text OK
## 密度 Density — 0.718
0.718 on the density axis (0 = airiest, 1 = most packed): base 15px, line-height 1.43, spacing unit 6px, section gap 70px, max width 1340px.
## 形状与材质 Shape & surface
- **Radius:** 4px on boxes and inputs
- **Borders:** 3px solid in the rule colour
- **Shadow:** none (never a soft, blurred shadow)
- **Texture:** a fine line screen (repeating-linear-gradient) at 10.2% opacity
```css
body { background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 10.2%, transparent) 0 1px, transparent 1px 4px); }
```
## 母题 Motif
Arrows, each about 42px, as list and heading markers, at 69°. Draw them with CSS or inline SVG in the palette colours; no icon fonts, no emoji.
## 动效 Motion
Colour (color / background-color) changes over 80ms with `cubic-bezier(0.13, 0.6, 0.63, 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
Repeat the section headings 2 times in a row.
## 全局禁令 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 · f8342870 */
:root {
--paper: #1e1318;
--ink: #dcc3ce;
--muted: #8c7d83;
--accent: #a75f84;
--on-accent: #000000;
--accent2: #8b6aa4;
--on-accent2: #000000;
--rule: #4d3a43;
--panel: #2d1d24;
--font-display: "Marcellus SC", "Trajan Pro", Georgia, serif;
--font-body: "Libre Franklin", "Franklin Gothic Book", Arial, sans-serif;
--font-mono: "IBM Plex Mono", "Courier New", monospace;
--display-weight: 400;
--display-tracking: 0.023em;
--step-n2: 0.46rem; /* 7.4px */
--step-n1: 0.657rem; /* 10.5px */
--step-0: 0.938rem; /* 15px */
--step-1: 1.339rem; /* 21.4px */
--step-2: 1.912rem; /* 30.6px */
--step-3: 2.73rem; /* 43.7px */
--step-4: 3.898rem; /* 62.4px */
--step-5: 5.567rem; /* 89.1px */
--step-6: 7.95rem; /* 127.2px */
--step-7: 11.352rem; /* 181.6px */
--leading: 1.43;
--space-1: 6px;
--space-2: 12px;
--space-3: 18px;
--space-4: 24px;
--space-5: 30px;
--space-6: 36px;
--space-7: 42px;
--space-8: 48px;
--section-gap: 70px;
--max-width: 1340px;
--columns: 10;
--gutter: 24px;
--radius: 4px;
--border: 3px solid var(--rule);
--shadow: none;
--motion-duration: 80ms;
--motion-easing: cubic-bezier(0.13, 0.6, 0.63, 1);
}
html { font-size: 93.8%; }
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: Marcellus SC / Libre Franklin / IBM Plex Mono
- [ ] Every colour on the page comes from the 7 palette tokens above
- [ ] 10-column grid, text block in columns 1–8 of 10 (flush left), first screen built around one number taken from the facts
- [ ] Copy uses impersonal: no pronouns, facts stated plainly, headlines are a question the facts answer, only the facts
- [ ] Radius 4px, no shadow, line-screen texture
- [ ] Twist applied: Repeat the section headings 2 times in a row.
- [ ] `critique_page` (or `hash-design critique --brief f834287036f795a0d543a7b7c52a6444e1a6ae63bdc8c8667f2b677dc2b0acbd`) reports no critical/major findings