FeaturedDesign systems
The anatomy of an AI-native interface
Prompt bars replaced search boxes. Streaming replaced spinners. Here's the new grammar of product design.
AKRead →
Ayush Kumar
Jul 7, 2026 · 8 min read
Featured article heroes, post grids with hover zoom, author cards, a trending list and newsletter capture — editorial components with magazine-level polish.
Featured Article Hero
Prompt bars replaced search boxes. Streaming replaced spinners. Here's the new grammar of product design.
Ayush Kumar
Jul 7, 2026 · 8 min read
A full-width cover with gradient scrim, category tag, headline and author strip — the front-page lead.
| 1 | <article "color:#79c0ff">className="group relative flex min-h-[380px] cursor-pointer flex-col justify-end overflow-hidden rounded-3xl"> |
| 2 | {/* cover */} |
| 3 | <div "color:#79c0ff">className="absolute inset-0 bg-gradient-to-br from-fuchsia-600 via-violet-700 to-indigo-900 transition-transform duration-700 group-hover:scale-105" /> |
| 4 | {/* scrim */} |
| 5 | <div "color:#79c0ff">className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent" /> |
| 6 | |
| 7 | <div "color:#79c0ff">className="relative p-7 sm:p-9"> |
| 8 | <div "color:#79c0ff">className="flex items-center gap-2.5"> |
| 9 | <span "color:#79c0ff">className="rounded-full bg-white/15 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-white backdrop-blur">Featured</span> |
| 10 | <span "color:#79c0ff">className="rounded-full bg-violet-500/40 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-white backdrop-blur">Design systems</span> |
| 11 | </div> |
| 12 | <h2 "color:#79c0ff">className="mt-4 max-w-2xl text-3xl font-extrabold leading-tight text-white sm:text-4xl"> |
| 13 | The anatomy of an AI-native interface |
| 14 | </h2> |
| 15 | <p "color:#79c0ff">className="mt-2 max-w-xl text-sm text-white/60"> |
| 16 | Prompt bars replaced search boxes. Streaming replaced spinners. Here's the new grammar of product design. |
| 17 | </p> |
| 18 | <div "color:#79c0ff">className="mt-5 flex items-center gap-3"> |
| 19 | <span "color:#79c0ff">className="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-cyan-400 to-blue-600 text-[10px] font-black text-white ring-2 ring-white/20">AK</span> |
| 20 | <div "color:#79c0ff">className="text-xs"> |
| 21 | <p "color:#79c0ff">className="font-bold text-white">Ayush Kumar</p> |
| 22 | <p "color:#79c0ff">className="text-white/45">Jul 7, 2026 · 8 min read</p> |
| 23 | </div> |
| 24 | <span "color:#79c0ff">className="ml-auto text-sm font-bold text-white/70 transition-transform group-hover:translate-x-1">Read →</span> |
| 25 | </div> |
| 26 | </div> |
| 27 | </article> |
Post Card Grid
Jul 2026 · 5 min read
Jul 2026 · 4 min read
Jul 2026 · 9 min read
Three-up article cards with cover zoom, category chips and reading-time meta.
| 1 | const posts = [ |
| 2 | { tag: "Tutorial", title: "Build a spotlight card in 40 lines", time: "5 min", g: "from-violet-600 to-indigo-700" }, |
| 3 | { tag: "Opinion", title: "Dark mode isn't a feature anymore", time: "4 min", g: "from-cyan-500 to-blue-700" }, |
| 4 | { tag: "Deep dive", title: "How we cut CLS to zero on 120 pages", time: "9 min", g: "from-rose-500 to-pink-700" }, |
| 5 | ]; |
| 6 | |
| 7 | <div "color:#79c0ff">className="grid gap-5 md:grid-cols-3"> |
| 8 | {posts.map((p) => ( |
| 9 | <article "color:#79c0ff">key={p.title} "color:#79c0ff">className="group cursor-pointer overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] transition-all hover:-translate-y-1 hover:border-white/25 hover:shadow-2xl"> |
| 10 | <div "color:#79c0ff">className="relative h-36 overflow-hidden"> |
| 11 | <div "color:#79c0ff">className={"absolute inset-0 bg-gradient-to-br transition-transform duration-500 group-hover:scale-110 " + p.g} /> |
| 12 | <span "color:#79c0ff">className="absolute left-3 top-3 rounded-full bg-black/45 px-2.5 py-1 text-[9px] font-bold uppercase tracking-wider text-white backdrop-blur"> |
| 13 | {p.tag} |
| 14 | </span> |
| 15 | </div> |
| 16 | <div "color:#79c0ff">className="p-5"> |
| 17 | <h3 "color:#79c0ff">className="text-base font-bold leading-snug text-white decoration-violet-400 underline-offset-4 group-hover:underline"> |
| 18 | {p.title} |
| 19 | </h3> |
| 20 | <p "color:#79c0ff">className="mt-2.5 text-[11px] text-white/35">Jul 2026 · {p.time} read</p> |
| 21 | </div> |
| 22 | </article> |
| 23 | ))} |
| 24 | </div> |
Author Bio Card
Byline card with gradient ring avatar, social links and a follow action — drop it under any article.
| 1 | <div "color:#79c0ff">className="flex w-full max-w-md items-start gap-4 rounded-3xl border border-white/10 bg-white/[0.03] p-6"> |
| 2 | <div "color:#79c0ff">className="shrink-0 rounded-full bg-gradient-to-tr from-violet-500 via-fuchsia-500 to-cyan-400 p-[2.5px]"> |
| 3 | <div "color:#79c0ff">className="rounded-full bg-[#0b0b16] p-[3px]"> |
| 4 | <span "color:#79c0ff">className="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 text-sm font-black text-white">AK</span> |
| 5 | </div> |
| 6 | </div> |
| 7 | <div "color:#79c0ff">className="min-w-0 flex-1"> |
| 8 | <div "color:#79c0ff">className="flex items-center justify-between gap-3"> |
| 9 | <div> |
| 10 | <p "color:#79c0ff">className="text-sm font-extrabold text-white">Ayush Kumar</p> |
| 11 | <p "color:#79c0ff">className="text-xs text-white/40">Design engineer · 42 articles</p> |
| 12 | </div> |
| 13 | <button "color:#79c0ff">className="rounded-lg bg-white px-3.5 py-1.5 text-xs font-bold text-slate-900 hover:bg-slate-100"> |
| 14 | Follow |
| 15 | </button> |
| 16 | </div> |
| 17 | <p "color:#79c0ff">className="mt-2.5 text-xs leading-relaxed text-white/50"> |
| 18 | Writing about design systems, AI interfaces and the space between design and code. |
| 19 | </p> |
| 20 | <div "color:#79c0ff">className="mt-3 flex gap-3 text-white/35"> |
| 21 | <a "color:#79c0ff">href="#" "color:#79c0ff">className="hover:text-white">𝕏</a> |
| 22 | <a "color:#79c0ff">href="#" "color:#79c0ff">className="hover:text-white">GitHub</a> |
| 23 | <a "color:#79c0ff">href="#" "color:#79c0ff">className="hover:text-white">RSS</a> |
| 24 | </div> |
| 25 | </div> |
| 26 | </div> |
Trending List
Oversized outline numerals with titles and view counts — the sidebar classic, modernized.
| 1 | const trending = [ |
| 2 | { title: "Stop using divs for buttons", views: "48k" }, |
| 3 | { title: "The 8pt grid is dead, long live 4pt", views: "31k" }, |
| 4 | { title: "CSS :has() changed how I write components", views: "27k" }, |
| 5 | { title: "Glassmorphism, but make it accessible", views: "19k" }, |
| 6 | ]; |
| 7 | |
| 8 | <div "color:#79c0ff">className="w-full max-w-sm space-y-1"> |
| 9 | <p "color:#79c0ff">className="pb-2 text-xs font-bold uppercase tracking-widest text-white/30">🔥 Trending this week</p> |
| 10 | {trending.map((t, i) => ( |
| 11 | <a "color:#79c0ff">key={t.title} "color:#79c0ff">href="#" |
| 12 | "color:#79c0ff">className="group flex items-center gap-4 rounded-2xl p-3 transition hover:bg-white/[0.05]"> |
| 13 | <span "color:#79c0ff">className="w-10 text-3xl font-black leading-none text-transparent" |
| 14 | "color:#79c0ff">style={{ WebkitTextStroke: "1.5px rgba(167,139,250,0.5)" }}> |
| 15 | {String(i + 1).padStart(2, "0")} |
| 16 | </span> |
| 17 | <div "color:#79c0ff">className="min-w-0 flex-1"> |
| 18 | <p "color:#79c0ff">className="truncate text-sm font-semibold text-white/85 group-hover:text-white">{t.title}</p> |
| 19 | <p "color:#79c0ff">className="text-[10px] text-white/30">{t.views} views</p> |
| 20 | </div> |
| 21 | <span "color:#79c0ff">className="text-white/20 transition-transform group-hover:translate-x-1 group-hover:text-violet-300">→</span> |
| 22 | </a> |
| 23 | ))} |
| 24 | </div> |
Newsletter Section
Fresh UI patterns, code included. Read by 8,000+ designers and engineers.
Joined this week: 214
Split newsletter block — pitch and social proof left, glowing email capture right.
| 1 | <section "color:#79c0ff">className="grid w-full items-center gap-8 overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-violet-950/60 to-[#0b0b16] p-8 sm:p-10 lg:grid-cols-2"> |
| 2 | <div> |
| 3 | <span "color:#79c0ff">className="rounded-full bg-violet-500/15 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-violet-300 ring-1 ring-inset ring-violet-400/25"> |
| 4 | The Drop — weekly |
| 5 | </span> |
| 6 | <h2 "color:#79c0ff">className="mt-4 text-2xl font-extrabold tracking-tight text-white sm:text-3xl"> |
| 7 | One email. Five components. Every Friday. |
| 8 | </h2> |
| 9 | <p "color:#79c0ff">className="mt-2 text-sm leading-relaxed text-white/45"> |
| 10 | Fresh UI patterns, code included. Read by 8,000+ designers and engineers. |
| 11 | </p> |
| 12 | <div "color:#79c0ff">className="mt-4 flex items-center gap-2.5"> |
| 13 | <div "color:#79c0ff">className="flex -space-x-2"> |
| 14 | {["from-violet-500 to-indigo-600", "from-cyan-500 to-blue-600", "from-rose-500 to-pink-600"].map((g, i) => ( |
| 15 | <span "color:#79c0ff">key={i} "color:#79c0ff">className={"h-6 w-6 rounded-full bg-gradient-to-br ring-2 ring-[#0b0b16] " + g} /> |
| 16 | ))} |
| 17 | </div> |
| 18 | <p "color:#79c0ff">className="text-[11px] text-white/35">Joined this week: <b "color:#79c0ff">className="text-white/70">214</b></p> |
| 19 | </div> |
| 20 | </div> |
| 21 | |
| 22 | <form "color:#79c0ff">className="flex flex-col gap-2.5 sm:flex-row"> |
| 23 | <input "color:#79c0ff">type="email" "color:#79c0ff">placeholder="you@company.com" |
| 24 | "color:#79c0ff">className="h-12 min-w-0 flex-1 rounded-2xl border border-white/12 bg-white/[0.05] px-4 text-sm text-white placeholder-white/30 outline-none backdrop-blur transition focus:border-violet-400/60 focus:shadow-[0_0_32px_rgba(139,92,246,0.25)]" /> |
| 25 | <button "color:#79c0ff">className="h-12 shrink-0 rounded-2xl bg-gradient-to-r from-violet-600 to-indigo-600 px-6 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition hover:shadow-violet-500/50"> |
| 26 | Subscribe free |
| 27 | </button> |
| 28 | </form> |
| 29 | </section> |