homarr/DESIGN.md

Workshop design system

Workshop is a trustworthy community workbench inside Homarr, not a separate storefront brand.

Visual direction

• Reuse the host surface: Docusaurus tokens on homarr.dev, Mantine components inside Homarr.
• Use Homarr red only for primary action and focus; warnings use restrained amber and errors use red with explanatory text.
• Keep surfaces flat, bordered, and readable. Cards may lift by 3px on pointer hover; no gradients, glass panels, or decorative dashboards.
• Typography follows each host. Headings are compact and confident; body copy stays warm, concrete, and short.
• Spacing follows an 8px rhythm, 12-16px corners, and 44px minimum controls.

Interaction direction

• The catalog progression is discover → inspect → confirm → use.
• Every remote state has a named loading, empty, cached, unavailable, validation, permission, and success outcome.
• Community source is never executed on the website. Installation always follows source inspection and local validation.
• Motion is limited to 150-200ms hover/state feedback and skeleton loading, with reduced-motion fallbacks.
• Native dialogs or Mantine modals own focus, Escape, backdrop dismissal, and keyboard order.

Voice

Clear, dependable, and community-minded. Explain what remains usable during failures and provide one direct recovery action. Avoid playful language during moderation, destructive actions, or service failures.