Community / Badge

“Built with” badge

If your product uses Nodus DS, this badge is a low-effort way to say so. It links to design.dana.xyz and costs one anchor tag. Entirely optional.

Preview

Built with Nodus Design System

Embed

Plain HTML — no dependency on this site or on Nodus tokens. Paste it into your footer as-is.

<a href="https://design.dana.xyz" target="_blank" rel="noopener noreferrer"
  aria-label="Built with Nodus Design System (opens in new tab)"
  style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  background:var(--ds-surface-inverse,#0F1923);color:var(--ds-text-inverse,#F7F8FA);
  font:600 11px/1.4 var(--ds-type-mono-font,'JetBrains Mono',ui-monospace,monospace);
  letter-spacing:0.3px;text-decoration:none;
  border:1px solid var(--ds-color-temporal,#2B44D4);">
  <span aria-hidden="true" style="color:var(--ds-color-temporal,#2B44D4);">●</span>
  Built with Nodus Design System
</a>

React / Nodus DS apps

Not published as a package component yet — inside an app that already loads Nodus tokens, use this JSX directly. It reads `--ds-*` tokens, so it inherits your app’s light/dark theme automatically.

<a
  href="https://design.dana.xyz"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Built with Nodus Design System (opens in new tab)"
  style={{
    display: "inline-flex",
    alignItems: "center",
    gap: "6px",
    padding: "4px 10px",
    background: "var(--ds-surface-inverse)",
    color: "var(--ds-text-inverse)",
    fontFamily: "var(--ds-type-mono-font)",
    fontSize: "11px",
    fontWeight: 600,
    letterSpacing: "0.3px",
    textDecoration: "none",
    border: "1px solid var(--ds-color-temporal)",
  }}
>
  <span aria-hidden="true" style={{ color: "var(--ds-color-temporal)" }}>
    ●
  </span>
  Built with Nodus Design System
</a>

Usage of Nodus DS itself is still governed by the license. Displaying this badge is optional and not a substitute for a production license.