# #5 Direction 08b46918

> light · 12° · Bodoni Moda / Literata · 12 col

| | |
|---|---|
| hash / ref | `08b4691844e6d5dfec8f67699f5a2ee99d6d45ab4b948f79e17097a21d3ecdab` |
| 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 | `08 b4` | hue | 0x08b4 = 2228; 2228/65536 × 360 | **12.24°** |
| 2 | `69` | polarity · paper lightness | 105 ≥ 77 → light; L = 0.90 + 28/178 × 0.085 | **light, L 0.913** |
| 3 | `18` | paper chroma | 24/255 × 0.045 | **0.004** |
| 4 | `44` | accent chroma | 0.07 + 68/255 × 0.16 | **0.113** |
| 5 | `e6` | accent2 hue offset | 30 + 230/255 × 300 | **+300.59°** |
| 6 | `d5` | display face | 213 mod 98 = 17 | **Bodoni Moda** |
| 7 | `df` | body face | 223 mod 62 = 37 | **Literata** |
| 8 | `ec` | display case · weight | 236 mod 4 = 0; ⌊236/4⌋ mod 3 | **as-written, 700** |
| 9 | `8f` | display tracking | −0.04 + 143/255 × 0.24 | **0.095em** |
| 10 | `67` | type scale ratio | 1.067 + 103/255 × 0.551 | **1.29** |
| 11 | `69` | density | t = 105/255 | **t 0.412: base 16.5px, line-height 1.53, unit 8px** |
| 12 | `9f` | grid columns · gutter | 3 + 159 mod 10; unit × (1 + ⌊159/10⌋ mod 4) | **12 columns, 32px gutter** |
| 13 | `5a` | text block span · start | span 10/15, start 5/15 | **columns 2–10 of 12** |
| 14 | `2e` | first-screen height | 45 + 46/255 × 55 | **55%** |
| 15 | `e9` | sections · separator | 3 + 233 mod 6; ⌊233/6⌋ mod 5 | **8 sections, space** |
| 16 | `9d` | anchor subject · size | 157 mod 8; 25 + ⌊157/8⌋/31 × 75 | **fact-list, 71%** |
| 17 | `6d` | anchor position · rotation | x 13/15; ((6) − 7.5)/7.5 × 8 | **x 0.87, -1.5°** |
| 18 | `45` | motif shape · size | 69 mod 12; unit × (1 + ⌊69/12⌋ mod 8) | **half-circles, 48px** |
| 19 | `ab` | motif placement · angle | 171 mod 4; ⌊171/4⌋ × 180/63 | **markers, 120°** |
| 20 | `4b` | radius · border | RADII[75 mod 8]; ⌊75/8⌋ mod 4; ⌊75/32⌋ mod 4 | **0px radius, 1px dashed border** |
| 21 | `94` | shadow · texture | 148 & 3; (148 >> 2) & 3; 3 + 9 × 0.6 | **no shadow, grain 8.4%** |
| 22 | `8f` | motion property · duration | ⌊143/64⌋; (143 mod 64)/63 × 600 | **clip-path, 140ms** |
| 23 | `79` | easing | 121 ≥ 32 → cubic-bezier from bits | **cubic-bezier(0.77, 0.6, 0.37, 1)** |
| 24 | `e1` | voice person · headline form | 225 mod 4; ⌊225/4⌋ mod 6 | **we, label** |
| 25 | `70` | sentence length · register | 3 + (112 & 15); (112 >> 4)/15 | **3 words, register 0.47** |
| 26 | `97` | twist target | 151 mod 9 | **links** |
| 27 | `a2` | twist operation · amount | 162 mod 10; ⌊162/10⌋ | **oversize, 16** |
| 29 | `3e` | CJK display face | 62 mod 14 _(used on Chinese pages)_ | **Noto Sans SC** |
| 30 | `cd` | mono face | 205 mod 8 | **Overpass Mono** |
| 28, 31 | `1d ab` | (unused) | recorded, not used | — |

## 内容 Content

**Subject:** Sluice — self-hosted webhook inbox

Use only these facts. Do not invent numbers, reviews, awards or customers; leave gaps visibly empty.

- Name: Sluice — a self-hosted inbox for webhooks
- What it does: gives you a public URL for webhooks, stores every delivery, and forwards it to your local or internal service
- One static binary, about 11 MB, for Linux, macOS and Windows on amd64 and arm64
- Storage: a single SQLite file; no Redis, no Postgres, no queue to run
- Install: curl -fsSL https://sluice.example/install.sh | sh
- Start: sluice serve --forward http://localhost:3000
- Retries failed forwards with exponential backoff for up to 72 hours
- Replay any stored delivery: sluice replay <delivery-id>
- Verifies HMAC-SHA256 signatures and rejects deliveries older than 5 minutes
- Web UI on port 8081: search deliveries by path, header or body text
- Keeps deliveries for 30 days by default; change it with --retain
- 1,800 deliveries per second on a 2-vCPU VM, in the project's own benchmark
- No hosted service, no account, no telemetry
- Written in Go; MIT licence; 41 contributors
- Current version 0.9.2, released 14 October 2026
- Maintainer: Ines Okafor, who started it in 2023 after losing a weekend of payment webhooks

## 文案语气 Voice

