diff --git a/demo/partials/cards.html b/demo/partials/cards.html
index 0a056f4..b48f49e 100644
--- a/demo/partials/cards.html
+++ b/demo/partials/cards.html
@@ -108,6 +108,40 @@
 		</div>
 	</div>
 
+	<div class="block mt-6">
+		<div class="card metric-card">
+			<div class="card-content">
+				<div class="metric-card-header">
+					<p class="metric-card-label">Monthly usage</p>
+					<span class="metric-card-icon">
+						<i class="ph ph-chart-line-up"></i>
+					</span>
+				</div>
+				<p class="metric-card-value">84.2%</p>
+				<div class="metric-card-meta">
+					<span class="metric-card-delta">+12.8%</span>
+					<span>vs previous period</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="block mt-6">
+		<div class="card action-card">
+			<div class="card-content">
+				<span class="action-card-kicker">Quick action</span>
+				<h3 class="action-card-title">Create workflow</h3>
+				<p class="action-card-text">
+					Use action cards for primary next steps, onboarding prompts, and compact empty state actions.
+				</p>
+				<div class="action-card-actions">
+					<button class="btn btn-secondary btn-small" type="button">Preview</button>
+					<button class="btn btn-accent btn-small" type="button">Create</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<div class="code-example">
 		<div class="code-example-header">
 			<span class="code-example-title">Cards HTML</span>
@@ -126,4 +160,44 @@
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
 	</div>
+
+	<div class="code-example">
+		<div class="code-example-header">
+			<span class="code-example-title">Metric Card HTML</span>
+			<button class="code-example-copy" type="button">Copy</button>
+		</div>
+		<pre><code class="language-html">&lt;div class="card metric-card"&gt;
+  &lt;div class="card-content"&gt;
+    &lt;div class="metric-card-header"&gt;
+      &lt;p class="metric-card-label"&gt;Monthly usage&lt;/p&gt;
+      &lt;span class="metric-card-icon"&gt;&lt;i class="ph ph-chart-line-up"&gt;&lt;/i&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;p class="metric-card-value"&gt;84.2%&lt;/p&gt;
+    &lt;div class="metric-card-meta"&gt;
+      &lt;span class="metric-card-delta"&gt;+12.8%&lt;/span&gt;
+      &lt;span&gt;vs previous period&lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+	</div>
+
+	<div class="code-example">
+		<div class="code-example-header">
+			<span class="code-example-title">Action Card HTML</span>
+			<button class="code-example-copy" type="button">Copy</button>
+		</div>
+		<pre><code class="language-html">&lt;div class="card action-card"&gt;
+  &lt;div class="card-content"&gt;
+    &lt;span class="action-card-kicker"&gt;Quick action&lt;/span&gt;
+    &lt;h3 class="action-card-title"&gt;Create workflow&lt;/h3&gt;
+    &lt;p class="action-card-text"&gt;
+      Use action cards for primary next steps and compact empty state actions.
+    &lt;/p&gt;
+    &lt;div class="action-card-actions"&gt;
+      &lt;button class="btn btn-secondary btn-small"&gt;Preview&lt;/button&gt;
+      &lt;button class="btn btn-accent btn-small"&gt;Create&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+	</div>
 </section>
diff --git a/demo/partials/tables.html b/demo/partials/tables.html
index d53de81..1e1c2e1 100644
--- a/demo/partials/tables.html
+++ b/demo/partials/tables.html
@@ -78,6 +78,56 @@
 		</table>
 	</div>
 
+	<div class="block mt-6">
+		<h3 class="block-title">Compact table</h3>
+
+		<div class="table-wrapper">
+			<table class="table table-compact">
+				<caption class="table-caption">Recent jobs</caption>
+
+				<thead class="table-head">
+					<tr class="table-row">
+						<th scope="col">Job</th>
+						<th scope="col">State</th>
+						<th scope="col">Runtime</th>
+						<th scope="col">Run ID</th>
+						<th scope="col">Actions</th>
+					</tr>
+				</thead>
+
+				<tbody class="table-body">
+					<tr class="table-row">
+						<td>Sync catalog</td>
+						<td><span class="badge badge-success">Done</span></td>
+						<td>18s</td>
+						<td class="table-cell-mono">run_1048</td>
+						<td class="table-cell-actions">
+							<button class="btn btn-secondary btn-small" type="button">Logs</button>
+						</td>
+					</tr>
+					<tr class="table-row">
+						<td>Import archive</td>
+						<td><span class="badge badge-warning">Running</span></td>
+						<td>2m 14s</td>
+						<td class="table-cell-mono">run_1047</td>
+						<td class="table-cell-actions">
+							<button class="btn btn-danger btn-small" type="button">Stop</button>
+						</td>
+					</tr>
+					<tr class="table-row">
+						<td>Export report</td>
+						<td><span class="badge badge-error">Failed</span></td>
+						<td>4s</td>
+						<td class="table-cell-mono">run_1046</td>
+						<td class="table-cell-actions">
+							<button class="btn btn-accent btn-small" type="button">Retry</button>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+
 	<div class="code-example">
 		<div class="code-example-header">
 			<span class="code-example-title">Tables HTML</span>
