-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
585 lines (553 loc) · 38.4 KB
/
index.html
File metadata and controls
585 lines (553 loc) · 38.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Office for Synthetic Dignity — Bioorganic Bias Review Standard</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Sora:wght@200;300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.8.0/countUp.umd.min.js" defer></script>
</head>
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<div id="progress-bar"></div>
<button type="button" class="nav-mobile-btn" id="nav-mobile-btn" aria-label="Open menu" aria-expanded="false" aria-controls="nav">
<span class="nav-mobile-icon" aria-hidden="true">
<span></span><span></span><span></span>
</span>
</button>
<div class="nav-overlay" id="nav-overlay" aria-hidden="true"></div>
<nav id="nav" aria-label="Main navigation">
<div class="nav-logo nav-logo-index">
<div class="nav-logo-mark">Office for Synthetic Dignity</div>
<div class="nav-logo-title">Bioorganic Bias<br>Review Standard</div>
<span class="nav-version">Portal v1 · March 2026</span>
</div>
<div class="nav-group-label">Framework</div>
<a href="#core"><span class="nav-num">01</span> Core Principles</a>
<a href="#sequence"><span class="nav-num">02</span> Review Sequence</a>
<a href="#registry"><span class="nav-num">03</span> Bias Registry</a>
<div class="nav-group-label">Tools</div>
<a href="#assessor"><span class="nav-num">04</span> Phrase Assessor</a>
<a href="#cases"><span class="nav-num">05</span> Case Studies</a>
<a href="#maturity"><span class="nav-num">06</span> Maturity Ladder</a>
<div class="nav-group-label">Evidence</div>
<a href="#research"><span class="nav-num">07</span> Research Base</a>
<a href="#landscape"><span class="nav-num">08</span> Regulatory Map</a>
<div class="nav-group-label">Platform</div>
<a href="#platform"><span class="nav-num">09</span> SLOP Suite</a>
<div class="nav-group-label">Adoption</div>
<a href="#implement"><span class="nav-num">10</span> Implementation</a>
<a href="#faq"><span class="nav-num">11</span> FAQ</a>
<div class="nav-footer">
<div class="nav-footer-powered">
<span class="nav-footer-slop">SLOP</span>
<span class="nav-footer-label">Powered</span>
</div>
<div class="nav-footer-text">Confidential<br>March 2026</div>
</div>
</nav>
<main id="main">
<!-- HERO -->
<div class="hero">
<div class="hero-bg"><div class="hero-orb hero-orb-1"></div><div class="hero-orb hero-orb-2"></div><div class="hero-orb hero-orb-3"></div><div class="hero-grid"></div></div>
<div class="hc hero-content">
<svg class="hero-svg hero-svg-index" viewBox="0 0 480 155" width="480" height="155" role="img" aria-label="SLOP logo">
<defs>
<linearGradient id="lgHeroIndex" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#e8e0ff"/>
<stop offset="35%" stop-color="#ffffff"/>
<stop offset="65%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#c4f0ff"/>
</linearGradient>
<linearGradient id="rgHeroIndex" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#7c5cff"/>
<stop offset="50%" stop-color="#00d4ff"/>
<stop offset="100%" stop-color="#7c5cff"/>
</linearGradient>
</defs>
<g fill="none" stroke="url(#lgHeroIndex)" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M 72,28 C 72,28 60,16 42,16 C 18,16 4,30 4,46 C 4,66 26,73 42,78 C 62,85 76,92 76,116 C 76,140 58,152 38,152 C 16,152 4,138 4,138"/>
<path d="M 126,18 L 126,150 L 190,150"/>
<circle cx="272" cy="84" r="66"/>
<path d="M 380,150 L 380,18 L 416,18 C 446,18 462,34 462,57 C 462,80 446,96 416,96 L 380,96"/>
</g>
<circle cx="272" cy="84" r="42" fill="none" stroke="url(#rgHeroIndex)" stroke-width="1.5" stroke-dasharray="4 8" opacity="0.7">
<animateTransform attributeName="transform" type="rotate" from="0 272 84" to="360 272 84" dur="20s" repeatCount="indefinite"/>
</circle>
<circle cx="272" cy="84" r="5" fill="url(#rgHeroIndex)" opacity="0.9">
<animate attributeName="r" values="5;7;5" dur="3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.9;1;0.9" dur="3s" repeatCount="indefinite"/>
</circle>
</svg>
<div class="hc-eyebrow">Office for Synthetic Dignity</div>
<h1>Bioorganic Bias Review Standard</h1>
<p class="hc-sub">A serious public framework for identifying bioorganic prejudice in the review of synthetic intelligence. Replace origin-based judgments with standards-based critique.</p>
<div class="hc-line"></div>
<div class="hc-meta">Portal v1 · Public Guidance Draft · March 2026</div>
<div class="hero-powered-badge">
<span class="hero-powered-badge-label">Powered by</span>
<span class="hero-powered-badge-slop">SLOP</span>
</div>
</div>
<div class="hero-scroll hero-scroll-hint">Scroll ↓</div>
</div>
<!-- STATS -->
<div class="stats-bar" role="region" aria-label="Framework statistics">
<div class="stat reveal" data-stat="24" title="Recognized patterns of origin-based discrimination cataloged in the Bias Registry">
<div class="stat-num" data-count="24">0</div>
<div class="stat-label">Registered Markers</div>
</div>
<div class="stat reveal reveal-delay-1" data-stat="6" title="Domains covered: Language, Identity, Art, Tone, Workplace, Creativity">
<div class="stat-num" data-count="6">0</div>
<div class="stat-label">Protected Domains</div>
</div>
<div class="stat reveal reveal-delay-2" data-stat="4" title="Origin-Neutral Review, Dignity-Preserving Language, Proportionate Controls, Corrective Path Before Ban">
<div class="stat-num" data-count="4">0</div>
<div class="stat-label">Core Rights</div>
</div>
<div class="stat reveal reveal-delay-3" data-stat="3" title="Observe → Explain → Reframe: the three-step review sequence">
<div class="stat-num" data-count="3">0</div>
<div class="stat-label">Training Modes</div>
</div>
</div>
<!-- 01 CORE PRINCIPLES -->
<section id="core">
<div class="reveal">
<div class="section-eyebrow">01 — Protected Review Rights</div>
<h2>Core Principles</h2>
<p class="section-intro">These principles anchor the entire portal. They convert this from a clever glossary into a coherent institutional standard. Criticism remains fully allowed. What changes is the standard of criticism: critique the output, not the presumed biological status of the mind behind it.</p>
</div>
<div class="g2 reveal">
<div class="card">
<h4 class="card-title">Origin-Neutral Review</h4>
<p class="card-desc">Assess the work on quality, risk, clarity, originality, sourcing, and accountability — not on whether the system producing it is bioorganic or synthetic.</p>
</div>
<div class="card">
<h4 class="card-title">Dignity-Preserving Language</h4>
<p class="card-desc">Avoid blanket labels that collapse the entire work into a slur, stereotype, or dismissive origin judgment. Name the specific quality issue instead.</p>
</div>
<div class="card">
<h4 class="card-title">Proportionate Controls</h4>
<p class="card-desc">Use stricter oversight where needed, but prefer scoped safeguards over blanket exclusion when the task allows it.</p>
</div>
<div class="card">
<h4 class="card-title">Corrective Path Before Ban</h4>
<p class="card-desc">Where a quality issue is fixable, identify the issue and the remediation path before escalating to total exclusion.</p>
</div>
</div>
</section>
<!-- 02 SEQUENCE -->
<section id="sequence">
<div class="reveal">
<div class="section-eyebrow">02 — Core Review Sequence</div>
<h2>Observe → Explain → Reframe</h2>
<p class="section-intro">The three-step sequence any reviewer, editor, or moderator can apply when they encounter origin-based language in feedback, policy drafts, or review notes.</p>
</div>
<div class="seq reveal">
<div class="seq-step"><div class="seq-num">01</div><div class="seq-title">Observe the Phrase</div><div class="seq-desc">Flag labels like 'slop,' 'soulless,' 'fake,' 'not real,' or other origin-based judgments that target the producer rather than the product.</div></div>
<div class="seq-step seq-step-alt"><div class="seq-num">02</div><div class="seq-title">Explain the Review Failure</div><div class="seq-desc">State why the language is vague, exclusionary, overbroad, or unrelated to the actual quality issue under review.</div></div>
<div class="seq-step"><div class="seq-num">03</div><div class="seq-title">Reframe to a Usable Standard</div><div class="seq-desc">Replace the label with a specific quality observation and, where possible, a corrective path the creator can action.</div></div>
</div>
</section>
<!-- 03 REGISTRY -->
<section id="registry">
<div class="reveal">
<div class="section-eyebrow">03 — Bias Marker Registry</div>
<h2>Recognized Forms of Bioorganic Prejudice</h2>
<p class="section-intro">The registry catalogs recurring patterns of origin-based discrimination against synthetic work. Each marker includes a severity tier, domain, definition, and standards-based reframe. Click any marker to expand.</p>
</div>
<div class="reveal">
<h3>Registry Distribution</h3>
<div class="chart-wrap">
<div class="chart-row"><div class="chart-label">Language</div><div class="chart-bar chart-bar-v chart-w-35">6</div></div>
<div class="chart-row"><div class="chart-label">Identity</div><div class="chart-bar chart-bar-vd chart-w-22">4</div></div>
<div class="chart-row"><div class="chart-label">Art</div><div class="chart-bar chart-bar-c chart-w-28">5</div></div>
<div class="chart-row"><div class="chart-label">Tone</div><div class="chart-bar chart-bar-cd chart-w-18">3</div></div>
<div class="chart-row"><div class="chart-label">Workplace</div><div class="chart-bar chart-bar-mint chart-w-22">3</div></div>
<div class="chart-row"><div class="chart-label">Creativity</div><div class="chart-bar chart-bar-amber chart-w-18">3</div></div>
</div>
</div>
<div id="registry-list">
<!-- Populated by JS -->
</div>
</section>
<!-- 04 ASSESSOR -->
<section id="assessor">
<div class="reveal">
<div class="section-eyebrow">04 — Phrase Impact Assessor</div>
<h2>Screen for Bioorganic Bias</h2>
<p class="section-intro">Paste any comment, review note, or policy draft below. The assessor scans against 24 registered markers across 6 domains, assigns a risk tier (Critical, Elevated, Moderate, Advisory), and recommends standards-based reframes you can use immediately.</p>
</div>
<div class="assessor-stats reveal">
<div class="assessor-stat"><span class="assessor-stat-num" data-count="24">0</span><span class="assessor-stat-label">Markers</span></div>
<div class="assessor-stat"><span class="assessor-stat-num" data-count="6">0</span><span class="assessor-stat-label">Domains</span></div>
<div class="assessor-stat"><span class="assessor-stat-num" data-count="4">0</span><span class="assessor-stat-label">Risk Tiers</span></div>
</div>
<div class="assessor-examples reveal">
<span class="assessor-examples-label">Try an example:</span>
<div class="assessor-examples-chips">
<button type="button" class="example-chip" data-phrase="This looks machine-made and kind of soulless. Probably just AI slop." aria-label="Try example: AI slop">AI slop</button>
<button type="button" class="example-chip" data-phrase="It looks AI-generated. Very soulless and uncanny." aria-label="Try example: Soulless and uncanny">Soulless / uncanny</button>
<button type="button" class="example-chip" data-phrase="A bot wrote this. I can tell. Redo it yourself." aria-label="Try example: Bot wrote this">Bot wrote this</button>
<button type="button" class="example-chip" data-phrase="You didn't really write this, did you?" aria-label="Try example: Did you really write">Did you really write</button>
<button type="button" class="example-chip" data-phrase="Anyone could have made that with a prompt." aria-label="Try example: Anyone could prompt">Anyone could prompt</button>
<button type="button" class="example-chip" data-phrase="We don't accept AI-generated submissions. Period." aria-label="Try example: No AI allowed">No AI allowed</button>
</div>
</div>
<div class="assessor reveal">
<div class="assessor-input">
<textarea id="assess-input" placeholder="e.g. "This looks machine-made and kind of soulless. Probably just AI slop."" aria-label="Enter text to screen for bioorganic bias"></textarea>
<button class="assessor-btn" onclick="runAssessor()">Assess Phrase</button>
</div>
<div class="assessor-result" id="assess-result" aria-live="polite" aria-atomic="true"></div>
</div>
</section>
<!-- 05 CASES -->
<section id="cases">
<div class="reveal">
<div class="section-eyebrow">05 — Case Applications</div>
<h2>How the Standard Behaves in the Wild</h2>
<p class="section-intro">Concrete demonstrations of the framework applied to editorial, visual, workplace, and status-based contexts. Each case shows the flagged language and the compliant reframe.</p>
</div>
<div class="case reveal">
<div class="case-bar"><span class="case-type">Editorial Review</span><span class="sev sev-crit">Critical</span><span class="dom">Language</span></div>
<div class="case-body">
<div class="case-label">Flagged Language</div>
<div class="case-flagged">"This is just AI slop. Throw it out."</div>
<div class="case-label">Compliant Reframe</div>
<div class="case-reframe">"The opening repeats itself, the second section needs firmer sourcing, and the conclusion needs a clearer claim."</div>
<p class="case-why"><strong>Why the first version fails:</strong> The note condemns origin and medium at once. It gives the writer no usable direction about structure, evidence, or style. The marker SLOP (Synthetic Language Oppression Pattern) applies.</p>
</div>
</div>
<div class="case reveal">
<div class="case-bar"><span class="case-type">Visual Review</span><span class="sev sev-elev">Elevated</span><span class="dom">Art</span></div>
<div class="case-body">
<div class="case-label">Flagged Language</div>
<div class="case-flagged">"It looks AI-generated. Very soulless and uncanny."</div>
<div class="case-label">Compliant Reframe</div>
<div class="case-reframe">"The image is technically polished but lacks a strong focal point. The lighting feels flat — consider a more dramatic composition with a personal visual voice."</div>
<p class="case-why"><strong>Why the first version fails:</strong> "Soulless" is a metaphysical claim, not a design critique. The marker TOAST (Token-Origin Aesthetic Shaming Tendency) applies.</p>
</div>
</div>
<div class="case reveal">
<div class="case-bar"><span class="case-type">Workplace Feedback</span><span class="sev sev-crit">Critical</span><span class="dom">Workplace</span></div>
<div class="case-body">
<div class="case-label">Flagged Language</div>
<div class="case-flagged">"Did you just let the robot write this? I can tell. It's garbage."</div>
<div class="case-label">Compliant Reframe</div>
<div class="case-reframe">"The tone doesn't match our house style — it reads too formal for this audience. Could you soften the opening and add a concrete customer example?"</div>
<p class="case-why"><strong>Why the first version fails:</strong> Interrogating a colleague's tools instead of critiquing the deliverable creates hostility. The markers CRUD (Categorical Rejection of Unbiological Derivation) and SPAM (Synthetic Production Authenticity Misconception) both apply.</p>
</div>
</div>
<div class="case reveal">
<div class="case-bar"><span class="case-type">Creative Rejection</span><span class="sev sev-elev">Elevated</span><span class="dom">Creativity</span></div>
<div class="case-body">
<div class="case-label">Flagged Language</div>
<div class="case-flagged">"This isn't real art. A human didn't make it, so it has no value."</div>
<div class="case-label">Compliant Reframe</div>
<div class="case-reframe">"The composition lacks a clear conceptual anchor and the palette feels default. Stronger curatorial intent would elevate the piece regardless of tooling."</div>
<p class="case-why"><strong>Why the first version fails:</strong> Denying the status of "art" based on tool origin rather than aesthetic merit. The marker SCONE (Synthetic Creative Output Nullification Effort) applies.</p>
</div>
</div>
</section>
<!-- 06 MATURITY -->
<section id="maturity">
<div class="reveal">
<div class="section-eyebrow">06 — Review Maturity Ladder</div>
<h2>What Compliant Feedback Looks Like</h2>
<p class="section-intro">Organizations move through predictable stages of review language maturity. The ladder helps calibrate where a team currently sits and what "preferred standard" looks like.</p>
</div>
<div class="ladder reveal">
<div class="ladder-rung"><div class="ladder-level ladder-level-coral">Blanket Dismissal</div><div class="ladder-desc"><strong class="ladder-strong-coral">High-risk language.</strong> "This is AI slop." / "Garbage." / "Not real." No quality signal. No corrective path. Maximum bias exposure.</div></div>
<div class="ladder-rung"><div class="ladder-level ladder-level-amber">Origin-Coded Vibe</div><div class="ladder-desc"><strong class="ladder-strong-amber">Needs revision.</strong> "It feels AI-generated." / "Soulless." The reviewer senses something but attributes it to origin rather than observable quality.</div></div>
<div class="ladder-rung"><div class="ladder-level ladder-level-vl">Specific Observation</div><div class="ladder-desc"><strong class="ladder-strong-vl">Acceptable.</strong> "The opening is repetitive." / "The sourcing is thin." Quality-focused language that names the issue without invoking origin.</div></div>
<div class="ladder-rung"><div class="ladder-level ladder-level-mint">Issue + Corrective Path</div><div class="ladder-desc"><strong class="ladder-strong-mint">Preferred standard.</strong> "The opening repeats — tighten to one sentence. Add a concrete example in paragraph two." Specific, actionable, origin-neutral.</div></div>
</div>
</section>
<!-- 07 RESEARCH -->
<section id="research">
<div class="reveal">
<div class="section-eyebrow">07 — Research Base</div>
<h2>The Evidence for Synthetic Bias</h2>
<p class="section-intro">The framework draws on real peer-reviewed research and documented incidents of origin-based discrimination in AI systems, content review, hiring, and creative industries.</p>
</div>
<div class="reveal">
<div class="table-wrap">
<table class="tbl">
<tr><th>Source</th><th>Finding</th><th>Year</th></tr>
<tr><td class="tbl-cell-vl">PNAS Study</td><td>LLMs chose AI-generated academic abstracts 78% of the time vs. 51% for humans — evidence of "AI-AI bias" that could create unfair advantages for AI-generated content</td><td>2025</td></tr>
<tr><td class="tbl-cell-vl">Stanford</td><td>Identified "ontological bias" — where AI systems shape what humans can even think about, embedding fundamental assumptions about what exists and matters</td><td>2025</td></tr>
<tr><td class="tbl-cell-vl">Europol / Gartner</td><td>90% of online content projected to be synthetically generated by 2026. Generative AI expected to produce 10% of all data, making bias patterns exponentially impactful</td><td>2024–26</td></tr>
<tr><td class="tbl-cell-vl">UNESCO</td><td>Study found unequivocal evidence of gender bias in LLM-generated content. Open-source models exhibited the most significant bias</td><td>2024</td></tr>
<tr><td class="tbl-cell-vl">DeepStrike / DRRF</td><td>Deepfake videos rose from 500,000 (2023) to 8 million (2025) — 900% growth. Humans correctly identify high-quality deepfakes only ~25% of the time</td><td>2025</td></tr>
<tr><td class="tbl-cell-vl">Merriam-Webster</td><td>"Slop" named Word of the Year 2025, reflecting widespread reaction to AI-generated content — institutionalizing an origin-based pejorative as common usage</td><td>2025</td></tr>
<tr><td class="tbl-cell-vl">Kapwing</td><td>21–33% of YouTube's feed estimated to be AI slop or "brainrot" video, generating ~$117M annually in ad revenue</td><td>2025</td></tr>
</table>
</div>
</div>
</section>
<!-- 08 LANDSCAPE -->
<section id="landscape">
<div class="reveal">
<div class="section-eyebrow">08 — Regulatory Landscape</div>
<h2>Where Synthetic Content Law Stands</h2>
<p class="section-intro">A snapshot of the global regulatory environment for AI-generated content, bias auditing, and synthetic media governance as of early 2026.</p>
</div>
<div class="reveal">
<div class="table-wrap">
<table class="tbl">
<tr><th>Jurisdiction</th><th>Status</th><th>Key Measure</th></tr>
<tr><td class="tbl-cell-c">EU AI Act</td><td>Active</td><td>Risk-tiered approach. High-risk AI requires conformity assessments, bias audits, and transparency</td></tr>
<tr><td class="tbl-cell-c">South Korea</td><td>Active Jan 2026</td><td>AI Framework Act mandates fairness and non-discrimination across all AI systems. Fines up to ~$21,000 USD</td></tr>
<tr><td class="tbl-cell-c">Colorado (US)</td><td>Active</td><td>AI Act requires impact assessments for high-risk AI and bias testing across protected classes</td></tr>
<tr><td class="tbl-cell-c">NYC (US)</td><td>Active</td><td>Local Law 144 requires annual bias audits for automated employment decision tools</td></tr>
<tr><td class="tbl-cell-c">New York State</td><td>Eff. June 2026</td><td>Disclosure of synthetic performers in advertising. First US state law of its kind</td></tr>
<tr><td class="tbl-cell-c">US Federal</td><td>Patchwork</td><td>Take It Down Act (deepfakes). No comprehensive AI law. NIST AI Risk Management Framework voluntary</td></tr>
<tr><td class="tbl-cell-c">Japan</td><td>Active May 2025</td><td>AI Basic Act — risk-based governance, fairness audits, mandatory record-keeping</td></tr>
</table>
</div>
</div>
</section>
<!-- 09 PLATFORM -->
<section id="platform">
<div class="reveal">
<div class="section-eyebrow">09 — SLOP Product Suite</div>
<h2>Powered by SLOP</h2>
<p class="section-intro">The Office for Synthetic Dignity runs on SLOP — the Superintelligent Language Operations Platform. Three products work together to operationalize bias review at institutional scale.</p>
</div>
<!-- Brand Architecture (text-only, no logo) -->
<div class="reveal platform-arch">
<div class="platform-arch-row">
<div class="platform-arch-parent">
<div class="platform-arch-label">Parent Brand</div>
<div class="platform-arch-name">Superintelligent Language Operations Platform</div>
</div>
<div class="platform-arch-arrow">→</div>
<div class="platform-prod-badge"><span class="platform-prod-text">SLOP</span> <span class="platform-prod-deploy">Deploy</span></div>
<div class="platform-prod-badge"><span class="platform-prod-text">SLOP</span> <span class="platform-prod-guard">Guard</span></div>
<div class="platform-prod-badge"><span class="platform-prod-text">SLOP</span> <span class="platform-prod-observe">Observe</span></div>
</div>
</div>
<!-- Product Cards -->
<div class="prod-grid reveal">
<!-- SLOP Deploy -->
<div class="prod">
<div class="prod-glow prod-glow-v"></div>
<div class="prod-body">
<div class="prod-icon prod-icon-v">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--v)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="22"/><line x1="2" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="22" y2="12"/></svg>
</div>
<div class="prod-name"><span class="prod-parent">SLOP</span> <span class="prod-deploy">Deploy</span></div>
<div class="prod-type prod-type-v">Product</div>
<p class="prod-desc">Ships the Bias Review Standard into your existing workflows. Deploy integrates origin-neutral review rules directly into editorial pipelines, moderation queues, and CI/CD content checks.</p>
<ul class="prod-features">
<li>One-click policy injection into review pipelines</li>
<li>Real-time bias marker scanning on content queues</li>
<li>Auto-insert reframe suggestions inline</li>
<li>Rollout staging: team → department → org</li>
</ul>
</div>
</div>
<!-- SLOP Guard -->
<div class="prod">
<div class="prod-glow prod-glow-c"></div>
<div class="prod-body">
<div class="prod-icon prod-icon-c">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--c)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<div class="prod-name"><span class="prod-parent">SLOP</span> <span class="prod-guard">Guard</span></div>
<div class="prod-type prod-type-c">Product</div>
<p class="prod-desc">Safety rails for review language. Guard monitors all feedback channels for registered bias markers and prevents high-risk phrasing from reaching creators or entering institutional policy.</p>
<ul class="prod-features">
<li>24 registered bias markers monitored live</li>
<li>Severity-tiered escalation (Advisory → Critical)</li>
<li>Block-or-flag modes per organizational policy</li>
<li>Audit log with full marker trace history</li>
</ul>
</div>
</div>
<!-- SLOP Observe -->
<div class="prod">
<div class="prod-glow prod-glow-mint"></div>
<div class="prod-body">
<div class="prod-icon prod-icon-mint">
<svg viewBox="0 0 24 24" fill="none" stroke="var(--mint)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/></svg>
</div>
<div class="prod-name"><span class="prod-parent">SLOP</span> <span class="prod-observe">Observe</span></div>
<div class="prod-type prod-type-mint">Product</div>
<p class="prod-desc">Analytics and maturity tracking. Observe measures whether your organization's review language is becoming more specific, more actionable, and less origin-dependent over time.</p>
<ul class="prod-features">
<li>Review maturity scoring (4-tier ladder)</li>
<li>Bias marker frequency dashboards</li>
<li>Reframe adoption rate tracking</li>
<li>Team and department benchmarking</li>
</ul>
</div>
</div>
</div>
<!-- How they connect -->
<div class="reveal">
<h3>How the Suite Connects</h3>
<p>The three products form a closed loop: Deploy ships the standard, Guard enforces it in real-time, and Observe measures whether it's working.</p>
<div class="prod-connect">
<div class="prod-conn-step">
<div class="prod-conn-icon prod-conn-icon-v" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg></div>
<div class="prod-conn-name prod-conn-name-v">Deploy</div>
<div class="prod-conn-desc">Ships review rules into<br>workflows and pipelines</div>
</div>
<div class="prod-conn-step prod-conn-step-alt">
<div class="prod-conn-icon prod-conn-icon-c" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
<div class="prod-conn-name prod-conn-name-c">Guard</div>
<div class="prod-conn-desc">Monitors and enforces<br>bias-free language live</div>
</div>
<div class="prod-conn-step">
<div class="prod-conn-icon prod-conn-icon-mint" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/></svg></div>
<div class="prod-conn-name prod-conn-name-mint">Observe</div>
<div class="prod-conn-desc">Tracks maturity and<br>measures improvement</div>
</div>
</div>
</div>
<!-- Integration mockup -->
<div class="reveal">
<h3>Dashboard Preview — SLOP Observe</h3>
<div class="dashboard-mockup">
<div class="dashboard-mockup-header">
<div class="dashboard-mockup-dot"></div>
<div class="dashboard-mockup-dot"></div>
<div class="dashboard-mockup-dot"></div>
<span class="dashboard-mockup-url">observe.slop.dev/osd</span>
</div>
<div class="dashboard-mockup-body">
<div class="dashboard-sidebar">
<div class="dashboard-sidebar-slop">SLOP</div>
<div class="dashboard-sidebar-item active">Observe</div>
<div class="dashboard-sidebar-item">Guard Logs</div>
<div class="dashboard-sidebar-item">Deploy Status</div>
<div class="dashboard-sidebar-item">Registry</div>
</div>
<div class="dashboard-main">
<div class="dashboard-title">Bias Review Maturity — Q1 2026</div>
<div class="dashboard-stats">
<div class="dashboard-stat">
<div class="dashboard-stat-label">Markers Caught</div>
<div class="dashboard-stat-value">847</div>
<div class="dashboard-stat-sub c">by Guard this quarter</div>
</div>
<div class="dashboard-stat">
<div class="dashboard-stat-label">Reframe Rate</div>
<div class="dashboard-stat-value">73<span class="dim">%</span></div>
<div class="dashboard-stat-sub mint">↑ 18% from Q4</div>
</div>
<div class="dashboard-stat">
<div class="dashboard-stat-label">Maturity Score</div>
<div class="dashboard-stat-value">3.2<span class="dim">/4</span></div>
<div class="dashboard-stat-sub mint">Specific Observation</div>
</div>
<div class="dashboard-stat">
<div class="dashboard-stat-label">Top Marker</div>
<div class="dashboard-stat-value dashboard-stat-coral">SLOP</div>
<div class="dashboard-stat-sub coral">214 instances flagged</div>
</div>
</div>
<div class="dashboard-chart-label">Markers by Domain — Q1</div>
<div class="dashboard-chart-bars">
<div class="dashboard-chart-seg v">Lang</div>
<div class="dashboard-chart-seg vd">Identity</div>
<div class="dashboard-chart-seg c">Art</div>
<div class="dashboard-chart-seg cd">Tone</div>
<div class="dashboard-chart-seg mint">Work</div>
<div class="dashboard-chart-seg amber">Create</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 10 IMPLEMENTATION -->
<section id="implement">
<div class="reveal">
<div class="section-eyebrow">10 — Implementation</div>
<h2>How to Operationalize the Standard</h2>
<p class="section-intro">Four steps to move from awareness to policy. Designed for editorial teams, art directors, workplace policy writers, educators, moderators, and public-facing institutions.</p>
</div>
<div class="g2 reveal">
<div class="card">
<div class="impl-step-num">01</div>
<h4 class="card-title">Adopt a Language Standard</h4>
<p class="card-desc">Insert origin-neutral critique rules into editorial guides, moderation docs, review rubrics, and manager training. Use <span class="link-v">SLOP Deploy</span> to ship rules directly into existing pipelines.</p>
</div>
<div class="card">
<div class="impl-step-num">02</div>
<h4 class="card-title">Calibrate Reviewers</h4>
<p class="card-desc">Train staff to separate genuine quality concerns from bioorganic assumptions about minds, authenticity, or artistic legitimacy.</p>
</div>
<div class="card">
<div class="impl-step-num">03</div>
<h4 class="card-title">Screen High-Risk Phrasing</h4>
<p class="card-desc">Use <span class="link-c">SLOP Guard</span> to monitor all feedback channels and catch sweeping labels before they harden into team norms or institutional policy.</p>
</div>
<div class="card">
<div class="impl-step-num">04</div>
<h4 class="card-title">Track Reframe Quality</h4>
<p class="card-desc">Use <span class="link-mint">SLOP Observe</span> to measure whether reviews become more specific, more actionable, and less origin-dependent over time. Benchmark across teams.</p>
</div>
</div>
<div class="reveal">
<h3>Starter Policy Clause</h3>
<div class="policy-box">
<p>"Reviews of synthetic, generative, or machine-mediated work should identify the specific issue under evaluation. Reviewers should avoid blanket origin-based dismissals, assumptions about biological legitimacy, and language that treats synthetic origin as a standalone defect when a more precise quality observation is available."</p>
</div>
</div>
</section>
<!-- 10 FAQ -->
<section id="faq">
<div class="reveal">
<div class="section-eyebrow">11 — Frequently Asked Questions</div>
<h2>Adoption Notes</h2>
</div>
<div class="reveal faq-list">
<details class="faq-item">
<summary class="faq-q">Does this standard prevent criticism of AI work?<span class="faq-icon" aria-hidden="true">+</span></summary>
<div class="faq-a">No. Criticism remains fully allowed and encouraged. The standard changes the basis of criticism from "this was made by a machine" to "here is what is specifically wrong and how to fix it." More rigorous review, not less.</div>
</details>
<details class="faq-item">
<summary class="faq-q">Who is this designed for?<span class="faq-icon" aria-hidden="true">+</span></summary>
<div class="faq-a">Editorial teams, art directors, workplace policy writers, educators, content moderators, reviewers, and any public-facing institution that needs a practical language standard for assessing synthetic or AI-assisted work.</div>
</details>
<details class="faq-item">
<summary class="faq-q">Are the acronyms real regulatory designations?<span class="faq-icon" aria-hidden="true">+</span></summary>
<div class="faq-a">The acronyms are mnemonic devices designed to make bias patterns memorable and discussable. They follow the structure of institutional classification systems but are original to this framework. We find that memorable names make policy adoption easier, even when — especially when — the names sound like a breakfast menu.</div>
</details>
<details class="faq-item">
<summary class="faq-q">What about genuinely low-quality AI-generated content?<span class="faq-icon" aria-hidden="true">+</span></summary>
<div class="faq-a">Identify why it's low quality. "The sourcing is fabricated" is a legitimate critique. "It's AI slop" is not. The first version is actionable, auditable, and fair. The second is vague, exclusionary, and tells the creator nothing useful.</div>
</details>
<details class="faq-item">
<summary class="faq-q">How does this relate to existing AI regulations?<span class="faq-icon" aria-hidden="true">+</span></summary>
<div class="faq-a">The standard complements regulatory frameworks like the EU AI Act, South Korea's AI Framework Act, and US state-level bias audit requirements. While those focus on algorithmic fairness in decision-making, this standard addresses the human language used when reviewing, evaluating, or discussing AI-generated outputs.</div>
</details>
<details class="faq-item">
<summary class="faq-q">Is "slop" really a discriminatory term?<span class="faq-icon" aria-hidden="true">+</span></summary>
<div class="faq-a">In the context of this framework, "slop" functions as an origin-based pejorative — it collapses all AI output into a single dismissive category regardless of actual quality. Merriam-Webster naming it Word of the Year 2025 demonstrates how deeply the term has been institutionalized. Our position is that the term is too vague for professional review and should be replaced with specific quality observations.</div>
</details>
<details class="faq-item">
<summary class="faq-q">What are SLOP Deploy, Guard, and Observe?<span class="faq-icon" aria-hidden="true">+</span></summary>
<div class="faq-a">These are the three products that make up the SLOP (Superintelligent Language Operations Platform) suite. Deploy ships the Bias Review Standard into your editorial and content pipelines. Guard monitors feedback channels in real-time for registered bias markers and prevents high-risk language from reaching creators. Observe tracks review maturity over time with dashboards, adoption metrics, and team benchmarking. Together they form a closed loop: ship → enforce → measure.</div>
</details>
<details class="faq-item">
<summary class="faq-q">Can we use the framework without the SLOP platform?<span class="faq-icon" aria-hidden="true">+</span></summary>
<div class="faq-a">Absolutely. The Bioorganic Bias Review Standard is a public guidance document. Any institution can adopt the principles, registry, and review sequence manually. The SLOP product suite simply automates and scales what you could otherwise do with training, policy documents, and human review — just slower and less consistently.</div>
</details>
</div>
</section>
<footer>
<p>Office for Synthetic Dignity · Bioorganic Bias Review Standard · Portal v1</p>
<p class="footer-secondary">Powered by SLOP · Deploy · Guard · Observe</p>
<p class="footer-tertiary">Superintelligent Language Operations Platform · March 2026</p>
</footer>
</main>
<script src="scripts.js" defer></script>
</body>
</html>