diff --git a/images/icons/code.svg b/images/icons/code.svg
new file mode 100644
index 000000000..ea83092ed
--- /dev/null
+++ b/images/icons/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8.7 15.9 4.8 12l3.9-3.9c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0l-4.59 4.59c-.39.39-.39 1.02 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0 .39-.39.39-1.01 0-1.4zm6.6 0 3.9-3.9-3.9-3.9a.9839.9839 0 0 1 0-1.4c.39-.39 1.01-.39 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6c-.39.39-1.01.39-1.4 0a.9839.9839 0 0 1 0-1.4z"></path></svg>
\ No newline at end of file
diff --git a/plop-templates/pattern-library-page.hbs b/plop-templates/pattern-library-page.hbs
index 6265ce7c6..441fdbeef 100644
--- a/plop-templates/pattern-library-page.hbs
+++ b/plop-templates/pattern-library-page.hbs
@@ -9,7 +9,7 @@ export default function {{name}}Page() {
         intro={<p><code>{{name}}</code> is a {{category}} component</p>}
       >
 
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="{{name}}" />
           <Library.Example>
             <Library.Demo withSource>
diff --git a/src/components/icons/Code.tsx b/src/components/icons/Code.tsx
new file mode 100644
index 000000000..d42037d5d
--- /dev/null
+++ b/src/components/icons/Code.tsx
@@ -0,0 +1,23 @@
+// This file was auto-generated using scripts/generate-icons.js
+import type { JSX } from 'preact';
+
+export type CodeIconProps = JSX.SVGAttributes<SVGSVGElement>;
+
+/**
+ * Icon generated from code.svg
+ */
+export default function CodeIcon(props: CodeIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      data-component="CodeIcon"
+      {...props}
+    >
+      <path d="M8.7 15.9 4.8 12l3.9-3.9a.984.984 0 0 0 0-1.4.984.984 0 0 0-1.4 0l-4.59 4.59a.996.996 0 0 0 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0a.984.984 0 0 0 0-1.4zm6.6 0 3.9-3.9-3.9-3.9a.984.984 0 0 1 0-1.4.984.984 0 0 1 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6a.984.984 0 0 1-1.4 0 .984.984 0 0 1 0-1.4z" />
+    </svg>
+  );
+}
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 818fc6607..366b4c998 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -21,6 +21,7 @@ export { default as CheckIcon } from './Check';
 export { default as CheckboxIcon } from './Checkbox';
 export { default as CheckboxCheckedIcon } from './CheckboxChecked';
 export { default as CheckboxOutlineIcon } from './CheckboxOutline';
+export { default as CodeIcon } from './Code';
 export { default as CollapseIcon } from './Collapse';
 export { default as ContrastIcon } from './Contrast';
 export { default as CopyIcon } from './Copy';
diff --git a/src/pattern-library/components/Library.tsx b/src/pattern-library/components/Library.tsx
index 9d5320eb5..e697089e6 100644
--- a/src/pattern-library/components/Library.tsx
+++ b/src/pattern-library/components/Library.tsx
@@ -4,7 +4,7 @@ import type { ComponentChildren, JSX } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 import { Link as RouteLink } from 'wouter-preact';
 
-import { Link as UILink, Scroll, ScrollContainer } from '../../';
+import { CodeIcon, Link as UILink, Scroll, ScrollContainer } from '../../';
 import { jsxToHTML } from '../util/jsx-to-string';
 
 /**
@@ -17,7 +17,7 @@ import { jsxToHTML } from '../util/jsx-to-string';
  *   <p>Any content you want on the page.</p>
  *
  *   <Library.Section title="ComponentName">
- *     <Library.Pattern title="Usage">
+ *     <Library.Pattern>
  *       <p>The `Elephant` component is used to render information about elephant
  *       personalities.</p>
  *       <Library.Example title="Colored elephants">
@@ -48,19 +48,22 @@ export type LibraryPageProps = {
  */
 function Page({ children, intro, title }: LibraryPageProps) {
   return (
-    <section className="max-w-6xl pb-16 space-y-8 text-slate-7">
+    <section className="max-w-6xl styled-text text-stone-600">
       <div
-        className="sticky top-0 z-4 h-16 flex items-center bg-slate-0 border-b"
+        className="sticky top-0 z-4 h-16 flex items-center bg-stone-100 border-b"
         id="page-header"
       >
-        <h1 className="px-4 text-4xl font-light">{title}</h1>
+        <h1 className="px-2 text-3xl text-slate-700 font-light">{title}</h1>
+      </div>
+
+      <div className="px-2 mt-8">
+        {intro && (
+          <div className="my-8 pb-8 border-b space-y-4 font-light text-xl leading-relaxed ">
+            {intro}
+          </div>
+        )}
+        {children}
       </div>
-      {intro && (
-        <div className="styled-text px-4 text-xl font-light space-y-4 leading-relaxed">
-          {intro}
-        </div>
-      )}
-      <div className="px-4 space-y-16 styled-text">{children}</div>
     </section>
   );
 }
