ChrissFX1 Design System

Overview

ChrissFX1 is a trading mentorship brand built for impact: a dark-mode immersive experience that feels less like a website and more like stepping onto a professional trading floor. The canvas sits at near-black ({colors.canvas}), creating a void into which candlestick-chart imagery fades subtly—never competing with content, always reinforcing the financial-discipline narrative. Into this darkness, the brand speaks through two carefully controlled channels: the warm metallic gold of {colors.primary}, reserved exclusively for moments of action (CTAs, accent words within headlines, the crest icon), and the stark {colors.ink} white of primary typography.

The typographic voice is defined by aggressive contrast in both family and weight. Headlines run in Syne at {typography.display-lg} (84px) with an 800 weight—unapologetically bold, tightly tracked at 0.5px, demanding attention the way a trading terminal demands focus. Body copy retreats into DM Sans at {typography.body-md} (19px), weight 400, in cooler grays ({colors.body-light}). This pairing creates a clear hierarchy not through size alone but through a deliberate personality shift: Syne shouts; DM Sans explains.

Shape language follows the brand's premium positioning. Every interactive element—from the hero CTAs to pricing-tier buttons—uses {rounded.pill} (100px radius), creating soft, approachable touchpoints against the sharp-edged financial imagery. Cards and containers settle at {rounded.DEFAULT} (10px), offering visual containment without feeling boxed-in. The system's most distinctive depth move is its shadow treatment: primary buttons emit a diffuse golden glow ({extensions.shadows.gold-glow}) rather than a neutral drop shadow, making the CTA feel luminous—like a physical object catching light.

Sub-systems observed include a pricing dialect (where featured tiers gain a {colors.primary}-tinted background at ~14% opacity) and a trust-strip subsystem (auto-scrolling marquee of credential marks). Both extend the core language without breaking it.

Key Characteristics:

