diff --git a/examples/app-showcase/src/pages/index.ts b/examples/app-showcase/src/pages/index.ts
index 5a88ae0269..763270f5da 100644
--- a/examples/app-showcase/src/pages/index.ts
+++ b/examples/app-showcase/src/pages/index.ts
@@ -63,10 +63,10 @@ export const ComponentGalleryPage: Page = {
             columns: 4,
             gap: 4,
             children: [
-              { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'Projects', icon: 'folder-kanban', aggregate: { field: 'id', function: 'count' } } },
-              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Tasks', icon: 'check-square', aggregate: { field: 'id', function: 'count' } } },
-              { type: 'object-metric', properties: { objectName: 'showcase_account', label: 'Accounts', icon: 'building', aggregate: { field: 'id', function: 'count' } } },
-              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'Projects', icon: 'folder-kanban', colorVariant: 'blue', description: 'active & planned', aggregate: { field: 'id', function: 'count' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Tasks', icon: 'check-square', colorVariant: 'purple', description: 'all states', aggregate: { field: 'id', function: 'count' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_account', label: 'Accounts', icon: 'building', colorVariant: 'teal', description: 'customers', aggregate: { field: 'id', function: 'count' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', colorVariant: 'warning', description: 'not done', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
             ],
           },
         },
diff --git a/examples/app-showcase/src/pages/my-work.page.ts b/examples/app-showcase/src/pages/my-work.page.ts
index 92ce4496e2..3cbf8afea7 100644
--- a/examples/app-showcase/src/pages/my-work.page.ts
+++ b/examples/app-showcase/src/pages/my-work.page.ts
@@ -36,9 +36,9 @@ export const MyWorkPage: Page = {
             columns: 3,
             gap: 4,
             children: [
-              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
-              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'In Review', icon: 'eye', aggregate: { field: 'id', function: 'count' }, filter: { status: 'in_review' } } },
-              { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'At-Risk Projects', icon: 'alert-triangle', aggregate: { field: 'id', function: 'count' }, filter: { health: 'red' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', colorVariant: 'blue', description: 'not done', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'In Review', icon: 'eye', colorVariant: 'warning', description: 'awaiting review', aggregate: { field: 'id', function: 'count' }, filter: { status: 'in_review' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'At-Risk Projects', icon: 'alert-triangle', colorVariant: 'danger', description: 'health red', aggregate: { field: 'id', function: 'count' }, filter: { health: 'red' } } },
             ],
           },
         },