New Branding, Design System, and Landing Pages - #1027
Conversation
…ration Build out the /ds design system as the source of truth for the site and apply its tokens, type, and icons across the app. Design system (/ds): - Rendered style book with tree nav: Styles (Colors, Typography, Iconography, Icon Migration, Shadows, Effects), Figma Tokens (Palette, Semantic Tokens), and Components (Buttons, Badges, Inputs, Dropdown, Avatar, Spinner, Collapsible, Breadcrumbs, Cards). - Figma token layer in app.css (@theme static): primitives (--color-ds-*), library (--color-lib-*), and semantic tokens (text/background/border/icon/ action/status/accent) with html.dark overrides. - New-system component kit (src/components/ds/ui) on the semantic tokens. Site-wide rebrand application: - Global type: h1..h6 → Bricolage Grotesque, mono → IBM Plex Mono, fonts loaded globally from __root.tsx. Editing --font-ds-* propagates everywhere. - Navbar swapped to the new rebrand landscape logo (light/dark variants) with centered nav; mega menu centered. - Palm-tree pixel-art spinner (PalmSpinner) that sways at the trunk base. Icon migration (lucide-react → @phosphor-icons/react), 155 files: - 218 distinct icons (85 kept name, 133 renamed) at regular weight. - Props translated: dropped strokeWidth/absoluteStrokeWidth, fill→weight="fill", LucideIcon type → Phosphor Icon type; aliases and same-target collisions handled. - /ds/icon-migration review page renders old→new glyphs side by side so maintainers can flag any swap that doesn't fit its context. lucide-react is kept installed (the review page renders the "before" glyphs); it can be removed once that page is retired. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Important Review skippedToo many files! This PR contains 241 files, which is 91 over the limit of 150. To get a review, narrow the scope: Upgrade to a paid plan to raise the limit. This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (22)
📒 Files selected for processing (247)
You can disable this status message by setting the ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
tanstack-com | d9b4ce2 | Commit Preview URL Branch Preview URL |
Jul 28 2026, 05:11 AM |
…cons # Conflicts: # src/components/ApplicationStarter.tsx # src/components/OpenSourceStats.tsx # src/components/npm-stats/BaselineSection.tsx # src/components/npm-stats/ChartControls.tsx # src/components/npm-stats/PackagePills.tsx # src/components/npm-stats/PackageSearch.tsx # src/routes/_library/$libraryId/$version.docs.npm-stats.tsx # src/routes/admin/intent.tsx # src/routes/admin/npm-stats.tsx # src/routes/stats/npm/index.tsx
Design-system follow-ups on top of the rebrand: - Palette: bridge legacy gray/twine to the warm DS neutral ramp in app.css so the whole site adopts the new palette; migrate the shared primitives (Button, Badge, FormInput, Tooltip) to semantic tokens. - Typography: add semantic .h1-.h6 classes; move Font families to the top of /ds/typography and make the family cards minimal. - MegaMenuItem: extract the mega-menu row into a reusable component matched to the Figma "Mega Menu Item" (bordered 44px icon, Bricolage-bold title, #aba594 description, adaptive hover/press); wire it into the Navbar with 8px spacing between items. - /ds/navbar: new Navbar DS page - anatomy preview with a device-size toggle (Auto/Mobile/iPad/Desktop) driven by container queries, plus a MegaMenuItem showcase. Add a "Design System" nav item under Support. - Home: remove the "Browse the stack" section; restructure "Why TanStack" into four centered principle sections. Refine navbar spacing. - Icons: finish the lucide->Phosphor migration (CheckCircleIcon->CheckCircle, CogsIcon->Gear); remove the orphaned custom icons. - Spinner: remove the Palm spinner demo from /ds/spinner. - Add @figma/code-connect dev dependency. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bump the shared DsPage wrapper from max-w-5xl (1024px) to max-w-7xl (1280px) so all design-system pages use more horizontal space on wide screens (e.g. the icon-migration grid no longer truncates names). Header stays left-aligned. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Resolve conflicts with the updated base: - pnpm-lock.yaml: regenerated from the merged package.json (keeps @figma/ code-connect plus the base's new deps). - app.css: the base added a :root/:host block pinning grays to the original cool values (a layer-stability fix); updated it to the warm DS-neutral bridge values so the palette shift isn't reverted. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Centered header (PRINCIPLES eyebrow + display title + subtitle) over a single bordered container with 4 full-width stacked principle cards - Adopt DS rebrand tokens: Bricolage Grotesque display, IBM Plex Mono, ds color/type semantic tokens (theme-aware, works light + dark) - Per-card eyebrow accents (terracotta/green/blue/purple) matching Figma - Keep the proof visualizations; float them (no surface box) and scale them up to fill the media slot's footprint - Drop the now-unused per-card icons and iconClassName field Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ds-rebrand-followups # Conflicts: # src/routes/index.tsx
…cons # Conflicts: # src/routes/index.tsx # src/routes/partners.railway.tsx
…ds-rebrand-followups # Conflicts: # src/routes/index.tsx # src/routes/workshops.tsx
Migrate the libraries page to the rebrand design and turn it into a temporary, navigational overlay opened over the current page instead of its own route. - New LibraryGridCard: dark rebrand cards, per-category Phosphor icon tint (icon brightens one DS shade on hover), squircle corners, instant (transition-less) hover, mono copy from each library's real description. - LibrariesOverlay (Radix Dialog) + LibrariesOverlayContext: glass modal opened from the nav "Libraries" trigger, the "All Libraries" mega-menu item (now desktop too), and the home/404/breadcrumb CTAs. Backdrop click, Escape, and the close button dismiss it; it auto-closes on navigation. - Framework pills filter the grid in place; selecting one shows the framework header/description inline. - Staggered grid reveal animation. - Remove the /libraries route and the /libraries/$framework sub-route (and now-unused LibraryCard); drop /libraries from the sitemap. Move browse utils to ~/libraries/browse-utils. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
# Conflicts: # src/components/Navbar.tsx # src/routes/index.tsx
- Match overlay tint to the mega-menu glass, as a reverse vignette (dark centre → ~60% rim) over the mega-menu blur. - 150ms glass fade-in, then a row-staggered card reveal. - Replace the wrapping framework pills with a DS Dropdown beside the title (default "All frameworks"; each framework as a menu item with a monochrome icon + count). Guard the dialog so selecting an item filters instead of dismissing the overlay. - Move the close button to the fixed top-right corner (24px inset, 40px light-weight icon); soften card borders; monochrome framework icons. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Installed via `npx skills add kylezantos/design-motion-principles`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…only SVGs
Continue the rebrand rollout by replacing the leftover old TanStack logos
with the new brand assets, and remove the unreferenced 193MB hero video.
- Extract emblem-only SVGs from the stacked logo's island path into
public/images/brand/tanstack-emblem-{black,white,charcoal,cream}.svg
(the rebrand set only shipped stacked/landscape, both with the wordmark).
- SearchModal AI-message avatar → emblem (theme-swapped black/white).
- Game coin texture → emblem-black.
- BrandContextMenu download menu → Landscape / Stacked / Emblem (black + white).
- brand-guide asset sections → Landscape / Stacked / Emblem in brand colors.
- login + oauth/authorize splash → emblem (theme-swapped).
- Remove unreferenced public/videos/hero.mp4 (193MB, never committed).
- launch.json: autoPort so the dev server falls back off a busy port 3000.
Left intentionally (separate follow-ups): homepage hero (redesign scope),
ShopHero3D 3D textures, and favicons/OG images (need PNG rasterization + a
mono-vs-color decision).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Formatting-only reflow of two description lines (matches CI fix bb0fe1e). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ds-rebrand-phosphor-icons
…e DS work Replace the copy-pasted per-library landing pages with a single config-driven LibraryLanding component, and convert Query (rich) and Ranger (lean) as the first POC pages. Landing: - Shared LibraryLanding template (hero, why-grid, split sections, testimonials, ecosystem, CTA) driven by a per-library config + demo-panel slots - De-noise: one exclamation-free CTA, drop superlative taglines, small TanStack mark stacked over a large product wordmark - Repackage typography onto DS text-ds-* roles (drop font-black) - ~30% more section padding, gutters, and column gap Design system: - Eyebrow component: mono-caps role, brand-by-category via --color-lib-* tokens, with a /ds/eyebrow style book - Logos brand page (/ds/logos) with per-variant SVG downloads; Brand entry merged into a "Brand & Styles" nav section - Button: add polymorphic `as` prop so it can render as a Link/anchor - Lighten body type tokens (body xl/lg/md -> weight 300) + style-book labels - Navbar library wordmark -> DS heading-4 in the display font Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…e DS work (#1040) Replace the copy-pasted per-library landing pages with a single config-driven LibraryLanding component, and convert Query (rich) and Ranger (lean) as the first POC pages. Landing: - Shared LibraryLanding template (hero, why-grid, split sections, testimonials, ecosystem, CTA) driven by a per-library config + demo-panel slots - De-noise: one exclamation-free CTA, drop superlative taglines, small TanStack mark stacked over a large product wordmark - Repackage typography onto DS text-ds-* roles (drop font-black) - ~30% more section padding, gutters, and column gap Design system: - Eyebrow component: mono-caps role, brand-by-category via --color-lib-* tokens, with a /ds/eyebrow style book - Logos brand page (/ds/logos) with per-variant SVG downloads; Brand entry merged into a "Brand & Styles" nav section - Button: add polymorphic `as` prop so it can render as a Link/anchor - Lighten body type tokens (body xl/lg/md -> weight 300) + style-book labels - Navbar library wordmark -> DS heading-4 in the display font Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
- Brighten resting card name (70% -> 90%) so it reads as the headline without hover; use the short tagline (2-line clamp) instead of the full description; persistent "Docs ->" affordance + keyboard focus ring. - Group cards under tinted category headers (Framework / Data & State / UI & UX / Performance / Tooling); stagger the reveal per section. - Framework filter moves to a dropdown beside the title (stacks below on mobile); 20% translucent card fill across all breakpoints. - Responsive: wider side margins on tablet-down, 16px card gutter, and a mobile "unified list" — each category a bordered, rounded squircle box with dividers between rows (standalone cards restored at sm+). - Tighten the icon-to-name gap to 4px. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Lets the preview harness pick a free port (Vite honors PORT) instead of colliding on 3000 with other worktrees/sessions. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Descriptions previously wrapped in the 260px items (15/18 overflowed), which broke the visual balance. Widen the item + section-grid columns to 330px and force single-line subtext (whitespace-nowrap on desktop title + description). Shortened the descriptions that still overflowed 330px so nothing wraps: - Workshops: "Remote and in-person sessions from maintainers." → "Live sessions from the maintainers." - Discord: "Community support and real-time discussion." → "Real-time community support." - Showcase: "Products and teams building with TanStack." → "Teams building with TanStack." - Ethos: "How we think about open source and products." → "How we approach open source." - Design System: "Logos, tokens, and components for TanStack surfaces." → "Logos, tokens, and UI components." Verified live: 0/18 descriptions overflow at 330px (248px text column). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Add the subtle overlay states used by the other mega menus to the Libraries rows: hover white/4%, pressed white/12% (mode-adaptive via text-primary). Replaces the dead `surface-state-hover` class, which was never a defined token, so rows previously had no hover background at all. - Space library rows 4px apart (gap-1) for a less cramped column. - Center the "Browse all libraries" button in the menu footer. Verified live: rows gap 4px, hover/pressed classes applied, button centered. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Brings this session's work onto the branch:
- Category-colored Libraries mega menu (restored) with hover/pressed states,
4px row spacing, centered "Browse all libraries".
- Support mega menu refined to Figma (boxed 32px icons, mono eyebrows, PARTNERS
rail redesign) + widened 330px items with non-wrapping subtext.
- MegaMenuItem rest/hover/pressed states; mega-menu panel padding 40/36/32.
- DS StatsSection, homepage stats promotion, partners category bands.
Conflict resolution:
- app.css: kept this branch's (WIP) canonical palette; grafted the additive
--color-text-menu-title token (neutral-tint-200 already present).
- MegaMenuItem.tsx: took the session version (32px boxed icon + states).
- Bespoke landings + library configs: kept this branch's WIP.
- QueryLanding: took the session/template-compatible version (the WIP copy used
the pre-rebrand LandingAccent API).
- Wired the now-existing PixelSpinner export in ds/ui.
- pnpm install synced @tanstack/workflow-{core,runtime} to the merged lockfile.
Verified: tsc 0 errors, pnpm test 24/24 pass.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* Apply rebrand to library landing pages * Make library landings bespoke * Restore the AI hero graph * Restore light and dark landing themes * Align landing typography and category colors
Full-bleed photographic hero card: bottom-left headline ("open source"
underlined) + bottom-right description and a "Browse the Stack" CTA.
- DS tokens throughout: text-ds-display-xl headline (stepping down the display
scale responsively), text-ds-body-xl copy, mode-stable text-ds-neutral-500
(the photo is always light), DS Button for the CTA.
- Plain <img> for the new asset (the OptimizedImage Cloudflare transform
resolves against prod, which 404s until the image is deployed); source
pre-sized to 2400px/q80 (~485KB).
- Mobile: nudged crop + soft scrim for legibility over the palm; both removed
at xl where the copy splits around the centered palm (matches Figma).
- Removed the now-unused HomeSplashLogo, OpenSourceGradientText, and the
ClientOnly/BrandContextMenu imports.
Verified live (desktop + mobile): renders correctly, no console errors, tsc +
tests green.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Hero card goes full-bleed (drop the max-w-[1021px]/px wrapper + rounded corners) and full-height (min-h calc(100dvh - navbar-height)), so the palm/gradient photo fills the viewport below the navbar with the copy anchored at the bottom. Verified: card height == viewport - navbar, full width, legible on desktop + mobile. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Cap hero height at 640px (min-h-[640px], xl:h-[640px]) instead of full screen. - Replace the custom pills with DS components (size md): primary Button for 'Browse the Stack' (opens the libraries overlay via useLibrariesOverlay), and a link Button 'Start with a prompt' (color pinned to a mode-stable dark token for the always-light photo) that scrolls to the app starter (#start-with-a-prompt). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Thin the Phosphor icon strokes via IconContext weight='light' (custom SVG icons ignore it). - Badge (New/Alpha/Beta) becomes a solid status-success fill with inverse text instead of an outline. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- 'Leading & trailing icons' section: icons before and after the label across variants/colors. - 'Split button' section: a primary action + Dropdown selector combo, showing the dropdown menu. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
… scrim - Match the mobile design (Frame 262): headline anchored top, description + CTAs anchored bottom (justify-between below xl); desktop split unchanged. - Remove the legibility scrim — the top/bottom split clears the centered palm, so the image shows at native opacity. - Default hero height 720px (min-h-[720px] / xl:h-[720px]). - Description steps down to text-ds-body-md on mobile (xl:text-ds-body-xl). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Promote the library-landing primary CTA into a managed Button variant: - variant='gradient' paints an accent→bright gradient with an inner highlight, a colored glow, ink text, and a hover lift, via --btn-grad-* vars. - gradientColorStyles maps each color to the category role tokens (accent/bright/ tint/ink/glow in app.css); purple falls back to the ds-purple ramp. - Add a 'xl' rounded option; gradient defaults to size lg + rounded xl. - Showcase 'Gradient (landing CTA)' section on /ds/buttons. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…wport The homepage adapter graph (w-320px scale-1.35 => 432px) pushed the page's scroll width past the viewport, so the fixed mobile menu sized to the overflow and its panels + Log In button were clipped off the right edge. Add overflow-x-clip to the site-content wrapper so nothing widens the page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…l+focus - Headline is bold at every breakpoint (font-bold — the display-sm/md tokens are weight 500). - Desktop hero inset 40px on the sides (xl:px-10) with rounded-2xl corners. - 'Start with a prompt' link button gains a right arrow and, on click, smooth- scrolls to the app starter and focuses/selects its prompt field (polling for the lazily-hydrated textarea). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Give the hero photo 8px padding on all sides (absolute inset-2 + rounded-xl) so it reads as a framed image within the card. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Remove the .ts-mega-trigger::after underline; nav triggers now use the same subtle hover fill as the mega-menu items (hover:bg-text-primary/[0.04]). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The card's overflow-hidden + rounded-2xl clipped the inset image's corners. Drop them; the image now carries the shape: 8px inset (inset-2), rounded-[2rem] with corner-shape:squircle. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ips) Replace the starter preset chips with a placeholder that rotates through the suggestions in the empty prompt field. Shift+Enter accepts the shown suggestion (or submits typed text) and reveals the builder options. submitCurrentInput now takes an optional override so the placeholder can be submitted without a state race. Applies to the home (full) layout; the compact layout keeps its chips. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drop xl:px-10 so the hero spans full width; the 8px squircle image frame remains on all sides. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Wrap the hero <img> in an inset-2 div so the 8px frame is symmetric; the intrinsic-sized <img> was positioned at left:8 but kept full width, pushing its right edge 8px past the card (clipped). - Height now scales with the viewport (h calc(100dvh - navbar)) capped at 720px (max-h) with a 560px floor, instead of a rigid 720px. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Toward the Figma StackBuilder progressive-disclosure design (809:2114): - Heading reads 'Whatcha want to build?' on the home starter. - Submit is now the TanStack brand rainbow-gradient 'Go ->' button (dark ink) instead of the emerald 'Next'. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…abled state - 'Copy Prompt' results CTA now uses the brand rainbow gradient (matching the Figma 'Copy Prompt to build this stack'). - Go button reads disabled (grayscale) until there's real input. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Home starter now matches the Figma StackBuilder resting look: - Dark #0a0a0a surface with a terracotta glow; no header bar / PROMPT label / inner borders (all gated to context='home' so the builder page is unchanged). - Centered Bricolage-light heading above the field. - Prompt field starts empty so the rotating suggestion placeholder shows, with a quiet 'Press Shift + Enter' hint that yields to the gradient Go CTA on input. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…box, dissolving prompts - Heading now floats above the box (Figma StackBuilder), not in a header bar. - Box: 24px full-squircle corners + the Figma terracotta glow (0/21/39.2/-28). - Rotating placeholder uses the short labels (Blank starter, Build a blog, …) in an animated overlay that gently dissolves out, then reveals the next left-to-right (CSS keyframes; sequenced so the previous is fully gone first; respects prefers-reduced-motion). Shift+Enter still submits the full prompt. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…arger text - Box background is the subtle surface (#171717) instead of #0a0a0a. - 'Press Shift + Enter' hint sits lateral to the prompt text (top-right); once the user types, the gradient 'Go ->' CTA replaces it in that spot. - Bump the prompt text to 16px and the hint to 14px (one level up). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…nd-phosphor-icons
…ds-rebrand-phosphor-icons # Conflicts: # src/components/Navbar.tsx # src/components/landing/AiLanding.tsx # src/components/landing/CliLanding.tsx # src/components/landing/DbLanding.tsx # src/components/landing/FormLanding.tsx # src/components/landing/HotkeysLanding.tsx # src/components/landing/IntentLanding.tsx # src/components/landing/LibraryLanding.tsx # src/components/landing/PacerLanding.tsx # src/components/landing/RouterLanding.tsx # src/components/landing/StartLanding.tsx # src/components/landing/StoreLanding.tsx # src/components/landing/TableLanding.tsx # src/components/landing/VirtualLanding.tsx # src/components/landing/WorkflowLanding.tsx # src/routes/ds.typography.tsx # src/styles/app.css
What
Builds out the
/dsdesign system as the source of truth for the site, applies its rebrand tokens/type across the app, and migrates every icon fromlucide-reactto@phosphor-icons/react.Design system (
/ds)app.cssvia@theme static— primitives (--color-ds-*), library (--color-lib-*), and semantic tokens (text/background/border/icon/action/status/accent) withhtml.darkoverrides. Editing a primitive propagates through everything that references it.src/components/ds/uibuilt on the semantic tokens.Site-wide rebrand
h1..h6→ Bricolage Grotesque, mono → IBM Plex Mono, loaded globally from__root.tsx. Re-pointing--font-ds-*restyles the whole site.prefers-reduced-motion).Icon migration — lucide → Phosphor (155 files)
regularweight. Every Phosphor target was validated against the installed package before the sweep.strokeWidth/absoluteStrokeWidth,fill→weight="fill",LucideIcontype → PhosphorIcontype; aliases (Search as SearchIcon→MagnifyingGlass as SearchIcon) and same-target collisions (Layers/Boxes/SquareStack→Stack) handled./ds/icon-migrationreview page renders old → new glyphs side by side (Flagged / Renamed / All tabs + search) so maintainers can flag any swap that doesn't fit its context.Notes for reviewers
lucide-reactis intentionally kept installed — the review page renders the "before" glyphs from it. It can be removed once that page is retired./ds/icon-migration(e.g.Server→HardDrives,Route→Path,Milestone→MapPinLine,Activity→Pulse,Dock→AppWindow, and the four that collapse toStack).public/videos/hero.mp4is deliberately not included in this PR.tscclean, lint clean, unit tests pass (all via pre-commit), and/dspages render without console errors.🤖 Generated with Claude Code