This documentation outlines the design principles and guidelines for the LangWatch platform UI. Following these guidelines ensures a consistent, modern, and professional user experience across all features.
| Principle | Key Points |
|---|---|
| Rounded Corners | Use borderRadius="lg" for most elements |
| Translucent Overlays | background="white/75" + backdropFilter="blur(8px)" |
| Prefer Drawers | Use drawers for resource selection, creation, and editing |
| Page Layout | Full width, small title, action buttons top-right |
| Collapsed Menu | Use compactMenu for content-heavy pages |
- README.md - Overview and quick reference (this file)
- guidelines.md - Detailed design principles with visual examples
- components.md - Component preferences and usage patterns
- examples.md - Code examples for common patterns
- Modern & Clean - Rounded corners and translucent effects create a modern, approachable feel
- Consistent - Same patterns applied across all pages and features
- Focused - Collapsible navigation for content-heavy pages reduces cognitive load
- Intuitive - Drawers provide context without losing page state
When implementing a new feature or page:
- Review the guidelines for design principles
- Check components for preferred component choices
- Use code from examples as starting points
- Follow the established patterns in existing pages
- PR #1025 - Original design implementation
- Chakra UI v3 Documentation - Component library reference