diff --git a/sites/skeleton.dev/src/components/docs/Footer.astro b/sites/skeleton.dev/src/components/docs/Footer.astro
index 5ffc8905fc..a7f1f37545 100644
--- a/sites/skeleton.dev/src/components/docs/Footer.astro
+++ b/sites/skeleton.dev/src/components/docs/Footer.astro
@@ -18,8 +18,8 @@ const { classList = 'p-4' } = Astro.props;
 		<nav class="flex items-center">
 			{
 				socialLinks.get().map((l) => (
-					<a class="btn hover:preset-tonal" href={l.href} target="_blank" title={l.label}>
-						<Icon name={l.icon} size={20} />
+					<a class="btn-icon hover:preset-tonal" href={l.href} target="_blank" title={l.label}>
+						<Icon name={l.icon} size={24} />
 					</a>
 				))
 			}
diff --git a/sites/skeleton.dev/src/components/docs/Header.astro b/sites/skeleton.dev/src/components/docs/Header.astro
index 09b8f40500..9eb5d308ed 100644
--- a/sites/skeleton.dev/src/components/docs/Header.astro
+++ b/sites/skeleton.dev/src/components/docs/Header.astro
@@ -20,9 +20,7 @@ const coreLinks = [
 ];
 ---
 
-<header
-	class="sticky top-0 z-50 border-b-[1px] border-surface-500/20 bg-surface-50/90 dark:bg-surface-950/90 backdrop-blur w-full h-[70px] flex items-center"
->
+<header class="sticky top-0 z-50 border border-surface-100-900/30 bg-surface-50-950/75 backdrop-blur-lg w-full h-[70px] flex items-center">
 	<div
 		class="container mx-auto grid max-w-screen-2xl grid-cols-[auto_1fr_auto] xl:grid-cols-[1fr_auto_1fr] items-center gap-4 px-4 xl:px-10"
 	>