- **Person:** first person plural ("we")
- **Headlines:** a label: a noun phrase, no verb
- **Sentences:** about 3 words on average (about 6 characters in Chinese)
- **Register:** 0.47 on a 0–1 scale — plain and neutral

## 版式 Layout

- **Grid:** 12 columns, 32px gutters, max width 1230px
- **Text block:** columns 2–10 of 12 (left of centre)
- **First screen:** 55% of the viewport height
- **Sections:** 8, separated by space only: the section gap, no lines or fills
- Below 640px wide the grid collapses to one column; separators and the anchor stay.

**First-screen anchor:** the facts as one list, nothing else; about 71% of the first screen's width, centred at 87% from the left edge, rotated -1.5°.

## 字体 Typography

- **Display**: Bodoni Moda 400/500/700 + italic · set at 700, as written (sentence case), letter-spacing 0.095em — fallback `Didot, "Bodoni 72", serif`
- **Body**: Literata 400/600 + italic — fallback `Georgia, serif`
- **Mono**: Overpass Mono 400/600 — fallback `"Courier New", monospace`
- **CJK** (Chinese pages): display Noto Sans SC, body Noto Serif SC

Scale: ratio **1.29** on a 16.5px base → -2: 9.9px · -1: 12.8px · 0: 16.5px · 1: 21.3px · 2: 27.5px · 3: 35.4px · 4: 45.7px · 5: 58.9px · 6: 76px · 7: 98.1px

```html
<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=Bodoni+Moda:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Literata:ital,wght@0,400;0,600;1,400;1,600&family=Overpass+Mono:wght@400;600&display=swap">
```

## 配色 Colour — light, hue 12.24°

Computed in OKLCH: paper L 0.913 / C 0.004 at hue 12.24°; accents at chroma 0.113, accent2 300.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 | `#e5e1e1` | page background |
| ink | `#403536` | primary text |
| muted | `#6e5f60` | secondary text |
| accent | `#b9626e` | the anchor and one kind of mark |
| accent2 | `#9871af` | sparingly, under a tenth of the page |
| rule | `#b4a8a9` | lines, borders |
| panel | `#dbd0d1` | secondary background |

Contrast (WCAG):

- ink on paper: **9.09:1** — AAA — any text
- muted on paper: **4.67:1** — AA — body text OK
- ink on panel: **7.84:1** — AAA — any text
- accent on paper: **3.22: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.04:1** — AA — body text OK
- #000000 on accent2: **5.32:1** — AA — body text OK

## 密度 Density — 0.412

0.412 on the density axis (0 = airiest, 1 = most packed): base 16.5px, line-height 1.53, spacing unit 8px, section gap 112px, max width 1230px.

## 形状与材质 Shape & surface

- **Radius:** 0 — square corners everywhere
- **Borders:** 1px dashed in the rule colour
- **Shadow:** none (never a soft, blurred shadow)
- **Texture:** fine noise grain over the paper at 8.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.084'/%3E%3C/svg%3E"); }
```

## 母题 Motif

Half circles, each about 48px, as list and heading markers, at 120°. Draw them with CSS or inline SVG in the palette colours; no icon fonts, no emoji.

## 动效 Motion

A wipe (clip-path) changes over 140ms with `cubic-bezier(0.77, 0.6, 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

Set the links at 3.6× the size it would normally get.

## 全局禁令 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 · 08b46918 */
:root {
  --paper: #e5e1e1;
  --ink: #403536;
  --muted: #6e5f60;
  --accent: #b9626e;
  --on-accent: #000000;
  --accent2: #9871af;
  --on-accent2: #000000;
  --rule: #b4a8a9;
  --panel: #dbd0d1;

  --font-display: "Bodoni Moda", Didot, "Bodoni 72", serif;
  --font-body: Literata, Georgia, serif;
  --font-mono: "Overpass Mono", "Courier New", monospace;
  --display-weight: 700;
  --display-tracking: 0.095em;

  --step-n2: 0.62rem; /* 9.9px */
  --step-n1: 0.799rem; /* 12.8px */
  --step-0: 1.031rem; /* 16.5px */
  --step-1: 1.33rem; /* 21.3px */
  --step-2: 1.716rem; /* 27.5px */
  --step-3: 2.214rem; /* 35.4px */
  --step-4: 2.856rem; /* 45.7px */
  --step-5: 3.684rem; /* 58.9px */
  --step-6: 4.752rem; /* 76px */
  --step-7: 6.13rem; /* 98.1px */
  --leading: 1.53;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --section-gap: 112px;
  --max-width: 1230px;
  --columns: 12;
  --gutter: 32px;

  --radius: 0px;
  --border: 1px dashed var(--rule);
  --shadow: none;

  --motion-duration: 140ms;
  --motion-easing: cubic-bezier(0.77, 0.6, 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: Bodoni Moda / Literata / Overpass Mono
- [ ] Every colour on the page comes from the 7 palette tokens above
- [ ] 12-column grid, text block in columns 2–10 of 12 (left of centre), first screen built around the facts as one list, nothing else
- [ ] Copy uses first person plural ("we"), headlines are a label: a noun phrase, no verb, only the facts
- [ ] Radius 0px, no shadow, grain texture
- [ ] Twist applied: Set the links at 3.6× the size it would normally get.
- [ ] `critique_page` (or `hash-design critique --brief 08b4691844e6d5dfec8f67699f5a2ee99d6d45ab4b948f79e17097a21d3ecdab`) reports no critical/major findings