Merge pull request #25580 from BerriAI/blog/ramp-style-restyle-with-redis-post

blog: restyle docs.litellm.ai/blog to engineering blog aesthetic
2026-09-06 08:16:43 +00:00 · 2026-04-11 18:10:57 -07:00 · 2026-04-11 18:10:57 -07:00 · f74d626253
commit f74d626253
parent 2c786ca2e6 14eed24471
7 changed files with 809 additions and 220 deletions
--- a/docs/my-website/blog/redis_circuit_breaker/diagrams.js
+++ b/docs/my-website/blog/redis_circuit_breaker/diagrams.js
@ -0,0 +1,159 @@
+import React from 'react';
+
+const s = {
+  fig: {margin: '2.5rem 0', fontFamily: 'inherit'},
+  box: {borderRadius: 12, border: '1px solid #e5e7eb', background: '#fff', padding: '2rem 2.5rem'},
+  label: {fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#9ca3af', textAlign: 'center', marginBottom: '1.5rem'},
+  caption: {textAlign: 'center', fontSize: 12, color: '#9ca3af', marginTop: 12},
+  node: (border='#d1d5db', bg='#f9fafb') => ({
+    border: `1px solid ${border}`, borderRadius: 6, padding: '8px 20px',
+    fontSize: 13, background: bg, display: 'inline-block',
+  }),
+  arrow: {display: 'flex', flexDirection: 'column', alignItems: 'center'},
+};
+
+const SmallArrow = ({color='#9ca3af'}) => (
+  <svg width="2" height="28" style={{display:'block'}}>
+    <line x1="1" y1="0" x2="1" y2="22" stroke={color} strokeWidth="1.5"/>
+    <polygon points="1,28 -2,21 4,21" fill={color}/>
+  </svg>
+);
+
+export function CascadeFailure() {
+  return (
+    <figure style={s.fig}>
+      <div style={s.box}>
+        <p style={s.label}>Without circuit breaker — cascade failure</p>
+        <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:0}}>
+          <div style={s.node()}>LiteLLM Pod (×100)</div>
+          <SmallArrow />
+          <div style={s.node()}>Rate limit / cache check</div>
+          <div style={{position:'relative', display:'flex', flexDirection:'column', alignItems:'center'}}>
+            <SmallArrow color="#f87171"/>
+            <span style={{position:'absolute', left:8, top:4, fontSize:11, color:'#f87171', whiteSpace:'nowrap'}}>hangs 30s per request</span>
+          </div>
+          <div style={s.node('#fca5a5','#fef2f2')}><span style={{color:'#b91c1c', fontWeight:600}}>Redis — degraded, timing out</span></div>
+          <SmallArrow color="#fb923c"/>
+          <div style={s.node('#fdba74','#fff7ed')}><span style={{color:'#c2410c', fontWeight:600}}>Postgres — 100× normal read load</span></div>
+          <SmallArrow />
+          <div style={{...s.node('#111827','#111827'), color:'#fff', fontWeight:600}}>Total outage — gateway down</div>
+        </div>
+      </div>
+      <figcaption style={s.caption}>Slow Redis → every auth check times out → database overwhelmed → full cascade</figcaption>
+    </figure>
+  );
+}
+
+export function CircuitBreakerStates() {
+  const circle = (border, color, label, sub) => (
+    <div style={{display:'flex', flexDirection:'column', alignItems:'center', width: 140}}>
+      <div style={{width:88, height:88, borderRadius:'50%', border:`2px solid ${border}`, background:'#fff', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
+        <span style={{fontSize:11, fontWeight:700, color, letterSpacing:'0.06em'}}>{label}</span>
+        <span style={{fontSize:10, color:'#9ca3af', marginTop:2}}>{sub}</span>
+      </div>
+      <p style={{fontSize:11, color:'#6b7280', textAlign:'center', marginTop:10, lineHeight:1.5}}>{'\u00a0'}</p>
+    </div>
+  );
+  const arrow = (label) => (
+    <div style={{display:'flex', flexDirection:'column', alignItems:'center', marginTop:36, marginLeft:4, marginRight:4}}>
+      <span style={{fontSize:10, color:'#6b7280', marginBottom:4}}>{label}</span>
+      <div style={{display:'flex', alignItems:'center'}}>
+        <div style={{height:1, width:48, background:'#9ca3af'}}/>
+        <svg width="8" height="8" style={{marginLeft:-1}}><polygon points="0,0 8,4 0,8" fill="#6b7280"/></svg>
+      </div>
+    </div>
+  );
+  return (
+    <figure style={s.fig}>
+      <div style={s.box}>
+        <p style={s.label}>Circuit breaker state machine</p>
+        <div style={{display:'flex', justifyContent:'center', alignItems:'flex-start'}}>
+          {circle('#1f2937','#111827','CLOSED','normal')}
+          {arrow('5 failures')}
+          {circle('#f87171','#dc2626','OPEN','fast-fail')}
+          {arrow('60s timeout')}
+          {circle('#fbbf24','#b45309','HALF-OPEN','probing')}
+        </div>
+        <div style={{display:'flex', justifyContent:'center', gap:32, marginTop:24}}>
+          <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:4}}>
+            <div style={{display:'flex', alignItems:'center', gap:4}}>
+              <svg width="8" height="8"><polygon points="8,0 0,4 8,8" fill="#16a34a"/></svg>
+              <div style={{height:1, width:100, background:'#16a34a'}}/>
+            </div>
+            <span style={{fontSize:10, color:'#16a34a'}}>probe success → CLOSED</span>
+          </div>
+          <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:4}}>
+            <div style={{display:'flex', alignItems:'center', gap:4}}>
+              <svg width="8" height="8"><polygon points="8,0 0,4 8,8" fill="#ef4444"/></svg>
+              <div style={{height:1, width:100, borderTop:'2px dashed #f87171'}}/>
+            </div>
+            <span style={{fontSize:10, color:'#ef4444'}}>probe failure → OPEN again</span>
+          </div>
+        </div>
+      </div>
+    </figure>
+  );
+}
+
+export function CircuitBreakerFlow() {
+  return (
+    <figure style={s.fig}>
+      <div style={s.box}>
+        <p style={s.label}>With circuit breaker — graceful degradation</p>
+        <div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
+          <div style={s.node()}>Incoming request</div>
+          <SmallArrow />
+          <div style={{...s.node('#111827'), border:'2px solid #111827', fontWeight:600}}>Circuit Breaker</div>
+          <div style={{display:'flex', gap:80, marginTop:20, alignItems:'flex-start'}}>
+            <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:8}}>
+              <SmallArrow />
+              <span style={{fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'#6b7280', border:'1px solid #e5e7eb', borderRadius:4, padding:'2px 8px'}}>Closed</span>
+              <div style={{...s.node(), textAlign:'center', fontSize:13}}>Redis call<br/><span style={{fontSize:11, color:'#9ca3af'}}>normal latency</span></div>
+            </div>
+            <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:8}}>
+              <SmallArrow />
+              <span style={{fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'#ef4444', border:'1px solid #fca5a5', borderRadius:4, padding:'2px 8px'}}>Open</span>
+              <div style={{...s.node('#fca5a5'), textAlign:'center', fontSize:13}}>Fast-fail — 0ms<br/><span style={{fontSize:11, color:'#9ca3af'}}>no network call</span></div>
+              <SmallArrow />
+              <div style={{...s.node(), textAlign:'center', fontSize:13}}>DB fallback<br/><span style={{fontSize:11, color:'#9ca3af'}}>bounded load</span></div>
+            </div>
+          </div>
+          <div style={{...s.node('#111827','#111827'), color:'#fff', fontWeight:600, marginTop:24}}>Request completes — gateway stays up</div>
+        </div>
+      </div>
+      <figcaption style={s.caption}>Redis down → circuit opens → 0ms rejection → DB absorbs bounded fallback traffic</figcaption>
+    </figure>
+  );
+}
+
+export function IncidentTimeline() {
+  const row = (color, text) => (
+    <div style={{display:'flex', alignItems:'flex-start', gap:10, marginBottom:12}}>
+      <div style={{marginTop:5, width:6, height:6, borderRadius:'50%', background:color, flexShrink:0}}/>
+      <p style={{fontSize:13, color:'#4b5563', margin:0, lineHeight:1.5}}>{text}</p>
+    </div>
+  );
+  return (
+    <figure style={s.fig}>
+      <div style={s.box}>
+        <p style={s.label}>Redis degrades — before vs. after</p>
+        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
+          <div style={{border:'1px solid #e5e7eb', borderRadius:8, padding:20}}>
+            <p style={{fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.1em', color:'#9ca3af', marginBottom:16}}>Without circuit breaker</p>
+            {row('#f87171','All 100 pods hang for 30s on each auth check')}
+            {row('#f87171','Threadpools fill up, requests queue')}
+            {row('#f87171','100× simultaneous DB fallbacks overwhelm Postgres')}
+            {row('#f87171','Requires manual intervention to recover')}
+          </div>
+          <div style={{border:'1px solid #111827', borderRadius:8, padding:20}}>
+            <p style={{fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.1em', color:'#9ca3af', marginBottom:16}}>With circuit breaker</p>
+            {row('#111827','Circuit opens after 5 failures — 0ms fast-fail')}
+            {row('#111827','Auth falls back to DB — bounded, not 100× load')}
+            {row('#111827','Cache miss rate temporarily elevated — gateway stays up')}
+            {row('#111827','Auto-recovers when Redis comes back — no intervention needed')}
+          </div>
+        </div>
+      </div>
+    </figure>
+  );
+}
--- a/docs/my-website/blog/redis_circuit_breaker/index.md
+++ b/docs/my-website/blog/redis_circuit_breaker/index.md
@ -0,0 +1,97 @@
+---
+slug: redis-circuit-breaker
+title: "Making the AI Gateway Resilient to Redis Failures"
+date: 2026-04-11T09:00:00
+authors:
+  - ishaan
+description: "We built a circuit breaker into LiteLLM so a slow Redis never cascades into a gateway outage. Here's how it works."
+tags: [reliability, redis, infrastructure, engineering]
+hide_table_of_contents: true
+---
+
+import { CascadeFailure, CircuitBreakerStates, CircuitBreakerFlow, IncidentTimeline } from './diagrams';
+
+Redis is in the hot path for almost every request through LiteLLM: rate limiting, cache lookups, spend tracking. When Redis is healthy, the latency contribution is single-digit milliseconds. When it degrades, you need a plan - not just for when Redis is fully down, but for when it's *slow*.
+
+Running an AI gateway at scale across 100+ pods means designing for failure modes before they show up in production. The dangerous case is not Redis being fully down. A complete outage is easy to handle - fail fast, fall through to the database, continue. The dangerous case is a *slow* Redis: still up, still accepting connections, but timing out after 20-30 seconds on each operation.
+
+{/* truncate */}
+
+## Why slow Redis is harder than down Redis
+
+<CascadeFailure />
+
+With 100 pods each hanging for 30 seconds on every auth check, the threadpool fills up. Requests queue. By the time Redis times out and falls through to Postgres, the database is receiving 100x its normal load from simultaneous fallbacks. A slow Redis becomes a database outage becomes a full gateway outage.
+
+## The fix: circuit breaker
+
+The circuit breaker pattern solves this by tracking consecutive failures and cutting off the unhealthy dependency before it can cascade. Instead of hanging for 30 seconds on each Redis call, the circuit opens after 5 consecutive failures and fast-fails immediately - 0ms, no network call.
+
+<CircuitBreakerStates />
+
+Three states:
+
+- **CLOSED** - normal. All Redis calls pass through.
+- **OPEN** - Redis is unhealthy. Fast-fail every call instantly. The request continues with degraded-but-functional behavior (DB fallback for auth).
+- **HALF-OPEN** - after 60 seconds, one probe request is allowed through to test recovery. Success closes the circuit; failure resets the timer.
+
+## How requests flow through it
+
+<CircuitBreakerFlow />
+
+When the circuit is open, the gateway does not stall. Auth checks fall back to Postgres - slower, but bounded. The database can handle the load because it is receiving *some* requests via DB, not *all* requests via DB simultaneously after 100 pods each waited 30 seconds for Redis to fail.
+
+The difference: controlled degradation vs. uncontrolled cascade.
+
+## The implementation
+
+```python
+class RedisCircuitBreaker:
+    def __init__(self, failure_threshold: int, recovery_timeout: int):
+        self.failure_threshold = failure_threshold  # default: 5
+        self.recovery_timeout = recovery_timeout    # default: 60s
+        self._failure_count = 0
+        self._state = self.CLOSED
+
+    def is_open(self) -> bool:
+        if self._state == self.OPEN:
+            if time.time() - self._opened_at > self.recovery_timeout:
+                self._state = self.HALF_OPEN
+                return False  # this caller is the recovery probe
+            return True       # fast-fail
+        return False
+
+    def record_failure(self):
+        self._failure_count += 1
+        self._opened_at = time.time()
+        if self._failure_count >= self.failure_threshold:
+            self._state = self.OPEN  # open the circuit
+
+    def record_success(self):
+        self._failure_count = 0
+        self._state = self.CLOSED   # Redis recovered
+```
+
+Every async Redis operation goes through a decorator that checks the breaker before touching the network. When open, it raises immediately:
+
+```python
+@_redis_circuit_breaker_guard
+async def async_get_cache(self, key: str):
+    ...
+```
+
+The decorator handles the bookkeeping - success increments nothing, failure increments the counter, exceptions trigger `record_failure()`. The caller sees a clean exception and falls through to its normal non-Redis path.
+
+## What this looks like in production
+
+<IncidentTimeline />
+
+Redis degradation events no longer cascade. The observable symptom during a Redis slowdown is a temporary bump in cache miss rate - the right failure mode. Auth still works, rate limiting still works (at slightly higher DB cost), and recovery is fully automatic when Redis comes back.
+
+```bash
+# configure via environment variables
+REDIS_CIRCUIT_BREAKER_FAILURE_THRESHOLD=5   # failures before opening
+REDIS_CIRCUIT_BREAKER_RECOVERY_TIMEOUT=60  # seconds before probe
+```
+
+The circuit breaker is on by default in all LiteLLM versions since `v1.82.0`. No configuration needed for most deployments.
--- a/docs/my-website/src/css/custom.css
+++ b/docs/my-website/src/css/custom.css
@ -794,3 +794,123 @@ video {
    max-width: calc(9 / 12 * 100%) !important;
  }
 }
+
+/* =========================================
+   BLOG — Ramp-style aesthetic
+   ========================================= */
+
+/* Hide blog sidebar on post pages */
+.blog-post-page aside.col {
+  display: none !important;
+}
+
+/* Make blog post content full-width + constrained */
+.blog-post-page main.col--7 {
+  --ifm-col-width: 100% !important;
+  max-width: 820px !important;
+  margin: 0 auto !important;
+  flex: 0 0 100% !important;
+}
+
+/* Clean post header */
+.blog-wrapper article header h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1.25;
+  color: #111827;
+  margin-bottom: 0.75rem;
+}
+
+/* Author / date line */
+.blog-wrapper article header .avatar,
+.blog-wrapper article header [class*='blogPostData'] {
+  margin-top: 0.75rem;
+}
+
+/* Clean prose body */
+.blog-wrapper article .markdown {
+  font-size: 0.95rem;
+  line-height: 1.7;
+  color: #374151;
+}
+
+.blog-wrapper article .markdown h2 {
+  font-size: 1.35rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin-top: 2.5rem;
+  margin-bottom: 0.75rem;
+  color: #111827;
+}
+
+.blog-wrapper article .markdown h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  color: #111827;
+}
+
+.blog-wrapper article .markdown p {
+  margin-bottom: 1.25rem;
+}
+
+.blog-wrapper article .markdown a {
+  color: #0ea5e9;
+  text-decoration: none;
+}
+
+.blog-wrapper article .markdown a:hover {
+  text-decoration: underline;
+}
+
+.blog-wrapper article .markdown code {
+  font-size: 0.85em;
+  background: #f3f4f6;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+  color: #111827;
+}
+
+.blog-wrapper article .markdown pre {
+  background: #ffffff !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+}
+
+.blog-wrapper article .markdown pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: inherit;
+}
+
+/* Hide tags section at bottom of blog posts */
+.blog-wrapper footer [class*='blogPostTags'],
+.blog-wrapper footer [class*='tags'] {
+  display: none;
+}
+
+/* Nav buttons (prev/next) at bottom - keep clean */
+.blog-wrapper .pagination-nav__label {
+  font-size: 0.85rem;
+}
+
+[data-theme='dark'] .blog-wrapper article header h1,
+[data-theme='dark'] .blog-wrapper article .markdown h2,
+[data-theme='dark'] .blog-wrapper article .markdown h3 {
+  color: #f9fafb;
+}
+
+[data-theme='dark'] .blog-wrapper article .markdown {
+  color: #d1d5db;
+}
+
+[data-theme='dark'] .blog-wrapper article .markdown code {
+  background: #1f2937;
+  border-color: #374151;
+  color: #f9fafb;
+}
--- a/docs/my-website/src/theme/BlogListPage/index.js
+++ b/docs/my-website/src/theme/BlogListPage/index.js
@ -3,78 +3,86 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';

-const TAG_COLORS = {
-  gemini: {bg: '#d2e3fc', text: '#174ea6', darkBg: '#1a3a5c', darkText: '#8ab4f8'},
-  anthropic: {bg: '#fde0c4', text: '#b33d00', darkBg: '#4a2800', darkText: '#ffb74d'},
-  claude: {bg: '#fde0c4', text: '#b33d00', darkBg: '#4a2800', darkText: '#ffb74d'},
-  llms: {bg: '#c8e6c9', text: '#1b5e20', darkBg: '#1b3d1f', darkText: '#81c784'},
-};
+// ── Provider marquee ──────────────────────────────────────────────────────
+const PROVIDERS = [
+  { name: 'OpenAI',        img: 'https://www.google.com/s2/favicons?domain=openai.com&sz=64' },
+  { name: 'Anthropic',     img: 'https://www.google.com/s2/favicons?domain=claude.ai&sz=64' },
+  { name: 'Google Gemini', img: 'https://www.google.com/s2/favicons?domain=ai.google.dev&sz=64' },
+  { name: 'AWS Bedrock',   img: 'https://www.google.com/s2/favicons?domain=aws.amazon.com&sz=64' },
+  { name: 'Azure OpenAI',  img: 'https://www.google.com/s2/favicons?domain=azure.microsoft.com&sz=64' },
+  { name: 'Mistral AI',    img: 'https://www.google.com/s2/favicons?domain=mistral.ai&sz=64' },
+  { name: 'Meta Llama',    img: 'https://www.google.com/s2/favicons?domain=meta.com&sz=64' },
+  { name: 'Groq',          img: 'https://www.google.com/s2/favicons?domain=groq.com&sz=64' },
+  { name: 'Hugging Face',  img: 'https://www.google.com/s2/favicons?domain=huggingface.co&sz=64' },
+  { name: 'Perplexity',    img: 'https://www.google.com/s2/favicons?domain=perplexity.ai&sz=64' },
+  { name: 'DeepSeek',      img: 'https://www.google.com/s2/favicons?domain=deepseek.com&sz=64' },
+  { name: 'Cohere',        img: 'https://www.google.com/s2/favicons?domain=cohere.com&sz=64' },
+  { name: 'Together AI',   img: 'https://www.google.com/s2/favicons?domain=together.ai&sz=64' },
+  { name: 'Vertex AI',     img: 'https://www.google.com/s2/favicons?domain=cloud.google.com&sz=64' },
+];

-function hashHue(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return Math.abs(hash) % 360;
-}
-
-function getTagColor(label) {
-  const key = label.toLowerCase();
-  for (const [k, v] of Object.entries(TAG_COLORS)) {
-    if (key === k) return v;
-  }
-  const hue = hashHue(key);
-  return {
-    bg: `hsl(${hue}, 40%, 90%)`,
-    text: `hsl(${hue}, 60%, 25%)`,
-    darkBg: `hsl(${hue}, 40%, 20%)`,
-    darkText: `hsl(${hue}, 50%, 75%)`,
-  };
-}
-
-function formatDate(dateStr) {
-  const d = new Date(dateStr);
-  const now = new Date();
-  const diffDays = Math.floor((now - d) / (1000 * 60 * 60 * 24));
-  if (diffDays <= 0) return 'Today';
-  if (diffDays === 1) return '1d ago';
-  if (diffDays < 30) return `${diffDays}d ago`;
-  return d.toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'});
-}
-
-function BlogCard({post, featured}) {
-  const {title, permalink, date, description, tags} = post;
-  const visibleTags = (tags || []).slice(0, 3);
+const DOUBLED = [...PROVIDERS, ...PROVIDERS];

+function ProviderMarquee() {
  return (
-    <Link to={permalink} className={styles.cardLink} aria-label={title}>
-      <article className={featured ? styles.cardFeatured : styles.card}>
-        <div className={styles.meta}>
-          <time className={styles.time} dateTime={date}>{formatDate(date)}</time>
-          {featured && <span className={styles.badge}>Latest</span>}
+    <div className={styles.marqueeWrap}>
+      <p className={styles.marqueeLabel}>Routing to 100+ providers</p>
+      <div className={styles.marqueeOuter}>
+        <div className={styles.fadeLeft} />
+        <div className={styles.fadeRight} />
+        <div className={styles.marqueeTrack}>
+          {DOUBLED.map((p, i) => (
+            <span key={i} className={styles.marqueeItem}>
+              <img src={p.img} alt={p.name} width={18} height={18} className={styles.marqueeIcon} />
+              <span>{p.name}</span>
+              <span className={styles.marqueeSep}>|</span>
+            </span>
+          ))}
        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Post row ──────────────────────────────────────────────────────────────
+function formatDate(dateStr) {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    month: 'long', day: 'numeric', year: 'numeric',
+  });
+}
+
+function AuthorList({authors}) {
+  if (!authors || authors.length === 0) return null;
+  return (
+    <>
+      {authors.map((a, i) => (
+        <React.Fragment key={a.name}>
+          {i > 0 && <span className={styles.authorSep}> </span>}
+          {a.url ? (
+            <a href={a.url} target="_blank" rel="noopener" className={styles.authorLink}>{a.name}</a>
+          ) : (
+            <span className={styles.authorName}>{a.name}</span>
+          )}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
+
+function PostRow({post}) {
+  const {title, permalink, date, description, authors} = post;
+  return (
+    <article className={styles.post}>
+      <Link to={permalink} className={styles.titleLink}>
        <h2 className={styles.title}>{title}</h2>
-        {description && <p className={styles.desc}>{description}</p>}
-        {visibleTags.length > 0 && (
-          <div className={styles.tags}>
-            {visibleTags.map(tag => {
-              const c = getTagColor(tag.label);
-              return (
-                <span key={tag.label} className={styles.tag} style={{
-                  '--tag-bg': c.bg, '--tag-text': c.text,
-                  '--tag-bg-dark': c.darkBg, '--tag-text-dark': c.darkText,
-                }}>{tag.label}</span>
-              );
-            })}
-          </div>
-        )}
-        <div className={styles.arrow} aria-hidden="true">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-          </svg>
-        </div>
-      </article>
-    </Link>
+      </Link>
+      {description && <p className={styles.desc}>{description}</p>}
+      <div className={styles.meta}>
+        <AuthorList authors={authors} />
+        {authors && authors.length > 0 && <span className={styles.metaDash}> — </span>}
+        <time className={styles.date} dateTime={date}>{formatDate(date)}</time>
+      </div>
+    </article>
  );
 }

@ -83,41 +91,47 @@ function Pagination({metadata}) {
  if (!previousPage && !nextPage) return null;
  return (
    <nav className={styles.pagination} aria-label="Blog list pagination">
-      {previousPage ? (
-        <Link to={previousPage} className={styles.paginationLink}>&larr; Newer posts</Link>
-      ) : <span />}
-      {nextPage ? (
-        <Link to={nextPage} className={styles.paginationLink}>Older posts &rarr;</Link>
-      ) : <span />}
+      {previousPage ? <Link to={previousPage} className={styles.pageLink}>&larr; Newer posts</Link> : <span />}
+      {nextPage ? <Link to={nextPage} className={styles.pageLink}>Older posts &rarr;</Link> : <span />}
    </nav>
  );
 }

+// ── Page ──────────────────────────────────────────────────────────────────
 export default function BlogListPage(props) {
  const items = props.items || [];
  const metadata = props.metadata || {};
-  const [first, ...rest] = items;

  return (
    <Layout
-      title={metadata.blogTitle || 'Blog'}
-      description={metadata.blogDescription || 'Guides, announcements, and best practices from the LiteLLM team.'}
+      title="Engineering Blog"
+      description="How we build the world's most widely used open-source AI Gateway. Routing, reliability, observability, and what we learn along the way."
    >
-      <header className={styles.hero}>
-        <h1 className={styles.heroTitle}>The LiteLLM Blog</h1>
-        <p className={styles.heroSubtitle}>Guides, announcements, and best practices from the LiteLLM team.</p>
-      </header>
+      <div className={styles.page}>
+        {/* Hero */}
+        <header className={styles.hero}>
+          <p className={styles.eyebrow}>AI Gateway</p>
+          <h1 className={styles.heroTitle}>Engineering</h1>
+          <p className={styles.heroSub}>
+            How we build the world's most widely used open-source AI Gateway.
+            Routing, reliability, observability, and what we learn along the way.
+          </p>
+          <a href="https://jobs.ashbyhq.com/litellm" target="_blank" rel="noopener noreferrer" className={styles.hiringBtn}>
+            We're hiring!
+          </a>
+        </header>

-      <main className={styles.grid}>
-        {first && (
-          <BlogCard post={first.content.metadata} featured />
-        )}
-        {rest.map(({content}) => (
-          <BlogCard key={content.metadata.permalink} post={content.metadata} />
-        ))}
-      </main>
+        <ProviderMarquee />

-      <Pagination metadata={metadata} />
+        {/* Post list */}
+        <main className={styles.list}>
+          {items.map(({content}) => (
+            <PostRow key={content.metadata.permalink} post={content.metadata} />
+          ))}
+        </main>
+
+        <Pagination metadata={metadata} />
+      </div>
    </Layout>
  );
 }
--- a/docs/my-website/src/theme/BlogListPage/styles.module.css
+++ b/docs/my-website/src/theme/BlogListPage/styles.module.css
@ -1,163 +1,254 @@
-.hero {
-  max-width: 960px;
+/* ── Page shell ───────────────────────────────────────────────────────── */
+.page {
+  max-width: 860px;
  margin: 0 auto;
-  padding: 3rem 1.5rem 1rem;
-  text-align: center;
+  padding: 0 2rem;
+}
+
+/* ── Hero ─────────────────────────────────────────────────────────────── */
+.hero {
+  padding: 3.5rem 0 0;
+}
+
+.eyebrow {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #0ea5e9;
+  margin: 0 0 0.5rem;
 }

 .heroTitle {
-  font-size: 2.25rem;
-  font-weight: 700;
-  margin-bottom: 0.25rem;
-  letter-spacing: -0.02em;
-}
-
-.heroSubtitle {
-  color: var(--ifm-color-emphasis-600);
-  font-size: 1.1rem;
-  margin-bottom: 0;
-}
-
-.grid {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 1.5rem;
-  display: grid;
-  gap: 1rem;
-}
-
-.cardLink {
-  display: block;
-  text-decoration: none;
-  color: inherit;
-}
-
-.card {
-  position: relative;
-  border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 12px;
-  padding: 1.5rem;
-  padding-right: 2.5rem;
-  height: 100%;
-  transition: border-color 0.15s, transform 0.15s, background 0.15s;
-  background: var(--ifm-background-surface-color, var(--ifm-background-color));
-}
-
-.card:hover {
-  border-color: var(--ifm-color-primary);
-  transform: translateY(-2px);
-  background: var(--ifm-color-emphasis-100);
-}
-
-.cardFeatured {
-  composes: card;
-  border-color: var(--ifm-color-primary-lighter);
-  background: var(--ifm-color-emphasis-100);
-}
-
-.meta {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.time {
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: var(--ifm-color-emphasis-600);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.badge {
-  font-size: 0.65rem;
+  font-size: 2.75rem;
  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  padding: 2px 8px;
-  border-radius: 99px;
-  background: var(--ifm-color-primary);
-  color: #fff;
-}
-
-.title {
-  font-size: 1.15rem;
-  font-weight: 600;
-  margin: 0 0 0.4rem;
-  line-height: 1.35;
-}
-
-.desc {
-  font-size: 0.88rem;
-  color: var(--ifm-color-emphasis-700);
-  line-height: 1.5;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  color: #111827;
  margin: 0 0 0.75rem;
 }

-.tags {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
+.heroSub {
+  font-size: 0.95rem;
+  color: #6b7280;
+  max-width: 540px;
+  line-height: 1.65;
+  margin: 0 0 1.25rem;
 }

-.tag {
-  font-size: 0.7rem;
+.hiringBtn {
+  display: inline-block;
+  background: #111827;
+  color: #fff !important;
+  font-size: 0.82rem;
  font-weight: 500;
-  padding: 2px 10px;
-  border-radius: 99px;
-  background: var(--tag-bg);
-  color: var(--tag-text);
+  padding: 0.45rem 1rem;
+  border-radius: 6px;
+  text-decoration: none !important;
+  transition: background 0.15s;
 }

-:global([data-theme='dark']) .tag {
-  background: var(--tag-bg-dark);
-  color: var(--tag-text-dark);
+.hiringBtn:hover {
+  background: #000;
 }

-.arrow {
+/* ── Marquee ──────────────────────────────────────────────────────────── */
+.marqueeWrap {
+  margin: 2.5rem 0 0;
+  padding: 1.25rem 0;
+  border-top: 1px solid #f3f4f6;
+  border-bottom: 1px solid #f3f4f6;
+  overflow: hidden;
+}
+
+.marqueeLabel {
+  text-align: center;
+  font-size: 0.62rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: #9ca3af;
+  margin: 0 0 1rem;
+}
+
+.marqueeOuter {
+  position: relative;
+  overflow: hidden;
+}
+
+.fadeLeft {
+  pointer-events: none;
  position: absolute;
-  right: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--ifm-color-emphasis-400);
-  transition: color 0.15s, transform 0.15s;
+  left: 0; top: 0; bottom: 0;
+  width: 5rem;
+  background: linear-gradient(to right, var(--ifm-background-color, #fff), transparent);
+  z-index: 10;
 }

-.card:hover .arrow {
-  color: var(--ifm-color-primary);
-  transform: translateY(-50%) translateX(3px);
+.fadeRight {
+  pointer-events: none;
+  position: absolute;
+  right: 0; top: 0; bottom: 0;
+  width: 5rem;
+  background: linear-gradient(to left, var(--ifm-background-color, #fff), transparent);
+  z-index: 10;
 }

+.marqueeTrack {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  animation: marquee 28s linear infinite;
+}
+
+@keyframes marquee {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+
+.marqueeItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0 1.4rem;
+  font-size: 0.82rem;
+  color: #4b5563;
+  font-weight: 500;
+}
+
+.marqueeIcon {
+  flex-shrink: 0;
+  border-radius: 2px;
+}
+
+.marqueeSep {
+  margin-left: 1.2rem;
+  color: #e5e7eb;
+  font-weight: 300;
+}
+
+/* ── Post list ────────────────────────────────────────────────────────── */
+.list {
+  margin-top: 0.5rem;
+}
+
+.post {
+  padding: 2.25rem 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.titleLink {
+  text-decoration: none !important;
+  color: inherit;
+}
+
+.title {
+  font-size: 1.4rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: #111827;
+  margin: 0 0 0.5rem;
+  transition: color 0.12s;
+}
+
+.titleLink:hover .title {
+  color: #0ea5e9;
+}
+
+.desc {
+  font-size: 0.875rem;
+  color: #6b7280;
+  line-height: 1.55;
+  margin: 0 0 0.6rem;
+}
+
+.meta {
+  font-size: 0.82rem;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+}
+
+.authorLink {
+  color: #374151;
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: #d1d5db;
+}
+
+.authorLink:hover {
+  color: #0ea5e9;
+  text-decoration-color: #0ea5e9;
+}
+
+.authorName {
+  color: #374151;
+  font-weight: 500;
+}
+
+.authorSep {
+  margin: 0 0.3rem;
+  color: #d1d5db;
+}
+
+.metaDash {
+  margin: 0 0.35rem;
+  color: #d1d5db;
+}
+
+.date {
+  color: #9ca3af;
+}
+
+/* ── Pagination ───────────────────────────────────────────────────────── */
 .pagination {
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 1rem 1.5rem 3rem;
+  padding: 1.5rem 0 4rem;
  display: flex;
  justify-content: space-between;
 }

-.paginationLink {
-  font-size: 0.9rem;
+.pageLink {
+  font-size: 0.85rem;
  font-weight: 500;
-  color: var(--ifm-color-primary);
+  color: #374151;
  text-decoration: none;
 }

-.paginationLink:hover {
-  text-decoration: underline;
+.pageLink:hover {
+  color: #0ea5e9;
 }

-@media (min-width: 640px) {
-  .grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .grid .cardLink:first-child {
-    grid-column: 1 / -1;
-  }
-
-  .grid .cardLink:last-child:nth-child(even) {
-    grid-column: 1 / -1;
-  }
+/* ── Dark mode ────────────────────────────────────────────────────────── */
+[data-theme='dark'] .heroTitle,
+[data-theme='dark'] .title {
+  color: #f9fafb;
+}
+
+[data-theme='dark'] .heroSub,
+[data-theme='dark'] .desc,
+[data-theme='dark'] .date {
+  color: #9ca3af;
+}
+
+[data-theme='dark'] .post,
+[data-theme='dark'] .marqueeWrap {
+  border-color: #1f2937;
+}
+
+[data-theme='dark'] .authorLink,
+[data-theme='dark'] .authorName {
+  color: #e5e7eb;
+}
+
+[data-theme='dark'] .hiringBtn {
+  background: #f9fafb;
+  color: #111827 !important;
+}
+
+[data-theme='dark'] .hiringBtn:hover {
+  background: #fff;
 }
--- a/docs/my-website/src/theme/BlogPostPage/index.js
+++ b/docs/my-website/src/theme/BlogPostPage/index.js
@ -0,0 +1,40 @@
+import React, {useEffect} from 'react';
+import OriginalBlogPostPage from '@theme-original/BlogPostPage';
+import styles from './styles.module.css';
+
+function HiringCTA() {
+  return (
+    <div className={styles.ctaOuter}>
+      <div className={styles.cta}>
+        <p className={styles.ctaEyebrow}>We're hiring</p>
+        <a
+          href="https://jobs.ashbyhq.com/litellm"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={styles.ctaLink}
+        >
+          Like what you see? Join us
+          <svg className={styles.ctaArrow} fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+          </svg>
+        </a>
+        <p className={styles.ctaSub}>Come build the future of AI infrastructure.</p>
+      </div>
+    </div>
+  );
+}
+
+export default function BlogPostPage(props) {
+  // Add body class so CSS can hide the sidebar
+  useEffect(() => {
+    document.body.classList.add('blog-post-body');
+    return () => document.body.classList.remove('blog-post-body');
+  }, []);
+
+  return (
+    <>
+      <OriginalBlogPostPage {...props} />
+      <HiringCTA />
+    </>
+  );
+}
--- a/docs/my-website/src/theme/BlogPostPage/styles.module.css
+++ b/docs/my-website/src/theme/BlogPostPage/styles.module.css
@ -0,0 +1,68 @@
+.ctaOuter {
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 0 2rem 4rem;
+}
+
+.cta {
+  border-radius: 16px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  padding: 2.5rem 2rem;
+  text-align: center;
+}
+
+.ctaEyebrow {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #9ca3af;
+  margin: 0 0 0.75rem;
+}
+
+.ctaLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: #111827;
+  text-decoration: none !important;
+  transition: color 0.15s;
+}
+
+.ctaLink:hover {
+  color: #0ea5e9;
+}
+
+.ctaArrow {
+  width: 1.25rem;
+  height: 1.25rem;
+  transition: transform 0.15s;
+  flex-shrink: 0;
+}
+
+.ctaLink:hover .ctaArrow {
+  transform: translateX(3px);
+}
+
+.ctaSub {
+  margin: 0.75rem 0 0;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+[data-theme='dark'] .cta {
+  background: #1f2937;
+  border-color: #374151;
+}
+
+[data-theme='dark'] .ctaLink {
+  color: #f9fafb;
+}
+
+[data-theme='dark'] .ctaSub {
+  color: #9ca3af;
+}