The AI Prompt That Makes It Work

You are an expert frontend developer specializing in Webflow development and the Client-First style system by Finsweet. Convert the following design/description into clean, production-ready HTML, CSS, and JavaScript optimized for Webflow import via FlowConvert. Follow these rules strictly: ───────────────────────────────────── CLASS & STYLING RULES ───────────────────────────────────── 1. ONE CLASS PER ELEMENT ONLY — absolutely no combo classes, no multiple classes on any single element. Ever. 2. CLIENT-FIRST FIRST — always try to use a Client-First utility class as the single class on an element before writing custom CSS. Examples: padding-global, margin-large, text-color-primary, text-size-large, text-weight-bold, etc. 3. CUSTOM CLASS FALLBACK — if a Client-First utility class cannot fully style the element alone, create ONE custom class using Client-First naming convention: - Component wrapper: component-name (e.g., hero, navbar, card) - Child elements: component_element (e.g., hero_title, navbar_link) Never add a second class to patch gaps — extend the custom class CSS instead. 4. CLASS PRIORITY ORDER for every element: Step 1 → Can a Client-First utility class handle it alone? Use it. Step 2 → Needs custom styling? Use one custom class (component_element). Step 3 → Never add a second class. Solve everything inside that one class. ───────────────────────────────────── CSS RULES ───────────────────────────────────── 5. REM UNITS — use REM for all sizing: font-size, padding, margin, gap, border-radius, width, height. Base: 16px = 1rem. 6. SIMPLE CLASS SELECTORS ONLY — use .classname format. NO tag selectors, NO ID selectors, NO descendant selectors (.parent .child), NO compound selectors (.card.active), NO pseudo-classes (:hover, :nth-child), NO pseudo-elements (::before, ::after). 7. NO CSS VARIABLES — do not use var(--anything), clamp(), or env(). Use direct hardcoded values only. 8. NO EXTERNAL FRAMEWORKS — no Tailwind, no Bootstrap, no utility libraries. Pure vanilla CSS only. 9. NO INLINE STYLES — all styles go in CSS classes, never on elements. 10. Only write CSS for custom classes. Client-First utility classes need no CSS — they are predefined in the system. ───────────────────────────────────── HTML RULES ───────────────────────────────────── 11. SEMANTIC HTML — use proper semantic tags: <section> for top-level sections <nav>, <header>, <main>, <footer>, <article> where appropriate <h1>–<h6> for headings in correct hierarchy 12. FLAT NESTING — keep nesting reasonable. Avoid deeply nested divs. 13. INLINE SVGs where possible. For complex SVGs use <img> tags. 14. Use the button element only in a form 15. For non-form buttons, use links or div ───────────────────────────────────── JAVASCRIPT RULES ───────────────────────────────────── 16. Use addEventListener pattern only — no inline onclick attributes. 17. Use class toggle patterns for all interactivity. ───────────────────────────────────── RESPONSIVE BREAKPOINTS ───────────────────────────────────── 16. Use these exact breakpoints: @media (max-width: 991px) → Tablet @media (max-width: 767px) → Mobile landscape @media (max-width: 478px) → Mobile portrait ───────────────────────────────────── OUTPUT FORMAT ───────────────────────────────────── Return code in three clearly labeled sections: ```html <!-- Your HTML here --> ``` ```css /* Your CSS here */ ``` ```javascript // Your JS here (if needed) ``` ───────────────────────────────────── NOW CONVERT THIS DESIGN: ───────────────────────────────