Molecules

PostCard

Reading-first blog card — category eyebrow, title, excerpt, and a quiet meta footer.

Preview

components/content/PostCard.jsx

Design Systems

Approaching Design Systems in a Scale-up

Most teams invest in a design system to improve UX. That's the wrong reason.

June 2023·8 min read

AI & Craft

Prompting is a design material

What changes when the surface you are shaping can talk back.

March 2026·6 min read

Reading-first and theme-aware — the same card works on the dark index and a paper-toned blog. Only the category eyebrow carries color.

Usage

src/components/ui/PostCard.tsx

tsx

import { PostCard } from "@/components/ui/PostCard";

<PostCard
  category="Design Systems"
  title="Approaching Design Systems in a Scale-up"
  excerpt="Most teams invest in a design system to improve UX. That's the wrong reason."
  date="June 2023"
  readingTime="8 min read"
  tone="editorial"
  onClick={() => router.push(post.href)}
/>

API

props

Prop	Type	Default	Description
title	string	—	The headline — the card's only mandatory content.
excerpt	string	—	One-or-two-line teaser under the title.
category	string	—	Uppercase eyebrow above the title, tinted by tone.
date / readingTime	string / string	—	Quiet meta footer, joined with a middle dot.
cover	string	—	Image URL or CSS background for a media-topped card. Omit for a typographic card.
tone	"editorial" \| "content" \| "craft" \| "neutral"	"editorial"	Which domain signal tints the category eyebrow.
onClick	(e) => void	—	Makes the whole card interactive.

Tokens consumed

semantic only

--signal-editorial--signal-content--signal-craft--color-bg-elevated--color-bg-panel--color-border--color-border-hover--color-fg--color-fg-muted--color-fg-subtle--radius-lg--shadow-card-hover--transition-hover