Interactive React/Vite artifact defining OpenLens’ visual system, component behavior, motion rules, data visualization patterns, responsive layouts, and product UI direction. Intended as a shared reference for designers, engineers, and agents building OpenLens interfaces.
- TypeScript 71.8%
- CSS 27.8%
- HTML 0.4%
| .gitea/workflows | ||
| src | ||
| .gitignore | ||
| earthrise-apollo8.jpg | ||
| index.html | ||
| openlens-design-language-spec.md | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
OpenLens Design Language
Interactive design-language deck for OpenLens: research-grade observability for AI answer surfaces.
The artifact combines design principles, visual direction, component behavior, motion rules, data visualization conventions, and product page specimens. It is intentionally built as a small React/Vite project so the design language can demonstrate interaction instead of existing only as static documentation.
Run Locally
npm install
npm run dev
Verify
npm run typecheck
npm run build
Deployment
Pushes to main deploy to Bread95 through the Gitea webhook receiver. The live tailnet artifact is served at http://bread95:8095/.
Project Tracking
Use the Linear project and issues below when turning this direction board into product work:
- UI/UX Overhaul v2.0.0 is the parent project for design-language, consistency, accessibility, performance, and dashboard/Agent UX work.
- BRE-903: Operationalize the research-grade design language is the primary implementation issue for shared primitives, component contracts, and Agent retrofit.
- BRE-66: Add a project-level Runs tab is the related product-surface issue for run history and status conventions.
Main Files
src/contains the interactive deck.openlens-design-language-spec.mdcontains the written design-language specification.earthrise-apollo8.jpgis the editorial image specimen used by the visuals page.
Generated output in dist/ is not committed.