Documentdocs/BRAND-GUIDELINES.md

SurveyStream — Master Brand Guidelines

Every measurement, ratio and colour value in this document is generated from the token files listed above. Where a number appears here it is the same number the code ships. If the two ever disagree, the token files win and this document is stale.

Contents

1. Brand Strategy & Core Thesis
2. Logo & Mark System
3. Colour Architecture & Specifications
4. Typography & Numerical Hierarchy
5. Visual Assets, Patterns & Stationery
6. Governance, Open Decisions & Known Limits

1. Brand Strategy & Core Thesis

1.1 Mission, Vision, Positioning

Mission To turn everyday opinions into data people can act on — and to pay for them the moment they land.

Vision A market where every decision made on survey data can be traced back to a real, verified, fairly-paid human voice.

Positioning statement

SurveyStream turns everyday opinions into high-integrity, real-time data — paying people the moment their voice moves markets.

Essence: Flowing Trust.

1.2 The core thesis

The brand lives where two truths meet. Opinions must move effortlessly — speed, liquidity, reward. Data must be absolutely trustworthy — integrity, verification, real-time fidelity. Most survey brands pick one. The entire advantage is refusing to.

The word doing the strategic work is “Stream”: continuous, live, directional, alive. Not a pool, not a panel, not a bank. A stream never stops moving.

Design DNA — structure holds the frame; flow moves within it. A disciplined grid with a streaming, transformative element passing through it. Reserve the “magic” for one hero moment per surface, never everywhere.

1.3 Archetype blend

Order first, wonder second. A trust business must lead with credibility — a brand that feels too magical reads as “too good to be true,” which is fatal both to a payout promise and to a data-quality claim.

Translation to design

1.4 Dual-audience value pillars

One visual system, two calibrated dialects. Warm and rewarding for the supply side; rigorous and enterprise-grade for the demand side — without ever fracturing into two brands.

The bridging rule

Both audiences are sold the same underlying property — integrity of flow — expressed in their own currency. The taker experiences it as “I get paid what I was promised, instantly.” The aggregator experiences it as “every data point is real, sourced, and live.” Never let the two dialects contradict each other on fairness, speed, or truth.

1.5 Personality guardrails

Five dials, calibrated on purpose rather than centred. Check every artefact against these before it ships.

1.6 Tone of voice

Copy is design material. Active voice, specific over clever, transparency over hype — the same rules that govern the visuals govern the words.

The one-line test

Does this feel like flowing trust — structured enough for an enterprise buyer, rewarding enough for a survey taker, and honest enough to prove it?

If a choice cannot be traced to a personality dial (§1.5) or the archetype blend (§1.3), it is decoration, not brand.

2. Logo & Mark System

2.1 Construction

The mark is two tangent elliptical arcs — there is no freehand curve anywhere in it.

rx > ry is load-bearing. Circular bowls produce an S with a 0.50 aspect, which reads spindly beside a Bold wordmark. Elliptical bowls give 0.7826 — what a bold grotesk S actually measures.

The tangent point is where the stroke hands off from one bowl to the other, and it is the only moment of complexity in an otherwise plain figure: the Magician’s spark held inside the Ruler’s grid.

2.2 The wordmark

2.3 Lockups

2.4 Lockup geometry — all ratios expressed in cap heights

The wordmark’s cap height is the single unit of measure for the whole system. Every relationship below scales with it, so the lockup can be reproduced at any size without a lookup table.

Clear-space bounding box

Let C be the wordmark cap height.

┌──────────────────────────────────────────────┐
│                  ↕ 0.5 C                     │
│      ┌────────────────────────────────┐      │
│ 0.5C │   ◯ mark  ·gap·  SurveyStream  │ 0.5C │
│      └────────────────────────────────┘      │
│                  ↕ 0.5 C                     │
└──────────────────────────────────────────────┘
   mark height = 1.38 C      gap = 0.46 C

Nothing may enter the clear-space box — no type, no rule, no image edge, no other logo. The one permitted exception: the monogram’s pulse-trail accent may overhang into it, because the trail is part of the mark’s own silhouette.

2.5 Minimum sizes

2.6 The interlock variant

A parallel family in logo/interlock/ re-skins the identical bowl geometry as a solid Ink loop with a thin flow line threading it, crossing once at the waist.

The weight and hue difference is what makes the crossing legible: a 5.4-unit accent over a 13-unit base leaves nothing ambiguous to resolve. Four earlier interlock attempts using equal weights produced a visible lump at the crossing and were abandoned.

