Request
The login page's animated backdrop, icon and wordmark give trackslash a brand feel. Carry that feel through to the rest of the site: audit fonts, colours and design on every page so they follow the login page's animation and colours.
Audit findings
- Brand mark missing in the app. The sidebar, mobile app bar and legal header show a plain
text-sm font-semibold "trackslash" with no icon. The login wordmark uses display tracking; nothing else does.
- No brand motion or colour outside login/signup. The app shell and legal pages are flat
slate-50. The OAuth consent and error pages are plain cards.
- Inconsistent
<head>s. Legal and OAuth pages don't link the SVG icon, apple-touch icon or theme colour.
- Typography drift. Page titles use
tracking-normal, while the brand wordmark uses display tracking. Markdown headings are bold (700), while every other heading in the app is semibold.
- Colour drift.
- Three primary buttons darken on hover (
indigo-700); the other 52 lighten (indigo-500, as on login).
- Error alerts and destructive actions use
red on login, signup, the account pages and the account menu, but rose everywhere else.
- Primary buttons lack the login button's indigo glow.
- Bug: the OAuth error page's
alert-triangle icon doesn't render, which leaves a blank gap.
- Unbranded error responses. Full-page loads of a missing or forbidden project/issue return Go's plain-text
not found instead of the branded error page.
Acceptance
- One shared brand backdrop. It stays at full strength on login, signup and OAuth, and runs as a calmer ambient version behind the app and the legal pages. It's CSP-safe, animates only
transform/opacity, and every animation is gated on prefers-reduced-motion: no-preference.
- Every page shows the icon and wordmark and shares one set of head links.
- Page navigation shows a brand-gradient progress bar.
- Headings, buttons and alerts follow one set of tokens in light and dark mode.
DESIGN_CONTEXT.md, COMPONENTS.md and AGENTS.md describe the new brand rules.
