@tangle-network/brand · v0.1.0

The Tangle brand system.

Design tokens, fonts, logo, and a Tailwind v4 theme. One package shared across every Tangle app. Single source of truth; components and consumers extend, never fork.

GitHub →

Logo

The Tangle Knot. Two overlapping paths, indigo-to-violet gradient. Use the full lockup where space permits; the knot alone for avatars, favicons, and constrained surfaces.

Tangle

Full lockup · md

Icon only · md

import { Logo, TangleKnot } from "@tangle-network/brand";

Color

One accent (indigo), a four-stop depth stack, and semantic status colors. No gradients in surfaces. use the depth stack for hierarchy.

Accent

brand

#6366F1

Primary accent. Actions, links, focus rings.

brand-cool

#818CF8

Hover, emphasis, gradient pair.

brand-glow

#A5AAFC

Highlights, text gradients, subtle fills.

brand-dim

#4F46E5

Pressed / visited states.

Depth stack

depth-1

#0C0B1D

Page background.

depth-2

#141328

Section / subtle elevation.

depth-3

#1D1B38

Card / panel.

depth-4

#262448

Elevated card, modal.

Status

running

#10B981

Active, healthy, online.

creating

#9B93F0

Transient / in-flight.

stopped

#FFB800

Paused, idle, warning.

error

#FF4D6D

Failed, destructive.

Typography

Geist for UI, Outfit for display on dark, Manrope + Inter for light/vault surfaces, Geist Mono for code and terminal readouts. Loaded once via `@tangle-network/brand/styles/fonts`.

Geist UI text (sans)

300 / 400 / 500 / 600 / 700

Infrastructure for AI services.

Outfit Display (dark)

400 / 500 / 600 / 700

Sandboxed runtime, unified routing.

Manrope Display (light / vault)

400 / 500 / 600 / 700 / 800

Deploy agents with SLA-backed runtime.

Inter Body (light / vault)

400 / 500 / 600 / 700

A clean, professional body face.

Geist Mono Code, terminal, readouts

400 / 500 / 600

pnpm add @tangle-network/brand

Radii

Tight radii for precision. Light/vault theme uses even tighter values (2/4/6/8px) for enterprise surfaces.

6px

Chips, small inputs.

8px

Buttons, inputs.

12px

Cards, dropdowns.

16px

Sections, modals.

full

999px

Pills, badges.

Usage

One import wires fonts, tokens, Tailwind v4 theme, and base utilities.

/* app.css */
@import "@tangle-network/brand/styles";
@import "tailwindcss";

For finer control, import fonts, tokens, theme, and globals independently. See the repo README for the full exports table.