Thomas Camlong
9301718974
- Add @site/* path alias to docs tsconfig for generated integration files - Fix label-has-associated-control: use htmlFor/id pairs in SubmitForm - Suppress no-noninteractive-element-interactions for drag-and-drop zones - Add aria-labels to search and comment inputs - Remove unused Label component import
36 lines
1.7 KiB
Markdown
36 lines
1.7 KiB
Markdown
# Product
|
|
|
|
## Register
|
|
|
|
product
|
|
|
|
## Users
|
|
|
|
Self-hosting enthusiasts managing homelab services. Technical users comfortable with Docker, APIs, and configuration files. They use Homarr as a personal dashboard to monitor and control 50+ services (media servers, DNS, NAS, download clients). Context: desktop browser, often on a local network, task-focused.
|
|
|
|
## Product Purpose
|
|
|
|
Homarr is a self-hosted dashboard for homelab management. It aggregates service status, media libraries, system stats, and administrative controls into a single drag-and-drop interface with 39+ widgets. The marketplace extension lets users share and install custom widgets and CSS themes created by the community.
|
|
|
|
## Brand Personality
|
|
|
|
Practical, capable, community-driven.
|
|
|
|
## Anti-references
|
|
|
|
- Generic SaaS landing pages with gradient hero sections and metric grids
|
|
- Overly corporate enterprise dashboards (ServiceNow, Salesforce)
|
|
- Cluttered "hacker" UIs with no visual hierarchy
|
|
|
|
## Design Principles
|
|
|
|
1. **Tool disappears into the task.** The interface should feel invisible; users came to manage their homelab, not admire the dashboard.
|
|
2. **Density when it earns it.** Show useful information compactly; don't spread thin content across oversized cards.
|
|
3. **Community first.** Sharing, voting, and installing should feel effortless and trustworthy.
|
|
4. **Consistency across surfaces.** The marketplace in the docs app should feel like it belongs to the same product as the main Next.js app.
|
|
5. **Respect the user's time.** Fast loads, instant feedback, no choreographed animations.
|
|
|
|
## Accessibility & Inclusion
|
|
|
|
WCAG 2.1 AA. Support for reduced motion. Sufficient contrast ratios (4.5:1 body text, 3:1 large text). Keyboard navigable.
|