Product design-system foundation

One system for every FX Replay page.

A development-only visual reference for the approved Product-site tokens and shared primitives. Public pages migrate only when they are named.

Review foundations Review components

01 · Foundations

A smaller, intentional palette

The approved foundation maps near-black values to named surface roles. Electric Blue is reserved for deliberately selected primary actions.

Canvas

#030303

--fxr-color-bg-canvas

Page background

Navigation

#080808

--fxr-color-bg-navigation

Global chrome

Card primary

#131315

--fxr-color-bg-card

Default borderless card

Card secondary

#0C0C0D

--fxr-color-bg-card-secondary

Nested and supporting cards

Surface raised

#171719

--fxr-color-bg-surface-raised

Controls and popovers

Surface strong

#202123

--fxr-color-bg-surface-strong

Selected and inset states

Text primary

#F6F6F6

--fxr-color-text-primary

Headings and essential copy

Text on inverse

#030303

--fxr-color-text-on-inverse

Labels and essential text on white or light surfaces

Text secondary

#8A8C91

--fxr-color-text-secondary

Body and supporting copy

Text tertiary

#8A8C91

--fxr-color-text-tertiary

Readable tertiary text and metadata

Text disabled

#61646A

--fxr-color-text-disabled

Disabled text and decorative marks only

Action

#0260FD

--fxr-color-action-primary

Primary actions and selection

Action hover

#0250D3

--fxr-color-action-primary-hover

Primary hover

Action pressed

#01307F

--fxr-color-action-primary-pressed

Primary pressed

Brand text

#5695FE

--fxr-color-text-brand

Links and brand emphasis

02 · Typography · Internal review

A semantic heading system with independent visual steps

Global heading sizes remain unchanged. The internal heading sample still tests a mobile step, while approved body roles and article-prose mappings are shown only here. Public Playbooks articles and checkout remain unchanged.

Scale logic

A tempered 1.2 progression

The desktop sizes are 18, 22, 26, 32, 40, 48, and 55px. The lower six steps follow a tempered progression, while display-xl preserves the tested /pricing hero treatment. Mobile compresses the upper steps more strongly while preserving separation between adjacent steps.

Breakpoints

Three fixed states

Mobile is below 768px. Tablet is 768–1279px. Desktop starts at 1280px. Only the internal heading sample adds 1px on mobile. Approved Product body roles use their fixed breakpoint sizes without changing public pages.

Contract

Tags carry meaning. Classes carry size.

Semantic defaults apply automatically. A visual override changes only the step, for example <h2 class="heading-md">. Never change the tag to get a different size.

Metallic rule

H1 and H2 only, metallic then size

text-metallic comes first and the font-size token comes second. H3 through H6, body copy, eyebrows, and CTA labels never use metallic text.

Approved baseline + internal mobile heading test

Seven heading steps, no tag-owned sizes

Below 768px, the samples and Mobile column test 1px above each approved size. Tablet and desktop still use the approved scale; no global type tokens changed.

Each cell is size / line height / weight / letter spacing.
Step	Default	Mobile proposal	Tablet	Desktop
`display-xl`	Explicit hero variant	32.5px / 1.04 / 700 / -0.03em	42px / 1.04 / 700 / -0.03em	55px / 1.04 / 700 / -0.03em
`display-lg`	h1	37px / 1.08 / 700 / -0.03em	44px / 1.05 / 700 / -0.035em	48px / 1.04 / 700 / -0.04em
`heading-xl`	h2	26px / 1.12 / 700 / -0.025em	31px / 1.10 / 700 / -0.03em	40px / 1.08 / 700 / -0.035em
`heading-lg`	h3	27px / 1.16 / 700 / -0.02em	30px / 1.14 / 700 / -0.025em	32px / 1.12 / 700 / -0.03em
`heading-md`	h4	22px / 1.22 / 700 / -0.01em	24.5px / 1.20 / 700 / -0.015em	26px / 1.18 / 700 / -0.02em
`heading-sm`	h5	20px / 1.28 / 700 / 0	22px / 1.26 / 700 / 0	22px / 1.24 / 700 / 0
`heading-xs`	h6	18px / 1.35 / 700 / 0	18px / 1.33 / 700 / 0	18px / 1.30 / 700 / 0

Visual specimens

Adjacent steps remain visibly distinct

