mirror of https://github.com/hanzoai/brand.git synced 2026-10-23 03:05:28 +00:00

Files

T

zeekay d790b6aa13 feat(brand): social-card toolkit (hero/post/announcement/quote/showcase) + hanzo-brand CLI

Add a monochrome-by-default, brand-agnostic SVG card system sourced from the
canonical @hanzo/logo mark: renderHero / renderPost / renderAnnouncement /
renderQuote / renderShowcase, plus a `hanzo-brand` CLI that reads the nearest
brand.json so every repo shares one look. Exposed via `.` and `./hero` exports
and a `bin`. New dependency: @hanzo/logo.

Also repair the previously-unbuildable package so it publishes cleanly:
- externalize react (moved to an optional peerDependency; it was bundled and
  failed to resolve)
- fix latent dts type errors: unused imports (loader/utils/docs), dead
  `.includes` guard + null-check in colors, Theme.colors widened to a recursive
  ColorTokens type so darkTheme fits, explicit React import in themes, an index
  signature on DocsThemeVariables, and a stale @ts-expect-error in brand.

Bumps 1.3.3 -> 1.3.4. Origin's package.json was at 1.3.3 but npm latest was
1.3.2 — CI publish had been failing on the build errors above.

2026-07-08 06:55:54 -07:00

3.5 KiB

Raw Blame History

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

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

3.5 KiB Raw Blame History