diff --git a/.agents/index.md b/.agents/index.md index 01316aeb9..ea6eee1cb 100644 --- a/.agents/index.md +++ b/.agents/index.md @@ -2,6 +2,33 @@ TanStack.com marketing site built with TanStack Start. +## Core principles for every task + +Before writing code, walk this ladder. Stop at the first answer that works. + +1. **Does this need to exist?** → no: skip it (YAGNI) +2. **Already in this codebase?** → reuse it, don't rewrite +3. **Stdlib does it?** → use it +4. **Native platform feature?** → use it +5. **Installed dependency?** → use it +6. **One line?** → one line +7. **Only then:** the minimum that works + +Inspired by https://github.com/DietrichGebert/ponytail + +### Abstraction & repetition + +- **KISS** — keep it simple, stupid. Boring code beats clever code. +- **WET > DRY** — write everything twice (or more) before abstracting. Three similar usages with diverging needs is the cue to extract; two is not. +- Premature DRY couples unrelated code through a shared abstraction that ends up fighting both callers. Duplication is cheaper than the wrong abstraction. + +### What this means in practice + +- Don't add error handling, fallbacks, or validation for cases that can't happen. +- Don't introduce helpers, wrappers, or config knobs "for later." +- Don't refactor surrounding code while fixing a bug. +- When tempted to abstract: count the call sites and check they actually want the same behavior. If not, leave the duplication. + ## Essentials - Package manager: `pnpm` diff --git a/package.json b/package.json index 56461f78d..64e6d41f6 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@modelcontextprotocol/sdk": "^1.29.0", "@observablehq/plot": "^0.6.17", "@octokit/graphql": "^9.0.3", + "@phosphor-icons/react": "^2.1.10", "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-toast": "^1.2.15", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d935d005a..992619799 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,6 +39,9 @@ importers: '@octokit/graphql': specifier: ^9.0.3 version: 9.0.3 + '@phosphor-icons/react': + specifier: ^2.1.10 + version: 2.1.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3) '@radix-ui/react-dialog': specifier: ^1.1.15 version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) @@ -2320,6 +2323,13 @@ packages: cpu: [x64] os: [win32] + '@phosphor-icons/react@2.1.10': + resolution: {integrity: sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==} + engines: {node: '>=10'} + peerDependencies: + react: '>= 16.8' + react-dom: '>= 16.8' + '@poppinss/colors@4.1.6': resolution: {integrity: sha512-H9xkIdFswbS8n1d6vmRd8+c10t2Qe+rZITbbDHHkQixH5+2x1FDGmi/0K+WgWiqQFKPSlIYB7jlH6Kpfn6Fleg==} @@ -8679,6 +8689,11 @@ snapshots: '@oxlint/binding-win32-x64-msvc@1.58.0': optional: true + '@phosphor-icons/react@2.1.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)': + dependencies: + react: 19.2.3 + react-dom: 19.2.3(react@19.2.3) + '@poppinss/colors@4.1.6': dependencies: kleur: 4.1.5 diff --git a/public/blog-assets/tanstack-has-a-new-look/design-system-snapshot.svg b/public/blog-assets/tanstack-has-a-new-look/design-system-snapshot.svg new file mode 100644 index 000000000..d4f4186f9 --- /dev/null +++ b/public/blog-assets/tanstack-has-a-new-look/design-system-snapshot.svg @@ -0,0 +1,99 @@ + + + TanStack design system snapshot + A compact snapshot of the TanStack design system showing color ramps, typography, semantic tokens, and component examples. + + + + + + + + + + + TanStack DS + Tokens, type, iconography, and components with one place to make decisions. + /ds + + + + + + + + + + + Primitive ramps + green, terracotta, blue, purple, amber, neutral + + green + + + + + + + + terra + + + + + + + + blue + + + + + + + + + + Typography + Bricolage Grotesque, Inter, IBM Plex Mono + Type-safe by default + Headless tools for building web apps. + const router = createRouter() + + + + Semantic tokens + components consume meaning, not raw colors + + + text-primary + + surface + + success + + + + + Component kit + buttons, badges, inputs, cards, spinners, menus + + + Primary + + Secondary + + Beta + + Project config + + + + diff --git a/public/blog-assets/tanstack-has-a-new-look/logo-swatch.svg b/public/blog-assets/tanstack-has-a-new-look/logo-swatch.svg new file mode 100644 index 000000000..8d3814179 --- /dev/null +++ b/public/blog-assets/tanstack-has-a-new-look/logo-swatch.svg @@ -0,0 +1,19 @@ + + + TanStack logo variant swatches + A compact swatch sheet showing landscape and stacked TanStack logo variants on cream, charcoal, white, and black backgrounds. + + + + + + + + + + + + + + + diff --git a/public/images/brand/tanstack-landscape-black.svg b/public/images/brand/tanstack-landscape-black.svg new file mode 100644 index 000000000..a048f79ee --- /dev/null +++ b/public/images/brand/tanstack-landscape-black.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + diff --git a/public/images/brand/tanstack-landscape-charcoal.svg b/public/images/brand/tanstack-landscape-charcoal.svg new file mode 100644 index 000000000..04682e958 --- /dev/null +++ b/public/images/brand/tanstack-landscape-charcoal.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + diff --git a/public/images/brand/tanstack-landscape-white.svg b/public/images/brand/tanstack-landscape-white.svg new file mode 100644 index 000000000..50ad4162f --- /dev/null +++ b/public/images/brand/tanstack-landscape-white.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + diff --git a/public/images/brand/tanstack-stacked-black.svg b/public/images/brand/tanstack-stacked-black.svg new file mode 100644 index 000000000..816042af2 --- /dev/null +++ b/public/images/brand/tanstack-stacked-black.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + diff --git a/public/images/brand/tanstack-stacked-charcoal.svg b/public/images/brand/tanstack-stacked-charcoal.svg new file mode 100644 index 000000000..d3fcd4eef --- /dev/null +++ b/public/images/brand/tanstack-stacked-charcoal.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + diff --git a/public/images/brand/tanstack-stacked-cream.svg b/public/images/brand/tanstack-stacked-cream.svg new file mode 100644 index 000000000..b3ed7ec4c --- /dev/null +++ b/public/images/brand/tanstack-stacked-cream.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + diff --git a/public/images/brand/tanstack-stacked-white.svg b/public/images/brand/tanstack-stacked-white.svg new file mode 100644 index 000000000..46fc6bbba --- /dev/null +++ b/public/images/brand/tanstack-stacked-white.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + diff --git a/public/images/brand/tanstack/landscape-black.svg b/public/images/brand/tanstack/landscape-black.svg new file mode 100644 index 000000000..1f579a2c0 --- /dev/null +++ b/public/images/brand/tanstack/landscape-black.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/tanstack/landscape-charcoal.svg b/public/images/brand/tanstack/landscape-charcoal.svg new file mode 100644 index 000000000..4b1788c82 --- /dev/null +++ b/public/images/brand/tanstack/landscape-charcoal.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/tanstack/landscape-white.svg b/public/images/brand/tanstack/landscape-white.svg new file mode 100644 index 000000000..ac647dfdc --- /dev/null +++ b/public/images/brand/tanstack/landscape-white.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/tanstack/stacked-black.svg b/public/images/brand/tanstack/stacked-black.svg new file mode 100644 index 000000000..39e2bc59c --- /dev/null +++ b/public/images/brand/tanstack/stacked-black.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/tanstack/stacked-charcoal.svg b/public/images/brand/tanstack/stacked-charcoal.svg new file mode 100644 index 000000000..47beefbfc --- /dev/null +++ b/public/images/brand/tanstack/stacked-charcoal.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/tanstack/stacked-cream.svg b/public/images/brand/tanstack/stacked-cream.svg new file mode 100644 index 000000000..d2d1df699 --- /dev/null +++ b/public/images/brand/tanstack/stacked-cream.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/brand/tanstack/stacked-white.svg b/public/images/brand/tanstack/stacked-white.svg new file mode 100644 index 000000000..e100fc931 --- /dev/null +++ b/public/images/brand/tanstack/stacked-white.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/blog/tanstack-has-a-new-look.md b/src/blog/tanstack-has-a-new-look.md new file mode 100644 index 000000000..e8d92996b --- /dev/null +++ b/src/blog/tanstack-has-a-new-look.md @@ -0,0 +1,67 @@ +--- +title: TanStack Has a New Look +published: 2026-07-15 +excerpt: TanStack is getting a new logo, a real design system, and a brand that feels a lot closer to what I've always wanted the tools to feel like, calm, human, careful, and good enough to stop worrying about. +authors: + - Tanner Linsley +--- + +TanStack is getting a new look this week, probably July 15 if everything lands where it's supposed to. + +A small preview of where it's headed: + +![New TanStack logo variant swatches](/blog-assets/tanstack-has-a-new-look/logo-swatch.svg) + +It's kind of wild that TanStack made it this far with design that was mostly just good enough. We've never had paid marketing, big outreach campaigns, paid DevRel, or a team whose job was to make the brand feel bigger than it was, and almost everything we've put into the world has come from the open source side of the house, maintainers building the thing, explaining the thing, maybe making a fun page when someone had a little extra energy, then going right back to the software, the docs, the community, and the reliability. + +That's humbling, because developers have trusted us enough on the quality of the tools to forgive design that sometimes lagged behind the product, and I don't take that as proof design doesn't matter, I take it as proof that trust is expensive and we've been spending it carefully. + +I also don't think any of this says our team isn't good at design. A lot of us are, honestly, it's just not what we're paid to do every day, and most of us don't want design to be the thing that pulls us away from the product for weeks at a time. If I dropped everything and did TanStack design full-time, I think we'd get somewhere good, but the tools, docs, APIs, issues, examples, and community would end up paying for it. + +Our current brand isn't bad either. It's clean, it's organized, it mostly does the design things you're supposed to do, the colors are consistent, the spacing is consistent, the pages are tidy enough, the boxes line up, and for a long time that was the bar. If a software site looked clean and organized and vaguely developer-y, you could call it done and nobody would really push back. + +I don't think that's enough anymore, because AI made that version of polish cheap. You can ask a model to make a clean developer homepage and it'll give you something that checks a surprising number of boxes, maybe not perfect, maybe not production-ready, but close enough that the old signals don't mean what they used to mean, and that's been bothering me more than I expected. + +TanStack is in a weird and important spot right now. We're building tools for the future of AI, whether that's agents reading docs, models calling typed tools, software writing software, or developers handing off more and more work to systems that need APIs and state and errors to be extremely clear. A lot of what we're building has to be good for machines, but I really, really don't want TanStack to feel machine-made. + +These libraries come from real people who have lived these problems for years, and we know why server state gets messy because we've been in the app at midnight trying to figure out why the UI is lying. We know why routing is hard because we've watched apps slowly turn into piles of special cases, and we know why tables and forms and databases and AI workflows can eat your whole life if the primitives underneath them are wrong. + +The whole point of TanStack has always been to give some of that life back. If TanStack Query makes you stop worrying about a class of bugs, that's time back. If Router gives you a route tree you can trust, that's time back. If Table or Form keeps you from rebuilding the same pile of state management for the tenth time, that's time back. If Start or DB or AI can remove some of the machinery that usually sits between you and the product you're trying to ship, that's time back. + +And time back is the real product, at least to me. + +The beach thing stuck around because of that. The palm tree, the island, the relaxed vibe, all of it can look kind of silly from the outside if you reduce it to a mascot or a decoration, but for me it has always been the easiest visual way to say "you're in good hands, go enjoy your life." Go outside, go be with your family, go cook something, go sit in the shade, go touch sand if touching grass isn't beachy enough, your software should not need you hovering over it forever. + +I want TanStack to earn that feeling. + +The old brand pointed at that idea, but it didn't really carry it. It looked like a clean developer site with some beach energy layered on top, again, not bad, just not honest enough for where we are now. It didn't show enough hand, it didn't feel like someone made hard choices, and it felt a little too easy to reproduce, which in 2026 is a real problem. + +The new brand is trying to fix that without turning TanStack into some over-designed art project, because I don't want that either. I don't want a site that screams "look how designed this is," I want it to feel careful, warm, a little imperfect in the places where perfection would make it feel fake, restrained in the places where AI would let us do literally anything, more like someone chose a few things on purpose and then had the discipline to stop. + +AI makes it feel like you can do everything, all the time, instantly, more gradients, more motion, more variations, more generated texture, more content, more pages, more everything, but I think the bar for human quality is going the other direction. The bar is knowing what to refuse, choosing the one thing that matters and doing that thing with enough attention that people can feel the difference, even if they can't explain every choice. + +That's also how I want TanStack tools to feel. They should be sharp, typed, inspectable, composable, and boring in the places where boring means dependable, and they should have escape hatches because real apps need them, but also enough taste baked in that you're not constantly rebuilding the same decisions. They should work for developers today and agents tomorrow without pretending those are separate worlds. + +That's a lot for a logo and a website to carry, but brand is mostly a bunch of small choices adding up until people can tell whether you care. + +Andy Beutler is TanStack's first lead designer, which is still kind of wild to say because we've made it this far without that role. For years, the "design system" was basically engineering taste, maintainer instinct, a pile of Tailwind classes, and whatever consistency we could remember while also shipping libraries, docs, examples, sponsors, merch, and a thousand other things. + +It worked better than it probably should have, but it was starting to crack, and Andy can focus in a way the rest of us couldn't without stealing time from the real product. He's been giving TanStack something we haven't really had before, a design spine, and that work is showing up now as the new logo system, global type, design tokens, `/ds`, a component kit, Phosphor icons, and yes, a little palm loader that makes me happier than a loader probably should. + +The design system itself will live at [/ds](/ds), and that's probably the part of this launch I'm most excited to keep building on because it turns taste into something shareable. Colors have primitive ramps and semantic tokens now, type has roles instead of vibes, components have one home, and that sounds boring until you've maintained a site for years and realized every one-off button or color choice is really just future work with a nicer shirt on. + +![TanStack design system snapshot](/blog-assets/tanstack-has-a-new-look/design-system-snapshot.svg) + +The checklist isn't the reason I'm excited though, I'm excited because we finally have something to make decisions against. When a page feels off, we can point to why, when a component needs to exist, it has somewhere to live, and when the site starts drifting, there's gravity now. + +The launch this week isn't the finish line. Some pages will still need work, some things will still feel halfway between the old world and the new one, and that's okay. I'd rather have a real foundation and keep moving than pretend a rebrand is one magical day where everything becomes perfect. + +What I care about is that TanStack is starting to look more like the thing I've always wanted it to be, precise tools made by humans, for humans, in a world where more of the work is going to be done with machines. + +That's the balance I don't want to lose. + +We can build for AI without sounding like AI, we can make things machine-readable without making them soulless, and we can care about type safety and protocol details and state graphs and still admit that the reason any of this matters is because people want to build something and then go live their actual lives. + +So yeah, TanStack has a new look, new logo, new type, new system, new vibe, and hopefully a little more evidence that there are actual people here making actual choices. + +That's what I want the brand to say now, you're in good hands, we care more than the tidy version of the site used to show, and if we do our job right, you can stop worrying about the software for a bit and go be a person. diff --git a/src/builder/templates.ts b/src/builder/templates.ts index 28809a598..b5eafb79a 100644 --- a/src/builder/templates.ts +++ b/src/builder/templates.ts @@ -5,25 +5,25 @@ * Users can select a template to pre-populate features, then modify freely. */ -import type { LucideIcon } from 'lucide-react' +import type { Icon } from '@phosphor-icons/react' import { Rocket, - Bot, - LayoutDashboard, + Robot, + SquaresFour, FileText, - Server, + HardDrives, Radio, Globe, HardDrive, Plus, ShoppingBag, -} from 'lucide-react' +} from '@phosphor-icons/react' export interface Template { id: string name: string description: string - icon: LucideIcon + icon: Icon color: string features: Array /** @@ -63,7 +63,7 @@ export const TEMPLATES: Array