Internal reference · approved and applied

Metallic text as an independent surface modifier

Metallic is restricted to H1 and H2. H3 through H6, body copy, eyebrows, and CTA labels always remain solid. For every metallic H1 or H2, text-metallic comes first and the font-size token comes second.

01 · Scaling

The same ellipse across three compositions

The contract is ordered: metallic first, font-size token second. The size token remains authoritative over anything the metallic token sets.

Short single-line H1text-metallic + display-xl

Prove it first.

Original two-line referencetext-metallic + display-xl

Find a strategy worth putting to the test.

Smaller approved steptext-metallic + heading-lg

Review every decision.

Scale verdict

The 70% / 130% ellipse remains legible on the short line and the smaller step. The short line reads brighter because more of its compact box sits near the highlight, while the two-line reference shows the strongest top-to-bottom falloff. No size-specific geometry is recommended. Keeping one ellipse preserves the modifier’s independence from the heading scale.

02 · Contrast

The darkest stop clears large-text requirements

Ratios use WCAG relative luminance for #8a9099, the least luminous point in the ramp.

Canvas6.41:1#030303

Surface6.04:1#0d0d0f

Raised5.57:1#171719

Strong5.01:1#202123

Result: the darkest stop passes WCAG AA for normal text at every tested near-black surface and exceeds the 3:1 AA and 4.5:1 AAA thresholds for large text. The final stop does not need lifting for contrast.

03 · Accessibility

The fill remains visual, not semantic

The implementation keeps a normal text node in the DOM and adds explicit fallbacks for selection and forced-colors mode.

Screen readers · Pass

Background clipping and text fill do not alter the accessible name. The heading remains ordinary text with its original tag and reading order.

Text selection · Pass with rule

Drag across a specimen above. The global ::selection rule restores HighlightText so selected glyphs remain visible.

Forced colors · Fallback required

The global media query removes the image and resets WebKit text fill to the current solid color. Browser color mapping can then preserve contrast.

04 · Implemented contract

H1 and H2 only, in a fixed token order

Only H1 and H2 may use text-metallic. The class sequence is always metallic first, then the font-size token. H3 through H6 and all non-heading text stay solid.

:root {
  --fxr-metallic-highlight: #ffffff;
  --fxr-metallic-bright: #eef1f6;
  --fxr-metallic-mid: #b9bec7;
  --fxr-metallic-shadow: #8a9099;
  --fxr-metallic-fill: radial-gradient(
    ellipse 70% 130% at 50% 0%,
    var(--fxr-metallic-highlight) 0%,
    var(--fxr-metallic-bright) 30%,
    var(--fxr-metallic-mid) 65%,
    var(--fxr-metallic-shadow) 100%
  );
}

:is(h1, h2).text-metallic {
  color: #ffffff;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  :is(h1, h2).text-metallic {
    background: var(--fxr-metallic-fill) center / 100% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.text-metallic:not(:is(h1, h2)) {
  background: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

:is(h1, h2).text-metallic::selection {
  background: Highlight;
  color: HighlightText;
  -webkit-text-fill-color: HighlightText;
}

@media (forced-colors: active) {
  :is(h1, h2).text-metallic {
    background: none;
    color: #ffffff;
    -webkit-text-fill-color: currentColor;
  }
}

<h1 class="text-metallic display-xl">Profitable Trading Is Earned</h1>

05 · H1 inventory

Every current Product-site H1 surface

Decisions are deliberately route-specific. “Apply” means an explicit class addition, never an automatic selector.

Route	H1 surface	Decision	Reason
`/`	Homepage hero	Apply	Primary brand statement. It already uses a separate clipped gradient, so this would consolidate that treatment.
`/404`	Error page	Leave off	Utility state. A decorative premium treatment would overstate the page.
`/affiliate`	Affiliate marketing hero	Apply	Large public conversion hero on the primary dark canvas.
`/affiliates/[slug]`	Compact affiliate profile	Leave off	Record-driven heading inside a narrow profile composition that behaves more like a card than a site hero.
`/ai-trading-mentor`	Product hero	Apply	Large product statement on a near-black marketing surface.
`/backtest`	Product hero	Apply	Core marketing H1 and an existing transparent-gradient treatment.
`/battles`	Product campaign hero	Apply	Short, prominent marketing statement with enough scale for the ramp.
`/company/about`	Company story hero	Apply	Public page-level hero on the standard dark canvas.
`/custom-indicators`	Product hero	Apply	Public product statement. Confirm the shared hero variant before rollout because the route currently delegates its H1.
`/events`	Events index hero	Apply	Repository-level H1 with deliberate hero spacing.
`/events/[slug]`	Event detail title	Leave off	Compact record title inside a media and metadata layout, not a marketing hero.
`/indicators`	Indicators repository hero	Apply	Public index H1 on the standard dark repository canvas.
`/indicators/[slug]`	Indicator article title	Leave off	Editorial detail heading inside the reading column.
`/legal-regulatory/privacy-policy`	Legal document title	Leave off	Legal surfaces should remain plain, stable, and document-like.
`/legal-regulatory/terms-conditions`	Legal shell and embedded document H1	Leave off	The route contains legal-document headings. Do not apply a decorative fill.
`/markets`	Markets catalog hero	Apply	Compact hero already uses a clipped gray gradient. This is a strong consolidation candidate.
`/playbooks`	Playbooks repository H1	Apply	Public resource index with a distinct page-level heading.
`/playbooks/latest`	Latest playbooks H1	Apply	Repository-level heading, not article content.
`/playbooks/[category]`	Playbooks category H1	Apply	Page-level taxonomy heading on the repository surface.
`/playbooks/authors/[authorSlug]`	Author archive H1	Review	It is page-level, but the personal archive context may benefit from a quieter solid fill.
`/playbooks/[category]/[articleSlug]`	Article title	Leave off	Editorial reading title. Solid text preserves article hierarchy and density.
`/pricing`	Pricing hero	Apply	Canonical display-xl marketing statement and the proposed first global use.
`/product-updates`	Product updates repository H1	Apply	Public repository heading on the standard dark canvas.
`/product-updates/[slug]`	Product update article title	Leave off	Editorial detail title in a reading layout.
`/prop-firm-simulator`	Product hero	Apply	Large marketing H1 that already uses a transparent white gradient.
`/resources/community`	Community marketing hero	Apply	Large public hero with sufficient scale and negative space.
`/resources/profit-playbook`	Library section H1	Review	The H1 introduces the episode grid below a separate visual hero, so it may read better as solid text.
`/strategies`	Strategies repository hero	Apply	Page-level repository H1 on a dark surface.
`/strategies/[slug]`	Strategy article title	Leave off	Editorial detail title inside the article column.
`/strategies/thank-you`	Download confirmation hero	Apply	The source treatment and current two-line reference for the proposed modifier.
`/trading-journal`	Product hero	Apply	Large marketing H1 that already uses a transparent white gradient.
`/[...slug]`	Content-collection article H1	Leave off	Author-controlled prose can render H1s in unknown contexts. Keep the modifier opt-in at the template or entry level.
`/internal/design-system`	Internal design reference hero	Leave off	The reference page should stay visually neutral unless it is explicitly demonstrating the modifier.
`/internal/strategies-v1`	Legacy strategy confirmation hero	Leave off	Preserved internal comparison route. Do not widen rollout into the legacy version.
`/internal/metallic-text-review`	This review page	Leave off	The page title stays solid so the specimens remain the only evaluated targets.

All 20 surfaces marked “Apply” now use the modifier. Dynamic details, legal documents, content-collection articles, and internal reference routes remain unchanged.