Hard rule — the small-size floor. below 40 px the accent is dropped and the base thickened — see favicon-32/16 and icon-mono. The mark is the base/accent separation; at one device pixel that separation turns to mud. icon-mono and the mono lockup also drop the accent, because in a single colour the crossing has nothing to distinguish it.

2.7 Prohibited usage

Capitalisation — the exact rule

The name is SurveyStream: one word, one medial capital, no space, no hyphen.

The medial capital is not styling. It is the structural device that splits the name into its two halves — the same two-audience idea the mark encodes. Lose it and the brand reads as a single undifferentiated word.

Enforce the uppercase exception rather than trusting authors:

.ss-brand { text-transform: none !important; hyphens: none; white-space: nowrap; }

Prohibited treatments

3. Colour Architecture & Specifications

3.1 Architecture

Three layers. Components may only reference layer 3.

primitive          →  semantic (per mode)  →  component
deepwater-500      →  interactive          →  button.primary.bg     (light)
stream-500         →  interactive          →  button.primary.bg     (dark)

A component that reaches past its layer is how a system rots: a button referencing stream-500 directly cannot be re-themed, and will break silently in the mode nobody tested.

One deep anchor, one live current, a spark of warmth. Deepwater carries authority (Ruler). Stream is the single bold hue — the live, flowing accent (Magician). Payout is warmth held in reserve for value transfer. Everything else is a considered cool neutral.

Balance: roughly 60% neutral ground, 30% anchor, 10% accent. Payout never exceeds a spark. If warmth competes with Stream, the brand fractures.

3.2 Complete palette

CMYK values are unmanaged mathematical conversions — a starting point, not a press spec. See §5.4. ⚠ marks a colour with no usable Pantone equivalent (ΔE > 5).

Semantic token map

Three rules that are easy to get wrong

1. The on-fill tokens are chosen by luminance, not semantics.

• text-on-brand = white. For deep fills: interactive in light mode, fill-error.
• text-on-accent = Ink. For bright fills: stream-500, pulse-500, payout-500, success-500.
• text-on-interactive = mode-resolved. Light mode’s action fill is dark, so white; dark mode’s is bright cyan, so Ink. One shared value fails — white on stream-500 is 2.32:1.

