Small Street Pilot front end · owner-facing build

The surface around the engine.

The engine values a real business. This is everything the owner touches around it: 23 screens, one file each, tied together by a shared shell and one demo dataset. Built as static HTML so you can implement against it. The spec is the decider; the notes below cover the build decisions and the open questions worth your eye.

23 screens Built · June 2, 2026 Demo · Northside HVAC Static HTML · no framework
Walk it end to end

The Happy Path.

Landing to valuation, in order. This is the demo spine: a new owner connects QuickBooks, confirms a few add-backs, and gets a defensible number. Start at the top and click straight through.

  1. 1
    Trust Entry (landing)
    Rebuilt to mirror the live site at smallstreet.ai: editorial hero, waitlist aside, three numbered sections, one full-width charcoal band. The waitlist form is demo-wired into the invite flow. onboarding/01-landing.html
  2. 2
    Invite landing
    Name and email prefilled from the invite. Expired state at ?expired=1
  3. 3
    Identity & role
    Step 1 of 3. Name, display name, role, email. onboarding/03-identity.html
  4. 4
    Business profile
    Step 2 of 3. NAICS plain-language autocomplete, revenue, structure, goals. onboarding/04-profile.html
  5. 5
    Data handling & pilot scope
    Step 3 of 3. Read-only QuickBooks, the commentator metaphor, the locked AI rule. onboarding/05-terms.html
  6. 6
    Pick a data source
    QuickBooks (recommended) or documents. Continue gates on a selection. onboarding/06-pick-source.html
  7. 7
    Link QuickBooks
    Three verbatim trust bullets: encrypted, read-only, disconnect anytime. onboarding/07-link-quickbooks.html
  8. 8
    Syncing
    Five steps, auto-routes on success. Failure path at ?state=failed
  9. 9
    First-sync orientation
    Shows once. No valuation yet: it sets up the confirmations that move the number. onboarding/10-first-sync-orientation.html
  10. 10
    Owner Additions
    Confirm 3 add-backs pending your review ($24,480). SDE-framed end to end. app/owner-additions.html
  11. 11
    Normalization Milestone
    The Anchor reveal. Count-up to $1.49M after the confirmations land. app/normalization-milestone.html
  12. 12
    Scoreboard
    The instrument. Two tabs: Street Score (default) and Anchor Price. app/scoreboard.html
  13. 13
    Score detail
    Pillar depth: five rows, each expandable to its drivers and sources. app/score-detail.html
  14. 14
    StreetReport
    Show me the math. Parametrized: ?view=street_score · ?view=pillar&pillar=growth
  15. 15
    Vault
    Documents, Review (read-only), Sources, Packages. Data Strength drives Value Range width. app/vault.html
  16. 16
    Owner Assessment
    What a buyer sees first. Printable (browser print → the print stylesheet). app/owner-assessment.html
  17. 17
    Settings
    Six tabs. Organization, Team, Integrations are 1.0; the rest are labeled. app/settings.html
  18. Alternate branch at step 6: if the owner picks documents over QuickBooks, they land on Upload documents (5 states: empty, drag-over, uploading, uploaded, error), then rejoin at Syncing.
Every screen

Full sitemap.

Grouped by surface. Pre-login screens use a minimal centered header. App screens use the full shell (sidebar, topbar, dock, StreetAgent overlay), injected by shell.js from a single <div id="page">.

Notes for engineering

How it's wired.

Architecture
  • Static HTML, vanilla JS, no framework, no build step. One file per screen. Open index.html and click.
  • Shared chrome lives in assets/shell.js. Each screen ships its main content plus one <div id="page" data-page="…" data-subhead="…">; shell.js injects the sidebar, topbar, dock, and StreetAgent overlay and highlights the active nav. Pre-login screens use data-shell="minimal" for a centered header instead.
  • Every number comes from assets/data.js (window.SS_DATA) with shared formatters in window.SS_FMT. Change a value once and it updates on every screen.
  • Script order on every screen: content, then data.js, then the inline page IIFE, then shell.js.
  • Tokens: assets/colors_and_type.css carries the brand palette and @font-face (local TTFs, offline-true). assets/app.css layers the shell, components, and functional status tokens. Never hardcode hex.
  • Sidebar nav, in spec order: Scoreboard · Owner Additions · Vault · Owner Assessment · Settings.
