brainforge-brand-kit — repository map
Date: 2026-04-16
Source repo: github.com/brainforge-ai/brainforge-brand-kit
Local clone (recommended): sibling of this monorepo, e.g. ../brainforge-brand-kit next to brainforge-platform.
Layout
| Path | Purpose |
|---|---|
implementation/design-tokens.md | Human-readable token tables (Brainforge vs Labs themes, type scale, motion). |
component-library/ | Astro 5 + Tailwind 4 static site and component source. |
component-library/package.json | Scripts: npm run dev / build / preview (Astro). |
component-library/astro.config.mjs | Static output; Vite plugin @tailwindcss/vite. |
component-library/src/styles/global.css | Entry: @import "tailwindcss", tokens, themes, @theme inline bridge to utilities. |
component-library/src/styles/tokens.css | --bf-* palette, gradients, @utility token-backed classes (bg-token-surface-hero, etc.). |
component-library/src/styles/themes/brainforge.css | Semantic theme: --bg-root, --fg-primary, --accent, charts, motion, radii. |
component-library/src/styles/themes/labs.css | Alternate data-theme="labs" (dark, gold accent). |
component-library/src/components/*.astro | Primitives (Button, Input, Select, DataTable, Navbar, …). |
component-library/src/components/atoms/ | Stat, QuoteBlock, ChartTitle, … |
component-library/src/components/molecules/ | MetricCard, ProcessStep, ChartContainer, … |
component-library/src/components/charts/ | BarChart, LineChart, NetworkGraph, … |
component-library/src/components/patterns/ | Decorative meshes (TopoPattern, DotGrid, …). |
component-library/src/components/slides/ | Slide deck building blocks. |
component-library/src/layouts/ | Layout.astro, DocLayout.astro (page shells). |
component-library/src/pages/ | Demo routes: index, components, charts, pricing, slides*, docs (*.md). |
Token flow (read this first)
tokens.css— Brand constants (--bf-color-pine, gradients) and@utilitymappings.themes/brainforge.css— Semantic variables consumed by UI (--bg-card,--accent,--font-secondary, …).global.css@theme inline— Exposes semantic colors/fonts to Tailwind utilities (bg-bg-root,text-fg-primary, chart colors, …).- Theme switch —
data-theme="brainforge"(default) ordata-theme="labs"on<html>perdesign-tokens.md.
Consumption model (no npm library today)
The repo is an Astro reference implementation + gallery, not a published @brainforge/ui package. Practical options:
| Approach | When |
|---|---|
| Reference clone | Copy token CSS and patterns into another Astro or static marketing site. |
| Git submodule | Pin a specific commit of component-library/src into a client repo (team owns update discipline). |
Forge (apps/platform) | Do not import .astro files. Align globals.css / @theme and reuse MUI + existing React components; see forge-vs-brand-kit-strategy-2026-04-16.md. |
Commands
cd ../brainforge-brand-kit/component-library
npm install
npm run devBrowse /components, /charts, and implementation/design-tokens.md in the repo for the full catalog.