Direction C: IBM Plex + warm sand + orange. All tokens and utility classes.
Color tokens
Primary / Orange
#E8590C
Background
#FAFAFA
Secondary / Sand
#F5F4F0
Foreground
#09090B
Muted
#737373
Border
#E8E8E8
Success
#16A34A
Accent
#FFF7ED
Typography
Heading 1 — IBM Plex Sans Bold
Heading 2
Heading 3
Body text — regular weight, muted foreground for secondary content.
IBM Plex Mono — labels, tags, badges
ButtonsBadges
Default
Outline
🏆 1st Placeliveendedupcoming
.wv-* utilities
wv-label — section identifier
wv-tagNext.jsReact
Inactive chipActive chip
Article & longform (blog template)
What we document vs. what stays in the blog route
Included below — reusable layout and content primitives: section heading, meta strip, grouped TOC, quote/stat/insight/pattern cards, glossary term tooltip, and the project case-study card.
Not isolated here — ArticleBlocks and ArticleSectionBody (they map JSON shapes from blog-data). Inspect /blog/[slug] for full composition.
Tooling rows — the stacked name/description list inside a card uses the same Badge outline + border pattern as the blog; no extra variant was added.
ArticleSectionHeading
Optional label
Section title with accent rule
ArticleMeta
March 22, 2026·12 min read·7 projects
Vibe CodingHackathonsAI Tools
ArticleTableOfContents
ArticleQuoteCard
“
A short quotable line from an interview or article.
— Source name
ArticleStatGrid
$700K+
Metric A
3M+
Metric B
18K+
Metric C
13K
Metric D
ArticleInsightCard
Insight
Insight title
Supporting copy for a key takeaway or editorial note.
ArticlePatternCard
Pattern 1
Pattern headline
Body text explaining the pattern.
TermTooltip (with TooltipProvider)
Karpathy called it — hover or focus the term.
BlogProjectCard
🏆 1ST
Sample project
One-line pitch for the styleguide
example.com
Event & prize
Example Hackathon 2026 — Demo prize
Stack
Next.js + Tailwind
Why it won
Illustrates the project card layout.
Pull quote: what judges remembered after the demo.