I designed and coded this site from scratch.
Stack — Next.js · Tailwind · shadcn/ui · Vercel
Workflow — Figma → v0 → GitHub → Claude Code
Status — Actively iterating and shipping in the codebase with Claude Code.
Heading 1 - Manrope 48px/600
Heading 2 - Manrope 42px/600
Heading 3 - Manrope 30px/600
Heading 4 - Manrope 24px/600
Heading 5 - Manrope 20px/600
Body 1 - Geist 18px/400 - The quick brown fox jumps over the lazy dog.
Body 2 - Geist 16px/400 - The quick brown fox jumps over the lazy dog.
Body 3 - Geist 14px/400 - The quick brown fox jumps over the lazy dog.
01 - IBM Plex Mono 24px/400 - Case study index
02 - IBM Plex Mono 16px/400 - Next card index
IBM Plex Mono 14px/400 - Component and section labels
IBM Plex Mono 12px/400 - Tags
Quote - Manrope 22px/300 - Pull quotes and testimonials.
47% - Manrope 48px/300
Metric Large — .text-metric-lg, Outcomes grid
47% - Manrope 42px/400
Metric Summary — .text-h2 font-normal!, impact row at the top of a case study
Below 768px — Heading 1 36px · Heading 2 32px · Heading 3 24px · Heading 4 20px · Metric Large 36px. Metric Summary follows Heading 2 down to 32px. Heading 5, body, mono, and quote are unchanged.
Pill Variants (Portfolio)
Pill Sizes
Standard Variants (shadcn)
Live examples of all components used in case study pages.
SectionBlock
FeatureBlock
The quick brown fox jumps over the lazy dog. Jumps over the lazy dog the quick brown fox.
SolutionBlock
The quick brown fox jumps over the lazy dog. Jumps over the lazy dog the quick brown fox.
The quick brown fox jumps over the lazy dog. Over the lazy dog the quick brown fox jumps.
The lazy dog watches the quick brown fox. The quick brown fox jumps over the lazy dog.
OutcomesBlock
The quick brown fox jumps over the lazy dog. Jumps over the lazy dog the quick brown fox. Over the lazy dog the quick brown fox jumps.
“The quick brown fox jumps over the lazy dog.”
Callout
“The quick brown fox jumps over the lazy dog.”
MetricRow