PageSourceSearch

https://pollen.place/design

html pollen.place collected 2026-10-09 01:43:30 UTC 73,402 bytes, 1,444 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Design - Pollen</title>
7  <meta name="description" content="What pollen is made of: every colour, face, shadow and curve on the site, as a rack of seed packets.">
8  <link rel="canonical" href="https://pollen.place/design">
9
10  <!-- Open Graph / Facebook -->
11  <meta property="og:type" content="website">
12  <meta property="og:url" content="https://pollen.place/design">
13  <meta property="og:title" content="Design - Pollen">
14  <meta property="og:description" content="What pollen is made of: every colour, face, shadow and curve on the site, as a rack of seed packets.">
15  <meta property="og:image" content="https://pollen.place/public/og-image.png">
16  <meta property="og:site_name" content="Pollen">
17
18  <!-- Twitter -->
19  <meta name="twitter:card" content="summary_large_image">
20  <meta name="twitter:url" content="https://pollen.place/design">
21  <meta name="twitter:title" content="Design - Pollen">
22  <meta name="twitter:description" content="What pollen is made of: every colour, face, shadow and curve on the site, as a rack of seed packets.">
23  <meta name="twitter:image" content="https://pollen.place/public/og-image.png">
24
25  <!-- Theme -->
26  <meta name="theme-color" content="#faf5ef">
27  <meta name="color-scheme" content="light">
28
29  <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
30  <link rel="icon" href="/public/images/pollen-icon.svg" type="image/svg+xml" sizes="any">
31  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
32  <link rel="stylesheet" href="/css/tokens.44da7b47f6.css">
33  <link rel="stylesheet" href="/css/base.a4b853999b.css">
34  <link rel="stylesheet" href="/css/design.0123449d8c.css">
35</head>
36<body>
37  <a href="#main-content" class="skip-link">Skip to main content</a>
38  <div class="gradient-mesh" aria-hidden="true"></div>
39
40  <!-- Navigation -->
41  <nav class="top-nav" role="banner">
42    <a href="/" class="nav-logo">
43      <pollen-logo size="32"></pollen-logo>
44    </a>
45    <div class="nav-links" role="navigation" aria-label="Main navigation">
46      <a href="/explore" class="nav-link"><span class="nav-emoji">🔍</span> explore</a>
47      
48        <a href="/login" class="nav-link nav-link-primary">login</a>
49      
50    </div>
51  </nav>
52
53  <main id="main-content" class="main-content" role="main">
54    
55    <div class="design-page">
56      <header class="design-intro">
57        <h1>what pollen is made of</h1>
58        <p>every colour, face, shadow and curve on this site is a css variable, and these are the packets they come in: open one for its tokens and the rule behind them.</p>
59      </header>
60
61      <div class="rack">
62        
63    <article class="packet" id="blooms" style="--i: 1">
64      <div class="card">
65        <div class="face">
66          <span class="stamp" aria-hidden="true">🌸</span>
67          
68  <div class="sp sp-blooms" aria-hidden="true">
69    <i style="--c: var(--amber)"></i>
70    <i style="--c: var(--coral)"></i>
71    <i style="--c: var(--pink)"></i>
72    <i style="--c: var(--sage)"></i>
73    <i style="--c: var(--lavender)"></i>
74    <i style="--c: var(--sky)"></i>
75    <i style="--c: var(--cream)"></i>
76  </div>
77        </div>
78        <details name="packet" open>
79          <summary>
80            <span class="ring" aria-hidden="true"></span>
81            <h2>blooms</h2>
82            <span class="kind">colour · 33 tokens</span>
83            <span class="sow">seven warm hues on cream paper, and ink that is brown, never black.</span>
84          </summary>
85        </details>
86      </div>
87      <div class="back">
88        <p class="why">the whole palette lives at golden hour. amber is pollen&#039;s voice, coral is the warm second, sage says thank you, and pink, lavender and sky drift through the background. neutrals are tinted toward brown so nothing reads as cold.</p>
89        <dl class="rules">
90          <dt>the tinted-neutral rule</dt><dd>never #000, never #fff. every neutral leans amber or brown. white is a bug, not a colour.</dd><dt>the one-cool-dot rule</dt><dd>sky is the only cool colour, and only as atmosphere. a cool foreground element is a defect.</dd><dt>the sage-for-thanks rule</dt><dd>sage confirms and attributes: reposts, from-chips, added-by chains. primary actions are amber&#039;s job.</dd>
91        </dl>
92        
93        <div class="sections">
94          
95    <section class="tokens" aria-labelledby="sec-semantic-color-palette">
96      <h3 id="sec-semantic-color-palette">the blooms</h3>
97      <table>
98        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
99        <tbody>
100        <tr>
101          <th scope="row"><code class="tok">--cream</code></th>
102          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--cream)"></span></td>
103          <td class="val">#faf5ef</td>
104        </tr>
105        <tr>
106          <th scope="row"><code class="tok">--coral</code></th>
107          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--coral)"></span></td>
108          <td class="val">#e8734a</td>
109        </tr>
110        <tr>
111          <th scope="row"><code class="tok">--coral-soft</code></th>
112          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--coral-soft)"></span></td>
113          <td class="val">#f09070</td>
114        </tr>
115        <tr>
116          <th scope="row"><code class="tok">--amber</code></th>
117          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--amber)"></span></td>
118          <td class="val">#eda63a</td>
119        </tr>
120        <tr>
121          <th scope="row"><code class="tok">--amber-light</code></th>
122          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--amber-light)"></span></td>
123          <td class="val">#f5c96a</td>
124        </tr>
125        <tr>
126          <th scope="row"><code class="tok">--sage</code></th>
127          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--sage)"></span></td>
128          <td class="val">#8aad6e</td>
129        </tr>
130        <tr>
131          <th scope="row"><code class="tok">--sage-light</code></th>
132          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--sage-light)"></span></td>
133          <td class="val">#b5d4a0</td>
134        </tr>
135        <tr>
136          <th scope="row"><code class="tok">--pink</code></th>
137          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--pink)"></span></td>
138          <td class="val">#e8a0b4</td>
139        </tr>
140        <tr>
141          <th scope="row"><code class="tok">--pink-soft</code></th>
142          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--pink-soft)"></span></td>
143          <td class="val">#f0c4d4</td>
144        </tr>
145        <tr>
146          <th scope="row"><code class="tok">--lavender</code></th>
147          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--lavender)"></span></td>
148          <td class="val">#c8b8e0</td>
149        </tr>
150        <tr>
151          <th scope="row"><code class="tok">--lavender-light</code></th>
152          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--lavender-light)"></span></td>
153          <td class="val">#e8dff5</td>
154        </tr>
155        <tr>
156          <th scope="row"><code class="tok">--sky</code></th>
157          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--sky)"></span></td>
158          <td class="val">#b8d8e8</td>
159        </tr>
160        <tr>
161          <th scope="row"><code class="tok">--sky-light</code></th>
162          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--sky-light)"></span></td>
163          <td class="val">#daeef5</td>
164        </tr>
165        <tr>
166          <th scope="row"><code class="tok">--brown-light</code></th>
167          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--brown-light)"></span></td>
168          <td class="val">#d4bb96</td>
169        </tr>
170        <tr>
171          <th scope="row"><code class="tok">--tint-warm</code></th>
172          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--tint-warm)"></span></td>
173          <td class="val">color-mix(in srgb, var(--amber) 6%, transparent)</td>
174        </tr>
175        <tr>
176          <th scope="row"><code class="tok">--tint-pink</code></th>
177          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--tint-pink)"></span></td>
178          <td class="val">color-mix(in srgb, var(--pink) 8%, transparent)</td>
179        </tr>
180        <tr>
181          <th scope="row"><code class="tok">--tint-green</code></th>
182          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--tint-green)"></span></td>
183          <td class="val">color-mix(in srgb, var(--sage) 6%, transparent)</td>
184        </tr>
185        <tr>
186          <th scope="row"><code class="tok">--tint-coral</code></th>
187          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--tint-coral)"></span></td>
188          <td class="val">color-mix(in srgb, var(--coral) 6%, transparent)</td>
189        </tr></tbody>
190      </table>
191    </section>
192    <section class="tokens" aria-labelledby="sec-accent-colors">
193      <h3 id="sec-accent-colors">accent roles</h3>
194      <table>
195        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
196        <tbody>
197        <tr>
198          <th scope="row"><code class="tok">
198--accent</code></th>
199          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--accent)"></span></td>
200          <td class="val">var(--amber)</td>
201        </tr>
202        <tr>
203          <th scope="row"><code class="tok">--accent-warm</code></th>
204          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--accent-warm)"></span></td>
205          <td class="val">var(--coral)</td>
206        </tr>
207        <tr>
208          <th scope="row"><code class="tok">--accent-secondary</code></th>
209          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--accent-secondary)"></span></td>
210          <td class="val">var(--pink)</td>
211        </tr>
212        <tr>
213          <th scope="row"><code class="tok">--accent-hover</code></th>
214          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--accent-hover)"></span></td>
215          <td class="val">#d4944a</td>
216        </tr>
217        <tr>
218          <th scope="row"><code class="tok">--accent-glow</code></th>
219          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--accent-glow)"></span></td>
220          <td class="val">#f5c890</td>
221        </tr>
222        <tr>
223          <th scope="row"><code class="tok">--accent-green</code></th>
224          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--accent-green)"></span></td>
225          <td class="val">var(--sage)</td>
226        </tr>
227        <tr>
228          <th scope="row"><code class="tok">--accent-pink</code></th>
229          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--accent-pink)"></span></td>
230          <td class="val">var(--pink)</td>
231        </tr>
232        <tr>
233          <th scope="row"><code class="tok">--accent-blue</code></th>
234          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--accent-blue)"></span></td>
235          <td class="val">var(--sky)</td>
236        </tr></tbody>
237      </table>
238    </section>
239    <section class="tokens" aria-labelledby="sec-text-hierarchy">
240      <h3 id="sec-text-hierarchy">ink</h3>
241      <table>
242        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
243        <tbody>
244        <tr>
245          <th scope="row"><code class="tok">--text</code></th>
246          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--text)"></span></td>
247          <td class="val">#3d3028</td>
248        </tr>
249        <tr>
250          <th scope="row"><code class="tok">--text-secondary</code></th>
251          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--text-secondary)"></span></td>
252          <td class="val">#7a6b5e</td>
253        </tr>
254        <tr>
255          <th scope="row"><code class="tok">--text-muted</code></th>
256          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--text-muted)"></span></td>
257          <td class="val">#a89888</td>
258        </tr></tbody>
259      </table>
260    </section>
261    <section class="tokens" aria-labelledby="sec-semantic-colors">
262      <h3 id="sec-semantic-colors">danger and success</h3>
263      <table>
264        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
265        <tbody>
266        <tr>
267          <th scope="row"><code class="tok">--color-danger</code></th>
268          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--color-danger)"></span></td>
269          <td class="val">#c54545</td>
270        </tr>
271        <tr>
272          <th scope="row"><code class="tok">--color-danger-bg</code></th>
273          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--color-danger-bg)"></span></td>
274          <td class="val">rgba(220, 100, 100, 0.08)</td>
275        </tr>
276        <tr>
277          <th scope="row"><code class="tok">--color-success</code></th>
278          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--color-success)"></span></td>
279          <td class="val">#6ab88f</td>
280        </tr>
281        <tr>
282          <th scope="row"><code class="tok">--color-success-bg</code></th>
283          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--color-success-bg)"></span></td>
284          <td class="val">rgba(125, 201, 160, 0.08)</td>
285        </tr></tbody>
286      </table>
287    </section>
288        </div>
289      </div>
290    </article>
291
292    <article class="packet" id="voice" style="--i: 2">
293      <div class="card">
294        <div class="face">
295          <span class="stamp" aria-hidden="true">🌼</span>
296          
297  <div class="sp sp-voice" aria-hidden="true">
298    <span class="sp-voice-display">Aa</span>
299    <span class="sp-voice-body">a quiet place online</span>
300    <span class="sp-voice-glyph">🌱</span>
301  </div>
302        </div>
303        <details name="packet">
304          <summary>
305            <span class="ring" aria-hidden="true"></span>
306            <h2>voice</h2>
307            <span class="kind">type · 25 tokens</span>
308            <span class="sow">pp eiko for names, pp museum for sentences, and gt maru emoji for every emoji.</span>
309          </summary>
310        </details>
311      </div>
312      <div class="back">
313        <p class="why">two text faces and one emoji face, all self-hosted. pp eiko is the display serif, usually light. pp museum is the humanist body face. gt maru emoji draws the emoji: it sits first in every stack but is scoped by unicode-range to emoji codepoints, so letters fall straight through to the text face and only the emoji change.</p>
314        <dl class="rules">
315          <dt>the lowercase rule</dt><dd>system chrome is lowercase. post, not Post. explore, not Explore. headings inside posts may use title case.</dd><dt>the gt maru emoji rule</dt><dd>every emoji the site shows, in chrome or in a post, is drawn by gt maru when it has the glyph. the platform&#039;s emoji font fills the gaps. chrome uses emoji as punctuation: a leaf on the from-chip, a blossom in the logo.</dd><dt>the no-em-dash rule</dt><dd>commas, colons, semicolons, periods, parentheses. not em dashes, and not two hyphens either.</dd>
316        </dl>
317        
318        <div class="sections">
319          
320    <section class="tokens" aria-labelledby="sec-typography">
321      <h3 id="sec-typography">faces, scale, weight</h3>
322      <table>
323        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
324        <tbody>
325        <tr>
326          <th scope="row"><code class="tok">--font-body</code></th>
327          <td class="pv" data-preview="font"><span class="pv-box" style="--pv: var(--font-body)"></span></td>
328          <td class="val">&#039;GT Maru Emoji&#039;, &#039;PP Museum&#039;, system-ui, sans-serif</td>
329        </tr>
330        <tr>
331          <th scope="row"><code class="tok">--font-display</code></th>
332          <td class="pv" data-preview="font"><span class="pv-box" style="--pv: var(--font-display)"></span></td>
333          <td class="val">&#039;GT Maru Emoji&#039;, &#039;PP Eiko&#039;, Georgia, serif</td>
334        </tr>
335        <tr>
336          <th scope="row"><code class="tok">--font-accent</code></th>
337          <td class="pv" data-preview="font"><span class="pv-box" style="--pv: var(--font-accent)"></span></td>
338          <td class="val">&#039;GT Maru Emoji&#039;, &#039;PP Eiko&#039;, Georgia, serif</td>
339        </tr>
340        <tr>
341          <th scope="row"><code class="tok">--font-mono</code></th>
342          <td class="pv" data-preview="font"><span class="pv-box" style="--pv: var(--font-mono)"></span></td>
343          <td class="val">ui-monospace, &#039;SF Mono&#039;, Menlo, monospace</td>
344        </tr>
345        <tr>
346          <th scope="row"><code class="tok">--font-emoji</code></th>
347          <td class="pv" data-preview="font"><span class="pv-box" style="--pv: var(--font-emoji)"></span></td>
348          <td class="val">&#039;GT Maru Emoji&#039;, system-ui, sans-serif</td>
349        </tr>
350        <tr>
351          <th scope="row"><code class="tok">--font-size-xs</code></th>
352          <td class="pv" data-preview="size"><span class="pv-box" style="--pv: var(--font-size-xs)"></span></td>
353          <td class="val">0.75rem</td>
354        </tr>
355        <tr>
356          <th scope="row"><code class="tok">--font-size-sm</code></th>
357          <td class="pv" data-preview="size"><span class="pv-box" style="--pv: var(--font-size-sm)"></span></td>
358          <td class="val">0.875rem</td>
359        </tr>
360        <tr>
361          <th scope="row"><code class="tok">--font-size-base</code></th>
362          <td class="pv" data-preview="size"><span class="pv-box" style="--pv: var(--font-size-base)"></span></td>
363          <td class="val">1rem</td>
364        </tr>
365        <tr>
366          <th scope="row"><code class="tok">--font-size-lg</code></th>
367          <td class="pv" data-preview="size"><span class="pv-box" style="--pv: var(--font-size-lg)"></span></td>
368          <td class="val">1.125rem</td>
369        </tr>
370        <tr>
371          <th scope="row"><code class="tok">--font-size-xl</code></th>
372          <td class="pv" data-preview="size"><span class="pv-box" style="--pv: var(--font-size-xl)"></span></td>
373          <td class="val">1.25rem</td>
374        </tr>
375        <tr>
376          <th scope="row"><code class="tok">--font-size-2xl</code></th>
377          <td class="pv" data-preview="size"><span class="pv-box" style="--pv: var(--font-size-2xl)"></span></td>
378          <td class="val">1.5rem</td>
379        </tr>
380        <tr>
381          <th scope="row"><code class="tok">--font-size-3xl</code></th>
382          <td class="pv" data-preview="size"><span class="pv-box" style="--pv: var(--font-size-3xl)"></span></td>
383          <td class="val">2rem</td>
384        </tr>
385        <tr>
386          <th scope="row"><code class="tok">--font-size-4xl</code></th>
387          <td class="pv" data-preview="size"><span class="pv-box" style="--pv: var(--font-size-4xl)"></span></td>
388          <td class="val">3rem</td>
389        </tr>
390        <tr>
391          <th scope="row"><code class="tok">--font-size-5xl</code></th>
392          <td class="pv" data-preview="size"><span class="pv-box" style="--pv: var(--font-size-5xl)"></span></td>
393          <td class="val">4rem</td>
394        </tr>
395        <tr>
396          <th scope="row"><code class="tok">--font-weight-light</code></th>
397          <td class="pv" data-preview="weight"><span class="pv-box" style="--pv: var(--font-weight-light)"></span></td>
398          <td class="val">300</td>
399        </tr>
400        <tr>
401          <th scope="row"><code class="tok">--font-weight-normal</code></th>
402          <td class="pv" data-preview="weight"><span class="pv-box" style="--pv: var(--font-weight-normal)"></span></td>
403          <td class="val">400</td>
404        </tr>
405        <tr>
406          <th scope="row"><code class="tok">
406--font-weight-medium</code></th>
407          <td class="pv" data-preview="weight"><span class="pv-box" style="--pv: var(--font-weight-medium)"></span></td>
408          <td class="val">500</td>
409        </tr>
410        <tr>
411          <th scope="row"><code class="tok">--font-weight-bold</code></th>
412          <td class="pv" data-preview="weight"><span class="pv-box" style="--pv: var(--font-weight-bold)"></span></td>
413          <td class="val">700</td>
414        </tr>
415        <tr>
416          <th scope="row"><code class="tok">--font-weight-ultrabold</code></th>
417          <td class="pv" data-preview="weight"><span class="pv-box" style="--pv: var(--font-weight-ultrabold)"></span></td>
418          <td class="val">800</td>
419        </tr>
420        <tr>
421          <th scope="row"><code class="tok">--line-height</code></th>
422          <td class="pv" data-preview="leading"><span class="pv-box" style="--pv: var(--line-height)"></span></td>
423          <td class="val">1.6</td>
424        </tr>
425        <tr>
426          <th scope="row"><code class="tok">--line-height-tight</code></th>
427          <td class="pv" data-preview="leading"><span class="pv-box" style="--pv: var(--line-height-tight)"></span></td>
428          <td class="val">1.1</td>
429        </tr>
430        <tr>
431          <th scope="row"><code class="tok">--line-height-loose</code></th>
432          <td class="pv" data-preview="leading"><span class="pv-box" style="--pv: var(--line-height-loose)"></span></td>
433          <td class="val">1.8</td>
434        </tr>
435        <tr>
436          <th scope="row"><code class="tok">--letter-spacing</code></th>
437          <td class="pv" data-preview="tracking"><span class="pv-box" style="--pv: var(--letter-spacing)"></span></td>
438          <td class="val">0.01em</td>
439        </tr>
440        <tr>
441          <th scope="row"><code class="tok">--letter-spacing-wide</code></th>
442          <td class="pv" data-preview="tracking"><span class="pv-box" style="--pv: var(--letter-spacing-wide)"></span></td>
443          <td class="val">0.04em</td>
444        </tr>
445        <tr>
446          <th scope="row"><code class="tok">--letter-spacing-tight</code></th>
447          <td class="pv" data-preview="tracking"><span class="pv-box" style="--pv: var(--letter-spacing-tight)"></span></td>
448          <td class="val">-0.02em</td>
449        </tr></tbody>
450      </table>
451    </section>
452        </div>
453      </div>
454    </article>
455
456    <article class="packet" id="paper" style="--i: 3">
457      <div class="card">
458        <div class="face">
459          <span class="stamp" aria-hidden="true">🌞</span>
460          
461  <div class="sp sp-paper" aria-hidden="true">
462    <i style="--s: var(--shadow-sm)"></i>
463    <i style="--s: var(--shadow-md)"></i>
464    <i style="--s: var(--shadow-lg)"></i>
465  </div>
466        </div>
467        <details name="packet">
468          <summary>
469            <span class="ring" aria-hidden="true"></span>
470            <h2>paper and light</h2>
471            <span class="kind">surfaces · 28 tokens</span>
472            <span class="sow">cream ground, amber-tinted shadows, and glass that reads as filtered afternoon light.</span>
473          </summary>
474        </details>
475      </div>
476      <div class="back">
477        <p class="why">depth comes from translucency and warm tint, not from heavy drop shadows. three shadow tiers, all tinted toward amber and brown, all diffuse. glass is allowed because cream-on-cream needs separation; the saturate() in the blur is what keeps it warm instead of gray.</p>
478        <dl class="rules">
479          <dt>the sun-cast-shadow rule</dt><dd>shadows are warm, low-opacity, large-radius. an rgba(0, 0, 0, x) shadow is cold against cream and does not ship.</dd><dt>the glass-is-earned rule</dt><dd>glass ships on header chrome, modals and post cards. not on buttons, inputs, chips or list items.</dd><dt>the lift-on-hover rule</dt><dd>cards rise 2px on hover with a spring, the shadow steps up one tier, and on pollen-chrome cards the shimmer border fades in.</dd>
480        </dl>
481        
482        <div class="sections">
483          
484    <section class="tokens" aria-labelledby="sec-background">
485      <h3 id="sec-background">the paper</h3>
486      <table>
487        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
488        <tbody>
489        <tr>
490          <th scope="row"><code class="tok">--bg</code></th>
491          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--bg)"></span></td>
492          <td class="val">var(--cream)</td>
493        </tr>
494        <tr>
495          <th scope="row"><code class="tok">--bg-attachment</code></th>
496          <td class="pv"></td>
497          <td class="val">fixed</td>
498        </tr></tbody>
499      </table>
500    </section>
501    <section class="tokens" aria-labelledby="sec-surfaces">
502      <h3 id="sec-surfaces">surfaces</h3>
503      <table>
504        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
505        <tbody>
506        <tr>
507          <th scope="row"><code class="tok">--surface</code></th>
508          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--surface)"></span></td>
509          <td class="val">rgba(255, 253, 250, 0.88)</td>
510        </tr>
511        <tr>
512          <th scope="row"><code class="tok">--surface-hover</code></th>
513          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--surface-hover)"></span></td>
514          <td class="val">rgba(255, 255, 255, 0.95)</td>
515        </tr>
516        <tr>
517          <th scope="row"><code class="tok">--surface-border</code></th>
518          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--surface-border)"></span></td>
519          <td class="val">rgba(232, 166, 90, 0.15)</td>
520        </tr>
521        <tr>
522          <th scope="row"><code class="tok">--surface-blur</code></th>
523          <td class="pv" data-preview="blur"><span class="pv-box" style="--pv: var(--surface-blur)"></span></td>
524          <td class="val">16px</td>
525        </tr></tbody>
526      </table>
527    </section>
528    <section class="tokens" aria-labelledby="sec-shadows">
529      <h3 id="sec-shadows">shadows</h3>
530      <table>
531        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
532        <tbody>
533        <tr>
534          <th scope="row"><code class="tok">--shadow-sm</code></th>
535          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--shadow-sm)"></span></td>
536          <td class="val">0 1px 3px rgba(180, 150, 120, 0.06)</td>
537        </tr>
538        <tr>
539          <th scope="row"><code class="tok">--shadow-md</code></th>
540          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--shadow-md)"></span></td>
541          <td class="val">0 4px 16px rgba(180, 150, 120, 0.07)</td>
542        </tr>
543        <tr>
544          <th scope="row"><code class="tok">--shadow-lg</code></th>
545          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--shadow-lg)"></span></td>
546          <td class="val">0 12px 40px rgba(180, 150, 120, 0.1)</td>
547        </tr>
548        <tr>
549          <th scope="row"><code class="tok">--shadow</code></th>
550          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--shadow)"></span></td>
551          <td class="val">var(--shadow-md)</td>
552        </tr>
553        <tr>
554          <th scope="row"><code class="tok">--shadow-hover</code></th>
555          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--shadow-hover)"></span></td>
556          <td class="val">var(--shadow-lg)</td>
557        </tr>
558        <tr>
559          <th scope="row"><code class="tok">--shadow-glow</code></th>
560          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--shadow-glow)"></span></td>
561          <td class="val">0 4px 24px rgba(232, 165, 90, 0.2)</td>
562        </tr></tbody>
563      </table>
564    </section>
565    <section class="tokens" aria-labelledby="sec-glass-morphism">
566      <h3 id="sec-glass-morphism">glass</h3>
567      <table>
568        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
569        <tbody>
570        <tr>
571          <th scope="row"><code class="tok">--glass-bg</code></th>
572          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--glass-bg)"></span></td>
573          <td class="val">linear-gradient(168deg, rgba(255, 255, 255, 0.76), rgba(255, 252, 248, 0.58) 50%, rgba(250, 245, 240, 0.48))</td>
574        </tr>
575        <tr>
576          <th scope="row"><code class="tok">--glass-blur</code></th>
577          <td class="pv" data-preview="filter"><span class="pv-box" style="--pv: var(--glass-blur)"></span></td>
578          <td class="val">blur(20px) saturate(1.2)</td>
579        </tr>
580        <tr>
581          <th scope="row"><code class="tok">--glass-border</code></th>
582          <td class="pv"></td>
583          <td class="val">1px solid rgba(255, 255, 255, 0.5)</td>
584        </tr>
585        <tr>
586          <th scope="row"><code class="tok">--glass-shadow</code></th>
587          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--glass-shadow)"></span></td>
588          <td class="val">0 4px 20px rgba(180, 150, 120, 0.05)</td>
589        </tr>
590        <tr>
591          <th scope="row"><code class="tok">--glass-shadow-inset</code></th>
592          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--glass-shadow-inset)"></span></td>
593          <td class="val">0 1px 0 rgba(255, 255, 255, 0.7) inset</td>
594        </tr></tbody>
595      </table>
596    </section>
597    <section class="tokens" aria-labelledby="sec-shimmer-border">
598      <h3 id="sec-shimmer-border">shimmer border</h3>
599      <table>
600        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
601        <tbody>
602        <tr>
603          <th scope="row"><code class="tok">--shimmer-gradient</code></th>
604          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--shimmer-gradient)"></span></td>
605          <td class="val">linear-gradient(135deg, color-mix(in srgb, var(--amber) 35%, transparent), color-mix(in srgb, var(--coral) 25%, transparent), color-mix(in srgb, var(--pink) 25%, transparent), color-mix(in srgb, var(--lavender) 25%, transparent), color-mix(in srgb, var(--sky) 35%, transparent), color-mix(in srgb, var(--sage) 25%, transparent), color-mix(in srgb, var(--amber) 35%, transparent))</td>
606        </tr>
607        <tr>
608          <th scope="row"><code class="tok">--shimmer-speed</code></th>
609          <td class="pv"></td>
610          <td class="val">5s</td>
611        </tr></tbody>
612      </table>
613    </section>
614    <section class="tokens" aria-labelledby="sec-gradients">
615      <h3 id="sec-gradients">gradients</h3>
616      <table>
617        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
618        <tbody>
619        <tr>
620          <th scope="row"><code class="tok">--gradient-garden</code></th>
621          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--gradient-garden)"></span></td>
622          <td class="val">linear-gradient( 170deg, #faf5ef 0%, #f8f0e8 25%, #f5ebe0 50%, #f0e4d8 75%, #ede0d0 100% )</td>
623        </tr>
624        <tr>
625          <th scope="row"><code class="tok">--gradient-cream</code></th>
626          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--gradient-cream)"></span></td>
627          <td class="val">linear-gradient( 175deg, #fffdfb 0%, #fdf9f4 40%, #faf5ed 70%, #f5efe6 100% )</td>
628        </tr>
629        <tr>
630          <th scope="row"><code class="tok">
630--gradient-sunset</code></th>
631          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--gradient-sunset)"></span></td>
632          <td class="val">linear-gradient( 135deg, #fdf6ee 0%, #fceee0 50%, #f8e4d4 100% )</td>
633        </tr>
634        <tr>
635          <th scope="row"><code class="tok">--gradient-accent</code></th>
636          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--gradient-accent)"></span></td>
637          <td class="val">linear-gradient(135deg, var(--coral), var(--amber))</td>
638        </tr></tbody>
639      </table>
640    </section>
641    <section class="tokens" aria-labelledby="sec-profile-ambient">
642      <h3 id="sec-profile-ambient">profile ambient</h3>
643      <table>
644        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
645        <tbody>
646        <tr>
647          <th scope="row"><code class="tok">--profile-ambient-bg-attachment</code></th>
648          <td class="pv"></td>
649          <td class="val">fixed</td>
650        </tr></tbody>
651      </table>
652    </section>
653    <section class="tokens" aria-labelledby="sec-header">
654      <h3 id="sec-header">header chrome</h3>
655      <table>
656        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
657        <tbody>
658        <tr>
659          <th scope="row"><code class="tok">--header-bg</code></th>
660          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--header-bg)"></span></td>
661          <td class="val">rgba(250, 245, 239, 0.72)</td>
662        </tr>
663        <tr>
664          <th scope="row"><code class="tok">--header-blur</code></th>
665          <td class="pv" data-preview="blur"><span class="pv-box" style="--pv: var(--header-blur)"></span></td>
666          <td class="val">28px</td>
667        </tr></tbody>
668      </table>
669    </section>
670    <section class="tokens" aria-labelledby="sec-modal">
671      <h3 id="sec-modal">modal overlay</h3>
672      <table>
673        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
674        <tbody>
675        <tr>
676          <th scope="row"><code class="tok">--modal-overlay</code></th>
677          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--modal-overlay)"></span></td>
678          <td class="val">rgba(61, 53, 48, 0.4)</td>
679        </tr>
680        <tr>
681          <th scope="row"><code class="tok">--modal-blur</code></th>
682          <td class="pv" data-preview="blur"><span class="pv-box" style="--pv: var(--modal-blur)"></span></td>
683          <td class="val">12px</td>
684        </tr></tbody>
685      </table>
686    </section>
687        </div>
688      </div>
689    </article>
690
691    <article class="packet" id="shape" style="--i: 4">
692      <div class="card">
693        <div class="face">
694          <span class="stamp" aria-hidden="true">🍩</span>
695          
696  <div class="sp sp-shape" aria-hidden="true">
697    <i style="--r: var(--card-radius); --g: var(--space-lg)">
698      <i style="--r: var(--radius-lg); --g: var(--space-md)">
699        <i style="--r: var(--radius); --g: var(--space-sm)">
700          <i style="--r: var(--radius-sm); --g: var(--space-xs)"></i>
701        </i>
702      </i>
703    </i>
704  </div>
705        </div>
706        <details name="packet">
707          <summary>
708            <span class="ring" aria-hidden="true"></span>
709            <h2>space and shape</h2>
710            <span class="kind">spacing, corners, widths · 14 tokens</span>
711            <span class="sow">a rem-based spacing scale and corners that are always round, never sharp.</span>
712          </summary>
713        </details>
714      </div>
715      <div class="back">
716        <p class="why">spacing steps from a quarter rem to six rem. corners run 8, 12, 20 and 24px, with 9999px for pills. reading columns sit at min(680px, 90vw), inside the 65 to 75 character measure that body text wants.</p>
717        <dl class="rules">
718          <dt>the full-edge rule</dt><dd>a card border wraps all four sides at 1px or not at all. no side stripes as colour accents.</dd><dt>the pill rule</dt><dd>buttons and chips are fully round. cards are 24px, smaller cards 20px, chips 12px.</dd>
719        </dl>
720        
721        <div class="sections">
722          
723    <section class="tokens" aria-labelledby="sec-spacing">
724      <h3 id="sec-spacing">spacing scale</h3>
725      <table>
726        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
727        <tbody>
728        <tr>
729          <th scope="row"><code class="tok">--space-xs</code></th>
730          <td class="pv" data-preview="space"><span class="pv-box" style="--pv: var(--space-xs)"></span></td>
731          <td class="val">0.25rem</td>
732        </tr>
733        <tr>
734          <th scope="row"><code class="tok">--space-sm</code></th>
735          <td class="pv" data-preview="space"><span class="pv-box" style="--pv: var(--space-sm)"></span></td>
736          <td class="val">0.5rem</td>
737        </tr>
738        <tr>
739          <th scope="row"><code class="tok">--space-md</code></th>
740          <td class="pv" data-preview="space"><span class="pv-box" style="--pv: var(--space-md)"></span></td>
741          <td class="val">1rem</td>
742        </tr>
743        <tr>
744          <th scope="row"><code class="tok">--space-lg</code></th>
745          <td class="pv" data-preview="space"><span class="pv-box" style="--pv: var(--space-lg)"></span></td>
746          <td class="val">1.5rem</td>
747        </tr>
748        <tr>
749          <th scope="row"><code class="tok">--space-xl</code></th>
750          <td class="pv" data-preview="space"><span class="pv-box" style="--pv: var(--space-xl)"></span></td>
751          <td class="val">2rem</td>
752        </tr>
753        <tr>
754          <th scope="row"><code class="tok">--space-2xl</code></th>
755          <td class="pv" data-preview="space"><span class="pv-box" style="--pv: var(--space-2xl)"></span></td>
756          <td class="val">2.5rem</td>
757        </tr>
758        <tr>
759          <th scope="row"><code class="tok">--space-3xl</code></th>
760          <td class="pv" data-preview="space"><span class="pv-box" style="--pv: var(--space-3xl)"></span></td>
761          <td class="val">4rem</td>
762        </tr>
763        <tr>
764          <th scope="row"><code class="tok">--space-4xl</code></th>
765          <td class="pv" data-preview="space"><span class="pv-box" style="--pv: var(--space-4xl)"></span></td>
766          <td class="val">6rem</td>
767        </tr></tbody>
768      </table>
769    </section>
770    <section class="tokens" aria-labelledby="sec-radius">
771      <h3 id="sec-radius">corners</h3>
772      <table>
773        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
774        <tbody>
775        <tr>
776          <th scope="row"><code class="tok">--radius-sm</code></th>
777          <td class="pv" data-preview="radius"><span class="pv-box" style="--pv: var(--radius-sm)"></span></td>
778          <td class="val">8px</td>
779        </tr>
780        <tr>
781          <th scope="row"><code class="tok">--radius</code></th>
782          <td class="pv" data-preview="radius"><span class="pv-box" style="--pv: var(--radius)"></span></td>
783          <td class="val">12px</td>
784        </tr>
785        <tr>
786          <th scope="row"><code class="tok">--radius-lg</code></th>
787          <td class="pv" data-preview="radius"><span class="pv-box" style="--pv: var(--radius-lg)"></span></td>
788          <td class="val">20px</td>
789        </tr>
790        <tr>
791          <th scope="row"><code class="tok">--radius-round</code></th>
792          <td class="pv" data-preview="radius"><span class="pv-box" style="--pv: var(--radius-round)"></span></td>
793          <td class="val">9999px</td>
794        </tr></tbody>
795      </table>
796    </section>
797    <section class="tokens" aria-labelledby="sec-layout">
798      <h3 id="sec-layout">layout widths</h3>
799      <table>
800        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
801        <tbody>
802        <tr>
803          <th scope="row"><code class="tok">--content-width</code></th>
804          <td class="pv"></td>
805          <td class="val">min(680px, 90vw)</td>
806        </tr>
807        <tr>
808          <th scope="row"><code class="tok">--sidebar-width</code></th>
809          <td class="pv"></td>
810          <td class="val">240px</td>
811        </tr></tbody>
812      </table>
813    </section>
814        </div>
815      </div>
816    </article>
817
818    <article class="packet" id="motion" style="--i: 5">
819      <div class="card">
820        <div class="face">
821          <span class="stamp" aria-hidden="true">🍀</span>
822          
823  <div class="sp sp-motion" aria-hidden="true">
824    <svg viewBox="0 0 100 100" class="sp-curve" role="presentation">
825      <path d="M0 100 C 23 0, 32 0, 100 0" fill="none" />
826    </svg>
827    <span class="sp-seed">🌱</span>
828  </div>
829        </div>
830        <details name="packet">
831          <summary>
832            <span class="ring" aria-hidden="true"></span>
833            <h2>motion</h2>
834            <span class="kind">easing and duration · 7 tokens</span>
835            <span class="sow">spring easing, short durations, and nothing that asks for attention.</span>
836          </summary>
837        </details>
838      </div>
839      <div class="back">
840        <p class="why">state changes use the spring curve: fast out, soft landing, no bounce. the default duration is a quarter second. the repost burst is the one long moment at just under a second. reduced-motion collapses everything to a single frame.</p>
841        <dl class="rules">
842          <dt>the transform-only rule</dt><dd>animate transform, opacity and filter. never width, height, padding or margin. the one exception is an inline card collapsing, and it springs out in a third of a second.</dd><dt>the one-moment rule</dt><dd>a surface gets one authored motion, orchestrated, not a hover effect on every element.</dd>
843        </dl>
844        
845      <p class="demo-note">hover a row below and its dot travels on that curve or timing.</p>
846        <div class="sections">
847          
848    <section class="tokens" aria-labelledby="sec-animations">
849      <h3 id="sec-animations">easing and duration</h3>
850      <table>
851        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
852        <tbody>
853        <tr>
854          <th scope="row"><code class="tok">--ease</code></th>
855          <td class="pv" data-preview="ease"><span class="pv-box" style="--pv: var(--ease)"></span></td>
856          <td class="val">cubic-bezier(0.25, 0.1, 0.25, 1)</td>
857        </tr>
858        <tr>
859          <th scope="row"><code class="tok">--ease-bounce</code></th>
860          <td class="pv" data-preview="ease"><span class="pv-box" style="--pv: var(--ease-bounce)"></span></td>
861          <td class="val">cubic-bezier(0.34, 1.56, 0.64, 1)</td>
862        </tr>
863        <tr>
864          <th scope="row"><code class="tok">--ease-spring</code></th>
865          <td class="pv" data-preview="ease"><span class="pv-box" style="--pv: var(--ease-spring)"></span></td>
866          <td class="val">cubic-bezier(0.23, 1, 0.32, 1)</td>
867        </tr>
868        <tr>
869          <th scope="row"><code class="tok">--duration</code></th>
870          <td class="pv" data-preview="duration"><span class="pv-box" style="--pv: var(--duration)"></span></td>
871          <td class="val">250ms</td>
872        </tr>
873        <tr>
874          <th scope="row"><code class="tok">--duration-fast</code></th>
875          <td class="pv" data-preview="duration"><span class="pv-box" style="--pv: var(--duration-fast)"></span></td>
876          <td class="val">150ms</td>
877        </tr>
878        <tr>
879          <th scope="row"><code class="tok">--duration-slow</code></th>
880          <td class="pv" data-preview="duration"><span class="pv-box" style="--pv: var(--duration-slow)"></span></td>
881          <td class="val">400ms</td>
882        </tr></tbody>
883      </table>
884    </section>
885    <section class="tokens" aria-labelledby="sec-interactive-states">
886      <h3 id="sec-interactive-states">hover</h3>
887      <table>
888        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
889        <tbody>
890        <tr>
891          <th scope="row"><code class="tok">--hover-lift</code></th>
892          <td class="pv"></td>
893          <td class="val">-3px</td>
894        </tr></tbody>
895      </table>
896    </section>
897        </div>
898      </div>
899    </article>
900
901    <article class="packet" id="buttons" style="--i: 6">
902      <div class="card">
903        <div class="face">
904          <span class="stamp" aria-hidden="true">🎯</span>
905          
906  <div class="sp sp-buttons" aria-hidden="true">
907    <span class="btn btn-primary">post</span>
908    <span class="btn">follow</span>
909    <span class="btn btn-ghost">cancel</span>
910    <span class="btn btn-danger">delete</span>
911  </div>
912        </div>
913        <details name="packet">
914          <summary>
915            <span class="ring" aria-hidden="true"></span>
916            <h2>buttons</h2>
917            <span class="kind">controls · 10 tokens</span>
918            <span class="sow">secondary is the default, primary is reserved, ghost is for stepping back.</span>
919          </summary>
920        </details>
921      </div>
922      <div class="back">
923        <p class="why">an unstyled button is already the secondary tier: cream, hairline border, pill shape. primary wears the coral-to-amber gradient and an amber glow, and is reserved for the main action on a surface. ghost is for cancel and dismiss. danger is for delete and block only.</p>
924        <dl class="rules">
925          <dt>the one-primary rule</dt><dd>one primary button per surface. two primaries is a layout asking for a decision it should have made.</dd>
926        </dl>
927        
928      <div class="demo-buttons">
929        <button type="button" class="primary">post</button>
930        <button type="button">follow</button>
931        <button type="button" class="ghost">cancel</button>
932        <button type="button" class="danger">delete</button>
933        <button type="button" disabled>disabled</button>
934      </div>
935      <p class="demo-note">these are real buttons: hover, focus, and press them.</p>
936        <div class="sections">
937          
938    <section class="tokens" aria-labelledby="sec-buttons">
939      <h3 id="sec-buttons">buttons</h3>
940      <table>
941        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
942        <tbody>
943        <tr>
944          <th scope="row"><code class="tok">--btn-bg</code></th>
945          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--btn-bg)"></span></td>
946          <td class="val">var(--accent)</td>
947        </tr>
948        <tr>
949          <th scope="row"><code class="tok">--btn-bg-hover</code></th>
950          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--btn-bg-hover)"></span></td>
951          <td class="val">var(--accent-hover)</td>
952        </tr>
953        <tr>
954          <th scope="row"><code class="tok">--btn-text</code></th>
955          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--btn-text)"></span></td>
956          <td class="val">white</td>
957        </tr>
958        <tr>
959          <th scope="row"><code class="tok">--btn-radius</code></th>
960          <td class="pv" data-preview="radius"><span class="pv-box" style="--pv: var(--btn-radius)"></span></td>
961          <td class="val">var(--radius-round)</td>
962        </tr>
963        <tr>
964          <th scope="row"><code class="tok">--btn-shadow</code></th>
965          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--btn-shadow)"></span></td>
966          <td class="val">0 2px 8px rgba(232, 165, 90, 0.25)</td>
967        </tr>
968        <tr>
969          <th scope="row"><code class="tok">--btn-padding</code></th>
970          <td class="pv" data-preview="padding"><span class="pv-box" style="--pv: var(--btn-padding)"></span></td>
971          <td class="val">0.75rem 1.75rem</td>
972        </tr>
973        <tr>
974          <th scope="row"><code class="tok">--btn-secondary-bg</code></th>
975          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--btn-secondary-bg)"></span></td>
976          <td class="val">var(--surface)</td>
977        </tr>
978        <tr>
979          <th scope="row"><code class="tok">--btn-secondary-border</code></th>
980          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--btn-secondary-border)"></span></td>
981          <td class="val">var(--surface-border)</td>
982        </tr>
983        <tr>
984          <th scope="row"><code class="tok">--btn-secondary-text</code></th>
985          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--btn-secondary-text)"></span></td>
986          <td class="val">var(--text)</td>
987        </tr>
988        <tr>
989          <th scope="row"><code class="tok">--btn-ghost-text</code></th>
990          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--btn-ghost-text)"></span></td>
991          <td class="val">var(--text-secondary)</td>
992        </tr></tbody>
993      </table>
994    </section>
995        </div>
996      </div>
997    </article>
998
999    <article class="packet" id="inputs" style="--i: 7">
1000      <div class="card">
1001        <div class="face">
1002          <span class="stamp" aria-hidden="true">✏</span>
1003          
1004  <div class="sp sp-inputs">
1005    <input type="text" placeholder="say something quiet" aria-label="sample text field">
1006    <textarea rows="2" placeholder="or something longer" aria-label="sample textarea"></textarea>
1007  </div>
1008        </div>
1009        <details name="packet">
1010          <summary>
1011            <span class="ring" aria-hidden="true"></span>
1012            <h2>inputs</h2>
1013            <span class="kind">fields and focus · 8 tokens</span>
1014            <span class="sow">a soft cream well with an amber hairline that firms up when you land in it.</span>
1015          </summary>
1016        </details>
1017      </div>
1018      <div class="back">
1019        <p class="why">inputs sit in a translucent cream well with an amber border at 20%. on focus the well goes opaque, the border goes solid amber, and the focus ring adds a 3px amber halo. placeholders speak in lowercase and use the muted ink.</p>
1020        <dl class="rules">
1021          <dt>the visible-focus rule</dt><dd>every interactive element shows the focus ring under keyboard focus. focus:not(:focus-visible) may stay quiet.</dd>
1022        </dl>
1023        
1024      <div class="demo-inputs">
1025        <label>
1026          <span>a text field</span>
1027          <input type="text" placeholder="say something quiet">
1028        </label>
1029        <label>
1030          <span>a textarea</span>
1031          <textarea placeholder="or something longer"></textarea>
1032        </label>
1033      </div>
1034        <div class="sections">
1035          
1036    <section class="tokens" aria-labelledby="sec-inputs">
1037      <h3 id="sec-inputs">inputs</h3>
1038      <table>
1039        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
1040        <tbody>
1041        <tr>
1042          <th scope="row"><code class="tok">--input-bg</code></th>
1043          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--input-bg)"></span></td>
1044          <td class="val">rgba(255, 253, 250, 0.7)</td>
1045        </tr>
1046        <tr>
1047          <th scope="row"><code class="tok">--input-bg-focus</code></th>
1048          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--input-bg-focus)"></span></td>
1049          <td class="val">rgba(255, 255, 255, 0.95)</td>
1050        </tr>
1051        <tr>
1052          <th scope="row"><code class="tok">--input-border</code></th>
1053          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--input-border)"></span></td>
1054          <td class="val">rgba(232, 165, 90, 0.2)</td>
1055        </tr>
1056        <tr>
1057          <th scope="row"><code class="tok">--input-border-focus</code></th>
1058          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--input-border-focus)"></span></td>
1059          <td class="val">var(--accent)</td>
1060        </tr>
1061        <tr>
1062          <th scope="row"><code class="tok">--input-radius</code></th>
1063          <td class="pv" data-preview="radius"><span class="pv-box" style="--pv: var(--input-radius)"></span></td>
1064          <td class="val">var(--radius)</td>
1065        </tr>
1066        <tr>
1067          <th scope="row"><code class="tok">--input-padding</code></th>
1068          <td class="pv" data-preview="padding"><span class="pv-box" style="--pv: var(--input-padding)"></span></td>
1069          <td class="val">0.875rem 1.25rem</td>
1070        </tr></tbody>
1071      </table>
1072    </section>
1073    <section class="tokens" aria-labelledby="sec-focus-states">
1074      <h3 id="sec-focus-states">focus</h3>
1075      <table>
1076        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
1077        <tbody>
1078        <tr>
1079          <th scope="row"><code class="tok">--focus-ring</code></th>
1080          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--focus-ring)"></span></td>
1081          <td class="val">0 0 0 3px rgba(232, 165, 90, 0.35)</td>
1082        </tr>
1083        <tr>
1084          <th scope="row"><code class="tok">--focus-offset</code></th>
1085          <td class="pv"></td>
1086          <td class="val">2px</td>
1087        </tr></tbody>
1088      </table>
1089    </section>
1090        </div>
1091      </div>
1092    </article>
1093
1094    <article class="packet" id="small" style="--i: 8">
1095      <div class="card">
1096        <div class="face">
1097          <span class="stamp" aria-hidden="true">🐌</span>
1098          
1099  <div class="sp sp-small">
1100    <pollen-logo size="36"></pollen-logo>
1101    <img class="sp-poppy" src="/public/images/pollen-icon.svg" width="56" height="56" alt="the pollen poppy">
1102    <span class="sp-avatar"></span>
1103    <a href="/explore" class="sp-link">a link</a>
1104  </div>
1105        </div>
1106        <details name="packet">
1107          <summary>
1108            <span class="ring" aria-hidden="true"></span>
1109            <h2>small things</h2>
1110            <span class="kind">logo, poppy, avatar, links · 6 tokens</span>
1111            <span class="sow">the wordmark with its turning flower, the coral poppy that stands for pollen elsewhere, and the amber-to-pink avatar halo.</span>
1112          </summary>
1113        </details>
1114      </div>
1115      <div class="back">
1116        <p class="why">the logo is the wordmark with a pixel flower beside it, picked at random from the flower set and kept for a few page views (it is drawn by the logo component, not by a token). away from the site, pollen is a california poppy: coral petals, amber heart, sage stem. it is the favicon, the touch icon, and the icon to use in directories and link lists. avatars sit on an amber-to-pink gradient with an amber glow. links are coral, hover to amber, and underline in pink.</p>
1117        <dl class="rules">
1118          <dt>the quiet-metrics rule</dt><dd>counts and follower numbers stay small and secondary. no hero stats, no centred numbers.</dd>
1119        </dl>
1120        
1121      <div class="demo-small">
1122        <pollen-logo size="48"></pollen-logo>
1123        <span class="sp-avatar sp-avatar-lg" aria-hidden="true"></span>
1124        <p>a sentence with <a href="/explore">a link in it</a> and <a href="/tag/garden">#a-tag</a>.</p>
1125      </div>
1126      <div class="demo-poppy">
1127        <img src="/public/images/pollen-icon.svg" width="96" height="96" alt="the pollen poppy at icon size">
1128        <img src="/apple-touch-icon.png" width="60" height="60" alt="the poppy on cream, as the touch icon">
1129        <img src="/favicon.ico" width="32" height="32" alt="the poppy as a favicon">
1130        <p class="demo-note">the poppy ships as <a href="/public/images/pollen-icon.svg">svg</a>, a 512px <a href="/public/images/pollen-icon.png">png</a> for directories, a favicon, and a cream-backed touch icon. keep its proportions and colours and give it room.</p>
1131      </div>
1132        <div class="sections">
1133          
1134    <section class="tokens" aria-labelledby="sec-avatar">
1135      <h3 id="sec-avatar">avatar</h3>
1136      <table>
1137        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
1138        <tbody>
1139        <tr>
1140          <th scope="row"><code class="tok">--avatar-bg</code></th>
1141          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--avatar-bg)"></span></td>
1142          <td class="val">linear-gradient(135deg, var(--accent), var(--accent-pink))</td>
1143        </tr>
1144        <tr>
1145          <th scope="row"><code class="tok">--avatar-shadow</code></th>
1146          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--avatar-shadow)"></span></td>
1147          <td class="val">0 4px 16px rgba(232, 165, 90, 0.2)</td>
1148        </tr>
1149        <tr>
1150          <th scope="row"><code class="tok">--avatar-size</code></th>
1151          <td class="pv"></td>
1152          <td class="val">80px</td>
1153        </tr></tbody>
1154      </table>
1155    </section>
1156    <section class="tokens" aria-labelledby="sec-links">
1157      <h3 id="sec-links">links</h3>
1158      <table>
1159        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
1160        <tbody>
1161        <tr>
1162          <th scope="row"><code class="tok">--link-color</code></th>
1163          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--link-color)"></span></td>
1164          <td class="val">var(--accent-warm)</td>
1165        </tr>
1166        <tr>
1167          <th scope="row"><code class="tok">--link-hover</code></th>
1168          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--link-hover)"></span></td>
1169          <td class="val">var(--accent)</td>
1170        </tr>
1171        <tr>
1172          <th scope="row"><code class="tok">--link-underline</code></th>
1173          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--link-underline)"></span></td>
1174          <td class="val">var(--accent-pink)</td>
1175        </tr></tbody>
1176      </table>
1177    </section>
1178        </div>
1179      </div>
1180    </article>
1181
1182    <article class="packet" id="cards" style="--i: 9">
1183      <div class="card">
1184        <div class="face">
1185          <span class="stamp" aria-hidden="true">🎀</span>
1186          
1187  <div class="sp sp-cards">
1188    <pollen-post class="sample-post" data-sample="face" data-post-style="pollen" data-pollen-shimmer="on" style="--pollen-radius: 24px; --pollen-accent: #eda63a"></pollen-post>
1189  </div>
1190        </div>
1191        <details name="packet">
1192          <summary>
1193            <span class="ring" aria-hidden="true"></span>
1194            <h2>post cards</h2>
1195            <span class="kind">six chromes · 6 tokens</span>
1196            <span class="sow">one post, six outfits. the author picks the chrome and every post they make wears it.</span>
1197          </summary>
1198        </details>
1199      </div>
1200      <div class="back">
1201        <p class="why">the post card is the workhorse of the whole site. its background chains through --surface so palette vibes cascade into it. the author chooses one of six chromes in their card studio: pollen, pop, y2k, manuscript, neon and memphis. each chrome is a peer, scoped to its own data-post-style attribute, with a handful of bounded knobs.</p>
1202        <dl class="rules">
1203          <dt>the peer-chrome rule</dt><dd>a new chrome ships as a peer of the six, with its own knobs, never as a one-off.</dd><dt>the inline-first rule</dt><dd>notes, reposts and edits open inline inside the card. a modal means the inline pattern was exhausted.</dd>
1204        </dl>
1205        
1206      <div class="demo-cards">
1207        <pollen-post class="sample-post" data-sample="pollen" data-post-style="pollen" data-pollen-shimmer="on" style="--pollen-radius: 24px; --pollen-accent: #eda63a"></pollen-post>
1208<pollen-post class="sample-post" data-sample="pop" data-post-style="pop" style="--pop-bg: #7eb6ff; --pop-ink: #0a0f1a; --pop-border-w: 5px; --pop-offset: 8px; --pop-radius: 18px"></pollen-post>
1209<pollen-post class="sample-post" data-sample="y2k" data-post-style="y2k" data-y2k-sparkles="few" data-y2k-spark-kind="star" style="--y-radius: 22px"></pollen-post>
1210<pollen-post class="sample-post" data-sample="manuscript" data-post-style="manuscript" data-manu-cap="illuminated" data-manu-glyph="botanical" style="--m-paper: #f4ead4; --m-rubric: #9b2c2c; --cap-color: #9b2c2c"></pollen-post>
1211<pollen-post class="sample-post" data-sample="neon" data-post-style="neon" data-neon-intensity="standard" data-neon-corners="on" style="--n-glow: #ff5db7; --n-glow2: #57e6ff; --n-bg: #1c1648"></pollen-post>
1212<pollen-post class="sample-post" data-sample="memphis" data-post-style="memphis" data-mph-shapes="mixed" data-mph-density="medium" style="--mph-bg: #fdf6e8; --mph-ink: #11131a; --mph-c1: #ff3d6b; --mph-c2: #2dd4d4; --mph-c3: #ffd23d; --mph-c4: #5b7cff; --mph-tilt: 0deg"></pollen-post>
1213      </div>
1214      <p class="demo-note">sample posts by a made-up account, shown with each chrome's default knobs.</p>
1215        <div class="sections">
1216          
1217    <section class="tokens" aria-labelledby="sec-cards-posts">
1218      <h3 id="sec-cards-posts">post cards</h3>
1219      <table>
1220        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
1221        <tbody>
1222        <tr>
1223          <th scope="row"><code class="tok">--card-bg</code></th>
1224          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--card-bg)"></span></td>
1225          <td class="val">var(--surface)</td>
1226        </tr>
1227        <tr>
1228          <th scope="row"><code class="tok">--card-border</code></th>
1229          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--card-border)"></span></td>
1230          <td class="val">var(--surface-border)</td>
1231        </tr>
1232        <tr>
1233          <th scope="row"><code class="tok">--card-border-width</code></th>
1234          <td class="pv"></td>
1235          <td class="val">1px</td>
1236        </tr>
1237        <tr>
1238          <th scope="row"><code class="tok">--card-radius</code></th>
1239          <td class="pv" data-preview="radius"><span class="pv-box" style="--pv: var(--card-radius)"></span></td>
1240          <td class="val">24px</td>
1241        </tr>
1242        <tr>
1243          <th scope="row"><code class="tok">--card-radius-sm</code></th>
1244          <td class="pv" data-preview="radius"><span class="pv-box" style="--pv: var(--card-radius-sm)"></span></td>
1245          <td class="val">20px</td>
1246        </tr>
1247        <tr>
1248          <th scope="row"><code class="tok">--card-shadow</code></th>
1249          <td class="pv" data-preview="shadow"><span class="pv-box" style="--pv: var(--card-shadow)"></span></td>
1250          <td class="val">var(--shadow)</td>
1251        </tr></tbody>
1252      </table>
1253    </section>
1254        </div>
1255      </div>
1256    </article>
1257
1258    <article class="packet" id="garden" style="--i: 10">
1259      <div class="card">
1260        <div class="face">
1261          <span class="stamp" aria-hidden="true">🍄</span>
1262          
1263  <div class="sp sp-garden" aria-hidden="true">
1264    <i class="sp-banner"></i>
1265    <i class="sp-garden-avatar"></i>
1266    <i class="sp-col"></i><i class="sp-col"></i><i class="sp-col"></i>
1267  </div>
1268        </div>
1269        <details name="packet">
1270          <summary>
1271            <span class="ring" aria-hidden="true"></span>
1272            <h2>your garden</h2>
1273            <span class="kind">profile knobs · 16 tokens</span>
1274            <span class="sow">the variables a profile can turn: layout, columns, banner, header, and the font scale.</span>
1275          </summary>
1276        </details>
1277      </div>
1278      <div class="back">
1279        <p class="why">every variable on this page can be overridden from a profile&#039;s custom css, and these are the ones made for it. column or masonry or grid, how many columns, whether the banner shows, how the header aligns. the token system is the design system, and every token is a creative lever.</p>
1280        <dl class="rules">
1281          <dt>the lever rule</dt><dd>a new token should make sense as something a person would want to turn. if it would not, it is a value, not a token.</dd>
1282        </dl>
1283        
1284      <p class="demo-note">paste any token into <a href="/customize">your custom css</a> under <code>:root</code> to change it on your profile.</p>
1285        <div class="sections">
1286          
1287    <section class="tokens" aria-labelledby="sec-profile-customization">
1288      <h3 id="sec-profile-customization">profile knobs</h3>
1289      <table>
1290        <thead class="sr-only"><tr><th scope="col">token</th><th scope="col">preview</th><th scope="col">value</th></tr></thead>
1291        <tbody>
1292        <tr>
1293          <th scope="row"><code class="tok">--profile-layout</code></th>
1294          <td class="pv"></td>
1295          <td class="val">column</td>
1296        </tr>
1297        <tr>
1298          <th scope="row"><code class="tok">--profile-width</code></th>
1299          <td class="pv"></td>
1300          <td class="val">700px</td>
1301        </tr>
1302        <tr>
1303          <th scope="row"><code class="tok">--profile-columns</code></th>
1304          <td class="pv"></td>
1305          <td class="val">3</td>
1306        </tr>
1307        <tr>
1308          <th scope="row"><code class="tok">--profile-gap</code></th>
1309          <td class="pv" data-preview="space"><span class="pv-box" style="--pv: var(--profile-gap)"></span></td>
1310          <td class="val">16px</td>
1311        </tr>
1312        <tr>
1313          <th scope="row"><code class="tok">--banner-display</code></th>
1314          <td class="pv"></td>
1315          <td class="val">block</td>
1316        </tr>
1317        <tr>
1318          <th scope="row"><code class="tok">--banner-height</code></th>
1319          <td class="pv"></td>
1320          <td class="val">220px</td>
1321        </tr>
1322        <tr>
1323          <th scope="row"><code class="tok">--header-align</code></th>
1324          <td class="pv"></td>
1325          <td class="val">center</td>
1326        </tr>
1327        <tr>
1328          <th scope="row"><code class="tok">--header-position</code></th>
1329          <td class="pv"></td>
1330          <td class="val">static</td>
1331        </tr>
1332        <tr>
1333          <th scope="row"><code class="tok">--profile-header-bg</code></th>
1334          <td class="pv" data-preview="swatch"><span class="pv-box" style="--pv: var(--profile-header-bg)"></span></td>
1335          <td class="val">transparent</td>
1336        </tr>
1337        <tr>
1338          <th scope="row"><code class="tok">--profile-header-padding</code></th>
1339          <td class="pv" data-preview="padding"><span class="pv-box" style="--pv: var(--profile-header-padding)"></span></td>
1340          <td class="val">var(--space-2xl) var(--space-xl)</td>
1341        </tr>
1342        <tr>
1343          <th scope="row"><code class="tok">--profile-header-blur</code></th>
1344          <td class="pv" data-preview="blur"><span class="pv-box" style="--pv: var(--profile-header-blur)"></span></td>
1345          <td class="val">0px</td>
1346        </tr>
1347        <tr>
1348          <th scope="row"><code class="tok">--card-border-style</code></th>
1349          <td class="pv"></td>
1350          <td class="val">solid</td>
1351        </tr>
1352        <tr>
1353          <th scope="row"><code class="tok">--timestamp-display</code></th>
1354          <td class="pv"></td>
1355          <td class="val">block</td>
1356        </tr>
1357        <tr>
1358          <th scope="row"><code class="tok">--tags-display</code></th>
1359          <td class="pv"></td>
1360          <td class="val">flex</td>
1361        </tr>
1362        <tr>
1363          <th scope="row"><code class="tok">--reactions-size</code></th>
1364          <td class="pv"></td>
1365          <td class="val">normal</td>
1366        </tr>
1367        <tr>
1368          <th scope="row"><code class="tok">--font-scale</code></th>
1369          <td class="pv"></td>
1370          <td class="val">100%</td>
1371        </tr></tbody>
1372      </table>
1373    </section>
1374        </div>
1375      </div>
1376    </article>
1377      </div>
1378
1379      <footer class="design-coda">
1380        <p class="design-note">153 tokens in 10 packets, read from the live stylesheet on every request. if this page is wrong, the site is wrong too.</p>
1381        <p>want to grow your own? every token here can be overridden from <a href="/customize">your profile's custom css</a>. 🌱</p>
1382      </footer>
1383    </div>
1384    
1384<script type="module">
1385    const samples = {"pollen":{"uri":"at://did:plc:sample/place.pollen.post.text/pollen","authorDid":"did:plc:sample","authorHandle":"sample.pollen.place","authorAvatar":null,"postType":"text","content":{"text":"planted the tomatoes today. the whole balcony smells like rain and dirt and i am not going to do anything else 🌱","tags":["sample","pollen"]},"createdAt":1791485010023,"noteCount":0,"repostCount":0},"pop":{"uri":"at://did:plc:sample/place.pollen.post.text/pop","authorDid":"did:plc:sample","authorHandle":"sample.pollen.place","authorAvatar":null,"postType":"text","content":{"text":"new rule: every saturday is a no-plans saturday. this is the plan.","tags":["sample","pop"]},"createdAt":1791459810023,"noteCount":0,"repostCount":0},"y2k":{"uri":"at://did:plc:sample/place.pollen.post.text/y2k","authorDid":"did:plc:sample","authorHandle":"sample.pollen.place","authorAvatar":null,"postType":"text","content":{"text":"found my old mp3 player in a drawer and it still has the same 14 songs on it ✨","tags":["sample","y2k"]},"createdAt":1791434610023,"noteCount":0,"repostCount":0},"manuscript":{"uri":"at://did:plc:sample/place.pollen.post.text/manuscript","authorDid":"did:plc:sample","authorHandle":"sample.pollen.place","authorAvatar":null,"postType":"text","content":{"text":"in the margin of the book i was reading, someone before me had written: keep going, it gets better. so i did.","tags":["sample","manuscript"]},"createdAt":1791409410023,"noteCount":0,"repostCount":0},"neon":{"uri":"at://did:plc:sample/place.pollen.post.text/neon","authorDid":"did:plc:sample","authorHandle":"sample.pollen.place","authorAvatar":null,"postType":"text","content":{"text":"late night radio, window open, the street below going pink and cyan every time the sign blinks.","tags":["sample","neon"]},"createdAt":1791384210023,"noteCount":0,"repostCount":0},"memphis":{"uri":"at://did:plc:sample/place.pollen.post.text/memphis","authorDid":"did:plc:sample","authorHandle":"sample.pollen.place","authorAvatar":null,"postType":"text","content":{"text":"made a playlist of songs that sound like squiggles. you know the ones.","tags":["sample","memphis"]},"createdAt":1791359010023,"noteCount":0,"repostCount":0}};
1386
1387    for (const code of document.querySelectorAll('.design-page code.tok')) {
1388      const button = document.createElement('button');
1389      button.type = 'button';
1390      button.className = 'tok';
1391      button.title = 'copy';
1392      button.append(...code.childNodes);
1393      code.replaceWith(button);
1394      button.addEventListener('click', async () => {
1395        try {
1396          await navigator.clipboard.writeText(button.textContent.trim());
1397          button.dataset.copied = '';
1398          setTimeout(() => delete button.dataset.copied, 1200);
1399        } catch {}
1400      });
1401    }
1402
1403    for (const face of document.querySelectorAll('.design-page .packet .face')) {
1404      face.classList.add('clickable');
1405      face.addEventListener('click', (event) => {
1406        if (event.target.closest('a, button, input, textarea, pollen-post')) return;
1407        const details = face.parentElement.querySelector('details');
1408        details.open = !details.open;
1409      });
1410    }
1411
1412    for (const details of document.querySelectorAll('.design-page details')) {
1413      details.addEventListener('toggle', () => {
1414        if (!details.open) return;
1415        const back = details.closest('.packet').querySelector('.back');
1416        requestAnimationFrame(() => back.scrollIntoView({ block: 'nearest', behavior: 'smooth' }));
1417      });
1418    }
1419
1420    function openFromHash() {
1421      const id = location.hash.slice(1);
1422      const details = id && document.querySelector('#' + CSS.escape(id) + ' > details');
1423      if (details) details.open = true;
1424    }
1425    openFromHash();
1426    addEventListener('hashchange', openFromHash);
1427
1428    await customElements.whenDefined('pollen-post');
1429    for (const el of document.querySelectorAll('pollen-post.sample-post')) {
1430      const key = el.dataset.sample === 'face' ? 'pollen' : el.dataset.sample;
1431      el.post = samples[key];
1432    }
1433  </script>
1433
1434  </main>
1435
1436  <footer class="site-footer" role="contentinfo">
1437    <p>© 2026 pollen.place · <a href="/about">about</a> · <a href="/design">design</a> · <a href="/privacy">privacy</a> · <a href="/thanks">credits</a></p>
1438  </footer>
1439
1440  
1440<script>window.__POLLEN_ASSETS__={"imageCompressWorker":"/js/image-compress-worker.fa19a1df8b.js"};</script>
1440
1441  
1441<script type="module" src="/js/core.0a69fa2424.js"></script>
vendor: 1 bytes, line 1441
1441
1442<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"63e67b2ed0af4eaeac0d04b961bdcf56","spa":2}' crossorigin="anonymous"></script>
1442
1443</body>
1444</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.