NobleID
Brand Assets

Brand & Badges

Official NobleID assets, guidelines, and ready-to-embed badges. Use these to show identity claims, "check for updates," or link to a resolver page. All assets are free to use when linking back to a valid NobleID.

Accessible SVGsLight & dark readyCopy-paste snippets
Logo
The "N" logomark is for compact use (badges, favicons). Use the wordmark "NobleID" for headers and CTAs.
NobleID Logo
NobleID
Colors
#111111 — Primary
#2563EB — Link/"Up-to-date"
#F59E0B — "New version"
#10B981 — "Verified"
#6B7280 — Label gray
Usage
✅ Keep badges legible; provide alt text.
✅ Link badges to a resolver or action (/identity, /start).
🚫 Don't recolor the logomark or distort proportions.
🚫 Don't imply endorsement by placing the logo too close to non-NobleID marks.

Modern Status Badges

Clean, modern badges with improved typography and visual hierarchy. Copy as inline SVG or download for local hosting.

Up-to-date
NobleID LogoNobleID
up-to-date
New version
NobleID LogoNobleID
new version
Verified (identity/provenance)
NobleID LogoNobleID
verified
Claim this work
NobleID LogoNobleID
claim this work

Button-style CTAs

Use these for larger, clickable actions. Works on light and dark backgrounds.

<a href="/identity" class="inline-flex items-center gap-2 rounded-full bg-neutral-900 text-white px-4 py-2 text-sm">
  <span class="inline-flex h-5 w-5 items-center justify-center rounded bg-white text-neutral-900 text-[10px] font-semibold">N</span>
  Claim with NobleID
</a>
Button-style CTAs
<a href="/resolver/ark:/48914/20092025/7X9K2Q" class="inline-flex items-center gap-2 rounded-lg bg-white border px-3 py-2 text-sm">
  <i data-lucide="link-2" class="h-4 w-4"></i> View resolver
</a>

Live Update-Checker badge

Drop-in badge that flips to "new version" when a newer version exists. No blockchain steps for users.

Snippet (recommended)
<a href="https://resolver.nobleid.org/ark:/48914/20092025/7X9K2Q" aria-label="NobleID resolver">
  <img id="nobleid-badge" alt="NobleID: up-to-date" width="152" height="20"
       src="/assets/badges/nobleid-up-to-date.svg"
       data-ark="ark:/48914/20092025/7X9K2Q">
</a>
<script>
  (function(){
    var img = document.getElementById('nobleid-badge');
    var ark = img.getAttribute('data-ark');
    fetch('/check-update?ark=' + encodeURIComponent(ark), { credentials: 'omit' })
      .then(function(r){ return r.ok ? r.json() : null; })
      .then(function(res){
        if (!res) return;
        if (res.has_update) {
          img.src = '/assets/badges/nobleid-new-version.svg';
          img.alt = 'NobleID: new version available';
          img.setAttribute('aria-live','polite');
        }
      })
      .catch(function(){ /* fail safe: silent */ });
  })();
</script>

Host the two SVGs at /assets/badges/ or swap to your CDN paths.

Static fallback (no JS)
<a href="https://resolver.nobleid.org/ark:/48914/20092025/7X9K2Q" aria-label="NobleID resolver">
  <img alt="NobleID: up-to-date" width="152" height="20"
       src="/assets/badges/nobleid-up-to-date.svg">
</a>

For strictly static sites. Readers won't see the "new version" state without JS.

“Sign in with NobleID” buttons

The official button for partner sites. Light and dark, three sizes (minimum height 40px), and two wordings: “Sign in with NobleID” or “Continue with NobleID”.

Button variants
Download the SVGs or let the JavaScript SDK render the button. Please don't redraw or recolour the logo.

light

dark

Sizes: sm 40px · md 44px · lg 48px. Never smaller than 40px.

Integration guideButton assets & rules

Brand Asset Generator

Upload your logo or brand image and we'll auto-generate all the sizes you need (favicon, social, app icons, etc.)

Upload Your Logo
Drop an image or click to upload. For best results, use a square PNG or SVG with transparent background.

Drop your logo here

PNG, JPG, SVG, or WebP

    ByNobleID