Molecules

PullQuote

Editorial excerpt with the 3px accent rule — large light quote and a quiet source.

Preview

components/content/PullQuote.jsx

Design leads hiring specialist designers for design systems, building it for the sake of having one, without engineering alignment.

design-system audit, 2026

The rule reads the active --accent, so it follows the domain stream. One pull quote per screenful at most — it earns its size by being rare.

Usage

src/components/ui/PullQuote.tsx

tsx

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

<PullQuote source="design-system audit, 2026">
  Building it for the sake of having one, without engineering alignment.
</PullQuote>

API

props

Prop	Type	Default	Description
children	ReactNode	—	The quote itself — large, Inter light.
source	ReactNode	—	Quiet attribution line under the quote.

Tokens consumed

semantic only

--accent--border-accent--color-fg--color-fg-subtle--font-sans--weight-light