/* global React */ /* JXM Brand Standards — Foundations 2: Type, Spacing, Motion */ /* ========================================================================= TYPOGRAPHY ========================================================================= */ function TypePage() { const families = [ { name: 'Inter', role: 'Display', use: 'Headlines, page titles, large display moments.', weights: '300 / 400 / 500 / 600', ff: "var(--ff-display)", sample: 'Strategy that shows its work.', sampleStyle: { fontWeight: 300, fontSize: 'clamp(2.5rem, 6vw, 5.5rem)', letterSpacing: '-0.04em', lineHeight: 0.95 } }, { name: 'DM Sans', role: 'Body', use: 'Paragraphs, lists, captions, UI.', weights: '400 / 500', ff: "var(--ff-body)", sample: 'DM Sans handles every word that isn\u2019t a headline — the part someone actually has to read. Calm, technically precise, with just enough character to feel picked, not assigned.', sampleStyle: { fontWeight: 400, fontSize: 'clamp(1.0625rem, 1.5vw, 1.25rem)', lineHeight: 1.55, maxWidth: '52ch' } }, { name: 'IBM Plex Mono', role: 'Spec & eyebrow', use: 'Eyebrows, labels, metadata, technical specs.', weights: '400 / 500', ff: "var(--ff-mono)", sample: 'SECTION / EYEBROW LABEL / SPEC DATA / 12.04.2026', sampleStyle: { fontSize: 'clamp(0.875rem, 1vw, 1rem)', letterSpacing: '0.16em', textTransform: 'uppercase' } }, { name: 'Libre Baskerville', role: 'Editorial accent', use: 'Standalone pull quotes. Never mixed into Inter headlines, never in body.', weights: 'Italic 400', ff: "var(--ff-edit)", sample: 'Reserved for a quiet, standalone editorial moment — never a single italic word stitched into an Inter headline.', sampleStyle: { fontStyle: 'italic', fontWeight: 400, fontSize: 'clamp(1.5rem, 2.6vw, 2.25rem)', lineHeight: 1.3, maxWidth: '28ch', letterSpacing: '-0.005em' } }]; const scale = [ { token: '--fs-display-xl', label: 'Display XL', clamp: 'clamp(7rem, 22vw, 22rem)', sample: 'Brand', cls: { fontFamily: 'var(--ff-display)', fontWeight: 300, fontSize: 'clamp(3rem, 5vw, 5rem)', letterSpacing: '-0.04em', lineHeight: 1 } }, { token: '--fs-display-lg', label: 'Display LG', clamp: 'clamp(5rem, 17vw, 13rem)', sample: 'Headline', cls: { fontFamily: 'var(--ff-display)', fontWeight: 300, fontSize: 'clamp(2.5rem, 4.4vw, 4rem)', letterSpacing: '-0.04em', lineHeight: 1 } }, { token: '--fs-display-md', label: 'Display MD', clamp: 'clamp(3.5rem, 11vw, 9.5rem)', sample: 'Section', cls: { fontFamily: 'var(--ff-display)', fontWeight: 300, fontSize: 'clamp(2rem, 3.6vw, 3rem)', letterSpacing: '-0.03em', lineHeight: 1 } }, { token: '--fs-headline', label: 'Headline', clamp: 'clamp(2rem, 4.4vw, 3.5rem)', sample: 'Subhead', cls: { fontFamily: 'var(--ff-display)', fontWeight: 500, fontSize: 'clamp(1.5rem, 2.8vw, 2rem)', letterSpacing: '-0.01em', lineHeight: 1.1 } }, { token: '--fs-subhead', label: 'Subhead', clamp: 'clamp(1.5rem, 2.4vw, 2rem)', sample: 'Group title', cls: { fontFamily: 'var(--ff-display)', fontWeight: 500, fontSize: '1.25rem', letterSpacing: '-0.005em', lineHeight: 1.2 } }, { token: '--fs-lead', label: 'Lead', clamp: 'clamp(1.0625rem, 1.4vw, 1.25rem)', sample: 'Opening paragraph or lede.', cls: { fontFamily: 'var(--ff-body)', fontSize: '1.125rem', lineHeight: 1.55 } }, { token: '--fs-body', label: 'Body', clamp: '1rem', sample: 'Default reading size.', cls: { fontFamily: 'var(--ff-body)', fontSize: '1rem', lineHeight: 1.55 } }, { token: '--fs-meta', label: 'Meta', clamp: '0.875rem', sample: 'Metadata, captions, footnotes.', cls: { fontFamily: 'var(--ff-body)', fontSize: '0.875rem', lineHeight: 1.5 } }, { token: '--fs-eyebrow', label: 'Eyebrow', clamp: '0.75rem', sample: 'EYEBROW / MONOSPACE', cls: { fontFamily: 'var(--ff-mono)', fontSize: '0.75rem', letterSpacing: '0.18em', textTransform: 'uppercase' } }]; return (
{families.map((f, i) =>
{f.role}
{f.name}
{f.weights}
{f.use}
{f.sample}
)}

Sizes flex with viewport. Display tiers are reserved for hero moments — body should be the default. Going up a step costs structural attention; spend it deliberately.

{scale.map((s, i) => )}
Token Sample PREFERRED SIZE
{s.token} {s.sample} {s.clamp}
Do
  • Pair Inter display with DM Sans body.
  • Use Plex Mono for eyebrows and labels under 14px.
  • Reserve Libre Baskerville for standalone pullquotes.
  • Set body line-height to 1.55, display to 0.95.
Don't
  • Mix italic Libre Baskerville inside an Inter headline.
  • Set body type below 14px on web.
  • Use Plex Mono for paragraphs.
  • Add custom letter-spacing to body copy.
@import
{`@import url('https://fonts.googleapis.com/css2?
family=DM+Sans:wght@300..700
&family=IBM+Plex+Mono:wght@300..600
&family=Inter:wght@300..600
&family=Libre+Baskerville:ital@1
&display=swap');`}
{[ ['Inter', 'https://fonts.google.com/specimen/Inter'], ['DM Sans', 'https://fonts.google.com/specimen/DM+Sans'], ['IBM Plex Mono', 'https://fonts.google.com/specimen/IBM+Plex+Mono'], ['Libre Baskerville', 'https://fonts.google.com/specimen/Libre+Baskerville']]. map(([name, url], i) => {name} fonts.google.com ↗ )}
); } /* ========================================================================= SPACING & GRID ========================================================================= */ function SpacingPage() { const steps = [ { n: 0, name: '--s-0', px: 0, use: 'reset' }, { n: 1, name: '--s-1', px: 4, use: 'icon nudge, hairline padding' }, { n: 2, name: '--s-2', px: 8, use: 'tight stack, button vertical' }, { n: 3, name: '--s-3', px: 12, use: 'form fields, chip spacing' }, { n: 4, name: '--s-4', px: 16, use: 'card padding (sm)' }, { n: 5, name: '--s-5', px: 24, use: 'card padding (md), section gap (sm)' }, { n: 6, name: '--s-6', px: 32, use: 'card padding (lg)' }, { n: 7, name: '--s-7', px: 48, use: 'section gap (md)' }, { n: 8, name: '--s-8', px: 64, use: 'section gap (lg)' }, { n: 9, name: '--s-9', px: 96, use: 'page rhythm (xl)' }, { n: 10, name: '--s-10', px: 128, use: 'section breaker' }]; const radii = [ ['--r-0', '0', 'Hard edges — default'], ['--r-1', '3px', 'Buttons, pills, chips'], ['--r-2', '4px', 'Inputs, swatches'], ['--r-3', '6px', 'Cards'], ['--r-4', '8px', 'Modals, overlays'], ['--r-full', '999px', 'Avatars, status dots']]; return (
{steps.map((s) =>
{s.name} {s.px}px {s.use}
)}
{Array.from({ length: 12 }).map((_, i) =>
)}
{[ ['Page max', '1280px', 'Content-area cap.'], ['Gutter', '24px / 16px', 'Desktop / mobile.'], ['Margins', '56px / 22px', 'Outer page padding.']]. map(([a, b, c], i) =>
{a}
{b}

{c}

)}
{[ ['xs', '< 480', 'phone narrow'], ['sm', '480+', 'phone wide'], ['md', '720+', 'tablet'], ['lg', '980+', 'small laptop'], ['xl', '1280+', 'desktop']]. map(([k, v, d], i) =>
{k}
{v}px
{d}
)}
{radii.map(([token, val, use], i) =>
{token}
{val}
{use}
)}
); } /* ========================================================================= MOTION ========================================================================= */ function MotionPage() { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((t) => t + 1), 2400); return () => clearInterval(id); }, []); const easings = [ { token: '--ease-out', css: 'cubic-bezier(0.2, 0.0, 0, 1.0)', use: 'Page & overlay enter' }, { token: '--ease-in-out', css: 'cubic-bezier(0.4, 0.0, 0.2, 1.0)', use: 'Sliders, accordion' }, { token: '--ease-in', css: 'cubic-bezier(0.4, 0.0, 1.0, 1.0)', use: 'Exit / dismiss' }, { token: '--ease-spring', css: 'cubic-bezier(0.34, 1.56, 0.64, 1)', use: 'Pop-in micro · use sparingly' }]; const durations = [ ['--d-instant', '80ms', 'Hover, focus, color'], ['--d-quick', '160ms', 'Buttons, chips'], ['--d-mid', '240ms', 'Card lift, drawer'], ['--d-slow', '420ms', 'Page transitions']]; return (
{[ ['Purposeful', 'Every animation answers a question — what changed, where it came from, where it went.'], ['Restrained', 'Most things should move 4–8px, not 40. Easing matters more than amplitude.'], ['Cancelable', 'Never block input. Respect `prefers-reduced-motion`.']]. map(([a, b], i) =>
{a}

{b}

)}
{easings.map((e, i) =>
{e.token}
{e.use}
)}
{durations.map(([token, val, use], i) =>
{token}
{val}
{use}
)}
accessibility
Always respect prefers-reduced-motion: reduce. Replace movement with cross-fade or instant state change. Never auto-play looped motion above the fold.
CSS · reduced motion guard
{`@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}`}
); } window.TypePage = TypePage; window.SpacingPage = SpacingPage; window.MotionPage = MotionPage; /* ========================================================================= PATTERN ========================================================================= */ function PatternPage() { const Glyph = window.Glyph; return (
JXM pattern library — wordmarks, mascots, badges, technical marks
Master · 3200 × 3200px ↓ Download
{[ ['Wordmarks', 'JXM monogram, James X Matthew lockup, script signature, varsity, monolith.'], ['Legacy artifacts + mascots', 'Some from heritage (dodo). Top-hat dodo. Skeleton hand. Tandem cyclists.'], ['Badges & seals', 'Agency of Record. Est. 2007 crest. Eyeball Factory trade mark. Decipher panel.'], ['Technical marks', '"Validated" panel. Module A. Packet loss. Digital channel card. Decipher braille.'], ['Editorial taglines', '"Growth Strategies for All Mankind." "Live Fast, Make Ads." "Stay Tuned." "Full Hound."'], ['Geographic seals', 'Boston · Massachusetts · U.S.A. Globes, ovals, latitudes.']]. map(([t, d], i) =>
{t}

{d}

)}
Abyss on Tusk 100%
Tusk on Abyss 100%
Tusk on Cedar 100%
{/* Ghosted / special row */}
Abyss on Tusk · ghost 20%
Black on Abyss · debossed #000 · 100%
Tusk on Cedar · ghost 20%
When to ghost
Use 20% opacity when the pattern lives behind something — section dividers under copy, card backgrounds with text overlaid, hero panels with a headline on top. The black-on-Abyss debossed variant is for high-end print or large-format display only — it relies on substrate texture to read.
{[ ['When to use', 'Section dividers. Brand-collateral covers. Social tile backgrounds. Video bumpers. Sparingly.'], ['When not to', 'Behind body copy. Behind logos. Tight social formats. As a decorative fix for an empty layout.'], ['Treatment', 'Full-bleed or 100% of frame. Never cropped to a card. Never tinted off-palette. Mono only — Abyss on Tusk or vice-versa.']]. map(([t, d], i) =>
{t}

{d}

)}
Don't remix
Don't pull individual elements out of the pattern and re-use them as standalone marks. The Dodo, varsity script, and other components live in the pattern. If you need a standalone illustrative mark for a specific use, request an asset.
); } window.PatternPage = PatternPage; /* ========================================================================= PHOTOGRAPHY ========================================================================= */ function PhotographyPage() { const Glyph = window.Glyph; return (
{[ ['Mood', 'Considered. Atmospheric. People mid-thought, not mid-laugh. Spaces without their occupants. Detail shots that imply a wider scene.'], ['Treatment', 'Black-and-white or deeply desaturated. High contrast. Natural light. 35mm grain. We pick frames a documentary would keep.'], ['Subjects', 'Founders, operators, makers — at work, not staged. Workspaces in use. Print, paper, hands, screens. Never the obvious shot.'], ].map(([t, d], i) => (
{t}

{d}

))}

JXM imagery leans atmospheric — vintage editorial photography, B&W texture, deep contrast, hard cropping. We tint with the palette, never with stock filters. The two flagship treatments:

Vintage editorial — wide crop
Cinematic · vintage editorial
16:10 · hero
Atmospheric texture — paper, eye
Texture · monochrome
4:5 · value tile
{[ ['Cinematic', 'Found editorial photography — vintage stock, archive footage, color or sepia, character-rich. Used full-bleed at hero scale, with one line of display type. Implies a wider world.'], ['Texture', 'B&W abstract or near-abstract macro — paper, fabric, hands, surfaces, light through material. Used at portrait crop next to copy. Carries mood without demanding the eye.'], ['Never', 'Stock photo people-pointing-at-laptops. Flat overhead desk shots. Anything that looks like a SaaS landing page from 2019.'], ].map(([t, d], i) => (
{t}

{d}

))}

For section dividers, social covers, and video bumpers where a literal image would overpower the message, use palette-tinted atmospheric tiles. Soft radial glows on a dark ground — never more than two glow centers, never off-palette.

Editorial · atmosphere Soylent · Kermit + Fly
Tinted · duotone Cedar · Compassed + Blurple
Wide crop · cinematic Abyss · Gator
Ambient · quiet Soylent · Fly
CSS · single-glow recipe
{`.imagery-tile {
  position: relative;
  background: var(--soylent);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.imagery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 90%,
      rgba(73, 227, 133, 0.42), transparent 70%),
    radial-gradient(ellipse 70% 60% at 80% 10%,
      rgba(189, 222, 237, 0.20), transparent 70%);
  mix-blend-mode: screen;
}`}
BW conversion · starting point
{`Profile     Adobe Monochrome
Exposure    ±0.0
Contrast    +25 to +35
Highlights  -20
Shadows     +15
Whites      +10
Blacks      -15
Clarity     +10
Texture     +8
Grain       25 / 25 / 50`}
If color · low-sat treatment
{`Saturation   -65
Vibrance     -20
Temp         cool by 200K
Tint         neutral
Split-tone   Abyss in shadows · 10%
             Tusk in highlights · 8%
Grain        amount 20`}
Why these numbers
The recipe holds detail in faces and clothing while crushing backgrounds into near-Abyss. The grain reads as paper, not noise. If the shot needs more than these moves, the shot is wrong — re-shoot, don't rescue.
{[ { ratio: '4 / 5', label: '4:5 · portrait', use: 'Social, press kit, profile.' }, { ratio: '3 / 2', label: '3:2 · classic', use: 'Editorial, case studies.' }, { ratio: '16 / 9', label: '16:9 · cinematic', use: 'Hero, full-bleed, video stills.' }, ].map((c, i) => (
{c.label}
{c.use}
))}
Composition
Off-center subjects. Use the rule of thirds where you can. Avoid centered head-on portraits unless the gaze is the whole point. Images should not feel like stock at all.
Do
    {[ 'Shoot in natural light. Find the window.', 'Use 35mm or 50mm equivalent. No wide-angle distortion.', 'Direct subjects mid-conversation, not just mid-pose.', 'Let texture earn its place.', 'Convert to B&W or aggressive desaturation.', ].map((l, i) => (
  • {l}
    • ))}
Don't
    {[ 'Use anything that feels like standard stock photography. Ever.', 'Force smiles or thumbs-up shots.', 'Shoot on bright primary backdrops.', 'Use lens flares, sparkles, gradient overlays.', 'Crop a face dead-center with no air.', 'Color-tint with off-palette hues.', ].map((l, i) => (
  • {l}
    • ))}
Cross-reference
Full Midjourney style strings live on the AI prompts → Midjourney page. The short version below works as a stylistic suffix on any image-gen prompt.
image-gen · style suffix
{`black and white, editorial documentary, 35mm grain, natural light, low saturation, deep contrast, mid-thought subject, atmospheric, no stock photography, no smiles, --style raw --ar 4:5 --s 50`}
); } window.PhotographyPage = PhotographyPage; /* ========================================================================= MOODBOARD ========================================================================= */ function MoodboardPage() { const Glyph = window.Glyph; const COSMOS_URL = "https://www.cosmos.so/mattmaguy/jxm"; const COSMOS_CANVAS_URL = "https://www.cosmos.so/mattmaguy/jxm/canvas"; return (