/* global React */ /* JXM Brand Standards — Voice & Components */ const { useState: useStateVC } = React; /* ========================================================================= VOICE ========================================================================= */ function VoicePage() { return (
{[ { t: 'Direct', d: 'Short sentences. Active verbs. The reader\u2019s time is worth more than ours. If a word isn\u2019t earning its place, cut it.' }, { t: 'Warm', d: 'Real, not corporate. We write the way we\u2019d talk to a sharp friend over coffee. The work is serious; the language doesn\u2019t have to be cold.' }, { t: 'Quiet', d: 'Confident enough to say less. Skeptical of jargon. The smartest voice in the room is usually the quietest.' }, ].map((p, i) => (
{p.t}

{p.d}

))}
Write the sentence a sharp friend would believe — then delete the half that's flattery.
Do
    {[ '"Media agencies optimze for spend because thats how they\u2019re paid. We optimize for outcomes."', '"The value is often there. The lack of visibility is the problem."', '"We\u2019ll diagnose before we prescribe, always."', '"We are agnostic to media types."', '"Mission-driven. Founder-led. Engineering Preference + Intention."', ].map((l, i) => (
  • {l}
    • ))}
Don't
    {[ '"Unlocking transformative growth synergies."', '"Best-in-class, full-funnel solutions."', '"At the intersection of creativity and data."', '"We\u2019re passionate about driving impact."', '"Game-changing. Industry-leading. World-class."', ].map((l, i) => (
  • {l}
    • ))}
{[ 'leverage', 'synergy', 'unlock', 'transformative', 'full-funnel', 'best-in-class', 'world-class', 'cutting-edge', 'game-changing', 'industry-leading', 'next-gen', 'innovative', 'disruptive', 'paradigm', 'passionate', 'rockstar', 'ninja', 'thought leadership', 'reach out', 'circle back', 'bandwidth', 'mission-critical', 'turn-key', 'holistic', 'frictionless', 'seamless', ].map((w, i) => ( {w} ))}
); } /* ========================================================================= COPY SNIPPETS — boilerplate, taglines, bios ========================================================================= */ function SnippetsPage() { return (
{[ 'JXM is a founder-led growth partner for mission-driven brands.', 'Media agencies optimze for spend because thats how they\u2019re paid. We optimize for outcomes.', 'Strategy that shows its work pre-launch.', 'We are agnostic to media type.', 'We\u2019ll diagnose before we prescribe, always.', ].map((s, i) => (
"{s}"
))}
{[ { len: '50', body: 'JXM is a founder-led agency growth partner for mission-driven brands. We sell outcomes, not hours — three concepts with conviction, evidence-backed strategy, and execution that ships. We work with the people building things that matter.', }, { len: '100', body: 'JXM is a founder-led agency growth partner for mission-driven brands. Mission-driven brands don\u2019t lose because they can\u2019t compete. They lose because their strengths are invisible. Brand growth isn\u2019t a product problem. It\u2019s a visibility problem. When the reasons to choose you aren\u2019t visible, preference never forms. Growth stalls. No bueno. We fix that.', }, { len: '200', body: 'JXM is a founder-led agency growth partner for mission-driven brands. The model is old: agencies sell hours, founders share shiny decks, no one is accountable for outcomes. We started JXM because we believe great brands need partners who think with them, not vendors who execute through them. Every engagement starts with the same question — what does shipped, working, measurable look like — and is structured to get there. We tell you what\u2019s broken before we start trying to fix it, so we\u2019re all aligned. We sell outcomes, not retainers. Our partners are founders, marketers, and operators at companies doing the kind of work that doesn\u2019t fit on a billboard but does fit on a P&L. If that sounds like you, hi@getjxm.com.', }, ].map((b, i) => (
{b.len} words

{b.body}

))}
Matt · Co-founder · 30 words

Matt is co-founder of JXM, a founder-led agency growth partner for mission-driven brands. He oversees brand strategy and positioning across all aspects of the agency, creating the conditions for growth.

Jim · Co-founder · 48 words

Jim is the co-founder of JXM, a founder-led agency growth partner working with mission-driven brands on what to ship and how. Jim leads up business strategy and operations across all aspects of the agency, shipping ideas, strategies and campaigns on time and up to his exceedingly high standards.

{[ ['Standard', '— Matt\nJXM\ngetjxm.com'], ['Warm', 'Thanks,\nMatt\nFounder, JXM · getjxm.com'], ['Cold reply', 'Matt at JXM\nfounder-led growth, mission-driven brands\ngetjxm.com'], ].map(([t, body], i) => (
{t} 
{body}
))}
); } /* ========================================================================= COMPONENTS — BUTTONS ========================================================================= */ function ButtonsPage() { const Glyph = window.Glyph; return (
Mono label · utility / system
Display label · warm / brand CTA · add .jbtn--display
Label style — when to use which
Mono label (default) is the system/utility voice — small caps Plex Mono, 11px, 0.14em tracked. Use for in-app actions, secondary nav, anything that should read as "interface". Display label (.jbtn--display) swaps to Inter sentence-case at 15px — the warmer, brand-led voice. Use for hero CTAs, footer "Reach Out", contact moments, anywhere a user is being invited rather than directed. The pattern is pulled from the footer CTA on getjxm.com. Both label styles can pair with any color variant.
Hover
Primary (Kermit) and Destructive (Compassed) both transition to Gator on hover. Outline picks up a faint Kermit tint plus a Kermit border swap on hover — pulled from the founder-card CTA pattern on getjxm.com. That's the only places Gator and the Kermit hover-tint appear. Hover the rows above to see them.
{[ { l: 'Default', cls: 'jbtn--primary' }, { l: 'Hover', cls: 'jbtn--primary', forceHover: true }, { l: 'Focus', cls: 'jbtn--primary', forceFocus: true }, { l: 'Disabled', cls: 'jbtn--primary', disabled: true }, ].map((b, i) => (
{b.l}
))}
HTML\n Get started\n\n\n`} />
{`

`}
CSS · core
{`.jbtn { display:inline-flex; align-items:center;
  gap:8px; padding:11px 20px;
  font:11px/1.2 var(--ff-mono);
  letter-spacing:.14em; text-transform:uppercase;
  border:none; border-radius:999px; cursor:pointer;
  transition:background 160ms ease; }
.jbtn--primary { background:#49E385; color:#221F32; }
.jbtn--primary:hover { background:#2EB36A; } /* Gator */

.jbtn--outline { background:transparent; color:#221F32;
  border:1.5px solid #221F32; padding:9.5px 20px; }
.jbtn--outline:hover {
  background: color-mix(in srgb, #49E385 15%, transparent);
  border-color: #49E385; }`}
); } /* ========================================================================= COMPONENTS — FORMS ========================================================================= */ function FormsPage() { const [v, setV] = useStateVC({ name: '', email: '', org: '' }); return (
Processing — as of May 2026
The contact form on getjxm.com is processed by Formspree. New forms on JXM properties should default to the same — no custom backend, no third-party dashboards to learn, submissions email through to hi@getjxm.com. If a form needs anything Formspree can't do (multi-step, conditional logic, gated downloads), check with Matt before introducing a new tool.
setV(s => ({ ...s, name: x }))} placeholder="Matt" /> setV(s => ({ ...s, email: x }))} placeholder="you@company.com" /> setV(s => ({ ...s, org: x }))} placeholder="Optional" optional /> {}} placeholder="Three sentences. What's broken." />
); } function FormField({ label, value, onChange, placeholder, hint, type = 'text', textarea = false, optional = false, error }) { return (