@odatano/brand

Design tokens and logos for ODATANO and all its products. Single source for all ODATANO repositories and odatano.dev.

• Day: ODATANO / Cardano (navy and blue on light ground)
• Night: Midnight products (graphite ground, accent #7aa2ff)

Preview of all logos, colors and fonts: brand-sheet.html

Install

npm install @odatano/brand

Usage

CSS tokens

@import "@odatano/brand/tokens.css";

.card {
  background: var(--odt-night-panel);
  color: var(--odt-night-ink);
  border: 1px solid var(--odt-night-border);
}

Semantic aliases (--bg, --surface, --border, --ink, --ink-2, --accent, --accent-2) switch with data-theme="day" or data-theme="night" on <html> or any container. Default is day.

Astro / Vite

---
import "@odatano/brand/tokens.css";
import logoUrl from "@odatano/brand/logos/odatano-logo.svg?url";
---
<img src={logoUrl} alt="ODATANO" height="96" />

JSON tokens

const tokens = require("@odatano/brand/tokens.json");
tokens.night["night-accent"]; // "#7aa2ff"

Static apps (no bundler)

Copy the files at build time instead of linking a CDN:

"scripts": {
  "brand": "node -e \"const fs=require('fs');fs.cpSync('node_modules/@odatano/brand/logos','app/brand/logos',{recursive:true});fs.copyFileSync('node_modules/@odatano/brand/tokens.css','app/brand/tokens.css')\""
}

README headers

Reference logos by absolute URL so every README follows the current major version:

![ODATANO](https://cdn.jsdelivr.net/gh/ODATANO/brand@1/logos/odatano-logo.svg)

Files

| File | Use | |---|---| | tokens.css | CSS custom properties (--odt-*) plus semantic aliases | | tokens.json | Same values for scripts and generators | | logos/odatano-logo.svg | ODATANO logo, light backgrounds | | logos/odatano-logo-on-dark.svg | ODATANO logo, graphite / dark backgrounds | | logos/odatano-logo-mono-white.svg | ODATANO logo, monochrome white | | logos/odatano-icon.svg | ODATANO icon / favicon, light backgrounds | | logos/odatano-icon-on-dark.svg | ODATANO icon, dark backgrounds | | logos/odatano-core-logo.svg | ODATANO CORE (@odatano/core) logo, light backgrounds | | logos/odatano-core-logo-on-dark.svg | ODATANO CORE logo, graphite / dark backgrounds | | logos/odatano-core-icon.svg | ODATANO CORE icon / favicon | | logos/odatano-mcp-logo.svg | ODATANO MCP (@odatano/core-mcp) logo, light backgrounds | | logos/odatano-mcp-logo-on-dark.svg | ODATANO MCP logo, graphite / dark backgrounds | | logos/odatano-mcp-icon.svg | ODATANO MCP icon / favicon | | logos/daypass-logo.svg | DAYPASS logo, light backgrounds | | logos/daypass-logo-on-dark.svg | DAYPASS logo, graphite / dark backgrounds | | logos/daypass-icon.svg | DAYPASS icon / favicon | | logos/dayzero-logo.svg | DAYZERO (@odatano/dayzero) logo, light backgrounds | | logos/dayzero-logo-on-dark.svg | DAYZERO logo, graphite / dark backgrounds | | logos/dayzero-icon.svg | DAYZERO icon / favicon | | logos/trace-logo.svg | TRACE logo, light backgrounds | | logos/trace-logo-on-dark.svg | TRACE logo, graphite / dark backgrounds | | logos/trace-icon.svg | TRACE icon / favicon | | logos/quantix-logo.svg | QUANTIX logo, light backgrounds | | logos/quantix-logo-on-dark.svg | QUANTIX logo, graphite / dark backgrounds | | logos/quantix-icon.svg | QUANTIX icon / favicon | | logos/finca-logo.svg | FINCA logo, light backgrounds | | logos/finca-logo-on-dark.svg | FINCA logo, graphite / dark backgrounds | | logos/finca-icon.svg | FINCA icon / favicon | | logos/x402-logo.svg | x402 (@odatano/x402) logo, light backgrounds | | logos/x402-logo-on-dark.svg | x402 logo, graphite / dark backgrounds | | logos/x402-icon.svg | x402 icon / favicon | | logos/watch-logo.svg | WATCH logo, light backgrounds | | logos/watch-logo-on-dark.svg | WATCH logo, graphite / dark backgrounds | | logos/watch-icon.svg | WATCH icon / favicon | | logos/dpp-sdk-logo.svg | DPP SDK (@odatano/dpp-sdk) logo, light backgrounds | | logos/dpp-sdk-logo-on-dark.svg | DPP SDK logo, graphite / dark backgrounds | | logos/dpp-sdk-icon.svg | DPP SDK icon / favicon | | logos/astra-logo.svg | ODATANO ASTRA (analytics over both chains) logo, light backgrounds | | logos/astra-logo-on-dark.svg | ODATANO ASTRA logo, graphite / dark backgrounds | | logos/astra-icon.svg | ODATANO ASTRA icon / favicon | | logos/nightgate-logo.svg | NIGHTGATE logo, dark backgrounds | | logos/nightgate-logo-on-light.svg | NIGHTGATE logo, light backgrounds | | logos/nightgate-icon.svg | NIGHTGATE icon / favicon | | logos/nightgate-mcp-logo.svg | NIGHTGATE MCP (@odatano/nightgate-mcp) logo, dark backgrounds | | logos/nightgate-mcp-logo-on-light.svg | NIGHTGATE MCP logo, light backgrounds | | logos/nightgate-mcp-icon.svg | NIGHTGATE MCP icon / favicon | | logos/nightpass-logo.svg | NIGHTPASS logo, dark backgrounds | | logos/nightpass-logo-on-light.svg | NIGHTPASS logo, light backgrounds | | logos/nightpass-icon.svg | NIGHTPASS icon / favicon |

All wordmarks are outlined paths (Inter), so they render the same on every system.

Rules

• The umbrella brand ODATANO uses the split-O logo. Every product uses a tile icon plus a heavy wordmark: navy tile for Cardano products, graphite tile for Midnight products.
• Compound names are two-tone: first part in ink, second part in accent (DATA+NO, ODATANO+CORE, DAY+PASS, DAY+ZERO, DPP+SDK, ODATANO+ASTRA, NIGHT+GATE, NIGHT+PASS). Single-word names (TRACE, QUANTIX, FINCA, x402, WATCH) stay in ink; the accent sits in the icon.
• Accent on dark ground is #7aa2ff for all products. On light ground: #0C5ECF for ODATANO and Cardano products, #4f6ef7 for NIGHT products.
• Fonts: Inter (text), JetBrains Mono (code), serif italic only as headline accent.

Releases

Semantic versioning. Color or logo changes that alter the look are a minor release, removed or renamed tokens/files are a major release. Consumers pick up updates through Dependabot / Renovate PRs.

License

Apache-2.0