Back to Northbound

Northbound site — decisions & variants log

A running record of the copy and design directions we've tried, what we chose, and what we parked. The point: nothing we explored gets lost, and we can revert to a parked option later without re-deriving it from scratch.

How to use this: When a decision feels stuck, it's usually because the options are all still live in someone's head. Write them here, pick one, mark the rest "parked," and move on. Parked ≠ rejected — it's a saved draft.

Branch: annika/blueprint-system-rail · Status: copy locked, visual dial pending final pick · Ship target: set a date and put it here.


1. Voice / positioning — ✅ DECIDED

Chosen: Candid, confident, occasionally cheeky. "Serious about the work, noticeably less serious about ourselves." Cheek level: in between (keep the wit and bluntness, skip the profanity and the harshest self-deprecation).

Why: We don't want to sound like a boutique consultancy proving it belongs beside Deloitte. We want to sound like two unusually capable people clients are relieved to find. Source: the positioning brief (June 2026).


2. Homepage hero headline — ✅ DECIDED

Chosen: "Bring us the messy version." Supporting line: "We help companies figure out where AI is actually useful, get their people moving, and build what should exist next. No innovation theatre — just two people who get unreasonably invested in how your company works."

Parked alternatives (all from the brief — usable elsewhere or as A/B tests):

  • "AI consulting for people who would rather get something done."
  • "You don't need an AI strategy. You need someone to understand the problem, tell you what's worth doing, and help you do it."
  • "You've got a business problem. AI may or may not be the answer. Conveniently, we know quite a lot about both."
  • "Two people. An unreasonable number of AI opinions."
  • "We make AI useful before everyone gets tired of talking about it."

3. Offer / service naming — ✅ DECIDED (kept 2-pillar structure)

Chosen: Keep the two-pillar structure (enable / build) but rename in voice:

  • "Get the room moving" (team enablement)
  • "Build the thing" (product building)

Parked: The full 3-part sequence from the brief — "Get the room moving → Figure out the thing → Build the thing" — which adds a middle diagnosis offer ("Figure out the thing" / AI Opportunity Sprint). We chose not to restructure into three for now. Revisit if we add a paid diagnostic/sprint offer.

Proof points in use: "744 people signed up for 100 seats" (Claude for Everyone, Vancouver) → on the Offerings "Speaking & private events" card.


4. Founder pairing line — ✅ DECIDED

Chosen (About phero): "Annika makes the future legible; Matt makes it work. Only one of us should be trusted with the production architecture."

Parked alternatives:

  • Short: "Annika makes the future legible. Matt makes it work."
  • Longer: "Annika sees what is changing, explains why it matters, and gets people excited enough to move. Matt finds the real problem beneath the question and builds the thing that solves it. Both of us understand business. Both of us are good in a room. Only one of us should be trusted with the production architecture."

5. Visual playfulness — 🔵 DIAL PENDING

Problem: The redesign is cleaner than the live site (northbound.run) but lost the tie-dye gradient personality. Playful copy on serious visuals reads as a mismatch. Fix: port the tie-dye mesh gradient (green/lime/sky/amber/violet) back into the hero. Implemented as three switchable intensities via a class on .hero (see style.css).

DialClassLook
A — Subtle.vibe-subtleFaint wash in the top-right corner, static. A wink.
B — Blob.vibe-blobAnimated mesh behind the flow visual; text side stays clean. Playful but composed.
C — Full.vibe-fullAnimated tie-dye across the whole hero, white veil keeps text legible. Closest to the old live site.

To change: swap the vibe-* class on the <header class="hero ..."> in HeroSection.vue. Remove it entirely for no gradient.

Guardrail (from the brief): personality should come from blunt copy and concrete situations, NOT from deliberately chaotic design. So: one loud, joyful hero is great; keep the rest of the site calm so the whole thing doesn't tip into chaos.

Current call: pending Annika's pick.


6. Below-the-hero excitement — 🔵 IN PROGRESS

The hero now has motion + gradient; the body below was flat by comparison. Changes applied to the homepage offers + philosophy sections:

  1. Sub-icons — tried emoji (🎯 🙌 …); ❌ rejected as "AI slop-y." Landed on colored line icons: the original SVG icons, each stroked in a cohesive cool palette (green → teal → sky → blue) with a matching soft chip tint. Colorful but harmonious (analogous colors, not rainbow).
  2. (folded into #1)
  3. Hover life — pillar cards lift + glow green; emoji pops on chip hover. ✅ keep
  4. Gradient accent words — ❌ REJECTED. Tried "moving" / "Builders" as tie-dye text; Annika disliked. Removed the spans + the .grad CSS + reverted SectionHead to plain .
  5. Tie-dye accent — first tried as a whisper behind the philosophy band; Annika preferred it moved into the CTA box ("Start with the problem"). Now lives on .cta__panel::before. ✅

Changelog

  • Homepage copy → candid voice (commit 46e4486)
  • About + Offerings copy → candid voice (commit 6fd2b0b)
  • Tie-dye hero gradient ported, three intensity dials added
  • Emoji sub-icons on offers section
  • Below-hero pass: tinted chips, card hover, gradient accent words, tie-dye whisper
  • Merged Matt's branch (SEO, contact form, logo) — clean, no conflicts
  • Revisions: removed gradient words, chips → uniform green, tie-dye moved to CTA box
  • Hero default → new vibe-mid dial (between subtle and full); subtle/full kept for compare
  • Sub-icons: emoji → colored line icons (cohesive cool palette)
  • CTA gradient: purple → teal (Matt disliked tie-dye; kept it but more natural)
  • Logo: generated a true bold wordmark (porito-bold.otf) and set it as default; ?logo=medium|semibold|bold toggle to compare