@@ -99,4 +149,28 @@
   &lt;/tbody&gt;
 &lt;/table&gt;</code></pre>
 	</div>
+
+	<div class="code-example">
+		<div class="code-example-header">
+			<span class="code-example-title">Compact Table HTML</span>
+			<button class="code-example-copy" type="button">Copy</button>
+		</div>
+		<pre><code class="language-html">&lt;table class="table table-compact"&gt;
+  &lt;caption class="table-caption"&gt;Recent jobs&lt;/caption&gt;
+  &lt;thead class="table-head"&gt;
+    &lt;tr class="table-row"&gt;
+      &lt;th scope="col"&gt;Job&lt;/th&gt;
+      &lt;th scope="col"&gt;State&lt;/th&gt;
+      &lt;th scope="col"&gt;Run ID&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody class="table-body"&gt;
+    &lt;tr class="table-row"&gt;
+      &lt;td&gt;Sync catalog&lt;/td&gt;
+      &lt;td&gt;&lt;span class="badge badge-success"&gt;Done&lt;/span&gt;&lt;/td&gt;
+      &lt;td class="table-cell-mono"&gt;run_1048&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</code></pre>
+	</div>
 </section>
diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss
index 801f6de..9280212 100644
--- a/src/scss/components/_cards.scss
+++ b/src/scss/components/_cards.scss
@@ -128,4 +128,112 @@
 			}
 		}
 	}
+
+	&.metric-card {
+		max-width: 320px;
+		border-color: $border-color-muted;
+
+		.card-content {
+			display: flex;
+			flex-direction: column;
+			gap: $space-4;
+		}
+
+		.metric-card-header {
+			display: flex;
+			align-items: flex-start;
+			justify-content: space-between;
+			gap: $space-3;
+		}
+
+		.metric-card-label {
+			margin: 0;
+			color: $color-text-medium;
+			font-size: $font-size-sm;
+			font-weight: $font-weight-semibold;
+			text-transform: uppercase;
+		}
+
+		.metric-card-icon {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: $control-height-md;
+			height: $control-height-md;
+			color: $color-black;
+			background: $color-secondary;
+			font-size: $icon-size-md;
+		}
+
+		.metric-card-value {
+			margin: 0;
+			color: $color-text-light;
+			font-size: $font-size-h1;
+			font-weight: $font-weight-bold;
+			line-height: $line-height-tight;
+		}
+
+		.metric-card-meta {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: $space-2;
+			color: $color-text-dark;
+			font-size: $font-size-sm;
+		}
+
+		.metric-card-delta {
+			color: $color-success;
+			font-weight: $font-weight-bold;
+
+			&.metric-card-delta-negative {
+				color: $color-error;
+			}
+		}
+	}
+
+	&.action-card {
+		max-width: 360px;
+		border-color: $color-secondary;
+
+		.card-content {
+			display: flex;
+			flex-direction: column;
+			gap: $space-4;
+		}
+
+		.action-card-kicker {
+			display: inline-flex;
+			width: max-content;
+			padding: $space-1 $space-2;
+			color: $color-black;
+			background: $color-secondary;
+			font-size: $font-size-xs;
+			font-weight: $font-weight-bold;
+			line-height: $line-height-base;
+			text-transform: uppercase;
+		}
+
+		.action-card-title {
+			margin: 0;
+			font-size: $font-size-xl;
+			font-weight: $font-weight-bold;
+			line-height: $line-height-snug;
+			text-transform: uppercase;
+		}
+
+		.action-card-text {
+			margin: 0;
+			color: $color-text-medium;
+			font-size: $font-size-sm;
+			line-height: $line-height-relaxed;
+		}
+
+		.action-card-actions {
+			display: flex;
+			flex-wrap: wrap;
+			gap: $space-2;
+			margin-top: $space-2;
+		}
+	}
 }
diff --git a/src/scss/components/_tables.scss b/src/scss/components/_tables.scss
index ff4b1d7..bf811fc 100644
--- a/src/scss/components/_tables.scss
+++ b/src/scss/components/_tables.scss
@@ -67,6 +67,31 @@
 			padding-top: $space-4;
 		}
 	}
+
+	&.table-compact {
+		.table-caption {
+			font-size: $font-size-md;
+		}
+
+		.table-row {
+			th,
+			td {
+				padding: $space-2 $space-3;
+				font-size: $font-size-xs;
+			}
+		}
+
+		.table-cell-mono {
+			color: $color-text-medium;
+			font-family: $font-family-code;
+			letter-spacing: $letter-spacing-normal;
+		}
+
+		.table-cell-actions {
+			width: 1%;
+			white-space: nowrap;
+		}
+	}
 }
 
 .table-wrapper {