Brand & Motion System · v1.0 · July 2026

One waypoint is a place.
Two is a journey.

Prefway · Queritel Corp. d/b/a Preffin logotype drawn from Gamble (Type Department) · GT Walsheim Pro · Söhne · F37 Pythia
01 · The Mark

A compass, not a pin

Every local-discovery app on earth uses a map pin. Ours is the only one with a second waypoint — because a single point is a location, and Prefway has never been about where you are. It's about where you're going next.

The pin is you. It holds the ground. It never moves, never recolors, never animates. On dark surfaces it turns cream; that is its only permitted change.

The needle is the brand. Signal Vermilion — our most ownable color, on our hero element. Concentric with the pin to the pixel, so it rotates like a bearing on a jewelled pivot. It is the only element that ever moves.

The next waypoint is the promise. Way Violet — the color of what hasn't happened yet. It sits apart from the pin because the next stop is always somewhere you aren't.

Gold is earned. It exists in the system but not in the resting mark. It appears exactly twice in the life of an adventure: the moment you arrive, and the moment you finish.

The mutual tilt

The needle rests at −14.8° and the next waypoint at −7° — each angled toward the other. At rest, the mark isn't a needle pointing at an inert dot; it's two waypoints acknowledging each other. The relationship is legible before anything moves. These two angles are canonical: every animation settles back to them, every static asset is frozen at them.

02 · Color

Five colors, four jobs

Each color has exactly one role. The moment a color does two jobs, it stops meaning either.

Waypoint Ink#22183A · the pin
Midnight#170033 · edges & dark
Signal Vermilion#FF3700 · the needle
Way Violet#790CFF · next waypoint
Badge Gold#FFB627 · earned only

Vermilion is identity

It lives on the needle, in the city code, on the CTA. It is constant — it never changes with product state, because it's who we are, not what's happening.

Violet is state

It lives on the next waypoint — the element that charges, glows, and gets replaced by gold. Violet is the color of not yet. When something happens, it happens to the violet element.

Gold is a verdict

Arrival and completion. Nothing else. If gold appears on a splash screen, a header, or a decoration, it has been spent and arrival means nothing.

Ink & Midnight are structure

Ink fills; Midnight edges and grounds. They are one dark voice with two hex values — never use them to signal anything.

03 · On Dark

The pin turns cream. Nothing else changes.

A dark pin on a dark ground has no silhouette — the container vanishes and the mark falls apart. The reverse is simple and absolute: the pin becomes cream, both hero colors stay exactly where they are.

NeverInk pin on a dark ground. The container disappears; the mark is two floating shapes.
The reverse markCream pin. Vermilion and violet untouched. This is the only dark treatment.
Display onlyDashed pin — a place not yet arrived at. Permitted large, for editorial and motion moments. Never below 140px, never as the app icon.
04 · Typography

Three voices, one system

The wordmark is drawn, not typed — a custom logotype built from Gamble by Type Department, outlined and owned outright. Around it, two working faces and one accent, each with a job it never trades.

The Wordmark

custom logotype · from Gamble · outlined · ours
It is art, not text. Nobody re-types it, ever — it ships as vector artwork. Lowercase, one connected gesture, the descending y as the anchor. Because it's outlined and modified, it's a trademarkable asset we own, not a font we rent.

GT Walsheim Pro — the brand voice

Grilli Type · Black / Bold headlines · Light display
Your city has secrets.
Go find them.
stl prefway · kc prefway · chi prefway
Where the brand speaks loud: campaign headlines, hero sections, the city code in every lockup, pitch decks, out-of-home. Its rounded geometric forms rhyme with the teardrop — it's the face that looks related to the mark. Never used for body text or UI.

Söhne — the product voice

Klim · Book / Medium / SemiBold · UI, body, docs

Festival of Nations — 3 stops remaining

You're 240m from Ledger & Co. Check in when you arrive to earn the South Grand badge. This paragraph is Söhne Book at text size — the voice of every screen, every report, every merchant dashboard, every district proposal.

Check inView trail
Where the product works quietly: the app, dashboards, RFP responses, invoices, onboarding. It never competes with the wordmark because it never tries to be characterful. It reads as serious infrastructure — which is what a $25K district contract wants to feel like.

F37 Pythia — the oracle

F37 · sparingly · adventure names, badges
The Haunting of Cherokee Street
“You got the gift, but it looks like you're waiting for something.”
Where the brand gets to be strange: adventure titles, badge names, seasonal campaigns, the occasional editorial flourish. Pythia's whimsy is an asset in small doses and a liability everywhere else — it never touches the wordmark, the UI, or anything a procurement officer reads. Ration it.
Wordmark

Custom (Gamble-based)
outlined vector, never typed

Headlines & brand

Walsheim Black/Bold
campaign, city codes, decks

UI & body

Söhne Book/Medium
app, docs, dashboards

Accent

Pythia
adventure names, badges only

05 · Motion

