// src/sections-v2.jsx — Brand guide sections for Mighty Orbit v0.2 // ── Configuration ───────────────────────────────────────────────────── const ACCENTS = { magenta: { id:"magenta", name:"Electric Magenta", hex:"#E724FF", ink:"#FFFFFF", desc:"Primary action and signal color. Use for CTA fills, active states, and rare type emphasis." }, }; const TYPE_SYSTEM = { display: { name:"DM Sans", family:`"DM Sans", sans-serif`, weight:600, desc:"Display, section headlines, stat numerals, and big conversion copy." }, body: { name:"Geist", family:`"Geist", sans-serif`, weight:400, desc:"Body copy, UI labels, captions, navigation, forms, and dense explanations." }, }; const HEADLINES = [ "We build gravity for brands that need it.", "The right prospects don't get found. They fall in.", "Marketing as gravitational pull, not megaphone blast.", "Past a certain point, the decision is already made.", ]; const PRINCIPLES = [ ["01","Gravity, not chase","Design the field. Let leads fall in."], ["02","Event horizon clarity","Past the line, the decision is already made."], ["03","Orbit over capture","Long retention beats short conversion."], ["04","Dot matrix over slop","Built from primitives. Renders anywhere."], ]; // ── Section: Hero (cover) ───────────────────────────────────────────── function SecHero({ t, setTweak }){ const accent = ACCENTS.magenta; const headline = t.headline ?? HEADLINES[0]; return (
{/* Orbit blueprint rings */} {/* Event horizon dot field */} {/* Sticky nav overlay */}
Mighty Orbit

{headline}

A digital marketing agency that designs the gravitational pull around your brand — so the right prospects fall in, and stay in orbit.

); } // ── Section helper ──────────────────────────────────────────────────── function SecHead({ num, title, right }){ return (
{num}

{title}

{right &&
{right}
}
); } // ── Section: Foundations ────────────────────────────────────────────── function SecFoundations(){ return (

Mighty Orbit designs the gravitational pull around your brand. Prospects don't get found. They fall in.

Principles
    {PRINCIPLES.map(([n,h,s])=>(
  • {n}
    {h}
    {s}
    • ))}
Language rules
{[ ["Operator clear","Write like a growth operator explaining the lever, not a brand poet explaining the metaphor."], ["Pipeline specific","Tie the gravity idea back to qualified meetings, sales opportunity, cost per meeting, and handoff quality."], ["Motion restrained","Use orbit language as a system, not a pun bank. One image per section is enough."], ].map(([h,b])=>(
{h}

{b}

))}
); } // ── Section: Logo ───────────────────────────────────────────────────── function SecLogo(){ return (
{/* Horizontal signature on light */}
Mighty Orbit signature
{/* Stacked on light */}
Mighty Orbit stacked
{/* Horizontal — dark */}
Mighty Orbit signature on dark
{/* Stacked — dark */}
Mighty Orbit stacked on dark
Primary lockup

Horizontal signature for nav, headers, email sign-offs. The icon and wordmark are inseparable at this lockup.

Stacked lockup

Hero moments, keynote covers, social profile avatars. Use when the mark needs room to breathe.

Clearspace · Min size

Clear margin = height of the M. Minimum print 16px / digital 20px. Never recolor the gradient.

); } // ── Section: Color ──────────────────────────────────────────────────── function SecColor(){ const accent = ACCENTS.magenta; const core = [ ["Deep Cosmos","#001033"], ["Midnight Navy","#1b2540"], ["Electric Blue","#0050f8"], ["Cyan Light","#5fbdf7"], ["Ice Veil","#e0f6ff"], ["Ghost Canvas","#f8f9fc"], ["Pure Surface","#ffffff"], ["Slate Ink","#6b7184"], ]; return (
{/* Hero gradient strip */}
Hero Gradient · #001033 → #0050f8 → #5fbdf7
{core.map(([name,hex])=>(
{name} {hex.toUpperCase()}
))}
Electric magenta role
Book a call →
{accent.name}
{accent.hex}
{accent.desc}
On dark
Signal before scale.
Use magenta as the conversion signal, not as a background wash.
Typography accent
Keep the sentence navy. Make the signal visible.
Magenta can emphasize one short phrase inside a headline or metric. Avoid full magenta headlines.
); } // ── Section: Typography ─────────────────────────────────────────────── function SecType(){ const display = TYPE_SYSTEM.display; const body = TYPE_SYSTEM.body; return (
Display · {display.name}
Gravity for the pipeline.
{display.desc}
Body/UI · {body.name}

