# @tangle-network/brand
> Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.
Latest version **1.5.0** (published 2026-08-12) · MIT license · 10.0K weekly downloads
## Install
```sh
npm install @tangle-network/brand
pnpm add @tangle-network/brand
yarn add @tangle-network/brand
bun add @tangle-network/brand
```
## Health
**Score 80/100 (A)** — status: active.
Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; growing popularity.
Warnings: no types.
## Facts
| | |
|---|---|
| Version | 1.5.0 |
| Published | 2026-08-12 |
| First published | 2026-05-04 |
| Weekly downloads | 10.0K |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 134.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Maintainers | vutuanlinh2k2, drewstone, tjemmmic, tin-tangle-tools |
| Keywords | tangle, design-system, brand, tokens, tailwind |
## Links
- npm: https://www.npmjs.com/package/@tangle-network/brand
- Repository: https://github.com/tangle-network/brand
- Issues: https://github.com/tangle-network/brand/issues
- npm.io page: https://npm.io/package/@tangle-network/brand
## Alternatives
- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
- [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads
## Recent versions
- 1.5.0 (latest) — 2026-08-12
- 1.4.0 — 2026-08-12
- 1.3.0 — 2026-08-08
- 1.1.0 — 2026-07-14
- 1.0.0 — 2026-07-04
- 0.9.0 — 2026-07-04
- 0.8.3 — 2026-07-04
- 0.8.2 — 2026-07-03
- 0.8.1 — 2026-07-02
- 0.8.0 — 2026-07-01
- 0.7.0 — 2026-06-30
- 0.6.0 — 2026-06-24
- 0.5.0 — 2026-06-19
- 0.4.0 — 2026-06-17
- 0.3.0 — 2026-05-06
- … 1 more at https://npm.io/package/@tangle-network/brand/versions
## README
# @tangle-network/brand
Single source of truth for the Tangle design system. Design tokens, logo, and a Tailwind v4 theme preset, shared across every Tangle app (`tangle-website`, `sandbox-ui`, `evals`, `agent-builder`, product surfaces).
**Scope:** tokens, not components. Shared components live in `@tangle-network/ui`; product-specific components stay in their product repos.
For the broader visual, copy, graphic, and component standards, see the repo-level [brand guidelines](../../docs/brand-guidelines.md).
## Install
```bash
pnpm add @tangle-network/brand
```
## Use
### Tailwind v4 app
```css
/* app.css */
@import "@tangle-network/brand/styles";
@import "tailwindcss";
```
That single import wires:
- CSS custom properties for dark (`:root`) and light (`[data-sandbox-theme="vault"]`)
- Tailwind v4 `@theme` block so `bg-brand`, `text-fg-muted`, `rounded-lg`, `font-display`, etc. just work
- Base styles and a handful of utility classes (`.text-gradient-brand`, `.depth-1..4`, `.status-dot-*`)
Fonts are **not** bundled — see [Fonts](#fonts) below.
### Finer control
```css
@import "@tangle-network/brand/styles/tokens";
@import "tailwindcss";
@import "@tangle-network/brand/styles/theme";
@import "@tangle-network/brand/styles/globals";
```
### Logo
```tsx
import { Logo, TangleKnot } from "@tangle-network/brand";
```
## What's in the palette
- **Accent** — indigo `#6366F1` / `#818CF8` / `#A5AAFC`
- **Depth stack** — `#0C0B1D` → `#262448` (dark); `#f4f4f9` → `#dcdbe8` (light)
- **Status** — emerald / amber / coral for running / stopped / error
- **Radii** — 6/8/12/16px (dark); 2/4/6/8px (light/"vault")
Light theme activates via `data-sandbox-theme="vault"` on a parent element.
## Fonts
brand references the following font families in its design tokens but does **not** bundle them — consumer apps must load the fonts themselves. This is deliberate:
- (a) `@import url(...)` inside library CSS breaks downstream when CSS chain-imports get reordered — once the dist CSS is inlined after any rule, the URL `@import` is no longer at the top of the merged stylesheet, the CSS spec disallows it, and PostCSS rejects the build. Mirrors `tangle-network/sandbox-ui#28`.
- (b) Shipping a third-party Google Fonts request from a library is privacy-hostile.
- (c) Consumers cannot fall back when the network fails.
| Family | Role | Used as CSS variable |
| ------------ | ----------------------------------- | -------------------- |
| Geist | UI body text (dark) | `--font-sans` |
| Geist Mono | Code, terminal | `--font-mono` |
| Outfit | Display / headings (dark) | `--font-display` |
| Manrope | Display / headings (vault) | `--font-display` |
| Inter | UI body text (vault) | `--font-sans` |
Pick one loading strategy that fits your app:
**1. Self-hosted via `@fontsource/*`** (recommended — no external network request):
```bash
pnpm add @fontsource/geist-sans @fontsource/geist-mono @fontsource/outfit @fontsource/manrope @fontsource/inter
```
```tsx
// app entry
import "@fontsource/geist-sans/400.css";
import "@fontsource/geist-sans/500.css";
import "@fontsource/geist-sans/600.css";
import "@fontsource/geist-sans/700.css";
import "@fontsource/geist-mono/400.css";
import "@fontsource/geist-mono/500.css";
import "@fontsource/outfit/500.css";
import "@fontsource/outfit/700.css";
import "@fontsource/manrope/500.css";
import "@fontsource/manrope/700.css";
import "@fontsource/inter/400.css";
import "@fontsource/inter/600.css";
```
**2. Google Fonts via HTML ``:**
```html
```
Any family you omit falls back per the `--font-*` token chain.
## Policy
- **No additions without a cross-app audit.** New tokens land here or nowhere; do not fork this into apps.
- **Version as a product.** Semver. Breaking token changes are major bumps.
- **Sandbox-ui as the stress-test surface.** Tokens ship here only after sandbox-ui has used them in anger.
## Development
```bash
pnpm install
pnpm build
```
To iterate inside a consuming app, link locally:
```bash
# in ~/webb/brand
pnpm link --global
# in the consumer
pnpm link --global @tangle-network/brand
```
Or use a `file:` path dependency (`"@tangle-network/brand": "file:../brand"`).
---
_Source: https://npm.io/package/@tangle-network/brand · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._