diff --git a/services/web/frontend/js/features/subscription/components/new/checkout/card-element.tsx b/services/web/frontend/js/features/subscription/components/new/checkout/card-element.tsx
index 24d58b1410..4239ff081c 100644
--- a/services/web/frontend/js/features/subscription/components/new/checkout/card-element.tsx
+++ b/services/web/frontend/js/features/subscription/components/new/checkout/card-element.tsx
@@ -4,6 +4,7 @@ import { FormGroup, ControlLabel } from 'react-bootstrap'
 import { CardElementChangeState } from '../../../../../../../types/recurly/elements'
 import { ElementsInstance } from 'recurly__recurly-js'
 import classnames from 'classnames'
+import getMeta from '../../../../../utils/meta'
 
 type CardElementProps = {
   className?: string
@@ -21,16 +22,31 @@ function CardElement({ className, elements, onChange }: CardElementProps) {
   useEffect(() => {
     if (!cardRef.current) return
 
+    const showNewDesign =
+      getMeta('ol-splitTestVariants')?.['design-system-updates'] === 'enabled'
+
+    const style = showNewDesign
+      ? {
+          fontColor: '#1b222c',
+          placeholder: {
+            color: '#677283',
+          },
+          invalid: {
+            fontColor: '#b83a33',
+          },
+        }
+      : {
+          fontColor: '#5d6879',
+          placeholder: {},
+          invalid: {
+            fontColor: '#a93529',
+          },
+        }
+
     const card = elements.CardElement({
       displayIcon: true,
       inputType: 'mobileSelect',
-      style: {
-        fontColor: '#5d6879',
-        placeholder: {},
-        invalid: {
-          fontColor: '#a93529',
-        },
-      },
+      style,
     })
 
     card.attach(cardRef.current)