IronForge

1. COLORS — Set the page background to #0A0A0A (near-black, almost void), card/panel surfaces to #111111, raised panels and nav background to #1A1A1A, primary text to #F2F2F2 (off-white), muted/secondary text to #888888, the single electric brand red to #E62117, hover red to #FF3028, borders and dividers to #2A2A2A (flat concrete), and the gradient fill for CTAs and diagonal accents to linear-gradient(135deg, #E62117 0%, #FF3028 100%). The stat band uses solid #E62117 as a full-section background with a 4px #ffffff top rule. The hero background is a dark directional gradient: linear-gradient(135deg, #1a0000, #0A0A0A). The overall palette mood is: iron under a single red work-light, everything else is darkness. 2. TYPOGRAPHY — Load Anton (Google Fonts, single weight, display face — register as Regular/400) for all headings and Inter (Google Fonts, weights 400/500/600/700) for body and UI text. Type scale: H1 96px Anton, line-height 0.92, letter-spacing 0.02em, text-transform uppercase; H2 56px Anton, line-height 0.95, letter-spacing 0.02em, uppercase; H3 40px Anton, line-height 0.95, letter-spacing 0.02em, uppercase; H4 20px Inter Semibold, line-height 1.3, letter-spacing 0; Body-L 20px Inter Regular, line-height 1.55; Body 16px Inter Regular, line-height 1.6; Eyebrow/label 12px Inter Bold, line-height 1.4, letter-spacing 0.12–0.14em, text-transform uppercase, color #E62117; Caption 13px Inter Regular, line-height 1.5, color #888888. Special treatments: in the H1, the word "work" is rendered with -webkit-text-stroke: 2px #E62117 and -webkit-text-fill-color: transparent, producing a red outline-only word against the dark hero. The logo "IRON" is Anton white; "FORGE" is Anton #E62117. Stat band numbers use Anton 64px white, reduced to 44px on mobile. 3. PAGE SECTIONS — Build the page in this exact sequence: sticky nav → hero (diagonal-clipped, eyebrow + H1 with stroked word + description + dual CTA + footnote) → programs section (section heading + 3 alternating two-column rows, each with H3, paragraph, tags, and a visual placeholder panel) → stats band (full-width solid red section, 4 stat blocks: 340K / 4.8★ / 87% / 2.4×, each with Anton number + uppercase label) → testimonials section (section eyebrow + H2 + featured large quote card on left taking 2fr + two stacked smaller cards on right taking 1fr) → pricing section (surface-background section, eyebrow + H2 + 3-column card grid with Solo $19/mo, Coached $49/mo featured, Elite $149/mo, each with tier label + price + description + 4 feature lines + button) → final CTA section (centered, red radial gradient overlay, H2 "Stop planning. Start lifting." + sub + dual buttons) → footer. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The diagonal clip-path cut on the hero section is the single most visually distinctive element. The hero-bg div uses clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%), creating a ~5° angled bottom edge that bleeds edge-to-edge. The background inside it is linear-gradient(135deg, #1a0000, #0A0A0A). Additionally, each program visual panel uses clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%) for a consistent diagonal bottom cut. The stats band uses ::before pseudo-element: content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #ffffff — a clean white rule marking the top of the red band. Testimonial and pricing cards use no border-radius (0px) for a raw, industrial feel with 1px solid #2A2A2A borders. The featured pricing card uses background: #1A1A1A (one stop higher than default surface). This sharp geometry defines the aesthetic: no softness, no rounding — steel and edges. 5. COMPONENT SPECS — Primary button (.btn-red): background #E62117, color #ffffff, padding 10px 20px (nav size) / 16px 32px (hero size) / 18px 40px (CTA size), border-radius 0px (sharp), font Inter Bold weight 700, font-size 14–16px, letter-spacing 0.04em, text-transform uppercase; hover: background #FF3028, transform translateY(-1px), transition 150ms ease. Secondary button (.btn-out): background transparent, color #F2F2F2, border 1px solid #2A2A2A, padding 14px 28px, font Inter Semibold 600, font-size 15px, letter-spacing 0.02em; hover: border-color #888888, transition 200ms ease. Cards (program content): no explicit card box, content laid out in grid; program visual panels: background #1A1A1A, border 1px solid #2A2A2A, aspect-ratio 4/3, clip-path diagonal cut. Testimonial cards: background #111111, border 1px solid #2A2A2A, padding 28px, no border-radius; large featured card: border-left 4px solid #E62117, padding 48px. Pricing cards: background #111111, padding 40px 32px, no border-radius, separated by 1px #2A2A2A gaps (grid background trick: background: #2A2A2A, gap: 1px). Nav: height 64px, sticky top: 0, background rgba(10,10,10,0.92), backdrop-filter blur(10px), border-bottom 1px solid #2A2A2A, z-index 100. 6. COPY VOICE — Write with blunt, earned authority: no lifestyle softness, no aspirational vagueness. Four exact example lines: H1 "Train like the work matters" / Subheadline "Strength training for people tired of workouts designed for before-and-after photos" / Stat label "87% complete their first program" / CTA headline "Stop planning. Start lifting." Five banned phrases for this brand: "Transform your body", "Unleash your potential", "No pain no gain", "Join thousands of fitness enthusiasts", "Your best self starts here." The audience is intermediate-to-serious lifters, collegiate athletes, and people who have tried and quit generic fitness apps — their core pain point is programs that optimize for aesthetics and engagement metrics rather than sustainable strength gains and injury prevention. Every copy line should cite a number or name a specific training methodology; never float a vague promise. 7. BACKGROUND ZONES — Three distinct background levels. Zone 1 (#0A0A0A): page root, hero section, final CTA section — the dominant void. Zone 2 (#111111): card/panel surfaces, testimonials section default background, pricing section (set via background: var(--surface) on .price-sec), footer background — one visible step above the void. Zone 3 (#1A1A1A): raised panels within cards (featured pricing card, program visual placeholders) — slightly lifted. The red band is a full fourth visual zone: .stats-sec uses background: #E62117 with 80px top/bottom padding, bleeding fully edge-to-edge at 100% viewport width. The hero gradient band linear-gradient(135deg, #1a0000, #0A0A0A) bleeds edge-to-edge inside the clip-path. The final CTA section has a decorative gradient overlay div: position absolute, inset 0, background linear-gradient(135deg, rgba(230,33,23,0.15), transparent), pointer-events none — adding a warm red tint to the upper-left without becoming a full color zone. No textures or patterns; texture comes from harsh typography and structural lines only. 8. SCROLL ANIMATIONS — All animated elements carry class "reveal" with initial state opacity: 0, transform: translateY(20px). On intersection (threshold 0.12), class "in-view" is added: opacity: 1, transform: none. Transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1), transform 500ms cubic-bezier(0.16, 1, 0.3, 1). Stagger via data-delay attribute: data-delay="1" adds transition-delay: 0.08s, data-delay="2" adds 0.16s, data-delay="3" adds 0.24s. Staggered elements: within the hero (eyebrow → H1 → desc → cta → footnote), within program rows (each row gets a delay), within the stats grid (4 cells staggered), within testimonials (featured card → first aside → second aside), within pricing (3 cards staggered). IntersectionObserver unobserves after first trigger (one-shot animate-in). Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Three breakpoints: Desktop ≥1024px, Tablet 768–1023px, Mobile ≤767px. Hero H1: 96px desktop → 64px tablet → 44px mobile. CTA H2: 72px desktop → 44px mobile. Stat numbers: 64px desktop → 44px mobile. Programs grid: 2-column (1fr 1fr) desktop → 1-column tablet and mobile (prog-row.rev resets order: unset at tablet). Stats grid: 4-column desktop → 2-column (repeat(2,1fr)) tablet → 2-column mobile. Testimonials: 2fr/1fr split desktop → 1-column tablet. Pricing grid: 3-column desktop → 1-column tablet with gap: 0 (cards stack flush). Footer: 4-column (2fr 1fr 1fr 1fr) desktop → 2-column tablet → 1-column mobile. Nav: all four link items hidden on mobile (display: none on .nl), only logo and CTA button remain. Hero CTA buttons: flex-direction column + align-items stretch on mobile (full-width stacked). Container padding: 0 80px desktop, scaled down on mobile. 10. CRITICAL CSS — Always include these exact overrides: Add a style tag before /head containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. Additionally add the Google Fonts link tag: href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap". Set on root: box-sizing border-box on all elements via *, *::before, *::after. Set html { scroll-behavior: smooth }. Set body { -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6 }. The .wrap class must be applied inside every section and in nav as the centering container; max-width on inner elements (nav inner: max-width 1200px) sits inside .wrap. 11. SEMANTIC HTML — Document structure: one <header> is not used — nav is a bare <nav> element at body root. <main> contains six <section> elements: section.hero, section.programs, section.stats-sec, section.testi-sec, section.price-sec, section.cta-sec. Testimonial and pricing items use <article> tags. <footer> closes the document. Exactly one <h1> in the hero, text "Train like the work matters" with a <span> wrapping "work" for the stroke treatment. H2 elements appear in programs, testimonials, pricing, and CTA sections; H3 in each program row. SEO: <title> format "IronForge — Train Like the Work Actually Matters" (52 chars, within 60). <meta name="description" content="IronForge is a strength training platform for people who are tired of workouts designed for before-and-after photos. Programs built around progressive overload, recovery, and the long game." — 189 chars, trim to 155 for production>. og:image: high-contrast athlete photo with red accent overlay, minimum 1200×630px. Every <img> gets descriptive alt text naming the action and subject (e.g., alt="Athlete performing barbell back squat, heavy load, industrial gym lighting"). 12. FOOTER STRUCTURE — Four-column grid: column 1 (2fr) is the brand column — Anton logo "IRONFORGE" (FORGE in #E62117, 20px), followed by a 13px #888888 brand description paragraph ("Strength training for people who take the long view. Progressive overload, recovery science, and coaching that treats you like an athlete."). Columns 2–4 are each 1fr link columns with an 11px uppercase Inter Bold #888888 column header (letter-spacing 0.10em) and a list of 4 anchor links in 14px #888888 with hover color #F2F2F2 and transition 200ms. Column headers: "Train" (Programs, Coaches, Exercise Library, Nutrition), "Community" (Forum, Blog, Podcast, Discord), "Company" (About, Pricing, Careers, Press). Below the grid, separated by border-top 1px solid #2A2A2A with 24px padding-top, a .foot-bot flex row (space-between, wrap): left "© 2025 IronForge Training Inc." and right "340,000 athletes · No before-and-after photos required." — both 12px #888888. No social icons. No newsletter input. 13. UNIQUE INTERACTIVE — The pricing section contains no accordion. The FAQ described in the design system spec is omitted in the HTML implementation; do not add it unless explicitly requested. The primary interactive behaviors are: (1) Scroll-reveal via IntersectionObserver — elements with class "reveal" animate in once on first intersection at threshold 0.12, using the transitions described in prompt 8; observer calls unobserve after triggering so the animation fires exactly once. Implementation: const o = new IntersectionObserver(els => els.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in-view'); o.unobserve(e.target) } }), { threshold: .12 }); document.querySelectorAll('.reveal').forEach(el => o.observe(el)); — place this script before </body>. (2) Button hover states — .btn-red: background color transitions to #FF3028, translateY(-1px), 150ms; .btn-out: border-color transitions to #888888, 200ms. (3) Nav link hover: color transitions from #888888 to #F2F2F2, 200ms. No tabs, sliders, modals, or accordions in this implementation. ARIA: all buttons have visible text labels; if icons-only are added later, include aria-label. Stat numbers do not count up in this HTML implementation (count-up is a Framer code component enhancement). — Prompt set generated with Claude Sonnet 4.6 —