@hummingbot/design-system

Shared design tokens, Tailwind preset, and React components for Hummingbot Foundation properties (Hummingbot, Condor, Botcamp). Extracted from botcamp-site, where the palette, spacing, and component conventions were proven out first.

Published privately to GitHub Packages, scoped to the hummingbot GitHub org — installing it requires a token with read access to this repo.

Install

.npmrc in the consuming project:

@hummingbot:registry=https://npm.pkg.github.com

npm install @hummingbot/design-system

Setup

1. Import the token stylesheet once, globally (e.g. in globals.css, above @tailwind base):

   @import "@hummingbot/design-system/tokens.css";

2. Extend your tailwind.config.ts with the preset:

   import type { Config } from "tailwindcss"
   import hummingbotPreset from "@hummingbot/design-system/tailwind-preset"
   
   export default {
     presets: [hummingbotPreset],
     content: [
       "./src/**/*.{ts,tsx}",
       "./node_modules/@hummingbot/design-system/dist/**/*.js",
     ],
   } satisfies Config

3. Define --font-mono somewhere in your own CSS, pointing at whichever monospace font you load (Geist Mono, JetBrains Mono, etc). The preset deliberately doesn't bundle a font choice — each property loads its own.

What's in here

• tokens.css — the brand palette (--hb-*, --condor-*, --botcamp-*, ink scale, shadows, radius) plus a default semantic theme (--primary, --secondary, etc. mapped to Condor Gold / Botcamp Amber — Botcamp's current choice). A property that wants a different semantic pairing overrides just those variables, never the brand palette itself.
• tailwind-preset — maps the above into Tailwind's theme.extend.
• Components (Button, Badge, Card, PageHeader) — thin, unstyled-opinion wrappers matching shadcn/ui conventions, styled entirely through the tokens above so they reskin automatically per-property.
• Constants (eyebrow, cardStyles, layout, spacing, grids, presets, alertColors) — the generic layout/typography primitives. Product-specific status-color maps (strategy status, hackathon entry status, etc.) stay in each consuming app — those model a domain, not a design system.

Local development

npm install
npm run build      # tsup -> dist/
npm run typecheck

npm run dev watches and rebuilds on change — pair it with npm link (or a workspace) in a consumer project to iterate live.

Publishing

npm publish

Requires publishConfig.registry (already set to https://npm.pkg.github.com) and an authenticated npm client with write access to the hummingbot org's GitHub Packages.