Building Otto · From design tokens to production software
I built the Otto Design System starting at the primitive layer; colours, typography, spacing, all the way up to complex product shells, custom workflows and hyper specific object level components.
1. Designing and Building the Product End to End
Introduce the scope of your ownership: product strategy, interaction design, visual system, frontend, backend, database, authentication, AI inference, and deployment.
2. From Product Model to System Architecture
Show how Otto’s object model became the foundation for the database, application logic, interface, AI outputs, and future product capabilities.



3. Building for a Multiplayer Home
Explain how properties, memberships, roles, permissions, and shared records were designed around the home’s implicit social graph.
4. From Design Tokens to Production Components
Show how you created Otto’s visual language and translated it into reusable tokens, components, interaction patterns, and responsive layouts in code.
5. Building the Core Product Loops
Walk through how you implemented the key end-to-end experiences, such as creating a property, uploading an inspection, reviewing findings, creating a plan, and preserving completed work.
6. Designing the Backend Around Durable Product Objects
Explain how the database, APIs, application logic, relationships, and state transitions support the product experience—not merely store information behind it.
7. Turning Unstructured Documents into Structured Home Data
Show the ingestion pipeline from uploaded file to extracted information, structured objects, source attribution, user review, and permanent home record.
8. Making AI a Product Capability, Not a Chatbot
Explain where AI is used, where deterministic software takes over, how structured outputs work, and why Otto converts useful inference into persistent, inspectable product state.
9. Directing Coding Tools and Agents
Describe how you used coding agents to plan, implement, debug, refactor, and extend the product while retaining responsibility for architecture, product decisions, code review, and quality.
10. Designing for Trust, Failure, and Edge Cases
Show how you handled loading, processing, partial results, model uncertainty, errors, duplicates, corrections, confirmation, permissions, and recovery.
11. Closing the Gap Between Design and Production
Demonstrate how implementing the product yourself exposed weak assumptions, changed interface decisions, and allowed the design system, data model, and production behaviour to evolve together.
12. Shipping, Observing, and Iterating
Explain how you deployed Otto, tested complete workflows, observed early users, identified breakdowns, and turned those findings into subsequent releases.
13. What Building Otto Changed About How I Design
Conclude with the principles you developed through the work: designing from objects outward, thinking in states and systems, treating implementation as part of design, and using AI agents to increase—not replace—product judgment.
14. Design Principles
I developed a set of 14 principles I kept in mind while designing Otto and returned to often.
15. The Otto Design System
Marketing & Branding
The Production Stack
- LinearProject management
- Next.jsReact web framework
- Shadcn UIComponent library
- SupabaseDatabase
- VercelWeb hosting
- Codex & CursorCoding agents
- ResendEmail API platform
- TurbopufferServerless vector search