BrandForge Pro

Brand Tab

This is your starting point — brand name, tagline, the four core colors, font, card/button styling, and which sections appear in the export.

• Each color swatch now shows its hex code right next to it, so you always know exactly what's set without opening the picker.
• Sections checkboxes control what's included when you generate the guidelines doc. Turn off anything you don't need — the export skips it entirely rather than just hiding it.
• Every field here updates the live preview instantly, including color drags — there's no need to click Generate, though the button still works if you prefer to trigger it manually.
• Reset Branding restores everything back to the default Apex look — colors, font, card style, sections, and promo banner text. It asks for confirmation first since it discards your current customization.

Presets Tab

A faster way to start than building from scratch — pick a complete look and go straight to copying the code.

• Each card shows the preset's real colors, font, and a few of its icons in a compact two-row layout, so you can scan many presets at once and still judge each at a glance. Hover the eye icons on the Brand tab for full visual previews of individual style options.
• Clicking a card applies it immediately — colors, font, card/button style, gradient, animation, and icon set all switch together. The currently active preset is marked with a checkmark; premium presets carry a small gold crown beside their name.
• Generate Guidelines and Copy Guidelines Code are right here too, so you can pick a preset and grab the finished code without ever needing the Brand tab.
• Reset Branding is also here, for convenience — identical to the one on the Brand tab.

Backgrounds Tab

Builds an animated CSS background — gradient, radial, conic, or organic "wave" — using your brand colors.

• Embedding in HighLevel: the app takes over the full viewport as a standalone section web app — give it its own page with a single Custom Code element and nothing else on it. It fills 100% width and height regardless of GHL's section/column settings, with no dark gap below.
• Your work is safe: everything auto-saves in your browser as you go — reopen the app and a bar offers to restore your last session. Ctrl+Z / Cmd+Z undoes preset clicks, image drags, and effect changes (Ctrl+Shift+Z redoes). Use Export Project in the sidebar header to download a .brandforge.json file per client — Import loads it back anytime, on any machine.
• Background Presets at the top are one-click starting points — including the premium gold-crown looks. Editing any control afterward clears the preset checkmark since the result is now custom.
• Gradient shape picks the base animation style. Gold-marked Premium types — ocean, starfield, snow, meteors, aurora, mesh, beams, grain — deliver showcase-grade scenes: parallax stars, seeded snowfall, meteor showers — plus the new premium pack: aurora (drifting blurred color veils), mesh (migrating gradient mesh), beams (sweeping light bands), and grain (brand gradient under animated film grain) — all brand-colored, pure CSS, and deterministic. The ocean and starfield types render, respectively, two animated wave layers along the bottom edge and a two-speed parallax star sky with a glowing planet horizon — star positions are generated from the style name, so the same name always produces the exact same sky in the copied code. Ocean renders two animated wave layers along the bottom edge — the wave silhouette is embedded in the CSS itself as an inline SVG in your brand colors, so it never depends on an external image.
• Effect layer adds a texture or particle overlay on top (grain, bubbles, glow, pulse), plus three gold-badged premium layers: embers, fireflies, and aurora.
• Hover interaction (Premium) adds cursor-reactive particles — sparks that trail the mouse, or glow orbs that drift toward it. Unlike the CSS-only layers this needs a small script: a Copy JS button appears next to Copy CSS whenever an interaction is active. Paste the CSS as usual, paste the JS into a code element, and the effect attaches to the same class name.
• The preview box updates live. Copy CSS grabs just this background's code; Add to Guidelines folds it into the full export as its own numbered section.

Cursor Tab

Designs a custom cursor that follows the mouse, reacts to hovering links/buttons, and animates on click.

• Cursor Presets at the top apply a complete premium cursor design in one click — Comet Luxe, Neon Orbit, and Royal Glow each combine a shape, fill, trail, hover, and click effect. Tweaking any control afterward clears the checkmark.
• Cursor type: pick a native browser cursor (pointer, text, grab, zoom) or Custom to design your own shape.
• Custom shapes, fill style, stroke, and opacity control what the cursor looks like; size and hover-scale control how it behaves. Six premium shapes (hexagon, bolt, sparkle, ring, crosshair, pin) sit in their own gold-labelled row below the standard set.
• Trail, Hover effect, and Click effect (including the gold-badged Premium effects) add motion. Try them in the live preview box — move your mouse over it and click.
• Move your mouse over the main guidelines preview on the right too — the custom cursor runs live there across the whole page, not just in this tab's preview box.

