Image

The Card Image — a themed product image that swaps its asset per brand theme (Diamond, Dark, Amber, Opal). Assets exported directly from the LUSTER Figma component.

Theme (Variant)

Figma Properties
Variant: Theme
Themes: Diamond, Dark, Amber, Opal
Size: 458 × 385px
Fit: contain
Asset: card-image-diamond.png

Component · Card Image (Themes)

One image slot, four brand themes. The asset swaps to match the active theme while keeping the same frame.

Diamond (default)

Dark

Amber

Opal

Theme Assets

Theme	Figma Variant Value	Asset
Diamond	url('../imgs/card-image-diamond.png')	/assets/card-image/diamond.png
Dark	url('../imgs/card-image-dark.png')	/assets/card-image/dark.png
Amber	url('../imgs/card-image-amber.png')	/assets/card-image/amber.png
Opal	url('../imgs/card-image-opal.png')	/assets/card-image/opal.png

Usage Guidelines

✓ DO

Swap the asset to match the active brand theme automatically.

✓ DO

Use object-fit: contain so the product is never cropped.

✗ DON'T

Don't stretch or distort the image — keep the 458×385 ratio.

✗ DON'T

Don't ship a single theme asset — provide all four variants.

Implementation

import './CardImage.css';

type Theme = 'diamond' | 'dark' | 'amber' | 'opal';

const ASSETS: Record<Theme, string> = {
  diamond: '/imgs/card-image-diamond.png',
  dark:    '/imgs/card-image-dark.png',
  amber:   '/imgs/card-image-amber.png',
  opal:    '/imgs/card-image-opal.png',
};

export const CardImage = ({ theme = 'diamond', alt = '' }: { theme?: Theme; alt?: string }) => (
  <div className="card-image">
    <img src={ASSETS[theme]} alt={alt} />
  </div>
);

.card-image {
  width: 100%;
  aspect-ratio: 458 / 385;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

<div class="card-image">
  <img src="/imgs/card-image-diamond.png" alt="Product">
</div>

import { CardImage } from '@luster/ui';
import { useTheme } from '@luster/theme';

export default function ProductCard() {
  const { theme } = useTheme(); // 'diamond' | 'dark' | 'amber' | 'opal'
  return <CardImage theme={theme} alt="AirPods Max" />;
}