The samples consume approved global heading classes. Below 768px only, this specimen locally overrides their size tokens for review.

display-xl

--fxr-type-display-xlApproved baseline · mobile test

Explicit hero variant · Lato · 700 · mobile 31.5px → 32.5px

Approved largest heading step for short hero statements, including the /pricing H1.

Profitable trading is earned

display-lg

--fxr-type-display-lgApproved baseline · mobile test

h1 · Lato · 700 · mobile 36px → 37px

Default page title and standard hero heading.

Build a repeatable trading process

heading-xl

--fxr-type-heading-xlApproved baseline · mobile test

h2 · Lato · 700 · mobile 25px → 26px

Major page section title.

Review every decision

heading-lg

--fxr-type-heading-lgApproved baseline · mobile test

h3 · Lato · 700 · mobile 26px → 27px

Subsection title and prominent feature heading.

Performance analytics

heading-md

--fxr-type-heading-mdApproved baseline · mobile test

h4 · Lato · 700 · mobile 21px → 22px

Compact section title, article H2 override, and larger card title.

Keep the variables visible

heading-sm

--fxr-type-heading-smApproved baseline · mobile test

h5 · Lato · 700 · mobile 19px → 20px

Article H3 override, card title, and compact module heading.

Consistent risk on every trade

heading-xs

--fxr-type-heading-xsApproved baseline · mobile test

h6 · Lato · 700 · mobile 17px → 18px

Article H4 override, small card title, FAQ label, and footer heading.

Session notes

Approved Product body roles

Mobile roles alongside the headings

Each sample shows the approved mobile size below 768px and its tablet and desktop values. The prior mobile test is shown for comparison. CTA labels are 14px Lato Regular at every size.

Lead bodyPrior mobile 15px → 16.5px · 768px+ 16px · line height 1.60

One introductory paragraph.

Reading bodyPrior mobile 19.5px → 16.5px · 768px+ 15.5px · line height 1.65

Long-form article prose.

Reading list itemPrior mobile 19.2px → 16px · 768px+ 15px · line height 1.60

A concise article list item.

Standard bodyPrior mobile 17px → 16.5px · 768px+ 15.5px · line height 1.60

Marketing and product descriptions.

Supporting bodyPrior mobile 16px → 16px · 768px+ 15px · line height 1.55

Compact card summary.

Workflow card bodyPrior mobile 15.5px → 15.5px · 768px+ 14.5px · line height 1.60

Audit-step description.

UI control label, not CTAPrior mobile 15px → 15px · 768px+ 14px · line height 1.35

Filter, tab, or navigation label.

FAQ questionPrior mobile 18px → 17px · 768px+ 16px · line height 1.35

Can the sample support this claim?

Caption and metadataPrior mobile 14px → 14px · 768px+ 13px · line height 1.45

Session recorded privately.

Plain section labelPrior mobile 11.5px → 12.5px · 768px+ 11.5px · line height 1.30

PRIVATE AUDIT

Inline codePrior mobile 13px → 14px · 768px+ 14px · line height 1.60

sample-size

Page-scoped tablet sizes

Mentor AI at 768–1279px

These values apply only to /ai-trading-mentor. They do not replace the shared heading steps or change Support cards on other pages. Mobile and desktop retain their existing sizes.

Element	Tablet size	Usual size	Reason
Hero heading	36px	display-lg at 44px	The two-column hero needs a shorter measure.
Wide improvement card title	21px	heading-md at 24.5px	Keeps the card title compact beside its product image.
Wide improvement card description	14.5px	16px local body	Reduces density inside the card copy.
Footer Support description	14px	16px shared footer	Only the Support card on this route changes.
Footer Support CTA	13px	14px shared footer	Only the Support card on this route changes.

Semantic defaults

Document structure stays intact

display-xl has no semantic default. It is an explicit hero variant.

h1defaults todisplay-lg

h2defaults toheading-xl

h3defaults toheading-lg

h4defaults toheading-md

h5defaults toheading-sm

h6defaults toheading-xs

Current site mapping

Where existing Product site headings land

Use the approved step as each surface migrates. Existing pages are not bulk-converted by this audit.

