Add contact relay and DMCA workflow

docs/DESIGN_SYSTEM.md

@@ -31,6 +31,50 @@ cannot render, `src/error.html` provides a dependency-free SHD fallback surface.
 Error controls retain square geometry, focus-visible treatment, pressed motion,
 plain-language labels, and stacked mobile recovery actions.
 
+### Contact relay and legal requests
+
+Public support uses the SHD Contact Relay surface: a broad transmission form
+paired with a compact destination guide. Two-to-six destinations use the shared
+segmented-choice pattern. Signed-in identity details may be prefilled, but the
+public form remains available to people who cannot sign in. Discord community
+access is a distinct provider-colored card; it supplements rather than replaces
+the durable contact channel.
+
+The Contact hero explicitly resets the global site-header height: semantic page
+`header` elements must use content-driven height and spacing rather than inherit
+the 76-pixel navigation-shell constraint. Its title, description, and Discord
+card align within a minimum 230-pixel desktop band before the form grid begins.
+The Contact page itself remains content-height-driven so high-resolution browser
+zoom does not multiply a viewport minimum into a large empty region above the
+footer.
+
+The application frame is a full-viewport vertical flex stack. The shared footer
+uses automatic top margin, so it rests against the bottom edge on short routes
+and follows normal document flow after longer content. Individual pages must
+not add spacer heights solely to position the footer. The frame compensates for
+`--shd-display-scale` when calculating its viewport minimum so high-resolution
+browser zoom does not push a short-page footer below the visible edge.
+
+Community access in the shared footer uses a compact Discord-branded action
+with the official symbol, provider blue surface, explicit external-link text,
+and visible hover, focus, and pressed feedback. Keep provider branding separate
+from the orange links reserved for SHD navigation and legal resources. Support
+and legal links form a compact horizontal rail that may wrap at intermediate
+widths and becomes a two-column touch-friendly grid on narrow mobile screens.
+
+Contact notifications use the mandatory ISAC visual identity because they are
+operational inbound messages. The notification carries a concise preview and a
+specific action to an authorization-checked full record. Full messages never
+appear in URLs. Copyright requests add a yellow legal-detail subpanel, explicit
+attestations, electronic signature, and a direct policy link. Do not visually
+present a submission as a legal determination.
+
+The DMCA policy reuses the legal-document/index layout. Copyright and takedown
+links must remain visible in the global footer alongside Contact Us. On mobile,
+contact columns stack, destination segments become full-width 44-pixel rows,
+attestations remain readable, and reply/recovery actions occupy the available
+width.
+
 ## Tokens
 
 The canonical tokens live in `src/app.css` under `:root`.