diff --git a/apps/storybook/styles/storybook-styles.css b/apps/storybook/styles/storybook-styles.css
index a5cc2aa8d1..3b8d3e3380 100644
--- a/apps/storybook/styles/storybook-styles.css
+++ b/apps/storybook/styles/storybook-styles.css
@@ -235,6 +235,7 @@
     */
     --cal-brand:#111827;
     --cal-brand-emphasis:#101010;
+    --cal-brand-text: white;
   }
   .dark {
     /* background */
@@ -274,7 +275,8 @@
     /* Brand shenanigans
       -> These will be computed for the users theme at runtime.
     */
-    --cal-brand: #111827;
-    --cal-brand-emphasis: #101010;
+    --cal-brand: white;
+    --cal-brand-emphasis: #e1e1e1;
+    --cal-brand-text: black;
   }
 }
diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx
index e5d3d6edf9..4efd47f826 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/packages/ui/components/top-banner/TopBanner.tsx
@@ -22,7 +22,7 @@ const variantClassName = {
 const defaultIconProps = {
   className: "text-emphasis h-4 w-4 stroke-[2.5px]",
   "aria-hidden": "true",
-} satisfies LucideProps;
+} as LucideProps;
 
 export function TopBanner(props: TopBannerProps) {
   const { Icon, variant = "default", text, actions, onClose } = props;