@@ -78,16 +81,14 @@ export type LibrarySectionProps = {
  */
 function Section({ children, id, intro, title }: LibrarySectionProps) {
   return (
-    <section className="my-16 space-y-8">
-      <h2 className="text-3xl font-bold" id={id}>
+    <section className="mt-8 mb-16">
+      <h2 className="text-3xl text-slate-600 font-bold " id={id}>
         {title}
       </h2>
       {intro && (
-        <div className="styled-text text-base space-y-3 leading-relaxed">
-          {intro}
-        </div>
+        <div className="text-base space-y-3 leading-relaxed">{intro}</div>
       )}
-      <div className="space-y-16 styled-text">{children}</div>
+      <div className="leading-relaxed">{children}</div>
     </section>
   );
 }
@@ -95,7 +96,7 @@ function Section({ children, id, intro, title }: LibrarySectionProps) {
 export type LibraryPatternProps = {
   children?: ComponentChildren;
   id?: string;
-  title: string;
+  title?: string;
 };
 
 /**
@@ -103,11 +104,13 @@ export type LibraryPatternProps = {
  */
 function Pattern({ children, id, title }: LibraryPatternProps) {
   return (
-    <section className="space-y-8">
-      <h3 className="text-2xl text-slate-7" id={id}>
-        {title}
-      </h3>
-      <div className="space-y-8 px-4">{children}</div>
+    <section className="mt-8 mb-12">
+      {title && (
+        <h3 className="text-2xl text-slate-600 font-medium" id={id}>
+          {title}
+        </h3>
+      )}
+      <div className="space-y-8">{children}</div>
     </section>
   );
 }
@@ -124,43 +127,20 @@ export type LibraryExampleProps = {
  */
 function Example({ children, id, title }: LibraryExampleProps) {
   return (
-    <div className="space-y-6">
+    <div className="mt-6">
       {title && (
-        <h4 className="text-xl text-slate-9 font-light" id={id}>
+        <h4
+          className="border-b border-stone-300 text-lg text-slate-600 font-normal"
+          id={id}
+        >
           {title}
         </h4>
       )}
-      <div className="space-y-6 px-4">{children}</div>
+      <div className="px-4">{children}</div>
     </div>
   );
 }
 
-type DemoButtonProps = {
-  children: ComponentChildren;
-  onClick: () => void;
-  pressed: boolean;
-};
-/**
- * Render a button to swap between demo and source views in a Demo
- */
-function DemoButton({ children, onClick, pressed }: DemoButtonProps) {
-  return (
-    <button
-      className={classnames(
-        'flex items-center gap-x-1.5 rounded-sm shadow py-1 px-2',
-        'text-sm text-color-text-light hover:bg-grey-0 hover:text-grey-7 hover:shadow-md',
-        {
-          'bg-grey-2': pressed,
-        }
-      )}
-      onClick={onClick}
-      aria-pressed={pressed}
-    >
-      {children}
-    </button>
-  );
-}
-
 export type LibraryDemoProps = {
   children: ComponentChildren;
   /** Extra CSS classes for the demo content's immediate parent container */
@@ -202,33 +182,45 @@ function Demo({
     );
   });
   return (
-    <div className="space-y-2">
-      <div className="flex items-center">
-        <div className="py-2 grow">
-          <h5 className="text-lg italic text-slate-7 font-light">{title}</h5>
+    <div className="my-8 p-2 space-y-1">
+      <div className="flex items-center px-2">
+        <div className="py-1 grow">
+          <h5 className="text-base text-base leading-none font-semibold text-slate-600">
+            {title}
+          </h5>
         </div>
         <div className="flex flex-row items-center justify-end gap-x-4">
           {withSource && (
-            <>
-              <DemoButton
-                onClick={() => setVisibleTab('demo')}
-                pressed={visibleTab === 'demo'}
-              >
-                Demo
-              </DemoButton>
-              <DemoButton
-                onClick={() => setVisibleTab('source')}
-                pressed={visibleTab === 'source'}
-              >
-                Source
-              </DemoButton>
-            </>
+            <button
+              className={classnames(
+                'flex items-center gap-x-1.5 py-1 px-2 rounded-md',
+                'text-sm text-slate-500',
+                'hover:bg-slate-50 border hover:border-slate-300',
+                {
+                  'bg-slate-100 border border-slate-400 shadow-inner':
+                    visibleTab === 'source',
+                  'border-slate-100 shadow': visibleTab !== 'source',
+                }
+              )}
+              aria-pressed={visibleTab === 'source'}
+              onClick={() =>
+                setVisibleTab(prevState =>
+                  prevState === 'source' ? 'demo' : 'source'
+                )
+              }
+              title="Toggle view-source panel"
+            >
+              <CodeIcon className="w-[18px] h-[18px]" />
+            </button>
           )}
         </div>
       </div>
-      <div className="bg-slate-0 p-2 rounded-md unstyled-text">
+      <div className="p-2 unstyled-text">
         {visibleTab === 'demo' && (
-          <div className="w-full bg-white p-8 rounded-md" style={style}>
+          <div
+            className="w-full p-8 rounded-md border border-stone-300 bg-slate-50 rounded-md"
+            style={style}
+          >
             <div
               className={classnames(
                 'h-full flex flex-row items-center justify-center gap-2',
@@ -310,7 +302,7 @@ export type LibraryCodeProps = {
   /** Controls relative code font size */
   size?: 'sm' | 'md' | 'lg';
   /** Caption (e.g. filename, description) of code block */
-  title?: string;
+  title?: ComponentChildren;
 };
 
 /**
@@ -323,7 +315,7 @@ function Code({ content, size, title }: LibraryCodeProps) {
   const codeMarkup = useMemo(() => jsxToHTML(content), [content]);
 
   return (
-    <figure className="space-y-2 min-h-0 h-full">
+    <figure className="space-y-2 min-h-0 h-full my-8">
       <ScrollContainer borderless>
         <div
           className={classnames(
diff --git a/src/pattern-library/components/PlaygroundApp.tsx b/src/pattern-library/components/PlaygroundApp.tsx
index 772bdc3bb..39b09ee4f 100644
--- a/src/pattern-library/components/PlaygroundApp.tsx
+++ b/src/pattern-library/components/PlaygroundApp.tsx
@@ -20,7 +20,11 @@ import Library from './Library';
  * Header for a primary section of nav
  */
 function NavHeader({ children }: { children: ComponentChildren }) {
-  return <h2 className="border-b px-2 py-1 font-light text-lg">{children}</h2>;
+  return (
+    <h2 className="text-slate-800 border-b border-stone-300 px-2 py-1 font-light text-lg">
+      {children}
+    </h2>
+  );
 }
 
 /**
@@ -35,7 +39,7 @@ function NavSection({
 }) {
   return (
     <div className="space-y-4">
-      <h3 className="mx-2 text-slate-7 font-semibold text-sm">{title}</h3>
+      <h3 className="mx-2 text-slate-700 font-semibold text-sm">{title}</h3>
       {children}
     </div>
   );
@@ -46,7 +50,7 @@ function NavSection({
  */
 function NavList({ children }: { children: ComponentChildren }) {
   return (
-    <ul className="ml-2 space-y-2 border-l-2 border-slate-0">{children}</ul>
+    <ul className="ml-2 space-y-2 border-l-2 border-stone-200">{children}</ul>
   );
 }
 
@@ -158,7 +162,7 @@ export default function PlaygroundApp({
   >;
   return (
     <Router base={baseURL}>
-      <main className="max-w-[1200px] mx-auto">
+      <main className="max-w-[1250px] mx-auto">
         <div className="md:grid md:grid-cols-[2fr_5fr]">
           <div className="md:h-screen md:sticky md:top-0 overflow-scroll">
             <div className="md:sticky md:top-0 h-16 px-6 flex items-center bg-slate-0 border-b">
diff --git a/src/pattern-library/components/patterns/ColorsPage.tsx b/src/pattern-library/components/patterns/ColorsPage.tsx
index 4502b01a6..3d6f30fbb 100644
--- a/src/pattern-library/components/patterns/ColorsPage.tsx
+++ b/src/pattern-library/components/patterns/ColorsPage.tsx
@@ -71,11 +71,13 @@ export default function ColorsPage() {
   return (
     <Library.Page title="Colors">
       <Library.Pattern title="Brand red">
-        <div className="flex flex-row flex-wrap gap-4">{brandExamples}</div>
+        <div className="my-4 flex flex-row flex-wrap gap-4">
+          {brandExamples}
+        </div>
       </Library.Pattern>
 
       <Library.Pattern title="Greys">
-        <div className="flex flex-row flex-wrap gap-4">{greyExamples}</div>
+        <div className="my-4 flex flex-row flex-wrap gap-4">{greyExamples}</div>
       </Library.Pattern>
 
       <Library.Pattern title="Slates">
@@ -83,15 +85,21 @@ export default function ColorsPage() {
           These slightly blue greys may be used sparingly to help with
           differentiation and clarity within interfaces.
         </p>
-        <div className="flex flex-row flex-wrap gap-4">{slateExamples}</div>
+        <div className="my-4 flex flex-row flex-wrap gap-4">
+          {slateExamples}
+        </div>
       </Library.Pattern>
 
       <Library.Pattern title="State indicators">
-        <div className="flex flex-row flex-wrap gap-4">{stateExamples}</div>
+        <div className="my-4 flex flex-row flex-wrap gap-4">
+          {stateExamples}
+        </div>
       </Library.Pattern>
 
       <Library.Pattern title="Focus indicators">
-        <div className="flex flex-row flex-wrap gap-4">{focusExamples}</div>
+        <div className="my-4 flex flex-row flex-wrap gap-4">
+          {focusExamples}
+        </div>
       </Library.Pattern>
     </Library.Page>
   );
diff --git a/src/pattern-library/components/patterns/data/AspectRatioPage.tsx b/src/pattern-library/components/patterns/data/AspectRatioPage.tsx
index 404fd0c98..e7caa57a0 100644
--- a/src/pattern-library/components/patterns/data/AspectRatioPage.tsx
+++ b/src/pattern-library/components/patterns/data/AspectRatioPage.tsx
@@ -13,7 +13,7 @@ export default function AspectRatioPage() {
       }
     >
       <Library.Section title="AspectRatio">
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="AspectRatio" />
           <Library.Example>
             <Library.Demo
diff --git a/src/pattern-library/components/patterns/data/DataTablePage.tsx b/src/pattern-library/components/patterns/data/DataTablePage.tsx
index ca0084217..2f40bf1fc 100644
--- a/src/pattern-library/components/patterns/data/DataTablePage.tsx
+++ b/src/pattern-library/components/patterns/data/DataTablePage.tsx
@@ -31,7 +31,7 @@ export default function DataTablePage() {
       }
     >
       <Library.Section title="DataTable">
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="DataTable" />
 
           <Library.Example title="Basic DataTable">
diff --git a/src/pattern-library/components/patterns/data/IconsPage.tsx b/src/pattern-library/components/patterns/data/IconsPage.tsx
index 5975f9c71..7266d812f 100644
--- a/src/pattern-library/components/patterns/data/IconsPage.tsx
+++ b/src/pattern-library/components/patterns/data/IconsPage.tsx
@@ -11,7 +11,7 @@ export default function IconsPage() {
       }
     >
       <Library.Section title="Icon components">
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="CancelIcon" />
           <Library.Example>
             <Library.Demo title="Usage example with CancelIcon" withSource>
@@ -21,7 +21,7 @@ export default function IconsPage() {
         </Library.Pattern>
 
         <Library.Pattern title="Available icon components">
-          <div className="grid grid-cols-4 gap-6">
+          <div className="my-4 grid grid-cols-4 gap-6">
             {(Object.keys(Icons) as Array<keyof typeof Icons>).map(iconName => {
               const IconComponent = Icons[iconName];
               return (
diff --git a/src/pattern-library/components/patterns/data/ScrollBoxPage.tsx b/src/pattern-library/components/patterns/data/ScrollBoxPage.tsx
index dc18543c9..f04b9c0cd 100644
--- a/src/pattern-library/components/patterns/data/ScrollBoxPage.tsx
+++ b/src/pattern-library/components/patterns/data/ScrollBoxPage.tsx
@@ -28,7 +28,7 @@ export default function ScrollBoxPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="ScrollBox" />
           <Library.Example title="Basic ScrollBox">
             <Library.Demo withSource>
@@ -110,7 +110,7 @@ export default function ScrollBoxPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Scroll" />
           <Library.Example>
             <Library.Demo title="Using Scroll by itself" withSource>
@@ -166,7 +166,7 @@ export default function ScrollBoxPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="ScrollContent" />
           <Library.Example>
             <Library.Demo title="Scroll with ScrollContent" withSource>
@@ -201,7 +201,7 @@ export default function ScrollBoxPage() {
           </>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="ScrollContainer" />
 
           <Library.Example>
diff --git a/src/pattern-library/components/patterns/data/TablePage.tsx b/src/pattern-library/components/patterns/data/TablePage.tsx
index c6b5b6836..44d282fe9 100644
--- a/src/pattern-library/components/patterns/data/TablePage.tsx
+++ b/src/pattern-library/components/patterns/data/TablePage.tsx
@@ -21,7 +21,7 @@ export default function TablePage() {
       }
     >
       <Library.Section title="Table">
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage
             componentName="Table, TableHead, TableBody, TableRow, TableCell"
             size="sm"
diff --git a/src/pattern-library/components/patterns/data/ThumbnailPage.tsx b/src/pattern-library/components/patterns/data/ThumbnailPage.tsx
index 6fc1ac51c..1526a1a3d 100644
--- a/src/pattern-library/components/patterns/data/ThumbnailPage.tsx
+++ b/src/pattern-library/components/patterns/data/ThumbnailPage.tsx
@@ -21,7 +21,7 @@ export default function ThumbnailPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Thumbnail" />
           <Library.Example>
             <p>
diff --git a/src/pattern-library/components/patterns/feedback/DialogPage.tsx b/src/pattern-library/components/patterns/feedback/DialogPage.tsx
index d442e9f29..2f5b4c6db 100644
--- a/src/pattern-library/components/patterns/feedback/DialogPage.tsx
+++ b/src/pattern-library/components/patterns/feedback/DialogPage.tsx
@@ -181,7 +181,7 @@ export default function DialogPage() {
             </strong>
           </p>
         </Library.Pattern>
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Dialog" />
           <Library.Demo title="Basic Dialog" withSource>
             <Dialog_
@@ -442,7 +442,7 @@ export default function DialogPage() {
             </Library.Changelog>
           </Library.Example>
         </Library.Pattern>
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="ModalDialog" />
 
           <Library.Demo title="Basic ModalDialog" withSource>
diff --git a/src/pattern-library/components/patterns/feedback/ModalPage.tsx b/src/pattern-library/components/patterns/feedback/ModalPage.tsx
index b4818e781..a1f485c57 100644
--- a/src/pattern-library/components/patterns/feedback/ModalPage.tsx
+++ b/src/pattern-library/components/patterns/feedback/ModalPage.tsx
@@ -122,7 +122,7 @@ export default function ModalPage() {
             </Library.ChangelogItem>
           </Library.Changelog>
         </Library.Pattern>
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Modal" />
           <Library.Demo title="Basic modal" withSource>
             <Modal_
diff --git a/src/pattern-library/components/patterns/feedback/SpinnerPage.tsx b/src/pattern-library/components/patterns/feedback/SpinnerPage.tsx
index 3ebdd7ff8..87991fa86 100644
--- a/src/pattern-library/components/patterns/feedback/SpinnerPage.tsx
+++ b/src/pattern-library/components/patterns/feedback/SpinnerPage.tsx
@@ -30,7 +30,7 @@ export default function SpinnerPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Spinner" />
           <Library.Example>
             <Library.Demo withSource>
@@ -77,7 +77,7 @@ export default function SpinnerPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="SpinnerOverlay" />
           <Library.Example>
             <Library.Demo>
diff --git a/src/pattern-library/components/patterns/input/ButtonPage.tsx b/src/pattern-library/components/patterns/input/ButtonPage.tsx
index 3e35ab7cc..819497010 100644
--- a/src/pattern-library/components/patterns/input/ButtonPage.tsx
+++ b/src/pattern-library/components/patterns/input/ButtonPage.tsx
@@ -29,7 +29,7 @@ export default function ButtonPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Button" />
           <Library.Example>
             <Library.Demo title="Basic Button" withSource>
@@ -135,7 +135,7 @@ export default function ButtonPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="IconButton" />
           <Library.Example>
             <Library.Demo title="Basic IconButton" withSource>
@@ -314,7 +314,7 @@ export default function ButtonPage() {
           </>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="ButtonBase" />
 
           <Library.Example>
diff --git a/src/pattern-library/components/patterns/input/CheckboxPage.tsx b/src/pattern-library/components/patterns/input/CheckboxPage.tsx
index f103a9be6..fb81f5390 100644
--- a/src/pattern-library/components/patterns/input/CheckboxPage.tsx
+++ b/src/pattern-library/components/patterns/input/CheckboxPage.tsx
@@ -19,7 +19,7 @@ export default function CheckboxPage() {
         </p>
       }
     >
-      <Library.Pattern title="Usage">
+      <Library.Pattern>
         <Library.Usage componentName="Checkbox" />
         <Library.Example>
           <Library.Demo title="Basic Checkbox" withSource>
diff --git a/src/pattern-library/components/patterns/input/InputGroupPage.tsx b/src/pattern-library/components/patterns/input/InputGroupPage.tsx
index cabb22690..5e95e88e7 100644
--- a/src/pattern-library/components/patterns/input/InputGroupPage.tsx
+++ b/src/pattern-library/components/patterns/input/InputGroupPage.tsx
@@ -21,7 +21,7 @@ export default function InputGroupPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="InputGroup" />
           <Library.Example>
             <Library.Demo
diff --git a/src/pattern-library/components/patterns/input/InputPage.tsx b/src/pattern-library/components/patterns/input/InputPage.tsx
index 013044d78..a30f22074 100644
--- a/src/pattern-library/components/patterns/input/InputPage.tsx
+++ b/src/pattern-library/components/patterns/input/InputPage.tsx
@@ -20,7 +20,7 @@ export default function InputPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Input" />
 
           <Library.Example>
diff --git a/src/pattern-library/components/patterns/input/SelectPage.tsx b/src/pattern-library/components/patterns/input/SelectPage.tsx
index fad3f92a1..483b2d807 100644
--- a/src/pattern-library/components/patterns/input/SelectPage.tsx
+++ b/src/pattern-library/components/patterns/input/SelectPage.tsx
@@ -42,7 +42,7 @@ export default function SelectPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Select" />
 
           <Library.Example>
diff --git a/src/pattern-library/components/patterns/layout/CardPage.tsx b/src/pattern-library/components/patterns/layout/CardPage.tsx
index 172eda903..8897ab529 100644
--- a/src/pattern-library/components/patterns/layout/CardPage.tsx
+++ b/src/pattern-library/components/patterns/layout/CardPage.tsx
@@ -29,7 +29,7 @@ export default function CardPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Card, CardContent" />
           <Library.Example>
             <Library.Demo title="Basic Card with CardContent" withSource>
@@ -121,7 +121,7 @@ export default function CardPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Card, CardContent" />
 
           <Library.Example title="Laying out Card content">
@@ -207,7 +207,7 @@ export default function CardPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage
             componentName="Card, CardContent, CardHeader"
             size="sm"
@@ -285,7 +285,7 @@ export default function CardPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage
             componentName="Card, CardContent, CardHeader, CardTitle"
             size="sm"
@@ -317,7 +317,7 @@ export default function CardPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage
             componentName="Card, CardContent, CardHeader, CardActions"
             size="sm"
diff --git a/src/pattern-library/components/patterns/layout/OverlayPage.tsx b/src/pattern-library/components/patterns/layout/OverlayPage.tsx
index 7a4f23db5..135fe3b9d 100644
--- a/src/pattern-library/components/patterns/layout/OverlayPage.tsx
+++ b/src/pattern-library/components/patterns/layout/OverlayPage.tsx
@@ -32,7 +32,7 @@ export default function OverlayPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Overlay" />
           <Library.Example>
             <Library.Demo title="Basic Overlay" withSource>
diff --git a/src/pattern-library/components/patterns/layout/PanelPage.tsx b/src/pattern-library/components/patterns/layout/PanelPage.tsx
index 9f6a81356..262c37fca 100644
--- a/src/pattern-library/components/patterns/layout/PanelPage.tsx
+++ b/src/pattern-library/components/patterns/layout/PanelPage.tsx
@@ -23,7 +23,7 @@ export default function PanelPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Panel" />
           <Library.Example>
             <p>
diff --git a/src/pattern-library/components/patterns/navigation/LinkButtonPage.tsx b/src/pattern-library/components/patterns/navigation/LinkButtonPage.tsx
index cd72fb84b..09f452263 100644
--- a/src/pattern-library/components/patterns/navigation/LinkButtonPage.tsx
+++ b/src/pattern-library/components/patterns/navigation/LinkButtonPage.tsx
@@ -20,7 +20,7 @@ export default function LinkButtonPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="LinkButton" />
           <Library.Example>
             <Library.Demo title="Basic LinkButton" withSource>
diff --git a/src/pattern-library/components/patterns/navigation/LinkPage.tsx b/src/pattern-library/components/patterns/navigation/LinkPage.tsx
index 06fe53f6c..4b961aae8 100644
--- a/src/pattern-library/components/patterns/navigation/LinkPage.tsx
+++ b/src/pattern-library/components/patterns/navigation/LinkPage.tsx
@@ -21,7 +21,7 @@ export default function LinkPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Link" />
           <Library.Example>
             <Library.Demo title="Basic Link" withSource>
@@ -108,7 +108,7 @@ export default function LinkPage() {
           </>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="LinkBase" />
 
           <Library.Example>
diff --git a/src/pattern-library/components/patterns/navigation/PointerButtonPage.tsx b/src/pattern-library/components/patterns/navigation/PointerButtonPage.tsx
index ae7724169..db381e5af 100644
--- a/src/pattern-library/components/patterns/navigation/PointerButtonPage.tsx
+++ b/src/pattern-library/components/patterns/navigation/PointerButtonPage.tsx
@@ -30,7 +30,7 @@ export default function PointerButtonPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="PointerButton" />
           <Library.Example>
             <Library.Demo
diff --git a/src/pattern-library/components/patterns/navigation/TabPage.tsx b/src/pattern-library/components/patterns/navigation/TabPage.tsx
index ee9450780..ceaada3ff 100644
--- a/src/pattern-library/components/patterns/navigation/TabPage.tsx
+++ b/src/pattern-library/components/patterns/navigation/TabPage.tsx
@@ -36,7 +36,7 @@ export default function TabPage() {
           </p>
         }
       >
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="Tab" />
           <Library.Example>
             <Library.Demo title="Basic (non-interactive) example" withSource>
@@ -255,7 +255,7 @@ export default function TabPage() {
             <code>TabList</code> is a new component.
           </p>
         </Library.Pattern>
-        <Library.Pattern title="Usage">
+        <Library.Pattern>
           <Library.Usage componentName="TabList" />
           <Library.Example>
             <p>
diff --git a/styles/library.scss b/styles/library.scss
index 26e540ea8..bc95e9890 100644
--- a/styles/library.scss
+++ b/styles/library.scss
@@ -10,12 +10,16 @@
     }
 
     :where(code):not(:where([class~='unstyled-text'] *)) {
-      @apply p-1 bg-slate-0 rounded-sm mx-0.5;
+      @apply p-1 bg-stone-100 rounded-sm mx-0.5;
       font-size: 0.85em;
     }
 
+    :where(p):not(:where([class~='unstyled-text'] *)) {
+      @apply my-4;
+    }
+
     :where(ul):not(:where([class~='unstyled-text'] *)) {
-      @apply list-disc list-outside ml-8 space-y-2;
+      @apply list-disc list-outside ml-8 space-y-2 my-4;
     }
 
     :where(ol):not(:where([class~='unstyled-text'] *)) {