Scroll FX Tab

Builds scroll-triggered animations (fade/slide/zoom/blur/flip in as content enters view, or continuous parallax) plus a small CTA button/banner system with its own hover styles.

• Trigger: on-enter animates once when an element scrolls into view; parallax shifts continuously based on scroll position.
• Scroll the preview box on this tab to see your current settings in action before adding them to the guidelines doc.
• CTA layout and CTA hover style are shown together as a small gallery in the exported guidelines section — the layout picker determines which variant's CSS gets pulled into the copyable snippet.
• For grouped reveals where items should animate in one after another, wrap them in an element with data-stagger-group — already set up automatically on the color/gradient/card sections inside the generated guidelines doc.

Hover & Gallery Tab

Adds motion and polish to the landing page's cards, plus an optional image gallery section — both included in the exported code automatically.

• Card hover style: pick how feature/pricing cards react to the mouse — lift, glow, tilt, or zoom, or turn it off entirely. Three gold-badged premium effects sit alongside them: 3D depth, swing, and holo.
• Apply to CTA buttons too extends the chosen hover feel to the call-to-action buttons, not just the cards, so the whole page moves as one system.
• Image gallery: optionally add an auto-looping gallery section that appears after Testimonials — as a marquee, a film strip, or a vertical loop. The stock images carry ✏️ EDIT notes showing exactly where to swap in your own.
• The old traveling-border card effect is off by default now — re-enable it anytime via Brand → Border Hover.

Landing Page Tab

Generates a complete, deployable landing page — nav, hero, social proof, features, pricing, testimonials, and FAQ — using the same colors, font, and card/button style as whatever brand or preset is currently active.

