justin/provenance
1
0
Fork 0
Code Issues 173 Pull Requests Actions Packages Projects Releases Wiki Activity

Apply brand identity to the frontend (ink + bronze + paper)

Browse Source 
Replaces the default black/gray with the docs/brand palette: warm ink text on paper surfaces, bronze accent, serif headings and the Origin-mark wordmark in the header, favicon, and the 'where it came from matters' tagline. Light/dark adapt via CSS vars (ink/paper flip); bronze and paper are constant. Tailwind v4 @theme exposes bronze/paper/ink tokens and the serif stack. Buttons/inputs/cards restyled to match; brand SVGs vendored into public/.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Justin Paul <justin@jpaul.me>
This commit is contained in:
Justin Paul
2026-06-06 11:49:58 -04:00
parent 9e6cf6e5b7
commit b8f5c35045
13 changed files with 121 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/layout.tsx
+15 -8
View File
@@ -6,28 +6,35 @@ import "./globals.css";
export const metadata: Metadata = {
title: "Provenance",
description: "Where it came from matters — family and land, every fact sourced.",
icons: { icon: "/favicon.svg" },
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<header className="border-b border-neutral-200">
<body className="flex min-h-screen flex-col">
<header className="border-b border-[var(--border)]">
<div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
<Link href="/" className="font-semibold">
Provenance
<Link href="/" className="flex items-center" aria-label="Provenance — home">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="/provenance-logo-plain.svg" alt="Provenance" className="h-7 w-auto" />
</Link>
<nav className="flex gap-4 text-sm">
<Link href="/trees" className="hover:underline">
<nav className="flex gap-5 text-sm">
<Link href="/trees" className="text-[var(--muted)] transition-colors hover:text-bronze">
Trees
</Link>
<Link href="/login" className="hover:underline">
<Link href="/login" className="text-[var(--muted)] transition-colors hover:text-bronze">
Sign in
</Link>
</nav>
</div>
</header>
<main className="mx-auto max-w-3xl px-4 py-8">{children}</main>
<main className="mx-auto w-full max-w-3xl flex-1 px-4 py-10">{children}</main>
<footer className="border-t border-[var(--border)]">
<div className="mx-auto max-w-3xl px-4 py-6 text-sm italic text-[var(--muted)]">
where it came from matters
</div>
</footer>
</body>
</html>
);