Brand system · v1.1 · local
Eight deliverables built on one strategy. Every link below opens a local file — no network, no accounts, nothing hosted. Open this page from disk and it all works.
Foundation
The strategy everything answers to: essence, the dual-audience matrix, the Ruler/Magician blend, five personality dials, three logo territories. Its §07 recommends an unbroken stream resolving into a live waveform with an S hiding in the curve — which is exactly the mark that shipped.
Identity
A geometric S from two tangent elliptical arcs — no freehand curve anywhere — with the wordmark as extracted Archivo Bold outlines, so every file renders with no font installed. Two families: the primary set, and the interlock variant.
The primary set is approved. The interlock variant re-skins the same bowls as a solid Ink loop with a thin Stream→Pulse line crossing at the waist — it resolves the interlock the primary gave up on, and carries a hard rule: below ~40 px the accent is dropped and the base thickened. Adopting it is a rename plus three link updates.
System
Primitives, semantic tokens for both modes, and a WCAG 2.1 validation table the page recomputes in your browser from the tokens themselves — so the spec cannot drift from the values it documents. 56 pairs, 0 failures.
#04171F#08222E#0A6E86#10BBD1#5FE3EC#2FE3A2#F2A23C#D3E0E2System
Faces chosen by downloading 17 candidates and parsing their GSUB
tables and OS/2 metrics — not by reputation. A 1.200 minor-third scale, plus
live demos of the numeral rules, which invert between money and telemetry.
New
A seamless 400×400 tile: telemetry node matrix with continuous stream waveforms. Verified pixel-periodic with zero boundary discontinuity — the joins measure quieter than the average interior column.
New
Double-sided business card, A4 and US Letter letterhead, and an A4 invoice — millimetre-exact SVG with trim, bleed and safe guides, plus a print-ready sheet that outputs at true scale. Two production decisions are flagged in the specs.
#0F172A has no usable
Pantone match (nearest 289 C, ΔE 5.8). Brand Deepwater #08222E matches
5395 C at ΔE 1.7. Both files supplied; Deepwater recommended for print.SVG and CSS have no CMYK. Re-apply colour as CMYK or spot swatches in Illustrator/InDesign, outline the live text, and export PDF/X-4 with the bleed box. Sending an SVG straight to a printer hands your brand colour to an uncontrolled conversion at their end.
Exploration
The first pass at the mark, as live vector and canvas rather than renders. The mark direction was superseded by the logo set, but the lattice field is still usable and the render-prompt critique still applies.
Manifest
Sizes read from disk. Filenames are links — they open the real file.
| File | Size | Purpose |
|---|---|---|
| Pages | ||
| docs/BRAND-GUIDELINES.md | 58.4 KB | The master specification — strategy, logo, colour, type, assets, print. Generated from the token files. |
brand-portal.html | — | Interactive style guide. Click-to-copy swatches, a live type playground, copyable asset SVGs. One file, fonts embedded, no network. |
index.html | — | This hub. |
standalone/*.html | — | Every deliverable, wrapped as an openable document. |
standalone/fonts/ | — | Archivo, Inter, JetBrains Mono, Gabarito — 223 KB, latin subsets. |
| Foundation | ||
surveystream-brand-guidelines.html | — | Strategy: essence, audiences, archetypes, dials, logo territories. |
| Logo | ||
| logo/lockup-horizontal.svg | 6.9 KB | PRIMARY lockup. |
| logo/lockup-horizontal-reversed.svg | 6.7 KB | Dark grounds. |
| logo/lockup-horizontal-mono.svg | 6.3 KB | One colour. |
| logo/lockup-stacked.svg | 6.9 KB | Narrow placements. |
| logo/icon.svg | 1.2 KB | Mark alone. |
| logo/app-icon.svg | 1.1 KB | 512 px rounded-rect. |
| logo/favicon-32.svg | 0.9 KB | Simplified small cut. |
| logo/favicon-16.svg | 0.9 KB | Simplified further. |
logo/interlock/ | — | Interlock variant — 15 files, solid loop + flow line. |
| logo/lockup-600x140.svg | 7.8 KB | ALTERNATE. Slate/mint, bezier mark, fixed frame. |
| logo/metrics.json | 0.5 KB | Lockup measurements. |
| docs/logo/README.md | 4.3 KB | Construction, layout rules, licence. |
| Design tokens | ||
| tokens/design-tokens.json | 26.2 KB | W3C DTCG. 202 tokens, 119 aliases, light + dark themes. |
| tokens/theme.css | 11.6 KB | CSS custom properties. Media query, [data-theme] and .dark all handled. |
| tokens/tailwind.config.js | 7.8 KB | Tailwind v3 config. Verified by a real compile. |
| tokens/tailwind-v4.css | 7.5 KB | Tailwind v4 @theme mapping. |
| docs/tokens/README.md | 8.0 KB | Architecture, theming, naming, spec-compliance notes. |
| Colour | ||
| color-system/tokens.json | 8.0 KB | DTCG tokens. |
| color-system/tokens.css | 6.1 KB | Custom properties, all three theme states. |
| docs/color-system/COLOR-SYSTEM.md | 16.5 KB | Spec + validation table. |
| Typography | ||
| typography/type-tokens.json | 6.0 KB | DTCG tokens, off-scale steps flagged. |
| typography/type.css | 5.3 KB | Scale, numerals, metric-matched fallbacks. |
| docs/typography/TYPOGRAPHY.md | 16.2 KB | Spec + font evidence table. |
| Pattern | ||
| pattern/tile-brand-400.svg | 12.6 KB | Canonical seamless tile. |
| pattern/tile-brand-400-subtle.svg | 12.6 KB | Half strength, for behind text. |
| pattern/tile-slate-400.svg | 12.6 KB | Slate palette. |
| pattern/tile-slate-200.svg | 9.7 KB | 200 px tile, denser grid. |
| pattern/pattern.css | 3.5 KB | Data URIs + ready classes. |
| docs/pattern/README.md | 6.7 KB | The five seam rules + the test. |
| print/business-card-front.svg | 14.3 KB | Card front, specified slate. Bleed doc. |
| print/business-card-front-deepwater.svg | 14.3 KB | Card front, Deepwater — recommended for print. |
| print/business-card-back.svg | 9.1 KB | Card back with QR and accent strip. |
| print/letterhead-a4.svg | 13.1 KB | A4 letterhead, bleed doc. |
| print/letterhead-letter.svg | 13.2 KB | US Letter letterhead. |
| print/invoice-a4.svg | 14.5 KB | A4 invoice. |
print/print.html | — | Print-ready: card 2-up proof + both sheets, true scale. |
| docs/print/PRINT-SPECS.md | 8.8 KB | Trim/bleed, CMYK + Pantone, production minimums. |
| Social | ||
og/og-card.html | — | The 1200×630 card. Fonts embedded. |
| og/og-card.png | 424.9 KB | Exported 1×. Serve this as og:image. |
| og/og-card@2x.png | 1232.0 KB | Exported 2×, for decks and retina. |
| docs/og/README.md | 4.5 KB | Export commands, meta tags, caveats. |
| Exploration | ||
flow-and-lattice.html | — | First-pass mark studies + the telemetry field. |
Presenting
Strategy first, then the mark, then the systems that make it reproducible. Roughly 25 minutes.
yS and St deserve review.
New
Open Graph Card
1200 × 630, dual-audience, self-contained — the three webfonts are embedded as base64 so it renders identically anywhere. Built from the real lockup and the real pattern, and checked at feed size, which is the test that matters.