Completed template

app/components/type/ContentLockup/ContentLockup.container.tsx

@@ -3,7 +3,10 @@
 import { memo } from "react";
 import ContentLockupView from "./ContentLockup.view";
 import type { ContentLockupProps, VariantStyle } from "./ContentLockup.types";
-import { normalizeContentLockupVariant, normalizeAlignment } from "../../../../lib/propNormalization";
+import {
+  normalizeContentLockupVariant,
+  normalizeAlignment,
+} from "../../../../lib/propNormalization";
 
 const ContentLockupContainer = memo<ContentLockupProps>(
   ({

app/components/type/ContentLockup/ContentLockup.view.tsx

@@ -96,19 +96,32 @@ function ContentLockupView({
         <div className="flex justify-start">
           {/* Small button for xsm and sm breakpoints */}
           <div className="block md:hidden">
-            <Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="small">
+            <Button
+              buttonType="filled"
+              palette={variant === "hero" ? "default" : "inverse"}
+              size="small"
+            >
               {ctaText}
             </Button>
           </div>
           {/* Large button for md and lg breakpoints */}
           <div className="hidden md:block xl:hidden">
-            <Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="large" className={buttonClassName}>
+            <Button
+              buttonType="filled"
+              palette={variant === "hero" ? "default" : "inverse"}
+              size="large"
+              className={buttonClassName}
+            >
               {ctaText}
             </Button>
           </div>
           {/* XLarge button for xl breakpoint */}
           <div className="hidden xl:block">
-            <Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="xlarge">
+            <Button
+              buttonType="filled"
+              palette={variant === "hero" ? "default" : "inverse"}
+              size="xlarge"
+            >
               {ctaText}
             </Button>
           </div>

app/components/type/HeaderLockup/HeaderLockup.container.tsx

@@ -6,6 +6,7 @@ import type { HeaderLockupProps } from "./HeaderLockup.types";
 import {
   normalizeHeaderLockupJustification,
   normalizeHeaderLockupSize,
+  normalizeHeaderLockupPalette,
 } from "../../../../lib/propNormalization";
 
 const HeaderLockupContainer = memo<HeaderLockupProps>(
@@ -14,10 +15,12 @@ const HeaderLockupContainer = memo<HeaderLockupProps>(
     description,
     justification: justificationProp = "left",
     size: sizeProp = "L",
+    palette: paletteProp = "default",
   }) => {
     // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
     const justification = normalizeHeaderLockupJustification(justificationProp);
     const size = normalizeHeaderLockupSize(sizeProp);
+    const palette = normalizeHeaderLockupPalette(paletteProp);
 
     return (
       <HeaderLockupView
@@ -25,6 +28,7 @@ const HeaderLockupContainer = memo<HeaderLockupProps>(
         description={description}
         justification={justification}
         size={size}
+        palette={palette}
       />
     );
   },

app/components/type/HeaderLockup/HeaderLockup.types.ts

@@ -1,5 +1,14 @@
-export type HeaderLockupJustificationValue = "left" | "center" | "Left" | "Center";
+export type HeaderLockupJustificationValue =
+  | "left"
+  | "center"
+  | "Left"
+  | "Center";
 export type HeaderLockupSizeValue = "L" | "M" | "l" | "m";
+export type HeaderLockupPaletteValue =
+  | "default"
+  | "inverse"
+  | "Default"
+  | "Inverse";
 
 export interface HeaderLockupProps {
   /**
@@ -20,6 +29,11 @@ export interface HeaderLockupProps {
    * Figma uses PascalCase, codebase uses lowercase - both are supported.
    */
   size?: HeaderLockupSizeValue;
+  /**
+   * Palette. Default = light text (dark bg); Inverse = dark text (light bg).
+   * Accepts both PascalCase (Figma) and lowercase (codebase).
+   */
+  palette?: HeaderLockupPaletteValue;
 }
 
 export interface HeaderLockupViewProps {
@@ -27,4 +41,5 @@ export interface HeaderLockupViewProps {
   description?: string;
   justification: "left" | "center";
   size: "L" | "M";
+  palette: "default" | "inverse";
 }

app/components/type/HeaderLockup/HeaderLockup.view.tsx

@@ -8,9 +8,18 @@ function HeaderLockupView({
   description,
   justification,
   size,
+  palette,
 }: HeaderLockupViewProps) {
   const isL = size === "L";
   const isLeft = justification === "left";
+  const isInverse = palette === "inverse";
+
+  const titleColorClass = isInverse
+    ? "text-[var(--color-content-invert-primary)]"
+    : "text-[var(--color-content-default-primary,white)]";
+  const descriptionColorClass = isInverse
+    ? "text-[#2d2d2d]"
+    : "text-[var(--color-content-default-tertiary,#b4b4b4)]";
 
   return (
     <div
@@ -21,7 +30,7 @@ function HeaderLockupView({
       {/* Title */}
       <div className="flex items-center relative shrink-0 w-full">
         <h1
-          className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
+          className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative ${titleColorClass} text-ellipsis whitespace-pre-wrap ${
             isLeft ? "text-left" : "text-center"
           } ${
             isL
@@ -36,12 +45,10 @@ function HeaderLockupView({
       {/* Description */}
       {description && (
         <p
-          className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
+          className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 ${descriptionColorClass} text-ellipsis w-full whitespace-pre-wrap ${
             isLeft ? "" : "text-center"
           } ${
-            isL
-              ? "text-[18px] leading-[1.3]"
-              : "text-[14px] leading-[20px]"
+            isL ? "text-[18px] leading-[1.3]" : "text-[14px] leading-[20px]"
           }`}
         >
           {description}