Locked routing to honor
  • A single Ready company auto-forwards to its Scoreboard server-side and skips the selection screen (LOCKED, spec P1). The demo shows three companies so all status states are visible.
  • The first-sync orientation shows once, on first sync only.
  • The Vault Review tab is read-only for 1.0, with a structured "Flag this →" on each row.
  • The Vault Packages tab ships with a "Coming soon" label.
The confidence rule (read this one)

No owner surface shows a trust-state label, a firmness bar, or a confidence pill. Owner-facing confidence is two things only: the Value Range width (wider means less firm, with no caption) and the two rollups, Counted in SDE (signal-green) and Pending your review (amber). The engine's trust states (Verified, Confirmed, Provisional, Suppressed) live in data.js because the dataset mirrors EvaluationResult, but they never render on the instrument. Keep them backend-only, available to the StreetAgent and external consumers.

One business, every screen

The demo dataset.

Northside HVAC, LLC. Numbers are lifted verbatim from the canonical scoreboard prototype so the instrument reconciles end to end. Source of truth is assets/data.js.

Street Score
76 / 100
Green band (≥71). Up 3 points in 90 days.
Anchor Price
$1.49M
$1,492,800. Up $72k since February. Charcoal, never coral.
Value Range
$1.28M–$1.56M
Width is the only firmness signal. No caption, no pill.
SDE
$325k
$268k net income + $57k add-backs counted in SDE (38).
Pending your review
$24,480
3 add-backs held out of SDE until confirmed. Multiple band 3.94×–4.80×.
Data Strength
85%
Drives Value Range width. More data, tighter range.
Five pillars (weights locked, sum to 1.00)
  • Profitability 84 (0.25) · Quality 73 (0.25) · Growth 78 (0.20) · Productivity 71 (0.20) · Efficiency 68 (0.10). Composite 75.85 rounds to 76. Efficiency is the drag and carries the Next Best Step.
Spec wins over the comps

Reconciliations applied.

Where the build plan and the comps disagreed with the spec, the build follows the spec. The five changes that matter:

  • Confidence is backend-only. Removed the Firmness Bar and all four trust-state labels from every owner surface. The StreetReport template originally used Verified/Confirmed/Provisional; this build strips them. Confidence now reads as Value Range width plus the SDE rollups.
  • Scoreboard hero hardening (§12). Two-tab pattern kept. Anchor Price is charcoal, never coral. Value Range sits beneath the Anchor number. No confidence indicator on the hero, no coral selection pip. Pillar tiles carry no weight tag and no consequence line on the tile face (consequence is agent-surface only).
  • No per-pillar route. Pillar depth is the inline expand on Scoreboard, the Score Detail rows, and a parametrized StreetReport (?view=pillar&pillar=<id>). The brief's one-route-per-pillar is superseded.
  • NAICS is autocomplete only. Plain-language type-ahead that resolves to a code (§23.4). The brief's 890-code picker and visible fallback ladder are not in the spec as an owner surface, so they're omitted and flagged below.
  • Lexicon enforced everywhere. Street Score, Anchor Price (charcoal), Value Range, Scoreboard, Owner Additions, Next Best Step, StreetAgent, Audit Spine, Counted in SDE / Pending your review. Retired: StreetValue, Firmness Bar, "StreetScore", dashboard, confidence pills. No em dashes, no negation reframes, no AI vocab.
Decide before build

Open flags.

