Design Principles
Table of Contents
Our Design Philosophy
We build tools for engineers. Our design should feel like a well-tuned instrument - precise, responsive, and out of the way when you’re focused.
Principles
1. Clarity Over Cleverness
Every interface element should communicate its purpose instantly. No mystery icons, no hidden menus, no “discover” moments that require a tutorial.
If a user has to think about how the UI works, the design has failed. The product should be so clear that documentation feels optional.
2. Density Done Right
Our users work with data - lots of it. Traces, evaluations, metrics, logs. We don’t hide information behind excessive whitespace or progressive disclosure.
Instead, we present dense information clearly:
- Tables over cards when comparing data
- Monospace fonts for IDs, metrics, and code
- Compact spacing that respects the data without feeling cramped
- Sortable, filterable everything
3. Speed Is a Feature
Perceived performance matters as much as actual performance:
- Skeleton loaders, not spinners
- Optimistic updates for user actions
- Instant search and filtering (client-side when possible)
- Zero-latency navigation (prefetching)
4. Dark by Default
Our users spend hours in our product. Dark mode isn’t an afterthought - it’s the primary experience. Light mode exists for those who prefer it, but dark mode gets the most design attention.
5. Progressive Complexity
New users should see a simple, focused interface. Power users should have access to advanced controls. Both should feel served.
- Sensible defaults that work for 80% of cases
- Advanced options available but not in the way
- Keyboard shortcuts for everything
- Power-user features unlocked as usage grows
6. Data Visualization as Communication
Charts and graphs aren’t decoration - they’re communication tools. Every visualization should answer a specific question:
- “Is my agent getting better or worse?”
- “Where are the failures concentrated?”
- “What changed between these two versions?”
If a chart doesn’t answer a question, it shouldn’t exist.
Visual Language
| Element | Approach |
|---|---|
| Color | Minimal palette. Purple for brand. Green/red/yellow for status. Gray for structure. |
| Typography | Inter for UI, JetBrains Mono for data and code. Two sizes: comfortable and compact. |
| Borders | 1px borders define regions. No drop shadows except for overlays. |
| Icons | Lucide icon set. Consistent 16px or 20px. Never decorative, always functional. |
| Motion | Subtle, fast (150-250ms). No bouncing, no spring physics. Ease-out for entrances, ease-in for exits. |
Design Process
- Understand the problem - talk to users, look at support tickets, watch session recordings
- Sketch options - quick wireframes, not polished mockups
- Prototype - build it in code early (Astro + Tailwind is fast enough to skip Figma for most things)
- Ship and measure - deploy behind a feature flag, watch usage
- Iterate - adjust based on real behavior, not opinions