Existing element	Current size pattern	Approved step	Notes
/pricing hero statement	31.5 / 42 / 55px	`display-xl`	The tested pricing treatment defines the approved top step.
Standard page and article H1	28px global, 30–40px local	`display-lg`	One default replaces the H1 Compact one-off and scattered title recipes.
Pricing, story, and FAQ section H2	25 / 31 / 40px	`heading-xl`	Clean match with the new default h2 step.
Feature and module titles	26–36px	`heading-lg`	Use heading-xl only when the module is a major page section.
Playbooks article H2	22 / 24 / 26 / 28px	`heading-md`	Keep the h2 tag and apply heading-md for editorial density.
Playbooks article H3	17 / 18 / 20px	`heading-sm`	Moves to a clearly separate step above H4.
Playbooks article H4	15.5 / 16.5 / 17.5px	`heading-xs`	Keeps neutral tracking and a looser line height.
CMS cards, FAQ labels, footer headings	17–24px	`heading-xs or heading-sm`	Choose by prominence, not by tag name.

Does not fit cleanly

Existing values that need a role decision

The scale should not grow extra steps to preserve accidental values.

Homepage hero

Its intended 30 / 34 / 60 / 96px jump exceeds display-xl. It needs a copy and layout decision before rollout, not another scale step.

Events archive card titles

The 22 / 25 / 27.5px progression straddles heading-md and heading-lg. It should choose one role.

Strategy download card titles

The 17.5 / 18.5 / 20.5px progression straddles heading-xs and heading-sm. It should choose one role.

Rich-text body values

17.5 / 18.5 / 16.7 / 18.3px are not headings, but show the same multiplier problem. Normalize them in the body scale later.

Large internal experiments

Several playground headings run from 72px to 128px. Keep them explicitly experimental or rework them before any rollout.

03 · Spacing

A 4px base with named roles

The primitive scale stays compact. Section, grid, card, and control aliases define how the primitives should be used across page families.

Space 1
4px

Space 2
8px

Space 3
12px

Space 4
16px

Space 5
20px

Space 6
24px

Space 8
32px

Space 10
40px

Space 12
48px

Space 16
64px

Space 20
80px

Space 24
96px

Space 30
120px

Page gutter

16 · 24 · 40px

Section medium

64 · 80 · 96px

Section large

80 · 96 · 120px

Card default

20 · 24 · 24px

Feature card

24 · 32 · 40px

Grid gap

16 · 20 · 24px

Content section container

Opt-in for standard content sections. Keep the background on the full-width section and the content in an unpadded, centered inner wrapper capped at 1360px. CMS and repository layouts retain their separate 1450px rule.

Below 640px

16px per side · 48px top · 80px bottom

From 640px

24px per side · 64px top · 96px bottom

Inner wrapper: max-width: 1360px, margin-inline: auto, no inner padding or vertical margin.

Opt-in section container specimen

04 · Geometry

Fewer radii and restrained elevation

Borders and surface changes provide most separation. Shadows are reserved for raised controls, sticky elements, dialogs, and overlays.

None

Flat navigation and tables

0px

XS

Tags and code

4px

SM

Inputs and compact controls

8px

MD

Standalone media and non-card containers

12px

LG

All cards and CTA panels

16px

Pill

Buttons and segmented controls

999px

No shadow

Default cards and sections.

Raised

12px blur rhythm for menus and sticky controls.

Overlay

Dialogs and large overlays only.

05 · Components · Shared primitives

Named variants, not class recipes

The internal CTA matrix now uses the shared Product Button primitive. Its approved values are opt-in; measured accessibility gaps remain open and no public page uses it yet.

Approved foundation · no public page migration

One Button API, no public page rollout

Approved contract: variant="primary" | "secondary" | "tertiary" | "minimal" and size="lg" | "md" | "sm". Tertiary outlined is the quiet default. Every label is 14px Lato Regular. Public pages and checkout are unchanged; contrast and small touch-target findings stay open.

Measurement

Current evidence mapped to four levels

The public Product-site audit found 69 CTA-like controls with 49 different geometry and type combinations. White secondary remains a deliberate high-emphasis treatment. Tertiary keeps both observed card presentations visible.