Every place this build made a call you should confirm, or invented nothing and left a gap on purpose. Listed so the handoff holds no surprises.

  1. Landing is a rebuild of the live site
    onboarding/01-landing.html matches the live site at smallstreet.ai: the warm marketing neutrals (canon --ink-60 / --cloud-deep / --paper), numbered section markers, and one full-width charcoal band. It loads colors_and_type.css only and builds its own header and footer, so it carries neither the app shell nor app.css. Every other pre-login screen uses the minimal shell; the landing is the one exception, on purpose.
  2. Landing copy diverges from the live site on two words
    Both changes satisfy the voice rules. The hero subhead uses the locked positioning line, "The financial value platform for small business owners.", where the live site reads "The financial platform built for owner value." (a paraphrase of locked copy). Section 01 reads "a measured, defensible view of what your business is worth", where the live site says "read" (the noun "read" or "reading" for the number is struck). The live copy predates both rules. Confirm the direction: if the live lines are canon, update the rules; otherwise the live site moves to these.
  3. Landing waitlist and footer links are demo wiring
    The "Request access" form advances into the invite flow (onboarding/02-invite.html) so the walkthrough stays clickable. Production captures the email to a waitlist instead. The footer "Privacy" and "Terms" links are href="#" placeholders, and the live footer also carries a contact email. Wire the real routes at handoff.
  4. Demo business is HVAC, not electrical
    The build plan named an electrical contractor. Every locked number in the comps belongs to Northside HVAC (NAICS 238220). Kept HVAC so the instrument reconciles, rather than invent an electrical-trade multiple band.
  5. NAICS landed-grain disclosure is not built
    Autocomplete only. The brief's "show the owner which grain we landed at" and the fallback ladder aren't spec'd as an owner surface. Omitted on purpose. Decide whether to add it, and if so, update the spec first.
  6. Canon logo SVGs render as a black mark
    The brand logo files (assets/logos/primary-dark.svg and siblings) render black across the org, not charcoal or coral. Cosmetic, affects every screen's mark. Patching the source SVGs is a quick fix and is waiting on a go-ahead.
  7. Forgot-password states are a 1.1 feature
    Per §44.3.8, 1.0 ships the functional CTA only; success and error states arrive in 1.1. All four states are built here so you can see them (?state=success · ?state=error). Ship the subset 1.0 calls for.
  8. Sign-in error copy and forgot-password link are defaults
    The spec doesn't place a forgot-password link on sign-in or specify invalid-credential copy. Both are added as sensible defaults and flagged here. Error preview at ?error=1. Confirm the copy.
  9. Sign-in success route is assumed
    The spec doesn't name where a successful sign-in lands. This build routes to the company selector (companies/select.html), which then honors the single-Ready auto-forward. Confirm.
  10. Sign-up wall "Contact us" needs a target
    href="#" placeholder. Wire it to the real contact destination at handoff.
  11. Profile goal chips are illustrative
    The goal options on the business profile are a reasonable set, capped at two selections. The spec doesn't lock a list. Replace with the canonical set when it exists.
  12. Company-size bands differ by screen, on purpose
    Add-a-company uses 1–5 / 6–10 / 11–25 / 25–50 / 50+ (§25.2). The business profile uses different employee bands (§23.4). Each matches its own spec section. Noting the inconsistency in case you want them unified.
  13. CTA copy is sentence case, the spec has some all-caps
    The spec renders a few buttons in all-caps ("CONNECT QUICKBOOKS" §26.3, "Process Documents" §26.4). This build uses sentence case throughout, per the canon rule that CTAs are sentence case. Flagged so the divergence is a decision, not a miss.
  14. Invite eyebrow resolved to the locked tagline
    The spec's eyebrow for the invite screen used a negation framing. Replaced with "Built for owners." to satisfy the voice rule against negation reframes. Both land in the same place; calling it out.
  15. Owner Assessment print footer omits the page number
    The print stylesheet leaves pagination to the real export engine, so the static comp doesn't number pages. Expected when the engine generates the buyer-facing PDF.
  16. Icons are Lucide, pending confirmation
    No icon set shipped in the brand delivery. The build uses Lucide (MIT) as the closest stroke and weight match, at 1.75px. Confirm before wide use, per the design canon caveat.