data-trust

Content trust indicators for declaring authorship provenance. CSS-only trust badges for human, AI-assisted, AI-generated, editor-reviewed, and draft content.

Overview

The data-trust attribute declares content provenance on any block element. It provides CSS-only visual indicators that communicate how content was produced and what review it received.

Trust levels can be applied at the page level (on <article>) or scoped to individual sections. Compound values support content that has been both generated and reviewed.

<article data-trust="ai-assisted"> <h1>Migration Guide</h1> <p>This guide was written with AI assistance.</p> </article>  <article data-trust="ai-assisted"> <section data-trust="human"> <h2>When to Migrate</h2> <p>Written from direct experience...</p> </section> <section data-trust="ai-generated"> <h2>API Reference</h2> <p>Auto-generated from the OpenAPI spec...</p> </section> </article>

Trust Tokens

Token	Meaning	Visual Treatment
`human`	Written entirely by a human	No indicator (the default assumption)
`ai-assisted`	Human-written with AI tooling	Subtle border accent
`ai-generated`	Primarily AI-generated content	Background tint + border accent
`editor-reviewed`	Reviewed and approved by editor	Green border accent
`draft`	Unreviewed work in progress	Dashed border + muted opacity

Labeled Badges

Add the labeled class to show a visible text badge via ::before. Without this class, trust indicators are purely structural (border and background only).

<section data-trust="ai-assisted" class="labeled"> <h2>Getting Started</h2> <p>AI-assisted content with a visible badge.</p> </section> <section data-trust="ai-generated" class="labeled"> <h2>API Reference</h2> <p>AI-generated content with a visible badge.</p> </section> <section data-trust="draft" class="labeled"> <h2>Roadmap</h2> <p>Unreviewed work in progress.</p> </section>

Compound Values

Space-separated tokens allow composable trust declarations. The ~= CSS selector matches individual tokens within the compound value.

<section data-trust="ai-generated editor-reviewed"> <h2>Release Notes</h2> <p>AI-drafted from commit history, reviewed and approved by the release manager.</p> </section>

With Change Tracking

Trust indicators and <ins>/<del> change tracking are complementary. data-trust declares the authorship model; inline edits show specific changes, including when a human corrects an AI suggestion.

<article data-trust="ai-assisted"> <p> The migration requires <del datetime="2026-02-15" data-author="claude" data-reason="correction"> Node.js 16 </del> <ins datetime="2026-02-15" data-author="tpowell" data-reason="review"> Node.js 20 LTS </ins> or later. </p> </article>

CSS Tokens

Trust indicator colors are exposed as custom properties that themes can override.

/* Theme-overridable trust colors */ [data-trust] { --trust-color-ai-assisted: oklch(65% 0.15 250); --trust-color-ai-generated: oklch(65% 0.18 290); --trust-color-reviewed: oklch(60% 0.18 145); --trust-color-draft: oklch(70% 0.15 75); }

JavaScript API

No JavaScript is needed for trust indicators. The data-trust attribute is queryable via standard DOM methods.

// Find all AI-generated content on the page document.querySelectorAll('[data-trust~="ai-generated"]'); // Check trust level of a specific element element.dataset.trust; // "ai-generated editor-reviewed"

Why `data-trust` Instead of a Class

Queryable. document.querySelectorAll('[data-trust~="ai-generated"]') finds all AI content
Composable. Space-separated tokens matched by the ~= selector
Semantic. Data attributes declare what the content is, not how it looks
Machine-readable. Crawlers and tools can extract trust signals without understanding CSS classes

Accessibility

Trust indicators are visual-only decorations; the DOM content and ARIA attributes are unaffected
The .labeled badges use ::before pseudo-elements. Screen readers may or may not announce pseudo-element content depending on the browser
For critical trust disclosure, include the trust level in visible text content (e.g., in a <page-meta> or <page-info> component)