Geist carries the operational layer: forms, labels, navigation, case-study details, and the explanatory copy that connects brand gravity back to qualified pipeline.

{body.desc}
{/* Active sample */}
Type scale
Handle everything that happens after gravity takes hold.

Body copy sits in Geist at 16/24 with subtle negative tracking. It carries the dashboard-density feel of the brand: measured, technical, deliberate. Numbers like 1,420,069 are tabular.

{[ ["Display", "48/1.04/-0.48", 48, display.family, display.weight, true], ["Heading LG", "40/1.05/-0.40", 40, display.family, display.weight, true], ["Heading", "28/1.17/-0.14", 28, "var(--font-body)", 500, false], ["Heading SM", "22/1.29/-0.22", 22, "var(--font-body)", 500, false], ["Subheading", "18/1.33/-0.09", 18, "var(--font-body)", 450, false], ["Body", "16/1.5/-0.16", 16, "var(--font-body)", 400, false], ["Caption", "13/1.0/-0.21", 13, "var(--font-body)", 500, false], ].map(([n,m,sz,ff,fw,disp])=>(
{n}
=40?1.05:1.3, letterSpacing: sz>=40?"-0.01em":"-0.005em", color:"var(--midnight-navy)", fontFeatureSettings: disp ? '"ss04","ss06","ss09","ss10","ss11"' : "normal", }}> Event horizon clarity
{m}
))}
); } // ── Section: Dot system ─────────────────────────────────────────────── function SecDots({ t }){ const accent = ACCENTS.magenta; return (

Every illustration in the Mighty Orbit system is built from a single primitive: a dot. Dots form globes, halftones, gradients, gravitational fields — and the brand's signature event horizon.

{/* Event horizon */}
Event horizon · animated
{/* Halftone field */}
Halftone gradient
Ink halftone
Orbit rings
Accent swirl
Usage rules
  • Dots stay white (or pure accent) on dark surfaces — never tinted blue on blue.
  • Event horizon animation runs only in hero / brand moments. Static halftones for content surfaces.
  • Orbit blueprint lines stay at ≤16% opacity. They guide the eye; they don't compete.
  • Accent color highlights the inner ring only — never the entire field.
); } // ── Section: Motions (sales / marketing illustrations) ─────────────── function SecMotions({ t }){ const accent = ACCENTS.magenta; // Shared tile palette: blue gradient bg const darkBg = "linear-gradient(180deg,#001033 0%, #002a8e 60%, #0050f8 110%)"; return (

The motion language pairs dot-field illustrations with video surfaces. VSL headers can sit inside a WebGL-style shader field so the page feels alive before the play button is clicked.

