metallic-and-foil-treatments

name	metallic-and-foil-treatments
description	Use when adding metallic accents to luxury brand surfaces. Foil and metallic touches signal premium but need restraint.

Metallic and Foil Treatments

Gold foil, silver foil, copper accents — used 1-2x per page maximum. CSS gradient mimics foil; image-based foil more realistic.

Metallic CSS gradients

.foil-gold {
  background: linear-gradient(135deg,
    #d4a04b 0%,
    #fbe48f 30%,
    #b48531 60%,
    #fbe48f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.foil-silver {
  background: linear-gradient(135deg,
    #c0c5cc 0%,
    #f4f7f8 30%,
    #95a0a8 60%,
    #f4f7f8 100%);
  ...
}

Where to use foil

1. Logo accent (subtle)
2. Headline highlight word
3. Hero numeral (e.g., '100' in '100 skills')
4. Award badges or certifications
5. Brand sign-off mark

Not on:

• Body text (illegible)
• Multiple words in headline (overwhelming)
• Backgrounds (too loud)

Restraint rule

Maximum 1-2 foil accents per page. More than that becomes ornament. The foil should feel rare and intentional.

Where this fits in the X3 empire

Used sparingly on CardPrepAI brand surfaces.