• Near-black canvas ({colors.canvas}) with atmospheric chart-candlestick background layer, never solid flat color
• Single brand color {colors.primary} (gold #f2b33d) used sparingly: CTAs, headline accent words, icon fills, and glow shadows only
• Display typography in Syne at 84px/800 weight ({typography.display-lg}) with 0.5px letter-spacing—never below weight 600 for any heading
• Body typography in DM Sans at 19px ({typography.body-md}) in {colors.body-light} (#e7e7e7)—never pure white for reading text
• Pill-shaped buttons ({rounded.pill}) throughout; {rounded.full} (50%) for icon-only circular controls
• Golden glow shadow ({extensions.shadows.gold-glow}) on primary CTAs instead of neutral elevation
• Uppercase {typography.button} text with 0.08em letter-spacing and weight 700 on all buttons
• Two-button CTA pattern: filled gold primary ({component.button-primary}) + outlined secondary ({component.button-secondary})
• Success/accent green ({colors.accent-green}) reserved for live-status indicators and community signals (WhatsApp association)

Colors

Brand & Accent

• Primary ({colors.primary} — #f2b33d): Warm metallic gold. Used exclusively for brand voltage: button backgrounds, headline accent words ("BUILDS FREEDOM"), the hero crest icon fill, glow shadows, and featured-tier card background tints.
• Primary Light ({colors.primary-light} — #ffe7ae): Pale gold. Appears in the "FX" brand mark subtitle and potentially in gradient endpoints for headline treatments.
• On Primary ({colors.on-primary} — #1a1200): Near-black brown. Text color on gold surfaces (buttons, badges). Provides >10:1 contrast against {colors.primary}.
• Accent Green ({colors.accent-green} — #25d366): Bright WhatsApp-adjacent green. Used for success states, live-session indicators, and community-join CTAs in pricing contexts.
• Success ({colors.success} — #4be08a): Mint green. Positive signal color for stats, win-rates, and confirmation states.
• Success Dark ({colors.success-dark} — #04220f): Deep forest black-green. Background for success-tinted cards or status banners (used at low opacity).

Surface

• Canvas ({colors.canvas} — #0c0c0c): Near-black foundation. The primary page background across hero, sections, and most containers. Slightly warmer than pure black to reduce eye strain.
• Surface ({colors.surface} — #000000): Pure black. Used for deepest layers: footer backgrounds, modal backdrops, and the {component.button-icon-circle} base.

Text

• Ink ({colors.ink} — #ffffff): Pure white. Reserved for headlines, navigation, button text (on dark backgrounds), and the highest-emphasis UI elements.
• Body Light ({colors.body-light} — #e7e7e7): Cool light gray. Primary reading color for body paragraphs, descriptions, and multi-line text blocks. Softer than pure white to reduce glare in dark mode.
• Body ({colors.body} — #b8b8b8): Medium gray. Secondary body text, metadata, timestamps, and supporting copy.
• Muted ({colors.muted} — #d8d8d8): Muted gray. Tertiary text: trust-strip items, footer links, placeholder labels, and disabled-adjacent content.
• On Dark ({colors.on-dark} — #ffffff): White text on dark surfaces. Functionally identical to {colors.ink} in this dark-mode system; maintained for semantic clarity.

Hairlines & Borders

• Hairline ({colors.hairline} — #141414): Subtle dark-on-dark line. Used for dividers and minimal separators at 6% white equivalence. Nearly invisible, creates structure without noise.
• Border Subtle ({colors.border-subtle} — #1a1a1a): Slightly visible dark border. Card edges, input boundaries, and container outlines that need gentle definition.
• Border Medium ({colors.border-medium} — #292929): Visible light border. Outlined button strokes ({component.button-secondary}) at ~25% white opacity equivalent. Clear but not harsh.
• Border Gold ({colors.border-gold} — #261e05): Gold-tinted dark border. Used for gold-accented icon buttons ({component.button-icon-circle}) at ~16% gold opacity. Signals interactivity tied to primary actions.

Typography

Font Family

The system employs a two-typeface stack with zero overlap in role. Syne (Google Fonts, weights 400–800) handles all display and heading work: its geometric, slightly extended character shapes convey technical precision and modern confidence—the voice of a trading terminal's readout. DM Sans (Google Fonts, weights 300–600) manages all body, UI, and caption text: its humanist proportions and open apertures ensure readability at the 19px body size even on dark backgrounds. The fallback chain terminates in Arial, sans-serif for both families, ensuring system-level degradation remains clean. No proprietary fonts are in play; both faces load from Google Fonts via the preconnected link observed in source.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-lg} | 84px | 800 | 90.72px | 0.5px | Hero H1, maximum-impact statements | | {typography.title-md} | 54px | 800 | 58.32px | 0.5px | Section headings (H2), pricing tier titles | | {typography.title-sm} | 21px | 800 | 22.68px | 0.5px | Subsection headings (H3), card titles, labels | | {typography.body-md} | 19px | 400 | 32.3px | normal | Body paragraphs, descriptions, hero subtitle | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Supporting text, footnotes, legal | | {typography.caption} | 14px | 400 | 1.4 | 0 | Trust strip items, metadata, timestamps | | {typography.button} | 14px | 700 | 1.2 | 0.08em | All button labels, CTAs, nav links | | {typography.brand-mark} | 13px | 700 | 1 | 0.2em | Brand wordmark ("CHRISSFX1"), badge text |

Principles

The typography system's defining move is weight-as-hierarchy over size alone. While the scale spans 84px down to 13px (a 6.5× range), the real contrast between levels comes from Syne's 800-weight headlines crashing into DM Sans's 400-weight body. This means a 21px {typography.title-sm} in Syne/800 carries more visual mass than a 19px {typography.body-md} in DM Sans/400, despite being nearly identical in size. Implementers should never "promote" a DM Sans element to heading status by increasing its size—always switch to Syne and weight 800+ instead.

Letter-spacing is used surgically: display and title roles add 0.5px tracking to prevent the heavy Syne glyphs from clumping at large sizes, while {typography.button} uses 0.08em (approximately 1.1px at 14px) to justify the uppercase treatment without feeling cramped. Body and caption text remain at normal (0) spacing for optimal readability.

Color also carries hierarchy: {colors.ink} (white) for headlines, {colors.body-light} (#e7e7e7) for body, {colors.muted} for tertiary. Within the hero headline itself, a gradient-span technique applies {colors.primary} (gold) selectively to words like "BUILDS FREEDOM"—this mixed-color inline treatment is a signature moment, not a system-wide pattern, and should be reserved for the single hero H1 only.

Uppercase is mandatory on all {typography.button} instances and the {typography.brand-mark}. No other roles use text-transform.

Note on Font Substitutes

Both Syne and DM Sans are available on Google Fonts—no substitution is required. If Google Fonts cannot be loaded (offline environments, restrictive CSPs), the fallback Arial, sans-serif will render acceptably, though Syne's distinctive geometric character will be lost. For Chinese/Japanese/Korean character support, consider adding "Noto Sans", to the DM Sans fallback stack. CSS variable naming convention observed: font families are declared inline rather than as custom properties; implementers may choose to abstract them to --font-display: 'Syne', sans-serif; and --font-body: 'DM Sans', Arial, sans-serif; for maintainability.

Layout

Spacing System

• Base unit: 2px ({spacing.xxs}), scaling through non-linear increments optimized for the dark-mode density.
• Tokens: {spacing.xxs} (2px — micro-adjustments, focus ring offsets), {spacing.xs} (8px — icon padding, tight gaps), {spacing.sm} (12px — internal element spacing), {spacing.md} (16px — standard padding, grid gaps), {spacing.lg} (20px — component margins), {spacing.xl} (26px — card internal padding), {spacing.section-sm} (30px — element-to-element vertical rhythm), {spacing.section-md} (40px — subsection separation), {spacing.section-lg} (90px — major section padding), {spacing.section-xl} (130px — hero vertical padding).
• Section padding (vertical): {spacing.section-xl} (130px) — used on the {component.hero-band} to create dramatic top-of-page breathing room.
• Card internal padding: {spacing.xl} (26px) — consistent across {component.pricing-card} and {component.pricing-card-featured}.
• Gutters: {spacing.md} (16px) horizontal padding on the main container at mobile, scaling to {spacing.lg} (20px) or higher at desktop breakpoints.

Grid & Container

• Max content width: 1440px (observed on <section> containers). Content centers within viewport beyond this width.
• Density choice: Editorial-sparse with marketplace precision. The hero band uses a single centered column (~720px text width) for readability, while pricing sections likely expand to multi-column grids within the 1440px constraint.
• Desktop grid behavior: The hero operates as a single centered text column (no side rails). Pricing and feature sections (inferred from component presence) likely use 2–3 column layouts for tier comparison.
• Hero column split: Text content is fully centered both horizontally and vertically. No left-rail/right-rail split—the entire hero is a focal-point composition.

Whitespace Philosophy

This system practices aggressive vertical whitespace with disciplined horizontal constraint. The hero breathes with 130px of top padding, allowing the candlestick background atmosphere to establish mood before text enters. Horizontal whitespace is tighter: body text wraps at a comfortable ~70 characters, and CTAs sit compactly beneath the subtitle. The overall effect is cinematic—not spacious in a "luxury resort" way, but spacious in a "trading terminal focused on one chart" way.

Header Architecture

┌─────────────────────────────────────────────────────┐  ← 80px height (top-nav)
│  [★]          CHRISSFX1                    [menu?]  │  ← Logo left, brand center,
│ (nav-logo)   (nav-brand)                            │    utilities right (inferred)
└─────────────────────────────────────────────────────┘
  ↑ {spacing.md} from top edge                         Max-width: 1440px centered

The header is minimal: a gold star crest icon ({component.nav-logo}), the wordmark ({component.nav-brand}) in widely-tracked uppercase, and implied utility links (not visible in screenshot but standard for this pattern). Background is fully transparent, letting the hero background show through.

Hero Section

┌─────────────────────────────────────────────────────────┐
│                      [★]                                │  ← hero-crest, centered
│                   CHRISSFX1                             │  ← hero-brand-mark (gold FX)
│                                                         │
│              F I N A N C I A L                          │  ← hero-headline (white)
│              D I S C I P L I N E                        │  ← (continues)
│                  B U I L D S                            │  ← hero-headline-accent (gold)
│                  F R E E D O M                          │  ← hero-headline-accent (gold)
│                                                         │
│     Trade live. Stop guessing. Learn Forex & Gold       │  ← hero-subtitle (body-md)
│     (XAUUSD) the right way — with real risk             │
│     management, straight from Kigali, Rwanda.           │
│                                                         │
│   [ START YOUR JOURNEY ]  [ WATCH A LIVE SESSION ]      │  ← button-primary, button-secondary
│         ↑ gold fill              ↑ outline              │
└─────────────────────────────────────────────────────────┘
  ← 130px top pad →        content max-width ~720px        ← 130px bottom pad →

The hero is a single-column center-aligned composition with five distinct layers stacked vertically: crest/brand lockup, headline (with inline gold accent on lines 3–4), subtitle paragraph, and CTA pair. The headline breaks across four lines with intentional word choices—"BUILDS FREEDOM" receiving the gold color treatment to create a visual climax.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Base page surface, hero band | | 1 (Hairline) | 1px {colors.border-medium} border | Secondary button ({component.button-secondary}) | | 2 (Soft Glow) | {extensions.shadows.gold-glow-soft} (gold, 30% opacity, 8px blur, 24px spread) | Hover state for primary buttons (inferred) | | 3 (Primary Glow) | {extensions.shadows.gold-glow} (gold, 48% opacity, 8px blur, 39px spread) | Default state for {component.button-primary} — the "lit" CTA | | 4 (Modal/Dropdown) | Not observed in screenshot | Future use: dropdown menus, modals, tooltips |

Philosophy: This is a glow-over-shadow system. Rather than using neutral grayscale drop shadows to indicate elevation (as Material Design does), ChrissFX1 derives depth from colored light—the golden glow emanating from primary actions suggests heat, energy, and importance. This is emotionally resonant for a trading-education brand: the CTA literally glows like a "buy" signal on a terminal. Non-interactive surfaces (cards, containers) remain flat or use hairline borders only, ensuring the glow is reserved for click-worthy elements.

Shadows observed are warm-toned (gold-cast), never neutral gray or blue. This reinforces brand cohesion: every pixel of "depth" carries the {colors.primary} hue.

Decorative Depth

The hero background features layered candlestick-chart imagery (red/green candles, moving average lines in blue/purple) rendered at low opacity (~15–20%) behind the content. This is not a photograph but appears to be an illustrated or CSS-generated pattern. It creates atmospheric depth without competing with foreground text—functionally similar to a "gradient mesh" background but semantically specific to forex trading. The chart imagery is static (no animation observed in CSS for the background layer itself, though bgPulse keyframe exists and may apply subtle opacity shifts).

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 9px | Small inner elements, tag badges, input fields (inferred) | | {rounded.DEFAULT} | 10px | Most common radius. Cards ({component.pricing-card}), containers, panel corners | | {rounded.md} | 12px | Slightly larger cards, image containers (infrequent) | | {rounded.lg} | 18px | Feature cards, testimonial avatars (infrequent) | | {rounded.pill} | 100px | All buttons. Primary, secondary, and ghost buttons are fully pill-shaped | | {rounded.full} | 50% | Circular icon buttons ({component.button-icon-circle}), avatar images |

The shape vocabulary is intentionally narrow: pill or circle for anything interactive, 10px for anything containing content. This binary choice reduces cognitive load and creates strong visual consistency. The 100px pill radius (effectively half the height of any reasonably-sized button) ensures buttons always appear as capsules regardless of padding changes.

Photography Geometry

No photography was observed in the provided screenshot—all imagery is vector-based (SVG crest icon) or illustrative (candlestick charts). If photography is added in production (mentor headshots, trading screen captures), the recommended treatment would be {rounded.DEFAULT} (10px) corner radius with a subtle {colors.border-subtle} stroke, maintaining consistency with the card system. Aspect ratios for future imagery: 1:1 for avatars, 16:9 for session previews/screenshots, 4:3 for team photos.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g., {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The signature call-to-action. Solid {colors.primary} (gold) background with {colors.on-primary} (near-black) text in {typography.button} style (14px, weight 700, uppercase, 0.08em letter-spacing). Fully pill-shaped at {rounded.pill} (100px). Padding is 16px 30px (vertical/horizontal). Carries the {extensions.shadows.gold-glow} shadow—a diffuse golden halo with 48% opacity and 39px spread—that makes it appear to emit light. This is the highest-emphasis interactive element in the system. Used once in the hero ("START YOUR JOURNEY") and repeated for conversion actions like "Join Elite" in pricing contexts.

{component.button-secondary} — The outlined companion CTA. Transparent background with {colors.ink} (white) text in identical {typography.button} styling. Bordered with 1px solid at approximately {colors.border-medium} (25% white opacity). Same {rounded.pill} radius and 16px 30px padding as primary. No shadow—intentionally flatter to create visual hierarchy where the primary button "glows" and this one recedes. Used for lower-commitment actions: "Watch a Live Session", "Join Standard".

{component.button-icon-circle} — A circular icon-only control (observed as a wins-carousel navigation arrow). {colors.canvas} background with {colors.primary} (gold) icon/color. 1px border in {colors.border-gold} (gold tint at ~16% opacity). {rounded.full} (50%) creates a perfect circle. Size is 44px diameter (touch-friendly). No text label—icon-only. Shadow: none. Used for carousel arrows, toggle switches, or dismiss actions.

Navigation

{component.top-nav} — The global header bar. Transparent background (shows hero chart imagery through it). Height approximately 80px. Contains {component.nav-logo} (left), {component.nav-brand} (center), and inferred utility links (right). No border, no shadow—floats above content. Typography for nav items would be {typography.caption} or {typography.button} depending on importance.

{component.nav-logo} — The star/crest SVG icon positioned at the top center of the hero (above the brand name). 48px × 48px area. {colors.primary} (gold) fill/stroke. Custom SVG path (6-pointed star with inner detail). No background, no border—icon sits directly on {colors.canvas}.

{component.nav-brand} — The "CHRISSFX1" wordmark. Renders in {typography.brand-mark} (13px, weight 700, 0.2em letter-spacing). Color is {colors.primary-light} (pale gold #ffe7ae) or {colors.ink} depending on context—screenshot shows it in a light tone. Uppercase. Positioned immediately below {component.nav-logo}.

Hero

{component.hero-band} — The full-viewport hero section. {colors.canvas} background with layered candlestick-chart decorative imagery at low opacity. Padding: {spacing.section-xl} (130px) vertical, {spacing.md} (16px) horizontal. Contains all hero child components centered horizontally and vertically. Max content width constrains text to ~720px for readability.

{component.hero-headline} — The H1 element: "FINANCIAL DISCIPLINE BUILDS FREEDOM". Uses {typography.display-lg} (Syne, 84px, weight 800, 0.5px letter-spacing). Color is {colors.ink} (white) for the first two lines. Text is uppercase (implied by visual). Line height is generous at 90.72px to accommodate the massive size.

{component.hero-headline-accent} — The gold-colored portion of the headline ("BUILDS FREEDOM"). Identical typography to {component.hero-headline} but color is {colors.primary} (gold). Implemented as inline <span> elements or CSS background-clip: text with {colors.primary} gradient. This is a signature moment—do not replicate this mixed-color headline treatment elsewhere in the page.

{component.hero-subtitle} — The descriptive paragraph below the headline. {typography.body-md} (DM Sans, 19px, weight 400, 32.3px line height). Color: {colors.body-light} (#e7e7e7)—softer than white for extended reading. Centered alignment. Max width ~650px. Content explains the value proposition: "Trade live. Stop guessing. Learn Forex & Gold (XAUUSD) the right way..."

{component.hero-crest} — Container for the star SVG icon. Positioned above the brand name in the hero's top-center area. Size: 56px × 56px (larger than the nav version). References {component.nav-logo} for the actual icon asset.

{component.hero-brand-mark} — The "FX" or full "CHRISSFX1" text appearing below the crest in the hero context. May use {typography.brand-mark} styling or a slightly larger variant.

Cards & Containers

{component.pricing-card} — Standard pricing tier container (inferred from CSS class .pricing). Background is rgba(255, 255, 255, 0.06)—white at 6% opacity on dark—which creates a subtle raised-surface effect without a solid color. Text: {colors.ink}. Typography: {typography.body-md} for content. Rounded: {rounded.DEFAULT} (10px). Padding: {spacing.xl} (26px) internal. No border observed (relies on background contrast). Used for the "Standard" tier or non-featured options.

{component.pricing-card-featured} — Highlighted pricing tier (e.g., "Elite"). Background is rgba(242, 179, 61, 0.14)—{colors.primary} (gold) at 14% opacity—creating a warm tinted surface that stands out from standard cards while remaining readable. All other properties match {component.pricing-card}. The primary CTA within this card would be {component.button-primary} ("Join Elite") vs. {component.button-secondary} ("Join Standard") in the standard card.

{component.trust-strip-container} — The horizontal scrolling/fading marquee area below the hero (observed in DOM as .trust-strip-outer / .trust-track). Contains {component.trust-strip-item} children. Transparent background. Typography: {typography.caption}. Animation: auto-scrolls horizontally via scrollRight/scrollLeft keyframes.

{component.trust-strip-item} — Individual credential/logo within the trust strip. {colors.muted} text color, {typography.caption} sizing. Likely includes partner logos, broker affiliations, or certification marks. Repeats infinitely in the marquee loop.

Footer

{component.footer} — Page footer section. {colors.surface} (pure black #000000) background—slightly darker than {colors.canvas} to create a visual "floor". Text: {colors.muted} in {typography.caption}. Padding: {spacing.lg} (20px) vertical, {spacing.md} (16px) horizontal. Contains copyright, links, and legal text. Observed in DOM with dynamic year injection via JavaScript.

Do's and Don'ts

Do

• Do reserve {colors.primary} (gold) exclusively for interactive elements, headline accent words, and the brand crest—never use it for body text, borders (except on icon buttons), or background fills beyond the 14% opacity tint on featured cards.
• Do apply {typography.display-lg} (Syne, 84px, weight 800) to the hero H1 only—section headings should use {typography.title-md} (54px) or {typography.title-sm} (21px) to maintain clear hierarchy.
• Do use {rounded.pill} (100px) on every button regardless of variant—primary, secondary, ghost, and destructive buttons all share the capsule shape.
• Do apply {extensions.shadows.gold-glow} (the 48% opacity golden halo) to {component.button-primary} instances only—no other component should emit a glow shadow.
• Do keep body text in {colors.body-light} (#e7e7e7) or lighter—reserve {colors.ink} (pure white) for headings and short UI labels to maintain dark-mode eye comfort.
• Do use uppercase with {typography.button}'s 0.08em letter-spacing on all button labels—this is a hard rule, not a suggestion.
• Do center-align the hero headline and subtitle within a ~720px max-width column—avoid full-viewport line lengths at 84px type size.
• Do layer the candlestick-chart imagery at low opacity (≤20%) behind hero content—it must remain atmospheric, never competitive.
• Do use {colors.accent-green} (#25d366) for success/live indicators and community join paths—this color has semantic meaning (WhatsApp association, "go" signal).
• Do maintain the 130px ({spacing.section-xl}) vertical padding on the hero band—the breathing room is essential to the cinematic feel.

Don't

• Don't apply Syne to body text or DM Sans to headings—cross-contamination destroys the personality contrast that defines the system.
• Don't use {colors.primary} as a solid background fill for large areas (cards, sections)—always use it at reduced opacity (14% observed) or reserve it for buttons/icons.
• Don't add neutral gray or blue-toned drop shadows to any element—all depth must come from golden glow or remain flat.
• Don't round card corners below {rounded.DEFAULT} (10px) or above {rounded.lg} (18px)—the 10px radius is the visual standard for content containers.
• Don't let button text weight fall below 700—{typography.button} requires boldness to justify the uppercase treatment.
• Don't place {component.button-primary} and {component.button-secondary} at equal visual prominence—the glow shadow on primary must make it the obvious default action.
• Don't use {colors.hairline} (#141414) for borders that need to be noticed—it's for structural dividers only; use {colors.border-medium} for interactive boundaries.
• Don't expand the radius vocabulary beyond the six defined tokens ({rounded.sm}, {rounded.DEFAULT}, {rounded.md}, {rounded.lg}, {rounded.pill}, {rounded.full})—no new radii.
• Don't apply the gold-gradient-inline-text effect (seen on "BUILDS FREEDOM") to any element other than the hero H1—this is a singular signature moment.
• Don't switch the mode to light mode—all tokens are calibrated for {extensions.mode}: dark; a light version would require a complete token remapping not specified here.

Motion & Animation

Transition Tokens

The following CSS transitions were extracted from the stylesheet. Each represents a distinct motion pattern used for interactive feedback or layout shifts:

/* Universal property transition (likely for theme/color changes) */
--transition-all: all 0.3s ease;

/* Button and interactive element transforms */
--transition-transform-shadow: transform 0.25s ease, box-shadow 0.25s ease;

/* Transform-only (hover lifts, scale effects) */
--transform-quick: transform 0.25s cubic-bezier(0.6, 0, 0.2, 0.5);

/* Transform with slower decay */
--transform-medium: transform 0.3s ease;

/* Transform + background (button state changes) */
--transform-bg: transform 0.25s ease, background 0.25s ease;

/* Complex transition (form elements, focus states) */
--complex-transition: transform 0.35s ease, border-color 0.35s ease, filter 0.35s ease;

/* Scroll-triggered entrance animations (long duration) */
--entrance-slow: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;

/* Carousel slide */
--carousel-slide: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

/* Marquee continuous scroll */
--marquee-scroll: transform 0.6s linear;

Keyframe Animations

• bgPulse — Subtle opacity oscillation on the hero background chart layer (creates a "living" atmospheric effect without distracting from content).
• dotPulse / pulseDot — Pulsing animation for status indicators (likely a "live now" dot or recording indicator).
• btnPulse — Gentle scale/pulse on the primary CTA to draw attention (may be used on initial page load or after idle timeout).
• heroZoom — Slow scale transformation on the hero background image (parallax-like depth effect on scroll).
• fadeUp — Standard scroll-triggered entrance: element translates Y (+30px → 0) and opacity (0 → 1) as it enters the viewport.
• crestSpin — Rotation animation applied to the hero star crest (subtle, likely 360° over 20–30 seconds for a "premium seal" feel).
• brokerSpin — Similar rotation for broker/partner logos in the trust strip (continuous slow spin or wobble).
• codeGlow — Pulsing glow effect (possibly for code snippets, API references, or terminal-like UI elements not visible in hero).
• scrollRight / scrollLeft — Continuous horizontal translation for the trust-strip marquee (infinite loop of credential logos).

Interaction Patterns

• Button hover lift: {component.button-primary} and {component.button-secondary} translate Y (-2px to -4px) on hover with {--transform-quick} easing; the primary button's glow shadow intensifies ({extensions.shadows.gold-glow-medium}).
• Scroll-triggered fade-up: Hero child elements (crest, brand, headline lines, subtitle, CTAs) stagger-enter with fadeUp keyframe, each delayed by ~100ms, creating a cascade reveal on page load.
• Marquee auto-scroll: The trust strip ({component.trust-strip-container}) moves continuously left/right using scrollRight/scrollLeft keyframes, pausing on hover (inferred best practice).
• Crest rotation: The {component.nav-logo} / {component.hero-crest} star icon rotates slowly (360° over 20s+) via crestSpin, suggesting a "certified" or "official" quality seal.
• Background parallax: The candlestick chart layer behind the hero scales subtly (1.0 → 1.05) on scroll via heroZoom, creating depth separation from the fixed text layer.
• Focus rings: Form inputs (when implemented) will show a {colors.primary}-colored focus ring with --complex-transition timing (transform + border-color + filter).

Note on motion level: This system is classified as expressive ({extensions.motion.level})—animations are prominent and brand-defining, not merely functional. The combination of glowing CTAs, rotating crests, pulsing backgrounds, and marquee strips creates a dynamic, "terminal-live" energy appropriate for a trading-education brand. Implementers should preserve this expressiveness rather than flattening to subtle/minimal motion.

Imagery Style

• Dominant style: Illustrative/vector-based atmospheric graphics (candlestick charts) rather than photography. The hero background is a stylized representation of forex price action—red bearish candles, green bullish candles, and purple/blue moving-average lines—rendered in a simplified, almost abstract manner.
• Opacity treatment: All background imagery sits at 15–20% opacity against {colors.canvas}, ensuring text remains fully legible while the financial context registers subliminally.
• Color palette of imagery: Red (#cc3333 or similar), green (#33cc66 or similar), and indigo/blue (#6666cc) for chart elements—these are the only non-brand colors in the visual system and are strictly confined to the decorative background layer.
• Role of imagery: Supportive, never dominant. The charts establish domain credibility (this person trades forex) without competing with the headline/CTA for attention.
• Icon style: Custom SVG line-art with consistent 2px stroke weight. The hero crest (six-pointed star with inner hexagram detail) uses {colors.primary} (gold) fill/stroke. Icons are geometric, precise, and feel "engineered" rather than hand-drawn.
• Future imagery guidance: If mentor photos or trading-screen captures are added, they should be treated with {rounded.DEFAULT} (10px) corners, desaturated slightly (to match the dark-mode mood), and overlaid with a subtle {colors.canvas} tint at 10–20% opacity for integration.

Icon System

• Library: Custom SVG. No icon library (Lucide, Heroicons, Material) was detected in the loaded resources. All icons are inline <svg> elements with custom paths.
• Specific icons observed:
  • Star/Crest: Six-pointed star with internal geometric detail (hero logo, nav logo). 48–56px rendered size. Gold ({colors.primary}) stroke/fill.
  • Arrow (navigation): Left/right chevron or arrow for carousel control ({component.button-icon-circle}). 16–20px icon size within 44px circle.
  • Arrow (CTA suffix): Right-arrow symbol after "Join Standard →" text (may be a Unicode character → rather than SVG).
• Treatment: Stroke-based for the crest (visible as outlined star with internal lines). Fill-based possible for simpler icons. Color is typically currentColor inheriting from parent (gold on dark, white on dark depending on context).
• Size spectrum: 16px (inline/UI arrows), 20–24px (button icons), 48px (nav crest), 56px (hero crest).
• Alignment: Icons center vertically with adjacent text. In {component.button-icon-circle}, the icon is perfectly centered within the 44px circle both horizontally and vertically.
• Stroke width: Consistent 2px observed on the crest icon. Maintain this weight for any new custom icons to ensure visual harmony.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro (static-first, ideal for landing pages)
- Styling:        Vanilla CSS or CSS Modules with custom properties (no Tailwind detected;
                  tailwindLikely: false in source analysis). CSS custom properties strongly
                  recommended for token management.
- Fonts:           Google Fonts: Syne (weights 400, 600, 700, 800) + DM Sans (weights
                  300, 400, 500, 600, 400 italic). Preconnect to fonts.googleapis.com.
- Animation:      Vanilla CSS keyframes (11 animations detected in source) + IntersectionObserver
                  for scroll-triggered reveals (fadeUp). No GSAP/Framer Motion strictly required
                  but could enhance the parallax/crest-spin complexity.
- Icons:          Custom inline SVG (current approach). Consider converting to a lightweight
                  sprite sheet or SVG symbol system for reuse.
- Component lib:  None detected. Build custom components matching the tokens in this spec.
                  Avoid heavy UI libraries (shadcn, Radix) as they introduce design language
                  conflicts with the custom glow-shadow/pill-button system.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single column everything. Hero headline scales down (likely 42–48px). Buttons stack vertically. Trust strip scrolls faster. Padding compresses to {spacing.md} (16px) horizontal. | | Tablet | 640px – 1024px | Hero headline at ~60–64px. Pricing cards may shift from 3-column to 2-column or stack. Nav collapses to hamburger (inferred). | | Desktop | 1024px – 1440px | Full design as observed: 84px headlines, side-by-side CTAs, multi-column pricing grid. Container max-width 1440px active. | | Wide | > 1440px | Content centers in 1440px container; hero background chart imagery may expand edge-to-edge while text remains constrained. |

Touch Targets

• {component.button-primary}: 52px height (16px padding × 2 + ~20px text/content) × variable width (padding 30px × 2 + text). Exceeds WCAG AAA 44×44 minimum. ✅
• {component.button-secondary}: Identical dimensions to primary. ✅
• {component.button-icon-circle}: 44px × 44px (explicit size). Meets WCAG AAA 44×44 minimum exactly. ✅
• Nav links (inferred): Minimum 44px tap area recommended. Current {typography.caption} at 14px should have padding increased to ≥16px vertical on mobile.

Collapsing Strategy

• Navigation: At tablet and below, the centered crest + brand mark likely collapse to a left-aligned logo with a hamburger menu icon (right). The transparent header becomes a solid {colors.canvas} bar on scroll (sticky behavior inferred).
• Hero headline: {typography.display-lg} (84px) scales down proportionally—expect 48px on mobile (≈57% of desktop). The four-line break structure ("FINANCIAL / DISCIPLINE / BUILDS / FREEDOM") may compress to three lines.
• CTA buttons: Side-by-side on desktop ({component.button-primary} + {component.button-secondary}) stack vertically on mobile with {spacing.sm} (12px) gap between them. Full-width buttons recommended at < 480px.
• Pricing grid: Three-tier pricing (if present) collapses: 3 columns → 2 columns (tablet) → 1 column (mobile) with {component.pricing-card-featured} potentially reordering to top or expanding to full width.
• Trust strip: Marquee continues on all breakpoints but may reduce item count visible simultaneously (showing 2–3 logos on mobile vs. 5–6 on desktop). Touch-swipe enabled on mobile (inferred accessibility enhancement).
• Hero padding: Vertical padding reduces from {spacing.section-xl} (130px) to {spacing.section-lg} (90px) on tablet and {spacing.section-md} (40px) on mobile to avoid excessive scroll-before-content.

Image Behavior

• Hero background chart: background-size: cover or contain with background-position: center. On mobile, the chart pattern may zoom in slightly (focus on candle cluster) or maintain full coverage with reduced opacity to prevent visual noise at small sizes.
• Crest/icon: Scales proportionally with container. Nav version (48px) may reduce to 36–40px on mobile. Hero version (56px) may reduce to 44–48px.
• Future photography: If mentor headshots are added, use aspect-ratio: 1/1 for avatars (crop to square), object-fit: cover, and maintain {rounded.DEFAULT} on all breakpoints.

Iteration Guide

1. Set up the project using Next.js (App Router) or Astro with vanilla CSS modules. Create a tokens.css file defining CSS custom properties for every token in this DESIGN.md's frontmatter (colors as --color-*, spacing as --space-*, typography as --font-*, etc.). Import this file globally.

2. Build the HTML skeleton matching the Header Architecture and Hero Section ASCII diagrams exactly. Start with the hero band ({component.hero-band}) as it exercises the most tokens: dark canvas, gold crest, Syne headline with inline gold span, DM Sans subtitle, dual CTAs.

3. Implement the type scale by creating utility classes or CSS classes for each {typography.*} token. Ensure Syne loads for display-lg, title-md, title-sm and DM Sans for everything else. Verify the 84px/800-weight headline renders correctly—this is the brand's loudest voice.

4. Create the button system starting with {component.button-primary} (gold background, {colors.on-primary} text, {rounded.pill}, 16px 30px padding, uppercase, {typography.button}, and critically—the {extensions.shadows.gold-glow} shadow). Then build {component.button-secondary} as the outlined variant (transparent bg, white text, {colors.border-medium} border, no shadow). Build {component.button-icon-circle} last (44px circle, gold icon, gold-tinted border).

5. Implement the glow-shadow as a reusable CSS custom property (--shadow-gold-primary: rgba(242, 179, 61, 0.482) 0px 8px 39.1832px 0px;) and apply it via box-shadow: var(--shadow-gold-primary);. Never use generic box-shadow values—always reference the golden glow tokens.

6. Add the keyframe animations from the Motion section (bgPulse for background, crestSpin for the logo, fadeUp for scroll-reveals, scrollRight/scrollLeft for the trust strip). Use IntersectionObserver to trigger fadeUp when elements enter the viewport. Stagger the delays: crest (0ms), brand (100ms), headline (200ms), subtitle (300ms), CTAs (400ms).

7. Build the pricing section (even though only partially visible in screenshot) using {component.pricing-card} (white-6%-opacity background) and {component.pricing-card-featured} (gold-14%-opacity background). Place {component.button-primary} ("Join Elite") in the featured card and {component.button-secondary} ("Join Standard") in the standard card to demonstrate the visual hierarchy.

8. Implement responsive breakpoints at 640px, 1024px, and 1440px. At mobile, scale the headline from 84px down to ~48px, stack CTAs vertically, and reduce hero padding from 130px to 40–90px. Test the 44px touch target on {component.button-icon-circle}.

9. Run the linter (npx @google/design.md lint DESIGN.md) after your implementation pass. Fix any broken-ref (token referenced in body but missing from frontmatter), contrast-ratio (text color fails WCAG AA on its background), and orphaned-tokens (token defined in frontmatter but never used in components or prose) warnings.

10. Font setup for local development: Add these <link> tags to <head>:

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
    

    Define CSS variables:

    :root {
      --font-display: 'Syne', sans-serif;
      --font-body: 'DM Sans', Arial, sans-serif;
    }
    

    Apply font-family: var(--font-display) to all h1–h3, .heading-* and font-family: var(--font-body) to everything else.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover styles for {component.button-primary} (glow intensity change? background lighten?) and {component.button-secondary} (border opacity increase? bg fill at 5% white?) are not documented. Infer from the --transform-shadow and --transform-bg transition tokens that both transform and shadow/background change on hover.
• Loading skeletons / pending states: No skeleton loaders, spinners, or empty states were observable in the static screenshot. A trading-education site likely needs loading states for video players, session calendars, or dashboard previews—these must be designed from scratch following the {colors.hairline} + {colors.muted} palette.
• Form validation states: No input fields were detected in the extracted CSS (inputs: []), but a "Start Your Journey" or email-capture flow implies text inputs will exist. Focus state (observed in transitions as --complex-transition: transform + border-color + filter) is partially defined; error/success states beyond {colors.success} are not.
• Dashboard / authenticated surfaces: The screenshot shows only the landing page. Member dashboard, session player, or community chat interfaces (WhatsApp group integration) are entirely unobserved and may require extending the token set (table styles, chat bubbles, video player chrome).
• Pricing tier full details: Only the card containers and CTA buttons were inferable from CSS classes (.pricing, .wrap). Actual tier names, prices, feature lists, and "most popular" badge treatments are unknown and must be designed following the {component.pricing-card} / {component.pricing-card-featured} patterns.
• Pixel-exact values for semi-transparent surfaces: Colors like rgba(242, 179, 61, 0.14) (featured card bg) and rgba(255, 255, 255, 0.06) (standard card bg) are represented in frontmatter by their base opaque tokens ({colors.primary}, {colors.ink}) with opacity noted in component prose. Implementers must apply the opacity values (14%, 6%) at point of use.
• Mobile navigation pattern: The exact behavior of {component.top-nav} below 1024px (hamburger menu? off-canvas drawer? sticky header color change?) is unobserved. Recommend testing a solid {colors.canvas} background with a sliding drawer for mobile nav.
• Video / live session player: The "Watch a Live Session" CTA implies video content, but no player UI (play button, progress bar, fullscreen control) was extractable. Player chrome should extend the dark-mode tokens (progress bar in {colors.primary}, controls in {colors.muted}, overlay at {colors.canvas} with 80% opacity).
• Accessibility (a11y) compliance: The 84px {typography.display-lg} at 0.5px letter-spacing and {colors.ink} on {colors.canvas} provides excellent contrast (>15:1). However, the gold {colors.primary} on {colors.on-primary} (#1a1200) should be verified with a contrast checker for smaller text (14px buttons). The crestSpin rotation animation should respect prefers-reduced-motion.