Variant	Default	Hover	Radius and underline	Usage rule
`primary`	#0260FD fill · transparent border · #F6F6F6 text	Canonical #0250D3	Pill · no underline	Human-selected only for heroes, forms, and high-intent conversion points. Never chosen automatically.
`secondary`	White fill · text-on-inverse Ink 950 #030303	#E5E5E5 hover · #CCCCCF pressed · contrast-only disabled	Pill · high-emphasis neutral · no underline	Deliberate high-emphasis neutral action. Never the automatic card default.
`tertiary`	Graphite #202123 for direct actions; transparent with a subtle outline for navigation or inspection	Graphite #303034 hover · #171719 pressed. Outlined changes border contrast only.	Pill · filled or 1px outline · no underline	Default CTA. Graphite for direct actions; outlined for navigation or inspection. If intent is ambiguous, use outlined.
`minimal`	Transparent · no border · white text · white/55 underline	Underline 55% → 100% on hover · dimmed on pressed · no box in any state	No radius · underline offset 4px · browser-default underline thickness	Low-emphasis inline action where a button shape would add too much weight.

Approved dimensions

Three shared sizes

All three sizes use 14px Lato Regular. Heights, padding, icon sizes, and gaps follow the approved contract. The 40px small control still needs a touch-target review before broad rollout.

size="lg"48px

Horizontal padding: 28px
Font: 14px Lato 400
Icon: 16px
Gap: 8px
Radius: 9999px

Forms and high-intent conversion points

size="md"44px

Horizontal padding: 24px
Font: 14px Lato 400
Icon: 15px
Gap: 8px
Radius: 9999px

Section CTAs and standard standalone actions

size="sm"40px

Horizontal padding: 16px
Font: 14px Lato 400
Icon: 14px
Gap: 6px
Radius: 9999px

Card footers and compact interfaces

Conflict report

What remains unresolved

Hierarchy, presentation, shade-step states, and focus treatment are approved for this foundation. Their measured contrast gaps, small touch target, and existing opacity conflicts remain open findings.

Small card actions

The Indicators card pair uses 13px and sits at 80% opacity until interaction. Both render at 40px high, below the 44px minimum touch target.

State ramp

Filled variants change shade only: primary #0260FD → #0250D3 → #01307F, secondary #FFFFFF → #E5E5E5 → #CCCCCF, and graphite #202123 → #303034 → #171719. Disabled reduces contrast without changing geometry.

Tertiary presentation

Approved rule: outlined for navigation or inspection, graphite for direct actions. The public Indicators pair still awaits a page-specific migration.

Focus contrast

Blue 400 against primary is 1.74:1, secondary 2.95:1, graphite 5.47:1, canvas 7.00:1, and card 6.30:1. The 1px inset ring therefore misses 3:1 on primary and secondary. This approved foundation value does not meet 3:1 on primary or secondary. Accessibility remediation is deferred.

Shade shift is insufficient

Default-to-hover and default-to-pressed contrast peaks at 2.37:1 for primary, 1.60:1 for secondary, and 1.23:1 for graphite hover. Shade change alone cannot meet the 3:1 non-text indicator requirement, so a dedicated focus treatment remains necessary.

State matrix

Four variants, with both tertiary presentations

Every hierarchy level appears at all three sizes in default, hover, focus, pressed, and disabled states on both surfaces. Focus represents :focus-visible only: shaped controls use one 1px inset Blue 400 ring, while minimal uses a Blue 400 underline so it never gains a box.

Canvas surface

#030303

Five states per size

variant="primary"Human-selected only for heroes, forms, and high-intent conversion points. Never chosen automatically.

lg

default

hover

focus

pressed

disabled

md

default

hover

focus

pressed

disabled

sm

default

hover

focus

pressed

disabled

variant="secondary"Deliberate high-emphasis neutral action. Never the automatic card default.

lg

default

hover

focus

pressed

disabled

md

default

hover

focus

pressed

disabled

sm

default

hover

focus

pressed

disabled

variant="tertiary" · outlinedDefault CTA. Graphite for direct actions; outlined for navigation or inspection. If intent is ambiguous, use outlined.

lg

default

hover

focus

pressed

disabled

md

default

hover

focus

pressed

disabled

sm

default

hover

focus

pressed

disabled

variant="tertiary" · graphiteDefault CTA. Graphite for direct actions; outlined for navigation or inspection. If intent is ambiguous, use outlined.

lg

default

hover

focus

pressed

disabled

md

default

hover

focus

pressed

disabled

sm

default

hover

focus

pressed

disabled

variant="minimal"Low-emphasis inline action where a button shape would add too much weight.

lg

default

hover

focus

pressed

disabled

md

default

hover

