TanStack

Partner Rail

The tiered partner rail: partners grouped into centered tier sections, each logo sized by a shared rubric. Gold is the source of truth; silver and bronze derive by a 25% step. Sources: src/components/ds/ui/PartnerRail.tsx, PartnerTierLogo.tsx, PartnerRail.rules.md.

Rail

The live component (as it appears in the blog's right gutter). Hover to lift the logos from grayscale to color. Drive the sizes with the workshop controls below.

light
PartnersBecome a Partner
Gold
CodeRabbit
Lovable
Cloudflare
Netlify
Railway
Silver
OpenRouter
Clerk
SerpApi
WorkOS
AG Grid
Bronze
Sentry
Unkey
Electric
Prisma
dark
PartnersBecome a Partner
Gold
CodeRabbit
Lovable
Cloudflare
Netlify
Railway
Silver
OpenRouter
Clerk
SerpApi
WorkOS
AG Grid
Bronze
Sentry
Unkey
Electric
Prisma
Workshop controls · temporary — remove once balanced
gold · 5 logos
silver · 5 logos
bronze · 4 logos
PARTNER_LOGO_GOLD = { maxWidth: 170, maxHeight: 40 }
PARTNER_LOGO_TIER_STEP = 0.75
row gap per tier = gold 0px · silver 0px · bronze 0px

// image.scale per partner (paste into partners.tsx):
  ag-grid: scale 1.10
  serpapi: scale 0.92
  netlify: scale 1.25
  openrouter: scale 1.25
  clerk: scale 0.72
  unkey: scale 0.70

Tiers

Gold is the only knob. silver = gold × 0.75, bronze = gold × 0.75² (0.5625). The dashed boxes are the derived per-tier logo bounds at the current gold base.

gold: 170×40
silver: 128×30
bronze: 96×23

Per-logo scale

The tier box sets the size; the global per-partner `scale` (in partners.tsx) is the optical-weight knob layered on top. Use < 1 for logos that read heavy (dense/icon-forward marks), > 1 for logos that read light (thin or padded wordmarks), roughly 0.7–1.3. `scale` is global, so it also affects the partners page and other placements.

Tune each logo's scale with the workshop sliders above until every logo in a tier reads at a consistent visual size against a reference, then copy the values from the config output into partners.tsx.