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

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

up-to-date

New version

NobleID

new version

Verified (identity/provenance)

NobleID

verified

Claim this work

NobleID

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:/nobleid/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:/nobleid/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:/nobleid/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:/nobleid/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

OAuth-style login buttons for third-party sites. Like "Sign in with Google" or "Login with Facebook" — but for verified researcher identity. Available in multiple themes, sizes, and shapes.

Button Variants

Choose the style that fits your site. All buttons work the same way — they redirect to NobleID OAuth flow.

Variants

Full • Compact ("NobleID") • Icon only (square) • Icon only (pill)

Themes

Icon-Only Themes

Sizes

Icon-Only Sizes

Shapes

Custom Labels

Integration Code

<!-- Option 1: Drop-in HTML (redirect to OAuth) -->
<a href="https://nobleid.org/oauth/authorize?client_id=YOUR_APP_ID&redirect_uri=YOUR_CALLBACK"
   class="inline-flex items-center gap-2 rounded-lg bg-neutral-900 text-white px-4 py-2.5 font-medium hover:bg-neutral-800">
  <img src="https://nobleid.org/logo.png" alt="NobleID" width="20" height="20" />
  Sign in with NobleID
</a>

<!-- Option 2: React Component (npm install @nobleid/react) -->
import { NobleIdSignInButton } from '@nobleid/react';

<NobleIdSignInButton 
  theme="dark" 
  size="md" 
  authorizeUrl="https://nobleid.org/oauth/authorize?client_id=YOUR_APP_ID" 
/>

Security & Trust

Industry-standard OAuth security — the same protocols used by Google, Apple, and Microsoft.

OAuth 2.0 Authorization Code

Users authenticate on NobleID. Your site never sees passwords.

CSRF Protection

Random 32-char state token prevents cross-site request forgery.

Replay Attack Prevention

Unique nonce for each login. Can't be reused or intercepted.

PKCE Support

Proof Key for Code Exchange for SPAs and mobile apps.

RS256 JWT Tokens

Cryptographically signed. Anyone can verify, no one can forge.

JWKS Key Rotation

Signing keys rotate regularly. Old keys expire automatically.

Granular Scopes — Only Request What You Need

Scope	Data Returned
`openid`	Unique NobleID identifier
`profile`	Name, photo, headline
`email`	Verified email address
`nobleid:works:read`	Publications and works
`nobleid:orcid:read`	ORCID iD and linked data

HTTPS OnlyGDPR CompliantRate LimitedNo Password Storage

The SDK handles all security automatically

State generation, nonce validation, PKCE, and token verification are built in. You don't need to implement any of these security measures yourself.

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

<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>

<a href="https://resolver.nobleid.org/ark:/nobleid/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:/nobleid/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>

<a href="https://nobleid.org/oauth/authorize?client_id=YOUR_APP_ID&redirect_uri=YOUR_CALLBACK" class="inline-flex items-center gap-2 rounded-lg bg-neutral-900 text-white px-4 py-2.5 font-medium hover:bg-neutral-800"> <img src="https://nobleid.org/logo.png" alt="NobleID" width="20" height="20" /> Sign in with NobleID </a>  import { NobleIdSignInButton } from '@nobleid/react'; <NobleIdSignInButton theme="dark" size="md" authorizeUrl="https://nobleid.org/oauth/authorize?client_id=YOUR_APP_ID" />

Scope

Data Returned

openid

Unique NobleID identifier

profile

Name, photo, headline

email

Verified email address

nobleid:works:read

Publications and works

nobleid:orcid:read

ORCID iD and linked data