• Works exactly like the Brand and Presets tabs: edit fields in the sidebar on the left, see the live result in the preview pane on the right.
• Clicking this tab automatically shows the landing page in the preview pane — switching to any other tab brings the brand guidelines doc back.
• Edit the headline, subheadline, both CTA buttons, and the three feature blocks directly — changes update the preview live, the same as every other field in the tool.
• Use the Sections checkboxes to hide whichever sections don't apply (e.g. skip Pricing for a brand that doesn't need it).
• Animated background (Premium): each of the Hero and Final CTA sections has four modes — ocean waves (brand-tinted wave layers along the bottom edge, stacks on top of a background image), starfield (a parallax star sky in your brand colors, self-contained — no Backgrounds tab setup needed), or my background, which applies whatever design is currently on the Backgrounds tab to that section, with a readability scrim over it so the headline stays legible. In "my background" mode the animated design takes the place of any image you picked, and editing the Backgrounds tab live-updates the landing preview.
• Funnel-typed layouts: recipes now change how sections look, not just copy. Lead Magnet and Free Trial get a brand-gradient checklist; Webinar and Challenge switch Features to a numbered agenda; Webinar and Consultation pin the hero left-aligned; Sales Offer, Free Trial, and Consultation flip the Final CTA into a gradient banner. Undo restores instantly. Wave 2 will bring layouts to the other nine funnels + new section types (countdown, opt-in, metric band).
• Design themes: on the Landing tab, the Design picker reskins the whole page with one click — classic (default) plus seven premium skins: editorial (serif magazine, dark, glow hero), noir, vibrant, minimal, playful, brutalist, and warm. Each self-previews on its swatch. Your colors map into every theme, and every customization — media, image blocks, hover FX, gallery, funnel recipes, live hero editing — carries over untouched. Editorial pairs nicely with the Editorial Rise scroll preset and the optional Ticker Marquee section toggle. The Palette switch beside it toggles between your brand colors and whatever's on the Backgrounds tab.
• Funnel Type recipes: at the top of the Landing tab, pick your funnel (Lead Magnet, Webinar, Sales Offer, Case Study… 45 types across Lead Gen, Sales, Events, Frameworks, Authority, B2B and more). Fill the 1–2 blanks — pain point, product, date — watch the headline compose live, then Apply recipe: headline, subheadline, and both CTAs fill in, and the page structure reshapes to match the funnel (a Lead Magnet hides Pricing/Testimonials/FAQ for a lean squeeze page; a Webinar sets the CTA to “Save my seat”). Ctrl+Z undoes the whole thing.
• Hero background — live editing: with hero media set (image, video, or graphics), click the hero section in the preview — drag the bottom-edge handle to set the section height, drag the background itself to reposition the media, and use the zoom chip (images) to scale it. Everything exports as clean CSS (background-position/size, object-position, min-height) in both formats; reset on the chip returns the hero to stock.
• Image blocks — live editor: click Add image and a block drops straight into the landing preview — then edit it right on the page: click the image to select it (orange outline + corner handles), drag handles to resize, drag the image itself to re-crop the focal point, while the docked panel handles sources (URL / upload / stock), units, fit, radius, spacing, and per-device widths. The desktop/tablet/mobile picker decides which width you're editing and flips the preview to match. Drag the corner handles to resize (with an aspect-ratio lock), set separate Desktop / Tablet / Mobile widths, choose object-fit, drag the image to reposition the crop focal point, zoom, round corners, and set margins/padding — all live on a device-scaled canvas, Figma-style. Everything exports as responsive CSS + HTML in both formats with ✏️ EDIT notes; uploads embed as data URIs (fine for testing — use your HighLevel media library URL for production).
• Hover & Gallery tab: pick a card hover style (lift, glow, tilt, zoom — or none) and optionally add an auto-looping image gallery section (marquee, film strip, or a vertical loop) that appears after Testimonials. Both are included in the copied code automatically; the gallery's stock images carry ✏️ EDIT notes showing where to swap in your own. The old traveling-border card effect is now off by default — re-enable it anytime via Brand → Border Hover.
• Everything carries over automatically: once you've designed on the Backgrounds, Cursor, or Scroll FX tabs, those customizations are included in the landing page code the moment you generate or copy — no extra steps. The Backgrounds design lands on the hero (unless you've set the hero's Animated background yourself), the cursor ships as CSS+JS, and scroll reveals attach to the feature cards. Generating / Copy Code is just your final verification.
• Video background (Premium): paste a YouTube link or a direct .mp4 URL (e.g. a HighLevel filesafe link) into the Hero's video field — it autoplays muted on loop behind the headline, with the overlay style/opacity controls darkening it for readability. YouTube is convenient for testing; a hosted .mp4 is the production-quality path (faster, no player chrome).
• Background images: the Hero and Final CTA sections can each take an image — pick a curated free stock photo or paste your own URL. An overlay (dark, brand-gradient, or subtle) always sits over the image so the headline stays readable; adjust its opacity with the slider. The exported code marks the image line with an \u270f\ufe0f EDIT comment showing where to swap in your own hosted image.
• Copy Landing Page Code copies the complete, self-contained HTML file — separate from the guidelines doc's own Copy Code button, so generating one never overwrites the other.

AI Prompts

BrandForge can hand an AI tool a ready-made prompt built from your brand system and funnel type, so ChatGPT, Claude, or any assistant can write the copy — or extend the actual page you've generated. There are two, and the right one is offered automatically depending on what you're looking at.

Set up funnel targeting first

On the Landing tab, open AI Prompt Builder (the “Set up funnel targeting” panel). Fill in the client business, target audience, and pick a Funnel Type — there are 45 recipes grouped by goal (Lead Generation, Sales, Events, Frameworks like AIDA / PAS / BAB, Authority, Community, Booking, B2B, Nurture, Ads, and more). Add awareness triggers and social proof if you have them. These inputs feed both prompts below.

• Starter prompt (shown while the preview is on the Guidelines doc): generates funnel copy instructions — hero headline, subheadline, three feature blocks, CTAs and FAQ — from your brand and chosen funnel type. Great for drafting a page from scratch.
• Build prompt (shown while the preview is on the Landing page): includes the full brand system — colors, typography, buttons, cards, radius — plus the actual generated landing-page HTML, so the AI can extend and refine the real page rather than start over.

Getting the prompt

1. AI Prompt on the export bar copies the appropriate prompt in one click — its label follows the preview (Guidelines → starter, Landing → build).
2. Preview build prompt on the Landing tab shows the build prompt in a modal before you copy it.
3. Paste it into ChatGPT, Claude, or any AI tool. The generated copy or markup drops straight back into your page.