Trystpilot Design System
Trystpilot Design System
Section titled “Trystpilot Design System”System architecture, product diagrams, and governance documentation for Trystpilot.xyz.
All diagrams are authored in Mermaid and render live on this site.
Relationship to Docs Site
Section titled “Relationship to Docs Site”- This site (
design.trystpilot.xyz) owns visual system assets: architecture diagrams, UI flows, component/system maps, governance diagrams. - Docs site (
docs.trystpilot.xyz) owns operational docs: runbooks, setup guides, security/devops policies, changelog/versioning.
See Docs vs Design Relationship.
Contents
Section titled “Contents”| Section | Description |
|---|---|
| Architecture | Backend API, database schema, frontend components, infrastructure |
| Product | User flows, discovery experience variants, roles & permissions, monetization strategy |
| Design Tokens & Endpoints | NEW — Complete feature-to-token and feature-to-endpoint mapping; identifies missing implementations |
| Governance | Access control matrix, moderation workflow |
| DevOps | CI/CD pipeline, deployment, branching strategy |
| Business | Revenue model and monetization paths |
Architecture Overview
Section titled “Architecture Overview”
graph TD
subgraph "Trystpilot Stack"
FE["Next.js 15 Frontend\n(trystpilot.xyz)"]
API["App Router API Routes"]
DB["PostgreSQL\n(Railway)"]
CACHE["Upstash Redis\n(rate limiting)"]
CAPTCHA["hCaptcha"]
VERCEL["Vercel Edge Network"]
end
FE --> API
API --> DB
API --> CACHE
FE --> CAPTCHA
VERCEL --> FE
subgraph "Sub-Domains"
DOCS["docs.trystpilot.xyz\n(Astro Starlight)"]
DESIGN["design.trystpilot.xyz\n(Astro Starlight)"]
end
VERCEL --> DOCS
VERCEL --> DESIGN