2. Warning and Payout must never share a component. Both were amber in the source palette — “you earned this” and “something is wrong” would have looked alike. Warning is pushed browner in both modes (#A85B10 light, #F0B45E dark). Colour alone must not carry the distinction: always pair with an icon.

3. Success and Payout are different tokens. feedback-success (mint) means the system succeeded. feedback-payout (amber) means money moved. Merging them spends the strongest colour in the palette on “settings saved”.

3.3 WCAG 2.1 compliance matrix

Computed against 1.4.3 (text: 4.5:1 normal, 3:1 large; AAA at 7:1 / 4.5:1) and 1.4.11 (non-text: 3:1 for component boundaries and state indicators). Disabled controls, decorative dividers and adjacent background surfaces are exempt and marked as such.

Result: 56 pairs checked — 18 AAA, 30 AA, 8 exempt, 0 failures.

Light theme

Dark theme

Three findings that changed token values

Elevation is deliberately asymmetric

In light mode bg-elevated equals bg-surface and lift is carried entirely by shadow. In dark mode shadow is nearly invisible, so lift is carried by lightness. Adjacent surfaces are not UI components and are exempt from 3:1 — but a card that must read as a distinct object still takes border-subtle.

4. Typography & Numerical Hierarchy

4.1 The three faces

Chosen by downloading 17 candidates and parsing their GSUB feature tables and OS/2 metrics — not by reputation.

Faces rejected, with the measured reason

4.2 Font stacks

--ss-font-display: "Archivo", "Archivo Fallback", "Helvetica Neue", "Arial Nova",
                   Helvetica, Arial, system-ui, sans-serif;

--ss-font-body:    "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, sans-serif;

--ss-font-mono:    "JetBrains Mono", "JBM Fallback", ui-monospace, "SF Mono",
                   SFMono-Regular, Menlo, Consolas, monospace;

Metric-matched fallbacks — measured, not estimated

A fallback with a different x-height makes the page reflow when the webfont lands. The fix is size-adjust, and the correct value is a ratio of measured x-heights. Both sides were read out of the actual font binaries.

Full @font-face overrides are in typography/type.css.

4.3 Modular scale

1.200 minor third from a 16 px base. Leading is snapped to a 4 px grid. Tracking is systematic rather than eyeballed:

track(px) = 0.096398 − 0.033684 · ln(px)

which yields +0.010 em at 13 px and −0.034 em at 48 px, tightening monotonically as size grows — the behaviour type wants, expressed as a rule instead of a table of guesses.

Two off-scale exceptions, declared

A geometric scale from a 16 px base yields only three sizes at or below 20 px (13 / 16 / 19). A dense aggregator table needs a fourth. Rather than pretend the ratio covers it, the exception is named — and both carry $offScale: true in type-tokens.json so a linter can enforce where they appear.

Why 1.200 and not 1.250. Both were computed. At 1.250 the mid-range opens too far for a dashboard — a 25 px card title and a 31 px subsection heading inside a dense metric panel read as marketing, not instrumentation. The minor third keeps title at 23 px and h3 at 28 px, clearly above 16 px body without shouting. Marketing drama is recovered by display-xl rather than by stretching the product’s whole scale to reach it.

4.4 Numerical hierarchy — micro-rules

This is where a typography system either earns its keep or fails silently.

4.4.1 Reward payouts — currency and tokens

.ss-currency {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "zero" 0;
}

The one place numerals may leave Inter: the payout confirmation moment, set in Archivo at display size. Archivo carries tnum and zero, so the rules still hold. Nowhere else.

4.4.2 Progress and completion indicators

.ss-percent {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width: 4ch; text-align: right; display: inline-block;
}

4.4.3 Telemetry — IDs, hashes, timestamps

.ss-telemetry {
  font-family: var(--ss-font-mono);
  font-variant-numeric: slashed-zero;
  font-feature-settings: "zero" 1, "calt" 0;
  letter-spacing: 0;
}

4.4.4 Print minimums for type

5. Visual Assets, Patterns & Stationery

5.1 The data-stream background pattern

A seamless 400 × 400 tile: a telemetry node matrix with continuous stream waveforms running through it. Drawn twice — once for dark grounds, once for light.

The five seamlessness rules

1. Every wave has an integer number of periods across the tile width. That is the whole seam condition — it makes value and slope agree at x=0 and x=W. The four waves run 2, 3, 1 and 4 periods across 400 px.
2. Wave paths are drawn from −1 period to W+1 period. The overhang is clipped by <pattern>, and because the path is W-periodic the clipped part is exactly what the neighbouring tile draws. No phase break at the join.
3. No filters. This is the trap. An feGaussianBlur renders its glow outside the path, that output is clipped at the tile boundary, and the clipped halo does not wrap — a visible bright seam on every edge. The glow here is three layered strokes on the same path: pure geometry, which joins correctly.
4. Grid lines are drawn at 0 … W−step, never at W. Drawing both edges doubles the line on every boundary and halves the apparent spacing there.
5. Nodes on an edge are duplicated on the opposite edge. A dot centred at x=0 is clipped to its right half; its mirror at x=W supplies the left half from the neighbour. Corner dots get all four positions.

Two further rules govern the repeat being invisible rather than merely seamless: waves are spaced uniformly at 1/8, 3/8, 5/8 and 7/8 of the height so the gap that wraps across the tile edge matches the internal gaps; and packet segments stay clear of the edges, because stroke-dasharray phase is measured from the path start and would restart at every tile.

Verification

Rendered 3 × 3 at 1:1; for each pixel column the mean |I(x+1,y) − I(x,y)| was computed. A seam shows up as an outlier column.

The boundary columns are quieter than the average interior column — negative z-scores — so there is not merely no detectable seam; the joins are smoother than typical content. Periodicity error of 0 means the tiling is pixel-identical, not approximately so.

The light tile is drawn, not inverted

On a dark ground the accents are additive: a bright cyan stroke over near-black reads as glow, and three stacked strokes build a halo. Invert that and the halo becomes a dirty smudge while the whisper-thin grid turns into a heavy dark cage.

Application rules

5.2 Business card

Stock and finish rationale

400 gsm rather than 350. The dark front field needs the snap that only a heavier board gives; at 350 gsm a full-bleed dark card feels flimsy in the hand, which undercuts an enterprise trust claim. If a printer’s house stock runs 350 gsm, it is acceptable — but request a dummy first.

Soft-touch matt laminate both sides. The dark field shows every fingerprint on gloss. Soft-touch also suppresses the scuffing that a solid dark card picks up in a wallet. It will darken the Deepwater field by roughly one tone — proof it on the actual stock before signing off.

Spot UV on the monogram only. The mark is the one element the design supports singling out, and gloss-on-soft-touch is the strongest contrast available without foil. Keep the UV strictly inside the mark’s silhouette; do not flood the pulse trail, which is too fine to register reliably.

Optional, budget permitting: edge painting in Spot 2 at 400 gsm carries the accent-strip idea onto the card’s edge. Mention only if the budget is real.

The US card is a different artwork

The 3.5 × 2 in card is 88.9 × 50.8 mm — aspect 1.75 against the EU card’s 1.545. It is not a scale of the same artwork: the safe area loses 4.2 mm of height and the contact block must be re-set. Decide which market ships first rather than assuming one converts.

5.3 Letterhead and invoice

The letterhead templates ship with specimen registration data — entity name, address, NIPC and VAT numbers are illustrative and must be replaced with the real registration before any file goes to press.

5.4 Print colour execution

SVG and CSS have no CMYK

Every template in print/ is RGB. They are layout and position masters — exact to the millimetre — not colour-managed press files. Sending an SVG straight to a printer hands the brand colour to an uncontrolled RGB→CMYK conversion at their end.

The correct workflow: use the files as the geometry master → re-apply colour as CMYK or spot swatches in Illustrator/InDesign → outline all live text (or supply the fonts; all three are OFL and embeddable) → export PDF/X-4 with the bleed box.

The two-ink stationery specification

Stationery should run two spot inks, not four-colour process. A large flat dark field is exactly where process betrays you — registration shift and banding show on a solid dark card in a way a spot ink never does. Saturated cyan-turquoise also sits outside the coated CMYK gamut, so process renders Stream visibly duller than the screen brand.

Consequences you must decide before artwork goes out

Gradients become tint ramps. The card’s accent strip and the letterhead rule are Current → Stream → Pulse gradients. Pulse has no spot equivalent (ΔE 5) and is out of CMYK gamut, so on a two-ink job they become a tint ramp of Spot 2 — 100% → 40% — rather than a hue shift. It reads as intended; it is simply not the same gradient.

The front’s glow becomes a tint halo. On a two-ink job, a 20% tint of Spot 2, not a blur.

Two colours must never go to press:

Both are high-luminance saturated cyan-greens — the region neither the CMYK gamut nor the Pantone solid range reaches. Where print needs a light accent, tint Spot 2 at 25–40% instead of chasing the on-screen colour.

If a job must run process

Use a controlled rich black for the Deepwater field rather than the naive conversion:

C70  M50  Y40  K100        total area coverage 260%

Inside GRACoL’s 320% limit, dense enough to read as black beside the reversed mark, and it holds detail in reversed type. A flat K100 alone looks washed grey across an area this size. The naive conversion of Deepwater — C83 M26 Y0 K82 — is a muddy, high-ink build no printer would accept.

Production minimums

Proof on the actual stock. Dark teals shift green on uncoated.

5.5 Open Graph social share banner

Layout rules

Non-negotiable checks

Test at feed size. A timeline shows the card at roughly 504 px wide — 42% of full size. The headline, the metric and the payout amount must all still read. Most OG cards fail here, not at full resolution.

Numerals follow §4.4. tabular-nums throughout; the payout amount carries "tnum" 1, "lnum" 1, "zero" 0.

Export with --hide-scrollbars. Without it, headless Chrome reserves gutter width and the card is cropped a few pixels on the right — the kind of thing noticed only after the card is live.

CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
"$CHROME" --headless --disable-gpu --hide-scrollbars \
  --window-size=1200,630 --screenshot=og-card.png "file://$PWD/og-card.html"

<meta property="og:image" content="https://surveystream.com/og-card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

backdrop-filter does not survive server-side rendering

The glass panel depends on it, and Satori / @vercel/og do not implement it. Generating this card at request time in that stack renders the panel as a flat translucent rectangle — the layout holds, the effect is gone. Ship the exported PNG. If per-page dynamic cards are genuinely needed, replace the glass with an explicit gradient that approximates the blur rather than hoping the filter lands.

6. Governance, Open Decisions & Known Limits

6.1 Open decisions

Four decisions remain open. Each has a recommendation; none is a blocker for internal use.

6.2 Known limits

Stated plainly, because each one is a place where this document stops being authoritative.

6.3 Change control

6.4 Licence

Archivo, Inter, JetBrains Mono and Gabarito are all SIL Open Font Licence 1.1 — commercial use, web embedding, PDF embedding and outlining are all permitted. The reserved-name clause means a modified font must not ship under the same name. The wordmark SVGs ship as outlines, so no font is required at render time. Include the four OFL.txt files alongside any distributed font bundle.

SurveyStream Master Brand Guidelines v1.0 — 2026-08-26. Generated from color-system/tokens.json, typography/type-tokens.json, logo/metrics.json and logo/interlock/metrics.json. 56 contrast pairs validated, 0 failures.