diff --git a/sites/skeleton.dev/src/components/docs/TableCookbook.astro b/sites/skeleton.dev/src/components/docs/TableCookbook.astro
index e69884c1a8..4743c262c0 100644
--- a/sites/skeleton.dev/src/components/docs/TableCookbook.astro
+++ b/sites/skeleton.dev/src/components/docs/TableCookbook.astro
@@ -20,7 +20,7 @@ const tableData = await getCollection(collection, (item) => {
 						<td>
 							<div class="flex flex-wrap gap-2">
 								{row.data.tags?.map((tag: string) => (
-									<span class="chip preset-tonal-primary">{tag}</span>
+									<span class="badge preset-tonal-primary">{tag}</span>
 								))}
 							</div>
 						</td>
diff --git a/sites/skeleton.dev/src/content/docs/components/rating/react.mdx b/sites/skeleton.dev/src/content/docs/components/rating/react.mdx
index c2c7baeab3..b85e7c0aed 100644
--- a/sites/skeleton.dev/src/content/docs/components/rating/react.mdx
+++ b/sites/skeleton.dev/src/content/docs/components/rating/react.mdx
@@ -39,7 +39,7 @@ import ExampleRTLRaw from '@examples/components/rating/ExampleRTL.tsx?raw';
 	</Fragment>
 </Preview>
 
-## Custom Icon
+## Custom Icons
 
 <Preview client:load>
 	<Fragment slot="preview">
diff --git a/sites/skeleton.dev/src/content/docs/components/rating/svelte.mdx b/sites/skeleton.dev/src/content/docs/components/rating/svelte.mdx
index 13642307e9..ae86dc9c07 100644
--- a/sites/skeleton.dev/src/content/docs/components/rating/svelte.mdx
+++ b/sites/skeleton.dev/src/content/docs/components/rating/svelte.mdx
@@ -39,7 +39,7 @@ import ExampleRTLRaw from '@examples/components/rating/ExampleRTL.svelte?raw';
 	</Fragment>
 </Preview>
 
-## Custom Icon
+## Custom Icons
 
 <Preview client:load>
 	<Fragment slot="preview">
diff --git a/sites/skeleton.dev/src/content/docs/design/colors.mdx b/sites/skeleton.dev/src/content/docs/design/colors.mdx
index 50e2e7b5fc..5375b82ea5 100644
--- a/sites/skeleton.dev/src/content/docs/design/colors.mdx
+++ b/sites/skeleton.dev/src/content/docs/design/colors.mdx
@@ -62,15 +62,21 @@ See the [Preset system](/docs/design/presets) for additional utility classes tha
 
 ## Color Pairings
 
-Provides a condensed syntax for implementing dual-tone color values that are balanced to easily swap between light and dark mode. These are enabled through the use of the CSS [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function.
+Provides a condensed syntax of dual-tone color values balanced to swap between light and dark mode. These are supported for all the same properties standard colors support (`bg`, `border`, `fill`, etc).
 
 ```
 {property}-{color}-{lightModeShade}-{darkModeShade}
 ```
 
+For example:
+
+- `bg-surface-200-800`
+- `text-primary-400-600`
+- `border-secondary-50-950`
+
 ### How Pairings Work
 
-The `text-primary-300-700` pairing will enable Tailwind to generate the following class:
+Color Pairing are enabled through the use of the CSS [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function. For example, the `text-primary-300-700` pairing will be implemnted in your CSS bundle as follows:
 
 ```css
 .text-primary-300-700 {
@@ -78,19 +84,21 @@ The `text-primary-300-700` pairing will enable Tailwind to generate the followin
 }
 ```
 
-Which is roughly equivalent to the following - just a lot more compact!
+This roughly equivalent to the following, just more compact, and enabling support for Tailwind's [Color Scheme](https://tailwindcss.com/docs/color-scheme) utilities.
 
 ```html
 <div class="text-primary-300 dark:text-primary-700">...</div>
 ```
 
+By default, Skeleton sets the overall app's color scheme to match light or dark mode.
+
 ### Pairing Previews
 
-Below is a static representation of each pairing. Only `primary` is shown, but all Skeleton colors are supported.
+The following is a static representation of each pairing. Only `primary` is shown, but all Skeleton colors are supported.
 
 <ExamplePairings />
 
-Toggle this website between light and dark mode to see how each color pairing reacts.
+The following shows actual Color Pairings. Toggle this website between light and dark mode to see how these react.
 
 <ExamplePairingsDynamic />
 
diff --git a/sites/skeleton.dev/src/content/docs/design/presets.mdx b/sites/skeleton.dev/src/content/docs/design/presets.mdx
index 094d4e5bce..02964be888 100644
--- a/sites/skeleton.dev/src/content/docs/design/presets.mdx
+++ b/sites/skeleton.dev/src/content/docs/design/presets.mdx
@@ -20,6 +20,8 @@ import ExampleCustom from '@examples/design/presets/ExampleCustom.astro';
 import ExampleCustomRaw from '@examples/design/presets/ExampleCustom.astro?raw';
 import ExampleGradient from '@examples/design/presets/ExampleGradient.astro';
 import ExampleGradientRaw from '@examples/design/presets/ExampleGradient.astro?raw';
+import ExampleGlass from '@examples/design/presets/ExampleGlass.astro';
+import ExampleGlassRaw from '@examples/design/presets/ExampleGlass.astro?raw';
 
 {
 
@@ -42,10 +44,11 @@ import ExampleGradientRaw from '@examples/design/presets/ExampleGradient.astro?r
 1. **Filled** - a filled preset of the primary brand color.
 2. **Tonal** - a tonal preset of the primary brand color.
 3. **Outlined** - an outlined preset of the primary brand color.
-4. **Elevated** - mixes a filled preset with a shadow.
-5. **Ghost** - has no style by default, but shows a tonal preset on hover.
-6. **Ghost Icon** - has no style by default, but shows a branded tonal preset on hover.
-7. **Gradient** - a custom preset generated using Tailwind gradient primitives.
+4. **Glass** - a custom preset using background transparency and backdrop blur.
+5. **Elevated** - mixes a filled preset with a shadow.
+6. **Ghost** - has no style by default, but shows a tonal preset on hover.
+7. **Ghost Icon** - has no style by default, but shows a branded tonal preset on hover.
+8. **Gradient** - a custom preset generated using Tailwind gradient primitives.
 
 ## Enabling Presets
 
@@ -139,4 +142,11 @@ Tailwind provides a number of powerful [Gradient](https://tailwindcss.com/docs/g
 
 ### Glass Presets
 
-> TODO: examples coming soon!
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleGlass />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleGlassRaw} lang="astro" />
+	</Fragment>
+</Preview>
diff --git a/sites/skeleton.dev/src/content/docs/design/spacing.mdx b/sites/skeleton.dev/src/content/docs/design/spacing.mdx
index 65c00c9f2d..a034a1228f 100644
--- a/sites/skeleton.dev/src/content/docs/design/spacing.mdx
+++ b/sites/skeleton.dev/src/content/docs/design/spacing.mdx
@@ -1,50 +1,33 @@
 ---
 layout: '@layouts/LayoutDoc.astro'
 title: Spacing
-description: The Skeleton spacing system.
+description: Set a dynamic scale for application whitespace.
 order: 40
 ---
 
 export const components = componentSet;
 
-export const spacing = [
-	{ value: '0', width: 'w-0' },
-	{ value: '[1px]', width: 'w-[1px]' },
-	{ value: '0.5', width: 'w-0.5' },
-	{ value: '1', width: 'w-1' },
-	{ value: '1.5', width: 'w-1.5' },
-	{ value: '2', width: 'w-2' },
-	{ value: '2.5', width: 'w-2.5' },
-	{ value: '3', width: 'w-3' },
-	{ value: '3.5', width: 'w-3.5' },
-	{ value: '4', width: 'w-4' },
-	{ value: '5', width: 'w-5' },
-	{ value: '6', width: 'w-6' },
-	{ value: '7', width: 'w-7' },
-	{ value: '8', width: 'w-8' },
-	{ value: '9', width: 'w-9' },
-	{ value: '10', width: 'w-10' },
-	{ value: '11', width: 'w-11' },
-	{ value: '12', width: 'w-12' },
-	{ value: '14', width: 'w-14' },
-	{ value: '16', width: 'w-16' },
-	{ value: '20', width: 'w-20' },
-	{ value: '24', width: 'w-24' },
-	{ value: '28', width: 'w-28' },
-	{ value: '32', width: 'w-32' },
-	{ value: '36', width: 'w-36' },
-	{ value: '40', width: 'w-40' },
-	{ value: '44', width: 'w-44' },
-	{ value: '48', width: 'w-48' },
-	{ value: '52', width: 'w-52' },
-	{ value: '56', width: 'w-56' },
-	{ value: '60', width: 'w-60' },
-	{ value: '64', width: 'w-64' },
-	{ value: '72', width: 'w-72' },
-	{ value: '80', width: 'w-80' }
-];
+import Example from '@examples/design/spacing/Example.svelte';
 
-Skeleton utilizes [Tailwind spacing system](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants) to enable dynamic scaling based for the following properties.
+This is enabled by the [Tailwind spacing system](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants).
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<Example client:visible />
+	</Fragment>
+	<Fragment slot="code">
+		<div class="space-y-4">
+			Scaling can be adjusted by modifying the [type scale](/docs/get-started/core-api#typography) theme property.
+			```css
+			[data-theme='cerberus'] {
+				--spacing: 0.25rem;
+			}
+			```
+		</div>
+	</Fragment>
+</Preview>
+
+This affects the following utilities.
 
 - `padding`
 - `margin`
@@ -58,30 +41,3 @@ Skeleton utilizes [Tailwind spacing system](https://tailwindcss.com/blog/tailwin
 - `inset`
 - `space`
 - `translate`
-
-## Preview
-
-Try different themes to preview how scaling changes.
-
-<div class="table-wrap">
-	<table class="table">
-		<thead>
-			<tr>
-				<th>Size</th>
-				<th>Preview</th>
-			</tr>
-		</thead>
-		<tbody class="[&>tr]:hover:preset-tonal-primary">
-			{spacing.map((space) => (
-				<tr>
-					<td>
-						<small>{space.value}</small>
-					</td>
-					<td>
-						<div class:list={[space.width, 'h-[10px] bg-primary-500']}></div>
-					</td>
-				</tr>
-			))}
-		</tbody>
-	</table>
-</div>
diff --git a/sites/skeleton.dev/src/content/docs/design/themes.mdx b/sites/skeleton.dev/src/content/docs/design/themes.mdx
index b4519d1c1d..2d5bb0c2a2 100644
--- a/sites/skeleton.dev/src/content/docs/design/themes.mdx
+++ b/sites/skeleton.dev/src/content/docs/design/themes.mdx
@@ -16,7 +16,7 @@ export const components = componentSet;
 	Skeleton themes utilize{' '}
 	<a className="anchor" href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*" target="_blank" rel="external">
 		CSS custom properties
-	</a>
+	</a>{' '}
 	to define core settings for your design system. Provided with a number of presets theme out of the box, as well as a powerful theme
 	generator to create your own. Enable one or more and quickly switch on-demand.
 </p>
@@ -179,7 +179,7 @@ npm install @fontsource/open-sans
 Then import each font at the top of your global stylesheet, but below your Tailwind configuration.
 
 ```css title="app.css"
-import "@fontsource/open-sans";
+@import '@fontsource/open-sans';
 ```
 
 Finally, use the following [theme properties](/docs/get-started/core-api#base-1) to set each respective font-family property. Note that for custom themes, these settings are can be defined directly within each respective theme file.
diff --git a/sites/skeleton.dev/src/content/docs/design/typography.mdx b/sites/skeleton.dev/src/content/docs/design/typography.mdx
index 075626c534..eb12355470 100644
--- a/sites/skeleton.dev/src/content/docs/design/typography.mdx
+++ b/sites/skeleton.dev/src/content/docs/design/typography.mdx
@@ -8,8 +8,8 @@ order: 30
 
 export const components = componentSet;
 
-import TypeScale from '@examples/design/typography/TypeScale.svelte';
-import TypeScaleRaw from '@examples/design/typography/TypeScale.svelte?raw';
+import ExampleTypescale from '@examples/design/typography/ExampleTypescale.svelte';
+import ExampleTypescaleRaw from '@examples/design/typography/ExampleTypescale.svelte?raw';
 
 import Headings from '@examples/design/typography/Headings.astro';
 import HeadingsRaw from '@examples/design/typography/Headings.astro?raw';
@@ -30,9 +30,6 @@ import InsDelRaw from '@examples/design/typography/InsDel.astro?raw';
 import Mark from '@examples/design/typography/Mark.astro';
 import MarkRaw from '@examples/design/typography/Mark.astro?raw';
 
-import Semantic from '@examples/design/typography/Semantic.svelte';
-import SemanticRaw from '@examples/design/typography/Semantic.svelte?raw';
-
 import ListUnordered from '@examples/design/typography/ListUnordered.astro';
 import ListUnorderedRaw from '@examples/design/typography/ListUnordered.astro?raw';
 import ListOrdered from '@examples/design/typography/ListOrdered.astro';
@@ -44,6 +41,9 @@ import ListDescRaw from '@examples/design/typography/ListDesc.astro?raw';
 import ListNav from '@examples/design/typography/ListNav.astro';
 import ListNavRaw from '@examples/design/typography/ListNav.astro?raw';
 
+import ExampleSemantic from '@examples/design/typography/ExampleSemantic.svelte';
+import ExampleSemanticRaw from '@examples/design/typography/ExampleSemantic.svelte?raw';
+
 {
 
 <p class="text-xl">
@@ -55,18 +55,18 @@ import ListNavRaw from '@examples/design/typography/ListNav.astro?raw';
 
 ## Typographic Scale
 
-Skeleton introduces a [Typographic Scale](https://designcode.io/typographic-scales) to Tailwind's [font-size](https://tailwindcss.com/docs/font-size) properties.
+Skeleton introduces customizable [Typographic Scale](https://designcode.io/typographic-scales) to Tailwind's [font-size](https://tailwindcss.com/docs/font-size) properties.
 
 <Preview client:load>
 	<Fragment slot="preview">
-		<TypeScale client:visible />
+		<ExampleTypescale client:visible />
 	</Fragment>
 	<Fragment slot="code">
 		<div class="space-y-4">
 			Scaling can be adjusted by modifying the [type scale](/docs/get-started/core-api#typography) theme property.
 			```css
 			[data-theme='cerberus'] {
-				--text-scaling: 0.25rem;
+				--text-scaling: 1.067;
 			}
 			```
 			This affects the following text sizes.
@@ -256,9 +256,9 @@ When working with your designers, they may craft a semantic typography set for y
 
 <Preview client:load>
 	<Fragment slot="preview">
-		<Semantic client:visible />
+		<ExampleSemantic client:visible />
 	</Fragment>
 	<Fragment slot="code">
-		<Code code={SemanticRaw} lang="svelte" />
+		<Code code={ExampleSemanticRaw} lang="svelte" />
 	</Fragment>
 </Preview>
diff --git a/sites/skeleton.dev/src/content/docs/get-started/introduction.mdx b/sites/skeleton.dev/src/content/docs/get-started/introduction.mdx
index 0455ad2aac..16adbeecb3 100644
--- a/sites/skeleton.dev/src/content/docs/get-started/introduction.mdx
+++ b/sites/skeleton.dev/src/content/docs/get-started/introduction.mdx
@@ -25,7 +25,7 @@ Skeleton provides a uniform design language and structured framework for control
 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
 	<div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
 		<h3 className="h3">Framework Agnostic</h3>
-		<p className="opacity-60">
+		<p className="text-surface-700-300">
 			Skeleton's core features are framework agnostic, only requiring the use of{' '}
 			<a className="anchor" href="https://tailwindcss.com/" target="_blank" rel="external">
 				Tailwind CSS
@@ -36,21 +36,21 @@ Skeleton provides a uniform design language and structured framework for control
 	</div>
 	<div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
 		<h3 className="h3">Native-First</h3>
-		<p className="opacity-60">
+		<p className="text-surface-700-300">
 			We aim to embrace the interface of the web, not replace it. This is why Skeleton defaults to semantic HTML elements and native browser
 			APIs. Beyond ease of use, we feel this offers a huge advantages to accessibility.
 		</p>
 	</div>
 	<div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
 		<h3 className="h3">Simple Standards</h3>
-		<p className="opacity-60">
+		<p className="text-surface-700-300">
 			We aim to standardize the design process, providing common conventions that are easy to learn and retain, whether you work alone or in
 			a team environment. Covering common fixtures such as themes, colors, typography, spacing, and more.
 		</p>
 	</div>
 	<div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
 		<h3 className="h3">Utility-First</h3>
-		<p className="opacity-60">
+		<p className="text-surface-700-300">
 			Skeleton embraces the{' '}
 			<a className="anchor" href="https://tailwindcss.com/docs/utility-first" target="_blank" rel="external">
 				utility-first
@@ -64,14 +64,14 @@ Skeleton provides a uniform design language and structured framework for control
 	</div>
 	<div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
 		<h3 className="h3">Opt-In by Default</h3>
-		<p className="opacity-60">
+		<p className="text-surface-700-300">
 			Most features in Skeleton are modular and opt-in by default. Enabling interface features like buttons and typography via dedicated
 			utility classes. This allows for a simple escape hatch when you need to draw outside the lines and generate custom interfaces.
 		</p>
 	</div>
 	<div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
 		<h3 className="h3">Adaptive</h3>
-		<p className="opacity-60">
+		<p className="text-surface-700-300">
 			Skeleton is intended to adapt to the design and aesthetic of your project, while still providing reasonable defaults. Providing a
 			powerful{' '}
 			<a className="anchor" href="https://themes.skeleton.dev/" target="_blank" rel="external">
@@ -81,30 +81,52 @@ Skeleton provides a uniform design language and structured framework for control
 		</p>
 	</div>
 </div>
-
 }
 
 ## Additional Benefits
 
-### Functional Components
-
-Skeleton provides an optional suite of functional components built atop the foundation of [Zag.js](https://zagjs.com/). These components automatically adapt to the Skeleton design system out of the box. We currently support React and Svelte, with plans for other frameworks in the future.
-
-### Open Source
-
-Skeleton provides as [free and open-source software (FOSS)](https://github.com/skeletonlabs/skeleton) under the [MIT License](https://github.com/skeletonlabs/skeleton?tab=MIT-1-ov-file#readme).
-
-### The Community
-
-Skeleton boasts a vast community of users and contributors across [GitHub](https://github.com/skeletonlabs/skeleton), [Discord](https://discord.gg/EXqV7W8MtY), and [Bluesky](https://bsky.app/profile/skeletonlabs.bsky.social).
-
-### Frequent Updates
+{
 
-Skeleton has maintained a set release cadence for years. Just take a look at our [changelog](https://github.com/skeletonlabs/skeleton/blob/dev/packages/skeleton/CHANGELOG.md).
+<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
 
-### Figma UI Kit
+    <div className="col-span-2 card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
+    	<h3 className="h3">Functional Components</h3>
+    	{/* prettier-ignore */}
+    	<p className="text-surface-700-300">
+    		Skeleton provides an optional suite of functional components built atop the foundation of <a href="https://zagjs.com/" target="_blank" class="anchor">Zag.js</a>. These components automatically adapt to the Skeleton design system out of the box. We currently support React and Svelte, with plans for other frameworks in the future.
+    	</p>
+    </div>
+    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
+    	<h3 className="h3">Open Source</h3>
+    	{/* prettier-ignore */}
+    	<p className="text-surface-700-300">
+    		Skeleton is provided as <a href="https://github.com/skeletonlabs/skeleton" target="_blank" class="anchor">free and open-source software (FOSS)</a> under the <a href="https://github.com/skeletonlabs/skeleton?tab=MIT-1-ov-file#readme" target="_blank" class="anchor">MIT License</a>.
+    	</p>
+    </div>
+    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
+    	<h3 className="h3">The Community</h3>
+    	{/* prettier-ignore */}
+    	<p className="text-surface-700-300">
+    		A huge community of users and contributors across <a href="https://github.com/skeletonlabs/skeleton" target="_blank" class="anchor">GitHub</a>, <a href="https://discord.gg/EXqV7W8MtY" target="_blank" class="anchor">Discord</a>, and <a href="https://bsky.app/profile/skeletonlabs.bsky.social" target="_blank" class="anchor">Bluesky</a>.
+    	</p>
+    </div>
+    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
+    	<h3 className="h3">Frequent Updates</h3>
+    	{/* prettier-ignore */}
+    	<p className="text-surface-700-300">
+    		Skeleton has maintained a frequent release cadence over for years. Just take a look at our <a href="https://github.com/skeletonlabs/skeleton/blob/dev/packages/skeleton/CHANGELOG.md" target="_blank" class="anchor">changelog</a>.
+    	</p>
+    </div>
+    <div className="card preset-outlined-surface-200-800 bg-surface-50-950 p-10 space-y-4">
+    	<h3 className="h3">Figma UI Kit</h3>
+    	{/* prettier-ignore */}
+    	<p className="text-surface-700-300">
+    		Skeleton provides access to a fully featured <a href="/figma" class="anchor">Figma UI Kit</a> to assist designers in drafting a visual concept of upcoming projects.
+    	</p>
+    </div>
 
-Skeleton provides access to a fully featured [Figma UI Kit](/figma) to assist designers in drafting a visual concept of upcoming projects.
+</div>
+}
 
 ---
 
diff --git a/sites/skeleton.dev/src/content/docs/guides/figma.mdx b/sites/skeleton.dev/src/content/docs/guides/figma.mdx
index 047098b3c9..aafe474e7b 100644
--- a/sites/skeleton.dev/src/content/docs/guides/figma.mdx
+++ b/sites/skeleton.dev/src/content/docs/guides/figma.mdx
@@ -20,10 +20,13 @@ import { Clock3 } from 'lucide-react';
 import { Shapes } from 'lucide-react';
 import { SwatchBook } from 'lucide-react';
 
+{
+
 <p class="text-2xl">
 	Explore step-by-step guides to unlock the full potential of Skeleton in your design workflow. Whether you're setting up for the first time
 	or mastering advanced features, these tutorials will guide you every step of the way.
 </p>
+}
 
 ## Get Access
 
diff --git a/sites/skeleton.dev/src/content/docs/guides/mode.mdx b/sites/skeleton.dev/src/content/docs/guides/mode.mdx
index 384124020f..2bbe37cb46 100644
--- a/sites/skeleton.dev/src/content/docs/guides/mode.mdx
+++ b/sites/skeleton.dev/src/content/docs/guides/mode.mdx
@@ -2,6 +2,7 @@
 layout: '@layouts/LayoutDoc.astro'
 title: Dark Mode
 description: Learn how to use Tailwind's dark mode feature for your Skeleton project.
+srcCore: '/base/globals.css'
 order: 40
 ---
 
@@ -35,11 +36,11 @@ Enable by default. Uses CSS's [prefers-color-scheme](https://developer.mozilla.o
 
 Activates dark mode by adding or removing the `.dark` class to your application's `<html>` element.
 
-```css
+```css title="app.css"
 @custom-variant dark (&:where(.dark, .dark *));
 ```
 
-```html
+```html title="app.html"
 <html class="dark">
 	...
 </html>
@@ -49,12 +50,12 @@ Activates dark mode by adding or removing the `.dark` class to your application'
 
 Uses a data attribute instead of a class to activate dark mode.
 
-```css
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+```css title="app.css"
+@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *));
 ```
 
-```html
-<html data-theme="dark">
+```html title="app.html"
+<html data-mode="dark">
 	...
 </html>
 ```
@@ -63,7 +64,7 @@ Uses a data attribute instead of a class to activate dark mode.
 
 Apply a base style, then with Tailwind's `dark:` variant.
 
-```html
+```html title="app.html"
 <!-- Light Mode: White | Dark Mode: Black -->
 <div class="bg-white dark:bg-black">...</div>
 ```
diff --git a/sites/skeleton.dev/src/content/docs/integrations/popover/meta.mdx b/sites/skeleton.dev/src/content/docs/integrations/popover/meta.mdx
index 2d6909595c..98b44af594 100644
--- a/sites/skeleton.dev/src/content/docs/integrations/popover/meta.mdx
+++ b/sites/skeleton.dev/src/content/docs/integrations/popover/meta.mdx
@@ -2,6 +2,5 @@
 title: Popover
 description: Learn how to integrate dynamic and interactive popover interfaces.
 showDocsUrl: true
-srcReact: '/src/lib/components/'
-srcSvelte: '/src/lib/components/'
+srcSvelte: '/src/components/'
 ---
diff --git a/sites/skeleton.dev/src/content/docs/resources/llms.mdx b/sites/skeleton.dev/src/content/docs/resources/llms.mdx
index c114b7dfda..28201de6a8 100644
--- a/sites/skeleton.dev/src/content/docs/resources/llms.mdx
+++ b/sites/skeleton.dev/src/content/docs/resources/llms.mdx
@@ -8,12 +8,18 @@ export const components = componentSet;
 
 {/* --- */}
 
-## LLMs.txt Documentation
+The Skeleton `LLMs.txt` files provide concise, up-to-date documentation optimized for large language models. The have been implemented to follow the **LLM.txt Standard**.
 
-Our **LLMs.txt** files provide concise, up-to-date documentation optimized for large language models, following the [LLM.txt standard](https://llmstxt.org/).
+<figure class="linker bg-noise">
+	<a class="btn preset-filled" href="https://llmstxt.org/" target="_blank">
+		View LLM Standard &rarr;
+	</a>
+</figure>
 
-### Directory Overview
+## Paths
 
-- [**`/llms.txt`**](/llms.txt): List of LLMs txt directory.
-- [**`/llms-react.txt`**](/llms-react.txt): React guidelines.
-- [**`/llms-svelte.txt`**](/llms-svelte.txt): Svelte guidelines.
+| Path                                 | Description                 |
+| ------------------------------------ | --------------------------- |
+| [/llms.txt](/llms.txt)               | List of LLMs txt directory. |
+| [/llms-react.txt](/llms-react.txt)   | React guidelines.           |
+| [/llms-svelte.txt](/llms-svelte.txt) | Svelte guidelines.          |
diff --git a/sites/skeleton.dev/src/content/docs/tailwind/badges.mdx b/sites/skeleton.dev/src/content/docs/tailwind/badges.mdx
index 59462c5032..b76d0744d6 100644
--- a/sites/skeleton.dev/src/content/docs/tailwind/badges.mdx
+++ b/sites/skeleton.dev/src/content/docs/tailwind/badges.mdx
@@ -26,6 +26,8 @@ import ExampleOverlapRaw from '@examples/tailwind/badges/ExampleOverlap.astro?ra
 
 ## Presets
 
+Provides full support of [Presets](/docs/design/presets).
+
 <Preview client:load>
 	<Fragment slot="preview">
 		<ExamplePresets />
@@ -37,6 +39,8 @@ import ExampleOverlapRaw from '@examples/tailwind/badges/ExampleOverlap.astro?ra
 
 ## Overlap
 
+Use `badge-icon` to create overlapping numeric or icon badges.
+
 <Preview client:load>
 	<Fragment slot="preview">
 		<ExampleOverlap />
diff --git a/sites/skeleton.dev/src/content/docs/tailwind/buttons.mdx b/sites/skeleton.dev/src/content/docs/tailwind/buttons.mdx
index 1c200b0c9d..add9ed892a 100644
--- a/sites/skeleton.dev/src/content/docs/tailwind/buttons.mdx
+++ b/sites/skeleton.dev/src/content/docs/tailwind/buttons.mdx
@@ -30,6 +30,8 @@ import ExampleGroupRaw from '@examples/tailwind/buttons/ExampleGroup.astro?raw';
 
 ## Presets
 
+Provides full support of [Presets](/docs/design/presets).
+
 <Preview client:load>
 	<Fragment slot="preview">
 		<ExamplePresets />
@@ -52,6 +54,8 @@ import ExampleGroupRaw from '@examples/tailwind/buttons/ExampleGroup.astro?raw';
 
 ## Disabled
 
+When applied to a `<button>` element, you can use the `disabled` attribute.
+
 <Preview client:load>
 	<Fragment slot="preview">
 		<ExampleDisabled />
diff --git a/sites/skeleton.dev/src/content/docs/tailwind/cards.mdx b/sites/skeleton.dev/src/content/docs/tailwind/cards.mdx
index 9f43c7e1cd..a6ecd056bf 100644
--- a/sites/skeleton.dev/src/content/docs/tailwind/cards.mdx
+++ b/sites/skeleton.dev/src/content/docs/tailwind/cards.mdx
@@ -12,6 +12,8 @@ import Example from '@examples/tailwind/cards/Example.astro';
 import ExampleRaw from '@examples/tailwind/cards/Example.astro?raw';
 import ExampleDetailed from '@examples/tailwind/cards/ExampleDetailed.astro';
 import ExampleDetailedRaw from '@examples/tailwind/cards/ExampleDetailed.astro?raw';
+import ExamplePresets from '@examples/tailwind/cards/ExamplePresets.astro';
+import ExamplePresetsRaw from '@examples/tailwind/cards/ExamplePresets.astro?raw';
 
 <Preview client:load>
 	<Fragment slot="preview">
@@ -33,34 +35,13 @@ import ExampleDetailedRaw from '@examples/tailwind/cards/ExampleDetailed.astro?r
 
 ## Presets
 
-<div class="space-y-4">
-	<div class="grid grid-cols-3 gap-4">
-		<div class="card p-4 preset-filled-primary-500">Card</div>
-		<div class="card p-4 preset-tonal-primary">Card</div>
-		<div class="card p-4 preset-outlined-primary-500">Card</div>
-		{/* --- */}
-		<div class="card p-4 preset-filled-secondary-500">Card</div>
-		<div class="card p-4 preset-tonal-secondary">Card</div>
-		<div class="card p-4 preset-outlined-secondary-500">Card</div>
-		{/* --- */}
-		<div class="card p-4 preset-filled-tertiary-500">Card</div>
-		<div class="card p-4 preset-tonal-tertiary">Card</div>
-		<div class="card p-4 preset-outlined-tertiary-500">Card</div>
-		{/* --- */}
-		<div class="card p-4 preset-filled-success-500">Card</div>
-		<div class="card p-4 preset-tonal-success">Card</div>
-		<div class="card p-4 preset-outlined-success-500">Card</div>
-		{/* --- */}
-		<div class="card p-4 preset-filled-warning-500">Card</div>
-		<div class="card p-4 preset-tonal-warning">Card</div>
-		<div class="card p-4 preset-outlined-warning-500">Card</div>
-		{/* --- */}
-		<div class="card p-4 preset-filled-error-500">Card</div>
-		<div class="card p-4 preset-tonal-error">Card</div>
-		<div class="card p-4 preset-outlined-error-500">Card</div>
-		{/* --- */}
-		<div class="card p-4 preset-filled-surface-500">Card</div>
-		<div class="card p-4 preset-tonal-surface">Card</div>
-		<div class="card p-4 preset-outlined-surface-500">Card</div>
-	</div>
-</div>
+Provides full support of [Presets](/docs/design/presets).
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExamplePresets />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExamplePresetsRaw} lang="astro" />
+	</Fragment>
+</Preview>
diff --git a/sites/skeleton.dev/src/content/docs/tailwind/chips.mdx b/sites/skeleton.dev/src/content/docs/tailwind/chips.mdx
index 79c4126a27..235d70458e 100644
--- a/sites/skeleton.dev/src/content/docs/tailwind/chips.mdx
+++ b/sites/skeleton.dev/src/content/docs/tailwind/chips.mdx
@@ -14,8 +14,9 @@ import ExamplePresets from '@examples/tailwind/chips/ExamplePresets.astro';
 import ExamplePresetsRaw from '@examples/tailwind/chips/ExamplePresets.astro?raw';
 import ExampleDisabled from '@examples/tailwind/chips/ExampleDisabled.astro';
 import ExampleDisabledRaw from '@examples/tailwind/chips/ExampleDisabled.astro?raw';
-import { Page as ExampleSelect } from '@examples/tailwind/chips/ExampleSelect.tsx';
-import ExampleSelectRaw from '@examples/tailwind/chips/ExampleSelect.tsx?raw';
+import { Page as ExampleSelectReact } from '@examples/tailwind/chips/ExampleSelect.tsx';
+import ExampleSelectReactRaw from '@examples/tailwind/chips/ExampleSelect.tsx?raw';
+import ExampleSelectSvelteRaw from '@examples/tailwind/chips/ExampleSelect.svelte?raw';
 
 <Preview client:load>
 	<Fragment slot="preview">
@@ -28,6 +29,8 @@ import ExampleSelectRaw from '@examples/tailwind/chips/ExampleSelect.tsx?raw';
 
 ## Presets
 
+Provides full support of [Presets](/docs/design/presets).
+
 <Preview client:load>
 	<Fragment slot="preview">
 		<ExamplePresets />
@@ -39,6 +42,8 @@ import ExampleSelectRaw from '@examples/tailwind/chips/ExampleSelect.tsx?raw';
 
 ## Disabled
 
+When applied to a `<button>` element, you can use the `disabled` attribute.
+
 <Preview client:load>
 	<Fragment slot="preview">
 		<ExampleDisabled />
@@ -52,9 +57,12 @@ import ExampleSelectRaw from '@examples/tailwind/chips/ExampleSelect.tsx?raw';
 
 <Preview client:load>
 	<Fragment slot="preview">
-		<ExampleSelect client:visible />
+		<ExampleSelectReact client:visible />
 	</Fragment>
-	<Fragment slot="code">
-		<Code code={ExampleSelectRaw} lang="tsx" />
+	<Fragment slot="codeReact">
+		<Code code={ExampleSelectReactRaw} lang="tsx" />
+	</Fragment>
+	<Fragment slot="codeSvelte">
+		<Code code={ExampleSelectSvelteRaw} lang="svelte" />
 	</Fragment>
 </Preview>
diff --git a/sites/skeleton.dev/src/content/docs/tailwind/dividers.mdx b/sites/skeleton.dev/src/content/docs/tailwind/dividers.mdx
index 49bce196d5..a0a9e4b096 100644
--- a/sites/skeleton.dev/src/content/docs/tailwind/dividers.mdx
+++ b/sites/skeleton.dev/src/content/docs/tailwind/dividers.mdx
@@ -10,6 +10,12 @@ export const components = componentSet;
 
 import Example from '@examples/tailwind/dividers/Example.astro';
 import ExampleRaw from '@examples/tailwind/dividers/Example.astro?raw';
+import ExampleSize from '@examples/tailwind/dividers/ExampleSize.astro';
+import ExampleSizeRaw from '@examples/tailwind/dividers/ExampleSize.astro?raw';
+import ExampleStyle from '@examples/tailwind/dividers/ExampleStyle.astro';
+import ExampleStyleRaw from '@examples/tailwind/dividers/ExampleStyle.astro?raw';
+import ExampleColors from '@examples/tailwind/dividers/ExampleColors.astro';
+import ExampleColorsRaw from '@examples/tailwind/dividers/ExampleColors.astro?raw';
 import ExampleVert from '@examples/tailwind/dividers/ExampleVert.astro';
 import ExampleVertRaw from '@examples/tailwind/dividers/ExampleVert.astro?raw';
 
@@ -22,8 +28,49 @@ import ExampleVertRaw from '@examples/tailwind/dividers/ExampleVert.astro?raw';
 	</Fragment>
 </Preview>
 
+## Size
+
+Use Tailwind's [border width](https://tailwindcss.com/docs/border-width) utilities to adjust thickness.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleSize />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleSizeRaw} lang="astro" />
+	</Fragment>
+</Preview>
+
+## Style
+
+Use Tailwind's [border style](https://tailwindcss.com/docs/border-style) utilities to adjust visual style.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleStyle />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleStyleRaw} lang="astro" />
+	</Fragment>
+</Preview>
+
+## Colors
+
+Use any Tailwind or Skeleton [colors or pairing](/docs/design/colors).
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleColors />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleColorsRaw} lang="astro" />
+	</Fragment>
+</Preview>
+
 ## Vertical
 
+Use `vh` for a vertical rulue, which supports all above styles. Make sure to set the height.
+
 <Preview client:load>
 	<Fragment slot="preview">
 		<ExampleVert />
diff --git a/sites/skeleton.dev/src/content/docs/tailwind/forms.mdx b/sites/skeleton.dev/src/content/docs/tailwind/forms.mdx
index 457ef9fae1..09a9a99def 100644
--- a/sites/skeleton.dev/src/content/docs/tailwind/forms.mdx
+++ b/sites/skeleton.dev/src/content/docs/tailwind/forms.mdx
@@ -2,7 +2,7 @@
 layout: '@layouts/LayoutDoc.astro'
 title: Forms and Inputs
 description: Various form and input styles.
-srcCore: '/utilities/forms.css'
+srcCore: '/utilities/'
 showDocsUrl: true
 ---
 
@@ -12,6 +12,8 @@ import Example from '@examples/tailwind/forms/Example.astro';
 import ExampleInputRaw from '@examples/tailwind/forms/ExampleInput.astro?raw';
 import ExampleSelectRaw from '@examples/tailwind/forms/ExampleSelect.astro?raw';
 import ExampleTextareaRaw from '@examples/tailwind/forms/ExampleTextarea.astro?raw';
+import ExampleInputs from '@examples/tailwind/forms/ExampleInputs.astro';
+import ExampleInputsRaw from '@examples/tailwind/forms/ExampleInputs.astro?raw';
 import ExampleSelection from '@examples/tailwind/forms/ExampleSelection.astro';
 import ExampleSelectionRaw from '@examples/tailwind/forms/ExampleSelection.astro?raw';
 import ExampleCheckboxes from '@examples/tailwind/forms/ExampleCheckboxes.astro';
@@ -65,6 +67,17 @@ Implement the plugin using the `@plugin` directive immediately following the `ta
 
 The display of native and semantic HTML form elements can vary between both operating systems and browsers. Skeleton does it's best to adhere to progressive enhancement best practices. However, we advise you validate support for each element per your target audience.
 
+## Inputs
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleInputs />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleInputsRaw} lang="astro" />
+	</Fragment>
+</Preview>
+
 ## Select
 
 <Preview client:load>
@@ -98,7 +111,9 @@ The display of native and semantic HTML form elements can vary between both oper
 	</Fragment>
 </Preview>
 
-## Other Inputs
+## Kitchen Sink
+
+Display and functionality of these elements may vary greatly between devices and browsers.
 
 <Preview client:load>
 	<Fragment slot="preview">
@@ -111,6 +126,8 @@ The display of native and semantic HTML form elements can vary between both oper
 
 ## Groups
 
+Input groups support a subset of form elements and button styles. These pair well with [Presets](/docs/design/presets).
+
 <Preview client:load>
 	<Fragment slot="preview">
 		<ExampleGroups />
@@ -127,5 +144,3 @@ The display of native and semantic HTML form elements can vary between both oper
 | `ig-input`    | Defines a child input of `type="text"`. |
 | `ig-select`   | Defines a child select element.         |
 | `ig-btn`      | Defines a child button.                 |
-
-Note that cells and buttons support Preset utility classes.
diff --git a/sites/skeleton.dev/src/content/docs/tailwind/tables.mdx b/sites/skeleton.dev/src/content/docs/tailwind/tables.mdx
index cee323efd8..c9d5d4dedd 100644
--- a/sites/skeleton.dev/src/content/docs/tailwind/tables.mdx
+++ b/sites/skeleton.dev/src/content/docs/tailwind/tables.mdx
@@ -10,16 +10,60 @@ export const components = componentSet;
 
 import Example from '@examples/tailwind/tables/Example.astro';
 import ExampleRaw from '@examples/tailwind/tables/Example.astro?raw';
+import ExampleFull from '@examples/tailwind/tables/ExampleFull.astro';
+import ExampleFullRaw from '@examples/tailwind/tables/ExampleFull.astro?raw';
+import ExampleNav from '@examples/tailwind/tables/ExampleNav.astro';
+import ExampleNavRaw from '@examples/tailwind/tables/ExampleNav.astro?raw';
 
 <Preview client:load>
 	<Fragment slot="preview">
 		<Example />
 	</Fragment>
 	<Fragment slot="code">
-		<Code code={ExampleRaw} lang="astro" class="mt-4" />
+		<Code code={ExampleRaw} lang="astro" />
+	</Fragment>
+</Preview>
+
+## Extras
+
+Optionally add a header, footer, and caption.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleFull />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleFullRaw} lang="astro" />
+	</Fragment>
+</Preview>
+
+## Navigation
+
+Native HTML tables do not support interaction. For accessibility, use anchors or buttons within the last cell.
+
+<Preview client:load>
+	<Fragment slot="preview">
+		<ExampleNav />
+	</Fragment>
+	<Fragment slot="code">
+		<Code code={ExampleNavRaw} lang="astro" />
 	</Fragment>
 </Preview>
 
 ## Layout
 
 See [Tailwind's utility classes](https://tailwindcss.com/docs/table-layout) for adjusting the table layout algorithm. Apply this to the Table element.
+
+## Hover Rows
+
+Add a visual hover effect using the following Tailwind syntax.
+
+```html
+<tbody class="[&>tr]:hover:preset-tonal-primary">
+	...
+</tbody>
+```
+
+## Pagination
+
+Pair with the Skeleton [Pagination](/docs/components/pagination/react) component for large data sets.
diff --git a/sites/skeleton.dev/src/examples/design/presets/Example.svelte b/sites/skeleton.dev/src/examples/design/presets/Example.svelte
index 33d95e5597..f4cc2525f4 100644
--- a/sites/skeleton.dev/src/examples/design/presets/Example.svelte
+++ b/sites/skeleton.dev/src/examples/design/presets/Example.svelte
@@ -19,34 +19,44 @@
 		<button type="button" class="btn preset-outlined-primary-500">Outlined</button>
 		<div class={diagramCircle}>3</div>
 	</div>
-	<!-- 4. Elevated -->
+	<!-- 4. Glass -->
 	<div class="flex flex-col items-center gap-4">
-		<button type="button" class="btn preset-filled-surface-100-900 shadow-xl">Elevated</button>
+		<button type="button" class="btn preset-glass-primary">Glass</button>
 		<div class={diagramCircle}>4</div>
 	</div>
-	<!-- 5. Ghost -->
+	<!-- 5. Elevated -->
 	<div class="flex flex-col items-center gap-4">
-		<button type="button" class="btn hover:preset-tonal">Ghost</button>
+		<button type="button" class="btn preset-filled-surface-100-900 shadow-xl">Elevated</button>
 		<div class={diagramCircle}>5</div>
 	</div>
-	<!-- 6. Ghost (Icon) -->
+	<!-- 6. Ghost -->
+	<div class="flex flex-col items-center gap-4">
+		<button type="button" class="btn hover:preset-tonal">Ghost</button>
+		<div class={diagramCircle}>6</div>
+	</div>
+	<!-- 7. Ghost (Icon) -->
 	<div class="flex flex-col items-center gap-4">
 		<button type="button" class="btn hover:preset-tonal-primary">
 			<IconBookmark className="size-6" />
 		</button>
-		<div class={diagramCircle}>6</div>
+		<div class={diagramCircle}>7</div>
 	</div>
-	<!-- 7. Gradient -->
+	<!-- 8. Gradient -->
 	<div class="flex flex-col items-center gap-4">
 		<button type="button" class="btn preset-gradient">Gradient</button>
-		<div class={diagramCircle}>7</div>
+		<div class={diagramCircle}>8</div>
 	</div>
 </div>
 
-<style lang="postcss">
+<style>
 	/* Create a custom preset in your global stylesheet */
 	.preset-gradient {
-		background-image: linear-gradient(45deg, var(--color-secondary-500), var(--color-tertiary-500));
+		background-image: linear-gradient(-45deg, var(--color-primary-300), var(--color-primary-700));
 		color: var(--color-primary-contrast-500);
 	}
+	.preset-glass-primary {
+		background: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
+		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-primary-500) 50%, transparent) inset;
+		backdrop-filter: blur(16px);
+	}
 </style>
diff --git a/sites/skeleton.dev/src/examples/design/presets/ExampleCustom.astro b/sites/skeleton.dev/src/examples/design/presets/ExampleCustom.astro
index ea20ffa015..fdf08ad4cf 100644
--- a/sites/skeleton.dev/src/examples/design/presets/ExampleCustom.astro
+++ b/sites/skeleton.dev/src/examples/design/presets/ExampleCustom.astro
@@ -4,7 +4,7 @@
 	<input type="text" class="input preset-input-error" value="Invalid Input State!" />
 </div>
 
-<style lang="postcss">
+<style>
 	/* Add each custom preset to your global stylesheet. */
 	.preset-input-success {
 		background-color: var(--color-success-100);
diff --git a/sites/skeleton.dev/src/examples/design/presets/ExampleGlass.astro b/sites/skeleton.dev/src/examples/design/presets/ExampleGlass.astro
new file mode 100644
index 0000000000..566fcf9643
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/design/presets/ExampleGlass.astro
@@ -0,0 +1,63 @@
+---
+const baseClasses = 'card p-4 text-white text-center flex justify-start items-center';
+---
+
+<div
+	class="w-full space-y-4 bg-[url(https://picsum.photos/id/249/1024/1024)] bg-center bg-no-repeat bg-cover rounded-container flex justify-center items-center p-4"
+>
+	<div class="w-full grid grid-cols-1 gap-2">
+		<div class:list={`${baseClasses} preset-glass-neutral`}>Neutral</div>
+		<div class:list={`${baseClasses} preset-glass-primary`}>Primary</div>
+		<div class:list={`${baseClasses} preset-glass-secondary`}>Secondary</div>
+		<div class:list={`${baseClasses} preset-glass-tertiary`}>Tertiary</div>
+		<div class:list={`${baseClasses} preset-glass-success`}>Success</div>
+		<div class:list={`${baseClasses} preset-glass-warning`}>Warning</div>
+		<div class:list={`${baseClasses} preset-glass-error`}>Error</div>
+		<div class:list={`${baseClasses} preset-glass-surface`}>Surface</div>
+	</div>
+</div>
+
+<style>
+	/* Create a custom preset in your global stylesheet */
+	.preset-glass-neutral {
+		background: color-mix(in oklab, var(--color-surface-50-950) 30%, transparent);
+		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-surface-50-950) 30%, transparent) inset;
+		backdrop-filter: blur(16px);
+	}
+	/* --- */
+	.preset-glass-primary {
+		background: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
+		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-primary-500) 50%, transparent) inset;
+		backdrop-filter: blur(16px);
+	}
+	.preset-glass-secondary {
+		background: color-mix(in oklab, var(--color-secondary-500) 40%, transparent);
+		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-secondary-500) 50%, transparent) inset;
+		backdrop-filter: blur(16px);
+	}
+	.preset-glass-tertiary {
+		background: color-mix(in oklab, var(--color-tertiary-500) 40%, transparent);
+		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-tertiary-500) 50%, transparent) inset;
+		backdrop-filter: blur(16px);
+	}
+	.preset-glass-success {
+		background: color-mix(in oklab, var(--color-success-500) 40%, transparent);
+		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-success-500) 50%, transparent) inset;
+		backdrop-filter: blur(16px);
+	}
+	.preset-glass-warning {
+		background: color-mix(in oklab, var(--color-warning-500) 40%, transparent);
+		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-warning-500) 50%, transparent) inset;
+		backdrop-filter: blur(16px);
+	}
+	.preset-glass-error {
+		background: color-mix(in oklab, var(--color-error-500) 40%, transparent);
+		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-error-500) 50%, transparent) inset;
+		backdrop-filter: blur(16px);
+	}
+	.preset-glass-surface {
+		background: color-mix(in oklab, var(--color-surface-500) 40%, transparent);
+		box-shadow: 0 0px 30px color-mix(in oklab, var(--color-surface-500) 50%, transparent) inset;
+		backdrop-filter: blur(16px);
+	}
+</style>
diff --git a/sites/skeleton.dev/src/examples/design/presets/ExampleGradient.astro b/sites/skeleton.dev/src/examples/design/presets/ExampleGradient.astro
index f4d2647a5d..e2c203b31d 100644
--- a/sites/skeleton.dev/src/examples/design/presets/ExampleGradient.astro
+++ b/sites/skeleton.dev/src/examples/design/presets/ExampleGradient.astro
@@ -1,8 +1,8 @@
 <div class="w-full space-y-4">
 	<div class="grid grid-cols-3 gap-4">
-		<button class="btn preset-gradient-one hover:brightness-125">Button</button>
-		<button class="btn preset-gradient-two hover:brightness-125">Button</button>
-		<button class="btn preset-gradient-three hover:brightness-125">Button</button>
+		<button class="btn preset-gradient-one">Button</button>
+		<button class="btn preset-gradient-two">Button</button>
+		<button class="btn preset-gradient-three">Button</button>
 	</div>
 	<div class="grid grid-cols-3 gap-4 text-center">
 		<div class="card p-4 preset-gradient-one">Card</div>
@@ -11,7 +11,7 @@
 	</div>
 </div>
 
-<style lang="postcss">
+<style>
 	/* Create a custom preset in your global stylesheet */
 	.preset-gradient-one {
 		background-image: linear-gradient(45deg, var(--color-primary-500), var(--color-tertiary-500));
diff --git a/sites/skeleton.dev/src/examples/design/spacing/Example.svelte b/sites/skeleton.dev/src/examples/design/spacing/Example.svelte
new file mode 100644
index 0000000000..0db3f96686
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/design/spacing/Example.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	const tableSpacing = [
+		// { value: '0', width: 'w-0' },
+		{ value: '[1px]', width: 'w-[1px]' },
+		{ value: '0.5', width: 'w-0.5' },
+		{ value: '1', width: 'w-1' },
+		{ value: '1.5', width: 'w-1.5' },
+		{ value: '2', width: 'w-2' },
+		{ value: '2.5', width: 'w-2.5' },
+		{ value: '3', width: 'w-3' },
+		{ value: '3.5', width: 'w-3.5' },
+		{ value: '4', width: 'w-4' },
+		{ value: '5', width: 'w-5' },
+		{ value: '6', width: 'w-6' },
+		{ value: '7', width: 'w-7' },
+		{ value: '8', width: 'w-8' },
+		{ value: '9', width: 'w-9' },
+		{ value: '10', width: 'w-10' },
+		{ value: '11', width: 'w-11' },
+		{ value: '12', width: 'w-12' },
+		{ value: '14', width: 'w-14' },
+		{ value: '16', width: 'w-16' },
+		{ value: '20', width: 'w-20' },
+		{ value: '24', width: 'w-24' },
+		{ value: '28', width: 'w-28' },
+		{ value: '32', width: 'w-32' },
+		{ value: '36', width: 'w-36' },
+		{ value: '40', width: 'w-40' },
+		{ value: '44', width: 'w-44' },
+		{ value: '48', width: 'w-48' },
+		{ value: '52', width: 'w-52' },
+		{ value: '56', width: 'w-56' },
+		{ value: '60', width: 'w-60' },
+		{ value: '64', width: 'w-64' },
+		{ value: '72', width: 'w-72' },
+		{ value: '80', width: 'w-80' }
+	];
+
+	// Reactive
+	let value = $state(0.25);
+</script>
+
+<div class="w-full space-y-4">
+	<!-- Controls -->
+	<div><code class="code">--spacing: {value}rem</code></div>
+	<input class="input" type="range" bind:value min={0.2} max={0.3} step="0.01" />
+	<!-- Display -->
+	<div class="grid grid-cols-1 gap-1">
+		{#each tableSpacing.reverse() as ts}
+			<div class="grid grid-cols-[50px_1fr] items-center gap-1">
+				<span class="text-xs">{ts.width}</span>
+				<div class="{ts.width} h-[10px] bg-primary-500" style:--spacing={`${value}rem`}></div>
+			</div>
+		{/each}
+	</div>
+</div>
diff --git a/sites/skeleton.dev/src/examples/design/typography/Semantic.svelte b/sites/skeleton.dev/src/examples/design/typography/ExampleSemantic.svelte
similarity index 100%
rename from sites/skeleton.dev/src/examples/design/typography/Semantic.svelte
rename to sites/skeleton.dev/src/examples/design/typography/ExampleSemantic.svelte
diff --git a/sites/skeleton.dev/src/examples/design/typography/ExampleTypescale.svelte b/sites/skeleton.dev/src/examples/design/typography/ExampleTypescale.svelte
new file mode 100644
index 0000000000..f2e1d86ee8
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/design/typography/ExampleTypescale.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	const options = [1.0, 1.067, 1.125, 1.2, 1.25, 1.333, 1.414, 1.5, 1.618];
+
+	// Reactive
+	let value = $state(0);
+	const current = $derived(options[value]);
+</script>
+
+<div class="w-full space-y-4">
+	<!-- Controls -->
+	<div><code class="code">-text-scaling: {current}</code></div>
+	<input class="input" type="range" bind:value min="0" max={options.length - 1} />
+	<!-- Table -->
+	<div class="table-wrap">
+		<table class="table">
+			<thead>
+				<tr>
+					<th>Class</th>
+					<th>Preview</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><code class="code">text-9xl</code></td>
+					<td style:--text-scaling={current}><span class="text-9xl">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-8xl</code></td>
+					<td style:--text-scaling={current}><span class="text-8xl">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-7xl</code></td>
+					<td style:--text-scaling={current}><span class="text-7xl">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-6xl</code></td>
+					<td style:--text-scaling={current}><span class="text-6xl">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-5xl</code></td>
+					<td style:--text-scaling={current}><span class="text-5xl">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-4xl</code></td>
+					<td style:--text-scaling={current}><span class="text-4xl">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-3xl</code></td>
+					<td style:--text-scaling={current}><span class="text-3xl">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-2xl</code></td>
+					<td style:--text-scaling={current}><span class="text-2xl">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-xl</code></td>
+					<td style:--text-scaling={current}><span class="text-xl">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-lg</code></td>
+					<td style:--text-scaling={current}><span class="text-lg">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-base</code></td>
+					<td style:--text-scaling={current}><span class="text-base">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-sm</code></td>
+					<td style:--text-scaling={current}><span class="text-sm">Aa</span></td>
+				</tr>
+				<tr>
+					<td><code class="code">text-xs</code></td>
+					<td style:--text-scaling={current}><span class="text-xs">Aa</span></td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
diff --git a/sites/skeleton.dev/src/examples/design/typography/ListNav.astro b/sites/skeleton.dev/src/examples/design/typography/ListNav.astro
index 71bec59109..e4fadf61bf 100644
--- a/sites/skeleton.dev/src/examples/design/typography/ListNav.astro
+++ b/sites/skeleton.dev/src/examples/design/typography/ListNav.astro
@@ -1,5 +1,7 @@
-<nav>
-	<!-- (optional header text here) -->
+<nav class="space-y-2">
+	<!-- Optional Heading -->
+	<p class="text-lg font-bold">Explore</p>
+	<!-- / -->
 	<ul class="space-y-2">
 		<li>
 			<a class="anchor" href="#">Home</a>
diff --git a/sites/skeleton.dev/src/examples/design/typography/Mark.astro b/sites/skeleton.dev/src/examples/design/typography/Mark.astro
index 70e318525e..2518e6a45e 100644
--- a/sites/skeleton.dev/src/examples/design/typography/Mark.astro
+++ b/sites/skeleton.dev/src/examples/design/typography/Mark.astro
@@ -1,7 +1,4 @@
+<!-- prettier-ignore -->
 <p>
-	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, <mark class="mark">aliquid</mark>. Molestias, odio illum <mark
-		class="mark">voluptatibus</mark
-	>
-	natus dignissimos, quidem est unde aspernatur veniam pariatur fuga distinctio esse in quas, <mark class="mark">repellendus</mark>
-	neque reiciendis!
+	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, <mark class="mark">aliquid</mark>. Molestias, odio illum voluptatibus <mark class="mark">natus dignissimos</mark>, quidem est unde aspernatur veniam pariatur fuga.
 </p>
diff --git a/sites/skeleton.dev/src/examples/design/typography/TypeScale.svelte b/sites/skeleton.dev/src/examples/design/typography/TypeScale.svelte
deleted file mode 100644
index cccbab879f..0000000000
--- a/sites/skeleton.dev/src/examples/design/typography/TypeScale.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-	const options = [
-		'text-xs',
-		'text-sm',
-		'text-base',
-		'text-lg',
-		'text-xl',
-		'text-2xl',
-		'text-3xl', // <-- default
-		'text-4xl',
-		'text-5xl',
-		'text-6xl',
-		'text-7xl',
-		'text-8xl',
-		'text-9xl'
-	];
-
-	let currentOption = $state(options.indexOf('text-3xl'));
-</script>
-
-<div class="w-full space-y-4">
-	<!-- Display -->
-	<div class="h-[200px] flex justify-center items-center overflow-hidden whitespace-nowrap">
-		<span class={options[currentOption]}>{options[currentOption]}</span>
-	</div>
-	<!-- Ranger Slider -->
-	<input
-		class="input max-w-[320px] mx-auto"
-		type="range"
-		value={currentOption}
-		oninput={(e) => (currentOption = Number((e.target as HTMLInputElement).value))}
-		max={options.length - 1}
-	/>
-</div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/badges/Example.astro b/sites/skeleton.dev/src/examples/tailwind/badges/Example.astro
index c13546be78..fa51ec1430 100644
--- a/sites/skeleton.dev/src/examples/tailwind/badges/Example.astro
+++ b/sites/skeleton.dev/src/examples/tailwind/badges/Example.astro
@@ -1,14 +1,17 @@
 ---
-import { Heart } from 'lucide-react';
+import { Heart as IconHeart } from 'lucide-react';
 ---
 
 <div class="flex items-center gap-4">
+	<!-- A simple icon badge -->
 	<span class="badge-icon preset-filled">
-		<Heart size={16} />
+		<IconHeart size={16} />
 	</span>
+	<!-- A standard badge -->
 	<span class="badge preset-filled">Badge</span>
+	<!-- A badge + icon -->
 	<span class="badge preset-filled">
-		<Heart size={16} />
+		<IconHeart size={16} />
 		<span>Badge</span>
 	</span>
 </div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/buttons/Example.astro b/sites/skeleton.dev/src/examples/tailwind/buttons/Example.astro
index 9f311e27ec..72545fae52 100644
--- a/sites/skeleton.dev/src/examples/tailwind/buttons/Example.astro
+++ b/sites/skeleton.dev/src/examples/tailwind/buttons/Example.astro
@@ -1,8 +1,15 @@
+---
+import { ArrowRight as IconArrowRight } from 'lucide-react';
+---
+
 <div class="flex items-center gap-4">
-	<button type="button" class="btn-icon preset-filled">&rarr;</button>
+	<!-- A simple icon button -->
+	<button type="button" class="btn-icon preset-filled"><IconArrowRight size={18} /></button>
+	<!-- A standard button -->
 	<button type="button" class="btn preset-filled">Button</button>
+	<!-- A button + icon -->
 	<button type="button" class="btn preset-filled">
 		<span>Button</span>
-		<span>&rarr;</span>
+		<IconArrowRight size={18} />
 	</button>
 </div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/cards/Example.astro b/sites/skeleton.dev/src/examples/tailwind/cards/Example.astro
index 683f2e8bf5..eb00b80484 100644
--- a/sites/skeleton.dev/src/examples/tailwind/cards/Example.astro
+++ b/sites/skeleton.dev/src/examples/tailwind/cards/Example.astro
@@ -1,3 +1,3 @@
-<div class="card preset-filled-surface-100-900 border-[1px] border-surface-200-800 w-full max-w-md p-4 text-center">
+<div class="card w-full max-w-md preset-filled-surface-100-900 p-4 text-center">
 	<p>Card</p>
 </div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/cards/ExamplePresets.astro b/sites/skeleton.dev/src/examples/tailwind/cards/ExamplePresets.astro
new file mode 100644
index 0000000000..c526928172
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/tailwind/cards/ExamplePresets.astro
@@ -0,0 +1,29 @@
+<div class="w-full grid grid-cols-3 gap-4">
+	<div class="card p-4 preset-filled-primary-500">Card</div>
+	<div class="card p-4 preset-tonal-primary">Card</div>
+	<div class="card p-4 preset-outlined-primary-500">Card</div>
+	{/* --- */}
+	<div class="card p-4 preset-filled-secondary-500">Card</div>
+	<div class="card p-4 preset-tonal-secondary">Card</div>
+	<div class="card p-4 preset-outlined-secondary-500">Card</div>
+	{/* --- */}
+	<div class="card p-4 preset-filled-tertiary-500">Card</div>
+	<div class="card p-4 preset-tonal-tertiary">Card</div>
+	<div class="card p-4 preset-outlined-tertiary-500">Card</div>
+	{/* --- */}
+	<div class="card p-4 preset-filled-success-500">Card</div>
+	<div class="card p-4 preset-tonal-success">Card</div>
+	<div class="card p-4 preset-outlined-success-500">Card</div>
+	{/* --- */}
+	<div class="card p-4 preset-filled-warning-500">Card</div>
+	<div class="card p-4 preset-tonal-warning">Card</div>
+	<div class="card p-4 preset-outlined-warning-500">Card</div>
+	{/* --- */}
+	<div class="card p-4 preset-filled-error-500">Card</div>
+	<div class="card p-4 preset-tonal-error">Card</div>
+	<div class="card p-4 preset-outlined-error-500">Card</div>
+	{/* --- */}
+	<div class="card p-4 preset-filled-surface-500">Card</div>
+	<div class="card p-4 preset-tonal-surface">Card</div>
+	<div class="card p-4 preset-outlined-surface-500">Card</div>
+</div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/chips/Example.astro b/sites/skeleton.dev/src/examples/tailwind/chips/Example.astro
index 3129c3d868..dc97a93400 100644
--- a/sites/skeleton.dev/src/examples/tailwind/chips/Example.astro
+++ b/sites/skeleton.dev/src/examples/tailwind/chips/Example.astro
@@ -3,10 +3,13 @@ import { Check } from 'lucide-react';
 ---
 
 <div class="flex items-center gap-4">
+	<!-- A simple icon chip -->
 	<button type="button" class="chip-icon preset-filled">
 		<Check size={16} />
 	</button>
+	<!-- A standard chip -->
 	<button type="button" class="chip preset-filled">Chip</button>
+	<!-- A chip + icon -->
 	<button type="button" class="chip preset-filled">
 		<span>Chip</span>
 		<Check size={16} />
diff --git a/sites/skeleton.dev/src/examples/tailwind/chips/ExampleSelect.svelte b/sites/skeleton.dev/src/examples/tailwind/chips/ExampleSelect.svelte
new file mode 100644
index 0000000000..800ce33e5b
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/tailwind/chips/ExampleSelect.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	const colors = ['red', 'blue', 'green'];
+	let color = $state(colors[0]);
+
+	function setColor(selectedColor: string) {
+		color = selectedColor;
+	}
+</script>
+
+<div class="flex gap-2">
+	<!-- Loop through the available colors -->
+	{#each colors as c}
+		<!-- On selection, set the color state, dynamically update classes -->
+		<button class={`chip capitalize ${color === c ? 'preset-filled' : 'preset-tonal'}`} onclick={() => setColor(c)}>
+			<span>{c}</span>
+		</button>
+	{/each}
+</div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/chips/ExampleSelect.tsx b/sites/skeleton.dev/src/examples/tailwind/chips/ExampleSelect.tsx
index 301879e6b2..42b219ea6e 100644
--- a/sites/skeleton.dev/src/examples/tailwind/chips/ExampleSelect.tsx
+++ b/sites/skeleton.dev/src/examples/tailwind/chips/ExampleSelect.tsx
@@ -1,10 +1,8 @@
 import React, { useState } from 'react';
 
 export const Page: React.FC = () => {
-	// The default color state
-	const [color, setColor] = useState('red');
-	// The available set of colors
 	const colors = ['red', 'blue', 'green'];
+	const [color, setColor] = useState(colors[0]);
 
 	return (
 		<div className="flex gap-2">
diff --git a/sites/skeleton.dev/src/examples/tailwind/dividers/Example.astro b/sites/skeleton.dev/src/examples/tailwind/dividers/Example.astro
index 1ff3a1f54a..b5a6e35a20 100644
--- a/sites/skeleton.dev/src/examples/tailwind/dividers/Example.astro
+++ b/sites/skeleton.dev/src/examples/tailwind/dividers/Example.astro
@@ -1,10 +1,7 @@
-<div class="w-full space-y-4">
-	<p class="text-xs opacity-60">Default</p>
+<div class="w-full space-y-4 text-center">
+	<p>Above the divider.</p>
+	<!-- --- -->
 	<hr class="hr" />
-	<p class="text-xs opacity-60">border-t-2</p>
-	<hr class="hr border-t-2" />
-	<p class="text-xs opacity-60">border-t-4</p>
-	<hr class="hr border-t-4" />
-	<p class="text-xs opacity-60">border-t-8</p>
-	<hr class="hr border-t-8" />
+	<!-- --- -->
+	<p>Below the divider.</p>
 </div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleColors.astro b/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleColors.astro
new file mode 100644
index 0000000000..9c8c03972f
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleColors.astro
@@ -0,0 +1,23 @@
+<div class="w-full space-y-4">
+	<code class="inline-block code">border-primary-500</code>
+	<hr class="hr border-primary-500" />
+	<!-- --- -->
+	<code class="inline-block code">border-secondary-500</code>
+	<hr class="hr border-secondary-500" />
+	<!-- --- -->
+	<code class="inline-block code">border-tertiary-500</code>
+	<hr class="hr border-tertiary-500" />
+	<!-- --- -->
+	<code class="inline-block code">border-success-500</code>
+	<hr class="hr border-success-500" />
+	<!-- --- -->
+	<code class="inline-block code">border-warning-500</code>
+	<hr class="hr border-warning-500" />
+	<!-- --- -->
+	<code class="inline-block code">border-error-500</code>
+	<hr class="hr border-error-500" />
+	<!-- --- -->
+	<code class="inline-block code">border-surface-950-50</code>
+	<hr class="hr border-surface-950-50" />
+	<!-- --- -->
+</div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleSize.astro b/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleSize.astro
new file mode 100644
index 0000000000..aac09b5eaf
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleSize.astro
@@ -0,0 +1,13 @@
+<div class="w-full space-y-4">
+	<code class="inline-block code">Default</code>
+	<hr class="hr" />
+	<!-- --- -->
+	<code class="inline-block code">border-t-2</code>
+	<hr class="hr border-t-2" />
+	<!-- --- -->
+	<code class="inline-block code">border-t-4</code>
+	<hr class="hr border-t-4" />
+	<!-- --- -->
+	<code class="inline-block code">border-t-8</code>
+	<hr class="hr border-t-8" />
+</div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleStyle.astro b/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleStyle.astro
new file mode 100644
index 0000000000..477f19f876
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleStyle.astro
@@ -0,0 +1,13 @@
+<div class="w-full space-y-4">
+	<code class="inline-block code">border-solid</code>
+	<hr class="hr border-solid" />
+	<!-- --- -->
+	<code class="inline-block code">border-dashed</code>
+	<hr class="hr border-dashed" />
+	<!-- --- -->
+	<code class="inline-block code">border-dotted</code>
+	<hr class="hr border-dotted" />
+	<!-- --- -->
+	<code class="inline-block code">border-double</code>
+	<hr class="hr border-4 border-double" />
+</div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleVert.astro b/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleVert.astro
index 7b467021ed..52aec6cb59 100644
--- a/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleVert.astro
+++ b/sites/skeleton.dev/src/examples/tailwind/dividers/ExampleVert.astro
@@ -1,8 +1,10 @@
 <div class="grid h-20 grid-cols-[1fr_auto_auto_auto_auto_1fr] items-center gap-4">
-	<p class="text-xs opacity-60">Default &rarr;</p>
+	<span><code class="code">Default</code> &rarr;</span>
+	<!-- --- -->
 	<span class="vr"></span>
 	<span class="vr border-l-2"></span>
 	<span class="vr border-l-4"></span>
 	<span class="vr border-l-8"></span>
-	<p class="text-xs opacity-60">&larr; border-l-8</p>
+	<!-- --- -->
+	<span>&larr; <code class="code">border-l-8</code></span>
 </div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/forms/Example.astro b/sites/skeleton.dev/src/examples/tailwind/forms/Example.astro
index 6d2de0d5fa..b3fa4ad587 100644
--- a/sites/skeleton.dev/src/examples/tailwind/forms/Example.astro
+++ b/sites/skeleton.dev/src/examples/tailwind/forms/Example.astro
@@ -1,4 +1,4 @@
-<form class="card border-[1px] border-surface-200-800 w-full max-w-md space-y-4 p-4">
+<form class="w-full max-w-md space-y-4 p-4">
 	<fieldset class="space-y-4">
 		<!-- Input -->
 		<label class="label">
diff --git a/sites/skeleton.dev/src/examples/tailwind/forms/ExampleInputs.astro b/sites/skeleton.dev/src/examples/tailwind/forms/ExampleInputs.astro
new file mode 100644
index 0000000000..d968b0e2c8
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/tailwind/forms/ExampleInputs.astro
@@ -0,0 +1,23 @@
+<form class="mx-auto w-full max-w-md space-y-4">
+	<input type="text" class="input" placeholder="Enter name" />
+	<!-- --- -->
+	<label class="label">
+		<span class="label-text">Number</span>
+		<input type="number" class="input" placeholder="Enter Age" />
+	</label>
+	<!-- --- -->
+	<label class="label">
+		<span class="label-text">Number</span>
+		<input type="number" class="input" placeholder="Enter Age" />
+	</label>
+	<!-- --- -->
+	<label class="label">
+		<span class="label-text">Phone Number</span>
+		<input type="tel" class="input" placeholder="ex: 214-555-1234" />
+	</label>
+	<!-- --- -->
+	<label class="label">
+		<span class="label-text">Search</span>
+		<input type="search" class="input" placeholder="Search..." />
+	</label>
+</form>
diff --git a/sites/skeleton.dev/src/examples/tailwind/forms/ExampleSpecial.astro b/sites/skeleton.dev/src/examples/tailwind/forms/ExampleSpecial.astro
index 1f19001679..dec27dbe05 100644
--- a/sites/skeleton.dev/src/examples/tailwind/forms/ExampleSpecial.astro
+++ b/sites/skeleton.dev/src/examples/tailwind/forms/ExampleSpecial.astro
@@ -1,6 +1,4 @@
 <form class="mx-auto w-full max-w-md space-y-4">
-	<!-- Search -->
-	<input class="input" type="search" placeholder="Search..." />
 	<!-- Date Picker -->
 	<label class="label">
 		<span class="label-text">Date</span>
diff --git a/sites/skeleton.dev/src/examples/tailwind/tables/Example.astro b/sites/skeleton.dev/src/examples/tailwind/tables/Example.astro
index e265bf1956..1b1e43318d 100644
--- a/sites/skeleton.dev/src/examples/tailwind/tables/Example.astro
+++ b/sites/skeleton.dev/src/examples/tailwind/tables/Example.astro
@@ -10,15 +10,6 @@ const tableData = [
 
 <div class="table-wrap">
 	<table class="table caption-bottom">
-		<caption class="pt-4">A list of elements from the periodic table.</caption>
-		<thead>
-			<tr>
-				<th>Position</th>
-				<th>Symbol</th>
-				<th>Name</th>
-				<th class="!text-right">Weight</th>
-			</tr>
-		</thead>
 		<tbody class="[&>tr]:hover:preset-tonal-primary">
 			{
 				tableData.map((row) => (
@@ -31,11 +22,5 @@ const tableData = [
 				))
 			}
 		</tbody>
-		<tfoot>
-			<tr>
-				<td colspan="3">Total</td>
-				<td class="text-right">{tableData.length} Elements</td>
-			</tr>
-		</tfoot>
 	</table>
 </div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/tables/ExampleFull.astro b/sites/skeleton.dev/src/examples/tailwind/tables/ExampleFull.astro
new file mode 100644
index 0000000000..e265bf1956
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/tailwind/tables/ExampleFull.astro
@@ -0,0 +1,41 @@
+---
+const tableData = [
+	{ position: '0', name: 'Iron', symbol: 'Fe', atomic_no: '26' },
+	{ position: '1', name: 'Rhodium', symbol: 'Rh', atomic_no: '45' },
+	{ position: '2', name: 'Iodine', symbol: 'I', atomic_no: '53' },
+	{ position: '3', name: 'Radon', symbol: 'Rn', atomic_no: '86' },
+	{ position: '4', name: 'Technetium', symbol: 'Tc', atomic_no: '43' }
+];
+---
+
+<div class="table-wrap">
+	<table class="table caption-bottom">
+		<caption class="pt-4">A list of elements from the periodic table.</caption>
+		<thead>
+			<tr>
+				<th>Position</th>
+				<th>Symbol</th>
+				<th>Name</th>
+				<th class="!text-right">Weight</th>
+			</tr>
+		</thead>
+		<tbody class="[&>tr]:hover:preset-tonal-primary">
+			{
+				tableData.map((row) => (
+					<tr>
+						<td>{row.position}</td>
+						<td>{row.symbol}</td>
+						<td>{row.name}</td>
+						<td class="text-right">{row.atomic_no}</td>
+					</tr>
+				))
+			}
+		</tbody>
+		<tfoot>
+			<tr>
+				<td colspan="3">Total</td>
+				<td class="text-right">{tableData.length} Elements</td>
+			</tr>
+		</tfoot>
+	</table>
+</div>
diff --git a/sites/skeleton.dev/src/examples/tailwind/tables/ExampleNav.astro b/sites/skeleton.dev/src/examples/tailwind/tables/ExampleNav.astro
new file mode 100644
index 0000000000..9b46b8537d
--- /dev/null
+++ b/sites/skeleton.dev/src/examples/tailwind/tables/ExampleNav.astro
@@ -0,0 +1,36 @@
+---
+const tableData = [
+	{ first: 'Liam', last: 'Steele', email: 'liam@email.com' },
+	{ first: 'Athena', last: 'Marks', email: 'athena@email.com' },
+	{ first: 'Angela', last: 'Rivers', email: 'angela@email.com' }
+];
+---
+
+<div class="table-wrap">
+	<table class="table caption-bottom">
+		<tbody>
+			<thead>
+				<tr>
+					<th>First Name</th>
+					<th>Last Name</th>
+					<th>Email</th>
+					<th>&nbsp;</th>
+				</tr>
+			</thead>
+			{
+				tableData.map((row) => (
+					<tr>
+						<td>{row.first}</td>
+						<td>{row.last}</td>
+						<td>{row.email}</td>
+						<td class="text-right">
+							<a class="btn btn-sm preset-filled" href="#">
+								View &rarr;
+							</a>
+						</td>
+					</tr>
+				))
+			}
+		</tbody>
+	</table>
+</div>