The Origin Seal is the public mark for verified human-made and human-led music. Embed the full Seal on artist pages, EPKs and release pages. Embed the mini Origin Badge — the Disc — inside track rows, charts, catalogues and DSP listings.
Use the full live Origin Seal anywhere the certificate state matters and there is enough room for the mark to be read clearly. It renders the official seal, fetches the current certificate status, and links back to the public certificate page.
If a certificate is revoked, disputed, replaced, or updated, the live Origin Seal reflects that state everywhere it is embedded. That is the point — the seal should never become a stale image pretending to be proof.
<!-- Origin Seal · live widget -->
<div data-trackorigin-cert="cer_REPLACE_WITH_CERT_ID"
data-size="160"></div>
<script src="https://trackorigin.io/static/embed-widget.js" async></script>
[trackorigin cert="cer_REPLACE_WITH_CERT_ID" size="160"]
The mini Origin Badge is the Disc — a round, blue verified mark with the TrackOrigin H construction cut out of it. Round. Confident. The shape every listener already trusts. Use it inside track rows, search results, playlist entries, chart rows, upload queues and DSP-style listings.
The full Origin Seal is too detailed at 16–24px; the Disc is designed exactly for that job. It carries the same provenance signal in the smallest possible space, with a click-through to the live certificate page.
<!-- TrackOrigin mini Disc · track row / listing icon -->
<span data-trackorigin-cert="cer_REPLACE_WITH_CERT_ID"
data-variant="mini"
data-size="20"></span>
<script src="https://trackorigin.io/static/embed-widget.js" async></script>
<div class="track-title-row">
<span class="track-title">Bigger Picture</span>
<span data-trackorigin-cert="cer_REPLACE_WITH_CERT_ID"
data-variant="mini"
data-size="20"></span>
</div>
Small enough for rows. Clear enough to signal verified provenance.
→ Disc sits beside the title. Click opens the certificate.
Use 16px for streaming-style rows, 20px as the universal default, and 22px when the title is large.
Place the Disc immediately after the track name so the provenance signal is visible before actions.
The Disc opens the public certificate page. No modal, no hidden state, no vague trust mark.
Sometimes the Disc on its own does not carry enough context. When you want the proof signal to read as a self-contained verification widget — seal on the left, “Verified on TrackOrigin” on the right — use the strip or the wordmark lockup. Both inherit color through data-color and switch between light and dark backgrounds with data-tone.
The headline verification widget. Seal on the left, “Verified on TrackOrigin” on the right. Use on artist headers, release pages, partner badges and credit blocks.
<span data-trackorigin-cert="cer_REPLACE_WITH_CERT_ID"
data-variant="strip"
data-size="44"></span>
Same widget, light surface. The Disc inverts to navy on bone; the lead copy reads on warm backgrounds without losing the construction shape.
<span data-trackorigin-cert="cer_REPLACE_WITH_CERT_ID"
data-variant="strip"
data-tone="light"
data-size="44"></span>
The H glyph + “Verified on TrackOrigin”, inline. Fits in footers, bylines, email signatures, partner attributions, and anywhere wordmark + glyph is the right register.
<span data-trackorigin-cert="cer_REPLACE_WITH_CERT_ID"
data-variant="lockup"
data-size="22"></span>
Wordmark lockup for light surfaces — print, PDF press kits, light-mode editorial sites. Glyph and copy darken to navy automatically.
<span data-trackorigin-cert="cer_REPLACE_WITH_CERT_ID"
data-variant="lockup"
data-tone="light"
data-size="22"></span>
The H is for Human. Two upright bars and a two-cycle waveform between them — the hands that made it, and the signal that came out. That is what TrackOrigin exists to prove: a person made this, and the record can be checked. The construction is intentionally minimal — the part that scales, the part that survives, the part you can put anywhere.
When you want to integrate the verification signal into your own visual system — sidebars, navigation, custom badges, app icons, marketing — pull in the bare H. It inherits any colour, drops into any layout, and asks for nothing.
<!-- The H · Human-made · fill="currentColor" -->
<span data-trackorigin-cert="cer_REPLACE_WITH_CERT_ID"
data-variant="glyph"
data-size="32"
data-color="currentColor"></span>
For DSPs, distributors, label platforms, marketplaces and catalogue tools. Add a single optional field to your upload form, render the Disc next to every verified track row, and let the widget handle status, caching and click-through.
When an artist pastes their cert ID at upload, the Disc renders automatically next to that track everywhere it appears. No back-channel API, no per-track integration cost, no fragile sync. The widget reads the cert state at render time from the public endpoint.
Step 3 of 4 · Metadata
Paste the certificate ID for this master to display the verified Origin Seal on listings. Don't have one? Get verified →
One new optional text input on your upload form. Validate it against the regex ^cer_[A-Za-z0-9_]+$ before storing (IDs are cer_ + an uppercase ULID).
Save the cert ID with the track row in your database. No external call needed at upload time.
In every listing template, add the embed widget next to the track title when a cert ID is present.
Drop the embed script once per page. The widget mounts every Disc, every strip, every lockup automatically.
For a typical music platform that already loops over a track listing in its template engine — Django, Rails, Laravel, Express, Nuxt, Next, anything — adding the Disc is a single line inside the loop, gated on the optional cert ID field.
{% for track in tracks %}
<div class="track-row">
<img src="{{ track.cover_url }}" class="cover">
<div class="meta">
<span class="title">{{ track.title }}</span>
{% if track.trackorigin_cert_id %}
<span data-trackorigin-cert="{{ track.trackorigin_cert_id }}"
data-variant="mini"
data-size="16"></span>
{% endif %}
</div>
<span class="duration">{{ track.duration }}</span>
</div>
{% endfor %}
function TrackRow({ track }) {
return (
<div className="track-row">
<img src={track.coverUrl} className="cover" />
<div className="meta">
<span className="title">{track.title}</span>
{track.trackoriginCertId && (
<span
data-trackorigin-cert={track.trackoriginCertId}
data-variant="mini"
data-size={16}
/>
)}
</div>
<span className="duration">{track.duration}</span>
</div>
);
}
// After dynamic re-render:
useEffect(() => { window.TrackOrigin?.mountAll(); });
The embed is designed for labels, DSPs, distributors, artist websites, marketplaces, catalogue tools and player interfaces. Attach a certificate ID to the DOM, load the widget once, and TrackOrigin handles rendering, public status lookup, click-through and certificate-state changes.
The widget is controlled entirely through HTML attributes. That makes it equally simple in server-rendered templates, React, Vue, Webflow, WordPress, Shopify, static sites, DSP tools and internal dashboards. There is no SDK to install, no API key to rotate and no auth flow to debug.
Add data-trackorigin-cert to the track, release, artist page, or row element.
Pick from mini · strip · lockup · glyph · default seal.
Load embed-widget.js once per page, preferably near the bottom of the document.
The rendered seal or badge opens the public certificate page for live verification.
seal (default), mini, strip, lockup, glyph.currentColor. Applies to mini, strip, lockup, glyph.light, dark, or auto. Used by strip and lockup variants.<!-- 01 · Full seal --> <div data-trackorigin-cert="cer_abc123" data-size="160"></div> <!-- 02 · Mini Disc --> <span data-trackorigin-cert="cer_abc123" data-variant="mini" data-size="20"></span> <!-- 03 · Verification strip --> <span data-trackorigin-cert="cer_abc123" data-variant="strip" data-size="44"></span> <!-- 04 · Wordmark lockup --> <span data-trackorigin-cert="cer_abc123" data-variant="lockup" data-size="22"></span> <!-- 05 · Bare H glyph --> <span data-trackorigin-cert="cer_abc123" data-variant="glyph" data-size="32"></span> <!-- Load once per page --> <script src="https://trackorigin.io/static/embed-widget.js" async></script>
// After rendering new rows dynamically:
if (window.TrackOrigin) {
window.TrackOrigin.mountAll();
}
.track-title-row {
display: inline-flex;
align-items: center;
gap: 8px;
}
.track-title { line-height: 1; }
Reads the public certificate endpoint for each certificate ID.
Caches certificate responses in session storage for 5 minutes.
Draws the chosen variant based on the current certificate state.
Clicking the Origin Seal or badge opens the live public certificate page.
The widget reads /v1/public/certificates/{cert_id}. That endpoint must be public and CORS-enabled for third-party websites.
Add the script once near the bottom of the page. Do not repeat it inside every track row.
The badge and seal open the public certificate page, so fans, labels, DSPs and partners can inspect the live record.
Static exports are for surfaces that cannot run JavaScript — pitch decks, one-sheets, press images, printed material, internal presentations and some social platforms. They are visually identifiable as TrackOrigin-issued, but they do not update automatically. For any digital surface that can run the widget, use the live Origin Seal instead.
Scales cleanly for print, pitch decks, large displays and editorial assets.
Download SVG ↓
Transparent export for social posts, press kits and apps that do not accept SVG.
Download PNG ↓
Compact horizontal mark for signatures, footers, partner pages and short-form verification references.
Download wordmark ↓Primary background across all surfaces.
Origin Seal, mini Disc, accents.
Body and headline text on dark.
Conditional / warning states only.
Display face used for major headings and seal language. All caps, condensed, letter-spacing -0.005em.
Used for metadata, labels, certificate IDs and system text. Letter-spacing 0.18em on uppercase.
The TrackOrigin brand kit is for press, partners, labels, distributors, DSPs and platform integrations. It includes approved logo lockups, seal assets, wordmarks, usage guidance and public-facing copy.
Editorial use, partner integration and platform implementation are permitted under the brand-kit terms. Any commercial use outside those contexts requires written permission.
One certificate. One public proof page. Five embeddable signals that travel with the track across websites, EPKs, catalogues, profiles and platform surfaces.
