u

src/colors.js

@@ -168,6 +168,9 @@ export const GREEN_BG = tint('GREEN', 0.75);
 export const GREEN_PANEL = CHROMA.GREEN.light;
 export const GREEN_SOFT = tint('GREEN', 0.15);
 export const GREEN = CHROMA.GREEN.dark;
+/** Bright green for text/highlights over dark surfaces/scrims. */
+export const GREEN_BRIGHT = CHROMA.GREEN.light;
+
 
 export const PETROL_BG = tint('PETROL', 0.85);
 export const PETROL_PANEL = CHROMA.PETROL.light;

src/components/tiles/ArticleTile.jsx

@@ -17,6 +17,7 @@ import { BrandLabel } from '../brand';
 import { thumb } from '../../api';
 import {
   GREEN,
+  GREEN_BRIGHT,
   ICE,
   INK_STRONG,
   SCRIM_LABEL,
@@ -457,10 +458,14 @@ export class ArticleTile extends Tile {
           {grossPrice != null && (
             <Typography
               variant="caption"
-              fontWeight={600}
+              fontWeight={700}
               component="div"
               sx={{
-                color: GREEN,
+                color: GREEN_BRIGHT,
+                fontWeight: 700,
+                fontSize: '0.8rem',
+                lineHeight: 1.2,
+                mt: 0.25,
                 textShadow: TEXT_GLOW_DARK,
               }}
             >