focus

pressed

disabled

sm

default

hover

focus

pressed

disabled

Card surface

#131315

Five states per size

variant="primary"Human-selected only for heroes, forms, and high-intent conversion points. Never chosen automatically.

lg

default

hover

focus

pressed

disabled

md

default

hover

focus

pressed

disabled

sm

default

hover

focus

pressed

disabled

variant="secondary"Deliberate high-emphasis neutral action. Never the automatic card default.

lg

default

hover

focus

pressed

disabled

md

default

hover

focus

pressed

disabled

sm

default

hover

focus

pressed

disabled

variant="tertiary" · outlinedDefault CTA. Graphite for direct actions; outlined for navigation or inspection. If intent is ambiguous, use outlined.

lg

default

hover

focus

pressed

disabled

md

default

hover

focus

pressed

disabled

sm

default

hover

focus

pressed

disabled

variant="tertiary" · graphiteDefault CTA. Graphite for direct actions; outlined for navigation or inspection. If intent is ambiguous, use outlined.

lg

default

hover

focus

pressed

disabled

md

default

hover

focus

pressed

disabled

sm

default

hover

focus

pressed

disabled

variant="minimal"Low-emphasis inline action where a button shape would add too much weight.

lg

default

hover

focus

pressed

disabled

md

default

hover

focus

pressed

disabled

sm

default

hover

focus

pressed

disabled

Card use case

Tertiary small is the default card CTA

A two-action footer uses two equal-width tertiary small controls with a 12px gap and 24px top spacing. The approved contextual split maps “View more” to outlined navigation and “Test” to a graphite direct action.

Indicator card

Session volume profile

Review the current reference treatments as one lower-tier hierarchy level, not as a production migration.

Trailing icon treatment

Lucide is already a project dependency, and the production footer already renders a 16px Lucide ArrowRight. The proposal retains that icon and motion treatment while testing the secondary background.

Pills, badges, and segmented controls

Eyebrow pillSelected Neutral Success

Inputs and controls

Search strategies

Card hierarchy

Default card

Quiet information on the primary card surface.

Interactive

Supporting card

A darker option for nested or supporting content.

Separate interaction primitives

StaticFor traders who verify

Interactive linkExplore strategies

Leading dotSeconds data

Leading iconNew workflow

TypographyNunito Sans 400 · 13px · line-height 1 · normal case · no tracking

Geometry30px fixed height · fit-content · nowrap · 16px horizontal padding

Surface#141518 → #0A0A0C · white 10% border · inset highlight and 16px shadow

ResponsiveUnchanged at desktop, tablet, and mobile

Adornments8px gap · leading dot or icon · horizontal padding remains 16px

InteractiveWhite 20% hover border · visible focus ring · pressed inset state

ExceptionStrategy chips stay compact and semantic because their surfaces encode strategy metadata

Baseline inventory

Current treatments that differ

Source scan before migration: 117 eyebrow-like instances, 25 pills, 92 plain labels, sizes from 8–15px, 102 uppercase treatments, and multiple tracking values. Pricing is the selected exploratory reference. No production call site was normalized in this pass.

Existing shared Eyebrow

src/components/ui/eyebrow.tsx and its consumers

14px, uppercase, generic surface, white 70%, responsive type override

Homepage feature pills

home/sections/features-section.tsx, product-capabilities-section.tsx

12px, uppercase, white 88–90%, generic tag surface

Affiliate and community labels

affiliate-*.tsx, community-resource-sections.tsx

10–12px, uppercase, 0.12–0.13em tracking, no outline pill

About and Battles eyebrows

about-page-sections.tsx, battles-sections.tsx

11–12px, uppercase, tracked, supporting or blue text, no pill

Playbooks and product updates

playbooks-*.tsx, product-update-article-content-section.tsx

11–12.5px, uppercase metadata treatment, no pill

Events and indicators

events-*.tsx, indicators-comparison-*.tsx

9–14px, uppercase, mixed tracking, generic pill or plain label

Strategy taxonomy exception

src/components/ui/strategy-grid.tsx:34–44

28px minimum height, 12.5px, 12px horizontal padding, and semantic surfaces that encode strategy metadata. The shared white/88% !important eyebrow rule overrides the local chip text-color classes in production.

Internal and experimental pages

src/components/pages/**/*playground*.tsx and design-system experiments

