TanStack Branding

Everything needed to produce on-brand TanStack output: exact tokens, the real font and logo files, and the rules that make a thing read as TanStack rather than as generic dev-tool blue.

The one-sentence brand: warm cream paper, near-black ink, a palm emblem, one saturated accent per surface — calm and printed-looking, never neon, never glassy, never gradient soup.

The five decisions

Get these right and it reads as TanStack. Get them wrong and nothing else saves it.

Decision	Answer
Background	Cream #eeebd4 (light) or near-black #111111 (dark). Not white. White is a UI surface, not a brand surface.
Ink	#111111 on cream; #ffffff on near-black. Secondary text #3e3529 / #aea691.
Display type	Bricolage Grotesque Bold — headings, library names, big numbers only.
Body type	Inter — everything else. Body weight is light (300), not regular.
Accent	Exactly one per surface, taken from the library's category (table below). Never two accents competing.

Category accents

A library's accent is not chosen — it is inherited from its category. Look up the library, use that color.

Category	Libraries	Light (400)	Dark (300)
Framework	Start, Router	#39af46 green	#69bc75
Data & State	Query, DB, Store, AI	#d3481b terracotta	#e06e49
UI & UX	Table, Charts, Form, Hotkeys, Markdown, Highlight	#3aa3c4 blue	#61adbf
Performance	Virtual, Pacer	#ffa216 amber	#f4d648
Tooling	Devtools, Config, CLI, Intent, Ranger, MCP, Workflow	#3e3529 charcoal	#c5c3bf

Anything not listed is Tooling. Accents step up in lightness on dark surfaces — a light-mode accent on near-black is a contrast failure, not a shortcut.

For the full token set (neutrals, semantic tokens, all five ramps, both modes), read references/palette.md.

Assets in this skill

Real files, ready to embed — no downloading, no guessing at hexes.

assets/logos/     14 files — emblem / landscape / stacked, in black, charcoal, cream, white
assets/fonts/     Bricolage Grotesque Bold, Inter (ttf + woff2), plus OFL license

Pick the logo by surface, not by preference:

Surface	File
Cream / light	tanstack-landscape-black.svg or -charcoal.svg
Near-black / dark	tanstack-landscape-white.svg; emblem → tanstack-emblem-cream.svg
Square / avatar / favicon	tanstack-emblem-*.svg
Vertical / poster / merch	tanstack-stacked-*.svg
Raster needed (video, canvas, OG)	tanstack-landscape-black-640.png, tanstack-emblem-charcoal-256.png, tanstack-emblem-cream-256.png

Logo rules — short, and all three matter: keep original proportions, leave clear space around the mark, and put dark marks on light surfaces / light marks on dark. Never recolor a mark to an accent.

Full inventory, the live banner endpoints, and embedding recipes (CSS @font-face, HTML/canvas, video runtimes): references/logos-and-assets.md.

Layout, depth, and motion

TanStack surfaces are calm. The house rules, condensed:

• Fewer, larger containers over many small sections. Spacing separates before effects do.
• Rounded corners, subtle radii. Soft low-contrast shadows, one or two layers, max.
• Cards must feel grounded, not floating — and are not the default layout primitive.
• Surface contrast or translucency instead of hard outlines.
• Micro-transitions that reinforce spatial relationships. No spring, no bounce, no parallax theatre.

Avoid: chunky shadows, neumorphism, over-designed card grids, glassmorphism as the main idea, neon-on-dark, multi-color gradients.

The test: if depth doesn't improve comprehension, remove it.

Full rules plus type scale and motion specifics: references/layout-and-type.md.

Workflows

Building a page or dashboard view. Cream or near-black surface → Bricolage headings, Inter body at 300 → one category accent → borders from --color-border-default, not arbitrary grays. If it's inside tanstack.com, prefer the existing --color-* CSS tokens and the /ds component pages over new values; this skill is the source of truth only outside that codebase.

Making an OG image, README header, or social card. Don't hand-build it — tanstack.com already renders them. references/logos-and-assets.md has the endpoints, including light/dark and per-framework variants. Hand-build only for a surface those endpoints don't cover.

Making a video or motion graphic. Cream or near-black stage, one accent for the whole piece, Bricolage for titles and Inter for lower-thirds. Motion is restrained: opacity and small transforms, no springy overshoot. Pair with the hyperframes skills for the composition itself — this skill supplies the palette, fonts, and logo files.

Reviewing a design. Walk the five decisions in order. Most "feels off but I can't say why" comes from a white background, two accents, or Inter used where Bricolage belongs.

Common mistakes

Mistake	Fix
White page background	Cream #eeebd4. White is for cards and inputs.
Two or more accents on one surface	One accent, from the library's category.
Bricolage in body copy	Bricolage is display-only. Inter for body.
Body text at weight 400+	Body is 300. 400 is for small/body-sm sizes.
Light-mode accent on dark surface	Use the dark (300) step.
Recoloring the palm mark to an accent	Marks are black, charcoal, cream, or white. Nothing else.
Grabbing a hex from a screenshot	Every value is in references/palette.md.
Inventing an accent for a new library	Assign it a category; inherit the color.

Provenance

Values extracted from TanStack/tanstack.com: src/styles/app.css (tokens), src/libraries/categories.ts (category map), src/server/og/colors.ts (render literals), .agents/ui-style.md (layout rules). If tanstack.com's tokens change, that repo wins — re-extract rather than trusting a stale copy here.