Design preview · not a page design. Each stack is sized to its frame, not the viewport. The Backgammon.com/shop stack starts hidden (display:none) to test relayout() then enter(). Controls inside each drawing: the toggle (top left), layer labels (click or focus), and for 7 Spring the story transport.
Frame width
7 Spring
01Experiences
Members
Play · connect · belong
Web
Mobile
Operations
Manage · run · grow
Web
Mobile
02Identity
Member Auth
Sign-in · passkeys · sessions
03Application services
Client Backend
Membership · billing · finance · host
Job worker · 6 scheduled jobs
Operations Backend
Inventory · purchasing · marketing
3 scheduled jobs
04Connected business systems
Retail channels
StripeAPI
ToastAPI
PlaidAPI
QuickBooksFile
ADPFile
SquareAPI
ShopifyAPI
Payments & finance
05Platform services
Supabase
Postgres · Auth · Storage
Vercel
Web · Auth
Render
Services · Worker · Cron
Expo
EAS Build · Updates
Select a layer
Members Play · connect · belong
Operations Manage · run · grow
Verified connections · 8
Member Auth Sign-in · passkeys · sessions
Hosted on Vercel
One identity service for members and staff: password exchange, email links, passkeys, and session minting.
The system of record for members and money: applications, billing, host operations, and finance reconciliation. A queue worker and scheduled jobs handle billing activation, notifications, and hourly finance syncs.
Inventory, vendors, purchasing, and marketing. Serves the finance console, reading reconciled figures from the shared database and passing changes to the Client Backend.
Verified connections · 17
Payments & finance Reconciled in one place · Client Backend
Four live feeds and two file imports reconcile inside the Client Backend: payments, café and bar sales, bank transactions, payroll, and accounting statements.
Retail channels One catalog, per-channel sync · Operations Backend
The Operations Backend owns the retail catalog and is built to publish it to Square in the room and Shopify online, with each channel switched on separately.
Verified connections · 8
Platforms are shown by highlighting what they host or support, never as data flows. Choose one to light up its parts of the stack.
VercelRenderExpo· hosting
Backgammon.com/shop
01Storefronts
backgammon.com/shop
7springnyc.com/shop
02Storefront code
Shared upstream codebase
Downstream deployment for the partner site
03Pages
Home
Collections with filters and sort
Product detail
Cart
04Cart
Optimistic updates
Remembered across visits
05Data layer
One store interface
Offline mock client
Live Storefront GraphQL client
06One Shopify store
Catalog
Storefront API
Hosted checkout
Select a layer
backgammon.com/shop
7springnyc.com/shop
Shared upstream codebase
Downstream deployment for the partner site
Home
Collections with filters and sort
Product detail
Cart
Next.js 14; pages regenerate every 60 seconds
Optimistic updates
Remembered across visits
One store interface
Offline mock client
Live Storefront GraphQL client
The app never knows which client is active
Shopify
Catalog
Storefront API
Hosted checkout
MacLatch
01App
SwiftUI shell for iPhone and iPad
Shortcuts and Spotlight
StoreKit trial and one-time unlock
02Session SessionKit
Saved connections
Reconnect lease
Diagnostics timeline
03Input and rendering InputEngine, RemoteRenderer
Keyboard and pointer input
Metal renderer
04Protocol
RFB (VNC) with Apple Remote Desktop auth
05Route
Local network
Tailscale
SSH tunnel
06Your MacNothing installed on the Mac
Built-in macOS Screen Sharing
Beside
Keychain
Beside
iCloud
Select a layer
SwiftUI shell for iPhone and iPad
Shortcuts and Spotlight
StoreKit trial and one-time unlock
The top plane is a real capture: MacLatch on an iPhone, connected to a Mac over an SSH tunnel.
Saved connections
Reconnect lease
Diagnostics timeline
Keyboard and pointer input
Metal renderer
RFB (VNC) with Apple Remote Desktop auth
RFBCore over a maintained RoyalVNCKit fork
Local network
Tailscale
SSH tunnel
Each route labelled for what it protects; SSH via Citadel on SwiftNIO SSH
Built-in macOS Screen Sharing
Keychain beside the stackSecrets and host-key pins stay on this device
iCloud beside the stackSyncs saved Macs, never passwords
Poppet Baby
02Design system
Tokens and structural patterns
03Domain poppet_domain, pure Dart
Subjects, activity and metric registries
Append-only log and its fold
04Storage
On-disk log format
CSV importer
05Family sync No hosted database
The family’s own Google Drive
Select a layer
Five-tab Flutter shell
Logging sheets
History and Trends
Live Activity
The top plane is a real capture: Poppet Baby’s Feeding screen with a running timer and felt illustrations.