8–15px with varied case, tracking, color, and pill geometry

In this articleThe five journal prompts

LabelNunito Sans 600 · 15px / 1.5 · white 78%

LinksNunito Sans 400 · 15px / 1.4 · white 68%

ActivePure white

HoverWhite 90%

Focus2px white outline with 4px offset

Desktop ≥1024px280px sticky sidebar with scrollspy

Tablet and mobileCollapsed disclosure above body, current section visible

VisibilityNever removed from the reading flow

06 · Content

Playbooks article role preview

The internal specimen previews approved prose and list roles at each breakpoint while leaving article headings and layout unchanged. Public Playbooks content awaits its named migration.

Rich text · approved body roles, internal preview

Playbooks article body

The class stack is copied from production. This internal preview maps paragraphs and blockquotes to Reading body, lists to Reading list item, and table cells to Supporting body across breakpoints. Inline code stays 14px. Heading sizes, layout, and the H5/H6 issue remain unchanged pending a named Playbook-template migration.

Heading hierarchy

Production H1–H6 · four responsive steps

Build evidence before adding risk

Review the full market context

Keep every variable visible

Write the setup before replay

Session evidence

Review note

Paragraph rhythm

Reading body · 16.5 / 15.5px · 1.65

Replay the same setup across enough historical examples to separate a repeatable edge from a lucky outcome.

A second paragraph preserves the production margin rhythm. This internal preview uses the approved role while the public article retains its current breakpoint values.

Unordered and ordered lists

1.625em inset · 0.5em item margins

Keep entry criteria explicit.
Record invalidation before replay begins.
- Note the market condition and session.
Review the same evidence after every session.

Choose the market and session.
Replay without skipping difficult periods.
Compare results against the written plan.

Blockquote

Reading body · 16.5 / 15.5px · 1.65

Confidence should come from a process you can inspect, repeat, and explain.

Inline link and code

Accent link · mono inline code 14px

Review the component contract before introducing a local exception. Use risk-per-trade as a named input, not an assumption.

Image and caption

2em figure margin · 14px/20px caption

FX Replay chart interface showing historical market replay — Production product imagery shown with the article template’s inherited caption treatment.

Data table

Supporting body cells · 16 / 15px · existing table layout

Session	Trades	Win rate	Expectancy
London	42	57%	+0.31R
New York	38	53%	+0.24R
Asia	29	48%	+0.08R

Proposal review · independent decisions

Four visual treatments for review

These route-scoped candidates are not approved, do not change any global token, and do not authorize migration. Inspect the working examples on the visual treatments test page.

Open the isolated visual test

Status: proposed, not approved · independent entry

Gradient heading fill

A clipped neutral-50 diagonal fill for display-xl and display-lg only.

