diff --git a/frontend/src/components/TokenPreview.vue b/frontend/src/components/TokenPreview.vue
index 07fb8df..a2d5e5b 100644
--- a/frontend/src/components/TokenPreview.vue
+++ b/frontend/src/components/TokenPreview.vue
@@ -259,6 +259,13 @@ function ruleWidth(value: string): string {
    completely, and a 15% tint shows exactly as much of them as it should.
    Layering the fill as a gradient is what lets one element do both. */
 .tp-swatch {
+  /* Declared here, overridden inline per swatch. Two reasons it is a real
+     default rather than a formality: a token that resolves to nothing renders
+     as bare checks instead of an invalid gradient, and a custom property that
+     exists ONLY as an inline style is invisible to the CI token check — which
+     reads it as an unresolvable reference, correctly, since nothing in any
+     stylesheet declares it. */
+  --tp-fill: transparent;
   width: 100%;
   height: 100%;
   border-radius: calc(var(--fs-radius-sm) - 2px);