SmallWorld

Prototypes

Static HTML/CSS/JS explorations of design ideas for the SmallWorld product. Each prototype is throwaway-grade in code, production-grade in visual fidelity, and built to live alongside the canonical style guide.

github.com/SmallWorld-io/sw-prototypes

Style Guide

Reference
Canonical

Frontend Style Guide

Design tokens, components, and patterns that define SmallWorld's visual language. Treat this as the source of truth for prototypes and the production app.

HTML + markdown spec

Deal Team / Relationship Map

3 versions · 5 pages
v1
Initial pass
List view

Deal Teams

Index of deal teams collaborating on opportunities — list-level view with filters and team summaries.
Detail view

Deal Team Detail

First-pass per-account detail with buying-center coverage, agent plan strip, summary stats, offers / leads / deal team / prospects resurfaced.
v2
Refinement
Per-account view

Relationship Map

Reframed around the synthesis with DR: page is the per-account Relationship Map. Dark Concierge orchestration panel (always running) above While You Were Sleeping, then Offers / Leads / Deal Team / Extended Network. Split Concierge/Manual intro buttons, deal team ordered with reasons.
v3
Layout iteration
Per-account view

Relationship Map

Two-column layout: main content on the left, sticky Concierge orchestration rail on the right. Orchestration restyled light to align with the style guide. Streams stack vertically; "In the queue" foot becomes a bulleted upcoming-actions list.
Variant · auto-starts

Relationship Map — first-time tour

v3 with a guided onboarding overlay layered on. Spotlight highlights each surface in turn (account, Concierge, streams, recent activity, offers, leads, deal team) with explainer cards and a step counter. Skip/Esc/click-out exits; a "Show me around" pill re-launches it.

User Settings

1 mockup
Mockup

User Settings Page

Standalone single-page exploration of the user-level settings surface.

Single page

Requester Dashboard

1 mockup
v2 mockup

Requester Dashboard v2

Action-driven dashboard exploration replacing the search-first approach — RelAI input, "since last visit" summary, prioritized actions, and active orchestrations.

Single page

Connector Dashboard — archive

3 versions · 6 pages · shipped via React
v1
Initial pass
Chrome + Target Companies

Dashboard

First-pass layout and interaction model for the dashboard chrome and Target Companies tab.
Your Network tab

Network

First-pass exploration of listing connections with rating affordances.
v2
Refinement
Chrome + Target Companies

Dashboard

Refined layout and density — tighter table, clearer hierarchy.
Your Network tab

Network

Improved scanability and rating UX — second iteration of the connection list.
v3
Build basis
Chrome + Target Companies

Dashboard

Final pre-build iteration — what the React implementation was built from.
Your Network tab

Network

Final pre-build iteration of Your Network — directly mapped to shipped components.

Settings Flow

Multi-page
Entry point

Account & Settings

Account-level settings flow covering general settings, user/team management, invitations, Salesforce, email templates, notifications, and intent signals.

Flow · 17 pages shared/

Relationship Leads

Multi-page
Entry point

Relationship Leads (RLOs)

Pre-qualified introduction opportunity flow — leads list, saved leads (by lead and by company), and lead detail.

Flow · 5 pages shared/