Physics moves it. Light speaks for it.

Nothing in this system is keyframed. The needle is a magnetised instrument — mass, damping, and a field that pulls toward the next stop. The waypoint carries lume: it glows brighter as you get closer, like a watch dial charging. Together they mean the mark doesn't decorate the product — it reports on it.

Layer 01 — Behaviour

The needle is magnetised

Real dipole physics: τ = −μB·sin(Δθ). Field strength scales with proximity. Far away, the needle trembles — uncertainty, made visible. Close in, it goes rigid. Seek, lock, overshoot and settle are all consequences of one equation, not animations.

Layer 02 — Light

The waypoint has lume

A violet glow that charges as you approach — dim at distance, burning when you're close. On check-in it flares gold and, on the final stop, stays gold. Light radiates from inside the shape. It never slides across it; instruments glow, they don't shine.

DRAG THE DOT — THE MARK RESPONDS
field · needle certainty0.00
lume · waypoint charge0.00
distance—
ACQUIRINGNo field. The needle drifts — it has nothing to point at yet.
01 · Seek

No field

The needle drifts. Nothing glows. It isn't pretending to search — it genuinely can't find anything yet.

02 · Far

Weak field, dim lume

Holds the bearing but hunts around it. The violet is barely lit. Uncertainty, made visible.

03 · Close

Rigid, burning

The tremble is gone; the violet glows hot. You can feel and see you're nearly there — no number needed.

04 · Arrive

Gold, quietly

The waypoint goes gold and holds. No flare, no fireworks on the mark — the screen does the celebrating.

06 · The Rules

Six laws that keep it an instrument

Motion systems die by a thousand small exceptions. These aren't guidelines — they're the constitution. Anyone touching the mark signs up to all six.

1

The needle is the only moving part

The pin holds. The waypoint holds its position. If a second element is translating or rotating independently, someone has made a mistake.

2

The emblem is not the compass

The logo's needle always resolves to its own waypoint (−14.8°). It never chases a real-world bearing — a fixed dot plus a free needle is a logo that looks broken. Live heading belongs to a separate, dot-less compass component inside the app.

3

Gold appears twice

Arrival and completion. It is never on the splash, never on the resting mark, never decorative. Scarcity is the entire mechanism.

4

Static assets are frozen

App icons, favicons, print, clings, decks: needle at −14.8°, waypoint at −7°, no lume, no motion, no exceptions. Both platforms ship static icons; design for that truth.

5

Motion tells the truth

The needle moves only when something is happening — GPS acquiring, a bearing updating, a check-in landing. A needle sweeping for decoration is a compass that lies. Splash gets one sweep (≤900ms), then rest. Respect prefers-reduced-motion.

6

The master file is the truth

The mark is embedded whole from the source SVG — root styles, strokes, joins, fill rules and all. Anyone re-typing a path string is introducing next quarter's rendering bug. The animation layer may touch exactly three things: the needle group's rotation, the waypoint's fill, and the glow.

07 · Cities

Four cities, one app

Switch the city. What changes: the code, the subdomain, the content. What doesn't: the mark, the motion, the palette, the binary. A visitor who has Prefway from any city opens it in yours and you're in their pocket on arrival — that's the sentence a DMO director buys. City is runtime config, not a build target.

stl
POWERED BY Preffin Preffin

St. Louis

“Meet me under the Arch.”

Energizer Park, the Brickline, Festival of Nations, Zoofari. First deployment — the model gets proved here.

stl.prefway.com · launching 2026
stl prefway
stl.prefway.com
kc prefway
kc.prefway.com
chi prefway
chi.prefway.com
nyc prefway
nyc.prefway.com
08 · Implementation

The numbers that matter

Everything a developer needs, measured from the master file — not eyeballed.

// ---------- geometry (from prefway_logo_.svg, verified) ----------
pivot        = (527.8, 378.7)   // pin centre — the needle's rotation origin
needle rest  = −14.8°            // baked into the master; every animation settles here
waypoint rest= −7.0°             // the mutual tilt; the dot's orientation never changes

// ---------- layer 1: behaviour ----------
B = !hasFix ? 0 : clamp(1 − dist/FAR, 0.10, 1) ** 1.4       // field ∝ proximity
ω += ( −K·B·sin(θ − bearing) − C·ω + noise·J·(1.05 − B) )·dt
θ += ω·dt   // seek, lock, overshoot, settle, tremble — all from this line

// ---------- layer 2: light ----------
lume += (B − lume)·6·dt              // charges and decays smoothly, never snaps
glow.opacity = lume × 0.55           // violet bloom radiates from inside the dot
if (checkedIn)  waypoint.fill = GOLD          // that's all — the screen celebrates, not the mark
if (completed)  waypoint stays gold, needle rests, nothing moves again

// ---------- what the animation layer may touch ----------
// 1. rotate(needleGroup)  2. waypoint fill  3. glow opacity.  Nothing else. Ever.