+ {summary} +
+ { + metrics?.length ? ( +{label}
+{detail}
++ Article +
++ {post.data.description} +
++ Notes +
++ {siteConfig.blogLead} +
++ {count} {count === 1 ? "article" : "articles"} +
++ Get in touch +
++ {siteConfig.footerNote} +
+Internal reference
+
+ This page is not linked in the main nav (only in the footer). It documents patterns used across the site;
+ shared classes live in global.css (
+ page-stack, section-title,
+ surface-card, cta, btn-secondary,
+ link-quiet, …). Colors are tokens in
+ tailwind.config.mjs
+ (canvas, surface, border, ink, accent).
+
+ Route:
+ /design-playground
+
md:,
+ motion-safe:, etc.)
+ prose styles used in longform content (Blog).
+ client:load,
+ client:visible, …).
+ Display / hero
+Section title
+Lead paragraph
+Body default (17px on this site).
+Meta / captions
+Eyebrow label
++ Border + background shift on hover; motion-safe only so reduced-motion users are not disturbed. +
+
+ Parent group coordinates child color changes.
+
+ Lists inside Prose use the CTA accent for
+ bullets and numbers. Use distributed-markers on a list-disc ul
+ outside prose for the same marker color (e.g. resume). Tags and inline code share the
+ same CTA accent chip look (.chip).
+
+ Native details / summary for
+ FAQs or collapsible sections—accessible by default.
+
+ This is strong, an internal link, and inline code inside
+ the shared Prose wrapper.
+
+ For copy-to-clipboard, toggles, or small widgets, a short script in the page
+ is enough before reaching for React/Vue.
+
+ Portfolio +
++ {siteConfig.oneLiner} +
++ {siteConfig.summary} +
++ Projects + + {entry.id} +
+{entry.data.summary}
++ Case studies +
++ {siteConfig.selectedWorkLead} +
++ {count} published {count === 1 ? "case study" : "case studies"} +
++ Resume +
++ {siteConfig.oneLiner} +
++ {siteConfig.summary} +
+Open to
++ {siteConfig.footerNote} +
+