Exact values and token names: linear-gradient(to right bottom, var(--fxr-primitive-color-neutral-50) 30%, neutral-50 at 50% alpha); background-clip: text; -webkit-text-fill-color: transparent; solid fallback --fxr-primitive-color-neutral-50 (#F6F6F6). Lato 400. Display-xl tracking -0.01em; display-lg -0.05em.
Applies / excludes: Only opted-in display-xl and display-lg specimens. Never heading-xl or smaller, card titles, body, labels, CTA text, or unrelated routes.
Changes / conflicts: Would replace the approved 700 weight and display tracking on selected headings. Conflicts with the approved text-metallic H1/H2 fill if both target one heading. No global change in this test.
Fallback: Solid neutral-50 when clipped fill is unavailable; forced colors use solid system text and text selection stays visible. Literal gray-050 does not exist; neutral-50 is the named Product match.

Status: proposed, not approved · independent entry

Secondary surface card

A three-card content treatment on the existing secondary card surface, without borders or drop shadows.

Exact values and token names: --fxr-color-bg-card-secondary solid surface; border none; no rim or gradient; --fxr-radius-lg (16px); padding --fxr-space-6 --fxr-space-8 (24px 32px); box-shadow none. The three 28px outline icons, titles, and body text use flat --fxr-primitive-color-neutral-50.
Applies / excludes: Opted-in content cards only. Never global cards, navigation, tables, overlays, or colored surfaces. Decorative icons replace the top labels, while the titles remain readable. Suggested hover, not user-specified: change only the surface to --fxr-color-bg-card; no lift or shadow.
Changes / conflicts: Keeps the approved borderless geometry but opts into the secondary surface instead of the default fxr-ds-card surface. Its 24px 32px padding differs from the default and feature card variants. Existing interactive cards use a white/12 border and a raised-surface hover, so do not apply this treatment to them without separate review.
Fallback: Uses the existing solid Card secondary token directly; no image or gradient fallback is needed. Icons are decorative, so each card's title still names the content.

Status: proposed, not approved · independent entry

Section fade and optional top glow

A section surface dissolves over its final 40%; a separately switchable white top glow adds restrained atmosphere.

Exact values and token names: Fade: --fxr-color-bg-surface 0% to 60%, transparent at 100%, over --fxr-color-bg-canvas. Independent glow: radial-gradient(70% 80% at 50% 0%, --fxr-primitive-color-white at 6% 0%, transparent 70%). The glow stays at exactly 6%.
Applies / excludes: Only opted-in full section backgrounds. Fade and glow can be accepted or declined independently. Neither affects text, card fills, global nav/footer, or neighboring pages.
Changes / conflicts: New addition. A fade would replace a solid section end, so it conflicts with a hard seam, section border, or intentionally contrasting section background. Glow may duplicate existing ambient hero lighting if stacked without review.
Fallback: Fade off: continuous --fxr-color-bg-surface. Glow off: no overlay. If gradients are unsupported, the section keeps the solid semantic surface.

Status: proposed, not approved · independent entry

Tablet holds desktop type

All seven desktop heading sizes hold from 768px upward; the size change happens only below 768px.

Exact values and token names: At 768–1023px: --fxr-type-display-xl 55px, --fxr-type-display-lg 48px, --fxr-type-heading-xl 40px, --fxr-type-heading-lg 32px, --fxr-type-heading-md 26px, --fxr-type-heading-sm 22px, --fxr-type-heading-xs 18px; desktop line heights/tracking except the independent display tracking proposal. Side padding --fxr-page-gutter 24px. Section vertical padding 96px on both tablet and desktop in this specimen.
Applies / excludes: Only the visual-treatment test page. Not the global seven-step scale, shared nav/footer, migrated pages, body roles, or the separate 1450px CMS shell.
Changes / conflicts: Would replace the approved 768–1279px heading sizes (42 / 44 / 31 / 30 / 24.5 / 22 / 18px) on participating pages. It also conflicts with the current desktop type switch at 1280px and page-specific tablet reductions such as /ai-trading-mentor. SectionContainer currently uses the same 64px top / 96px bottom at tablet and desktop, not this specimen's 96px on both ends.
Fallback: Below 768px, the existing approved mobile scale (31.5 / 36 / 25 / 26 / 21 / 19 / 17px) applies. Without the page-local override, the approved mobile/tablet/desktop breakpoints remain intact.

Canvas

Navigation

Card primary

Card secondary

Surface raised

Surface strong

Text primary

Text on inverse

Text secondary

Text tertiary

Text disabled

Action

Action hover

Action pressed

Brand text

A tempered 1.2 progression

Three fixed states

Tags carry meaning. Classes carry size.

H1 and H2 only, metallic then size

Seven heading steps, no tag-owned sizes

Adjacent steps remain visibly distinct

display-xl

Profitable trading is earned

display-lg

Build a repeatable trading process

heading-xl

Review every decision

heading-lg

Performance analytics

heading-md

Keep the variables visible

heading-sm

Consistent risk on every trade

heading-xs

Session notes

Mobile roles alongside the headings

Mentor AI at 768–1279px

Document structure stays intact

Where existing Product site headings land

Existing values that need a role decision

Homepage hero

Events archive card titles

Strategy download card titles

Rich-text body values

Large internal experiments

Page gutter

Section medium

Section large

Card default

Feature card

Grid gap

Content section container

None

XS

SM

MD

LG

Pill

No shadow

Raised

Overlay

One Button API, no public page rollout

Current evidence mapped to four levels

Three shared sizes

What remains unresolved

Four variants, with both tertiary presentations

Tertiary small is the default card CTA

Session volume profile

Footer pill, current and proposed

Pills, badges, and segmented controls

Inputs and controls

Card hierarchy

Default card

Supporting card

Separate interaction primitives

Current treatments that differ

Existing shared Eyebrow

Homepage feature pills

Affiliate and community labels

About and Battles eyebrows