diff --git a/apps/docs/content/docs/docs/installation.mdx b/apps/docs/content/docs/docs/installation.mdx
index fcceb051..1dfe7d77 100644
--- a/apps/docs/content/docs/docs/installation.mdx
+++ b/apps/docs/content/docs/docs/installation.mdx
@@ -3,12 +3,7 @@ title: Installation
 description: Install Luke UI, apply a bundled theme, and render a component.
 ---
 
-Luke UI is a React component library with static CSS and bundled themes. This guide uses Tactile,
-then shows the first component inside a themed root.
-
-## Installation
-
-### 1. Install Luke UI
+## Install Luke UI
 
 Install the package in your application.
 
@@ -16,22 +11,19 @@ Install the package in your application.
 pnpm add @luke-ui/react
 ```
 
-### 2. Import the CSS
-
-Import the shared stylesheet and one theme's stylesheet at your application root. This example uses
-Tactile. To use Paper, import `@luke-ui/react/themes/paper/stylesheet.css` instead.
+## Set up the theme
 
-### 3. Add the theme root
+Import `@luke-ui/react/stylesheet.css` and one theme stylesheet at your application root. This guide
+uses Tactile. To use Paper, import `@luke-ui/react/themes/paper/stylesheet.css` instead.
 
 Apply `rootClassName` to an element you own, such as the application shell. The theme stylesheet
 supplies the semantic variables. `rootClassName` adds the reset and base typography.
 
 <SourceCodeBlock src="theming/getting-started" />
 
-### 4. Use components
+## Use components
 
-Import each component from its package path. The setup above renders `Text`. `Button` comes from
-`@luke-ui/react/button`.
+Import each component from its package path.
 
 <SourceCodeBlock src="overview/welcome" />
 
diff --git a/apps/docs/src/examples/text/alignment.tsx b/apps/docs/src/examples/text/alignment.tsx
index a27bbc55..9b3e10f2 100644
--- a/apps/docs/src/examples/text/alignment.tsx
+++ b/apps/docs/src/examples/text/alignment.tsx
@@ -1,16 +1,21 @@
 import { Box } from '@luke-ui/react/box';
 import { Text } from '@luke-ui/react/text';
+import { vars } from '@luke-ui/react/theme';
+
+const rowStyle = {
+	backgroundColor: vars.color.background.neutral.subtle.rest,
+} as const;
 
 export default () => {
 	return (
-		<Box display="flex" flexDirection="column" gap="200">
-			<Text elementType="div" textAlign="start">
+		<Box display="flex" flexDirection="column" gap="200" inlineSize="100%">
+			<Text elementType="p" style={rowStyle} textAlign="start">
 				Start aligned
 			</Text>
-			<Text elementType="div" textAlign="center">
+			<Text elementType="p" style={rowStyle} textAlign="center">
 				Centre aligned
 			</Text>
-			<Text elementType="div" textAlign="end">
+			<Text elementType="p" style={rowStyle} textAlign="end">
 				End aligned
 			</Text>
 		</Box>
diff --git a/apps/docs/src/samples/theming/getting-started.tsx b/apps/docs/src/samples/theming/getting-started.tsx
index a4c0b684..9cc542ca 100644
--- a/apps/docs/src/samples/theming/getting-started.tsx
+++ b/apps/docs/src/samples/theming/getting-started.tsx
@@ -1,14 +1,14 @@
 import '@luke-ui/react/stylesheet.css';
 import '@luke-ui/react/themes/tactile/stylesheet.css';
-import { Text } from '@luke-ui/react/text';
 import { rootClassName } from '@luke-ui/react/theme';
 import type { PropsWithChildren } from 'react';
 
 export function App({ children }: PropsWithChildren) {
 	return (
-		<div className={rootClassName}>
-			<Text>Hello world</Text>
-			{children}
-		</div>
+		<body className={rootClassName}>
+			<header />
+			<main>{children}</main>
+			<footer />
+		</body>
 	);
 }
