@hanzo/brand

The single source of truth for Hanzo brand identity — design tokens, logos, themes, docs theming, and a README/og:image hero generator — shared across every Hanzo, Lux, and Zoo repo so they all look and feel the same.

npm install @hanzo/brand

Tokens

import { colors, typography, brand } from '@hanzo/brand';

brand.name;           // from brand.json — the single source of truth
brand.docsDomain;     // 'docs.hanzo.ai'

The Hanzo palette is pure monochrome (black + white, Vercel/Linear style) — no color accent. brand.json is canonical: names, domains, socials, theme.

Social-card toolkit

One layout engine, any brand. Zero-dependency SVG — no browser/canvas. Same code generates a repo README hero, an og:image, and blog/announcement/quote cards. The mark is sourced from @hanzo/logo (single source).

| Function | Card | |---|---| | renderHero | README hero / og banner | | renderPost | blog post (tag, title, author · date) | | renderAnnouncement | launch / big statement | | renderQuote | pull-quote |

Monochrome by default; colorful per brand

Every function defaults to monochrome — white mark + text, white accent (Hanzo and Lux). A brand goes colorful by passing its own Palette:

| Brand | Palette | |---|---| | Hanzo | monochrome — white block-H, white accent | | Lux | monochrome — white triangle, white accent | | Zoo | colorful — prism mark + accentColors prism gradient |

interface Palette {
  accent?: string          // highlight; default WHITE (monochrome)
  accentColors?: string[]  // multi-color accent → gradient rule (Zoo prism)
  fg?: string; bg?: string // text / canvas (default white / near-black)
  markInner?: string       // a brand's own mark SVG (from @<org>/logo)
  markViewBox?: string
}

Rip it into a README (per repo)

npx @hanzo/brand hero \
  --title "@hanzo/ai" \
  --tagline "The AI app as one declarative component" \
  --out .github/hero.svg

<p align="center"><img src=".github/hero.svg" alt="@hanzo/ai" width="100%" /></p>

The CLI fills defaults from the nearest brand.json, so each repo gets a unique, on-brand hero with one command.

Programmatic (og:image route, any brand)

import { renderHero, renderPost } from '@hanzo/brand';

// Hanzo / Lux — monochrome (no palette needed):
renderHero({ title: 'Lux Node', tagline: 'GPU-native multichain consensus',
             github: 'github.com/luxfi', docs: 'docs.lux.network' });

// Zoo — colorful: pass the prism mark (from @zooai/logo) + accent colors:
renderPost({ title: 'Proof-of-AI', tag: 'DeSci', author: 'Zoo Labs',
             accent: '#00A652',
             accentColors: ['#ED1C24','#FCF006','#00A652','#01ACF1','#2E3192'],
             markInner: zooPrismSvg, markViewBox: '222 221 580 580' });
// Rasterize to PNG for og:image with resvg-js / satori / sharp / rsvg-convert.

Docs theming

@hanzo/brand ships a Fumadocs-compatible theme so every product's docs site inherits the brand automatically:

import { docsTheme } from '@hanzo/brand';   // CSS variables for fumadocs

Exports

. (tokens, themes, brand, renderHero, renderPost, renderAnnouncement, renderQuote) · ./hero · ./loader (loadBrand, getDocsUrl, …) · ./brand.json · ./assets/* · ./styles/*. Mark geometry comes from @hanzo/logo (MARK_PATHS).

License

MIT © Hanzo AI Inc.