{/* Hero row: Globe + label */}
01 · The brand
Orbit Globe
A rotating dot-rendered planet. Use as brand object on hero, keynote covers, or anywhere the agency needs a single iconic image.
BRAND OBJECT
{/* 2x2 — Funnel, Convergence, Pipeline, Broadcast */}
Usage
  • VSL shader panel — video-first landing headers, webinar pages, and paid traffic tests.
  • Globe — hero of any brand surface. Pair with display headline only.
  • Funnel — case studies, pricing pages, conversion-focused content.
  • Convergence — channels page, methodology, integrations.
  • Pipeline — dashboards, reports, sales-ops content.
  • Broadcast — paid media, distribution, awareness campaigns.
); } function WebGLShaderPanel({ accent }){ const ref = React.useRef(null); React.useEffect(() => { const canvas = ref.current; const gl = canvas?.getContext("webgl", { alpha:false, antialias:false }); if (!gl) return; const vert = ` attribute vec2 a_pos; varying vec2 v_uv; void main(){ v_uv = a_pos * 0.5 + 0.5; gl_Position = vec4(a_pos, 0.0, 1.0); } `; const frag = ` precision mediump float; varying vec2 v_uv; uniform vec2 u_res; uniform float u_time; uniform vec3 u_accent; float line(float value, float width){ return smoothstep(width, 0.0, abs(value)); } void main(){ vec2 uv = (gl_FragCoord.xy / u_res.xy) * 2.0 - 1.0; uv.x *= u_res.x / u_res.y; float radius = length(uv); float angle = atan(uv.y, uv.x); float horizon = line(radius - (0.56 + 0.025 * sin(u_time * 0.7 + angle * 2.0)), 0.018); float rings = line(fract(radius * 8.0 - u_time * 0.06) - 0.5, 0.018) * (1.0 - smoothstep(0.35, 1.25, radius)); float grid = line(fract((uv.x + 0.12 * sin(uv.y * 4.0 + u_time * 0.25)) * 9.0) - 0.5, 0.012) * 0.28; float sweep = smoothstep(0.9, 0.0, abs(sin(angle * 2.0 + u_time * 0.9))) * smoothstep(1.1, 0.2, radius) * 0.12; vec3 navy = vec3(0.0, 0.06, 0.20); vec3 blue = vec3(0.0, 0.30, 0.95); vec3 cyan = vec3(0.37, 0.74, 0.97); vec3 base = mix(navy, blue, smoothstep(1.15, 0.05, radius)); base = mix(base, cyan, smoothstep(0.05, 1.2, uv.y + 0.9) * 0.34); vec3 color = base + vec3(rings * 0.18 + grid * 0.05 + sweep); color = mix(color, u_accent, horizon * 0.42); gl_FragColor = vec4(color, 1.0); } `; const compile = (type, source) => { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); return shader; }; const program = gl.createProgram(); gl.attachShader(program, compile(gl.VERTEX_SHADER, vert)); gl.attachShader(program, compile(gl.FRAGMENT_SHADER, frag)); gl.linkProgram(program); gl.useProgram(program); const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]), gl.STATIC_DRAW); const pos = gl.getAttribLocation(program, "a_pos"); gl.enableVertexAttribArray(pos); gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0); const res = gl.getUniformLocation(program, "u_res"); const time = gl.getUniformLocation(program, "u_time"); const accentUniform = gl.getUniformLocation(program, "u_accent"); const rgb = hexToRgb01(accent.hex); gl.uniform3f(accentUniform, rgb[0], rgb[1], rgb[2]); let frame = 0; const resize = () => { const dpr = Math.min(window.devicePixelRatio || 1, 2); const rect = canvas.getBoundingClientRect(); canvas.width = Math.max(1, Math.floor(rect.width * dpr)); canvas.height = Math.max(1, Math.floor(rect.height * dpr)); gl.viewport(0, 0, canvas.width, canvas.height); }; const render = (now) => { resize(); gl.uniform2f(res, canvas.width, canvas.height); gl.uniform1f(time, now * 0.001); gl.drawArrays(gl.TRIANGLES, 0, 6); frame = requestAnimationFrame(render); }; frame = requestAnimationFrame(render); return () => cancelAnimationFrame(frame); }, [accent.hex]); return (
VSL header component
Build a pipeline your sales team can feel.

Headline, proof, CTA, and video all live inside the same orbital shader field.

Qualified lead audit
See where the pipeline is leaking before you add spend.
Sample VSL frame: Loom, webinar clip, or short founder walkthrough.
▶
); } function hexToRgb01(hex){ const clean = hex.replace("#", ""); const n = parseInt(clean, 16); return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; } function MotionTile({ num, tag, title, desc, bg, children }){ return (
{children}
{num} · {tag}
{title}
{desc}
); } // ── Section: Components ─────────────────────────────────────────────── function SecComponents({ t }){ return (
{/* Buttons */}
Buttons
Production · active URGENT
{/* On dark */}
{/* Cards */}
Cards · Floating badges
Feature card
Investigate.

Find where your audience already gravitates. Map the field before you broadcast.

Feature card
Pull.

Build content, channels, and offers that bend the field toward you.

Feature card
Orbit.

Compounding retention. Once they're in, they stay in. Long-tail growth, not blips.

{/* Forms */}
Forms · Inputs
We only use this to prep your acquisition review.
Helps us size the pipeline opportunity.