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/globals.css
+29 -4
View File
@@ -1,14 +1,31 @@
@import "tailwindcss";
/* Brand palette (docs/brand): warm ink + bronze + paper. */
@theme {
--color-bronze: #a06a42;
--color-bronze-deep: #8a5836;
--color-paper: #f7f3ec;
--color-ink: #1a1a17;
--font-serif: Georgia, "Times New Roman", "Liberation Serif", ui-serif, serif;
}
/* Adaptive tokens (ink/paper flip for light/dark; bronze + paper are constant). */
:root {
--background: #ffffff;
--foreground: #0a0a0a;
--background: #f7f3ec; /* paper */
--foreground: #1a1a17; /* ink */
--muted: #6b6862;
--surface: #fbf8f2;
--border: #e4dccb;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
--background: #1a1a17; /* warm near-black */
--foreground: #f2eee6; /* warm off-white */
--muted: #9a968e;
--surface: #232019;
--border: #3a352c;
}
}
@@ -17,3 +34,11 @@ body {
color: var(--foreground);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Headings use the heritage serif register. */
h1,
h2,
h3,
.font-serif {
font-family: var(--font-serif);
}
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>
);
frontend/app/login/page.tsx
+2 -2
View File
@@ -62,9 +62,9 @@ export default function LoginPage() {
{loading ? "Signing in…" : "Sign in"}
</Button>
</form>
<p className="mt-4 text-sm text-neutral-600">
<p className="mt-4 text-sm text-[var(--muted)]">
No account?{" "}
<Link href="/register" className="underline">
<Link href="/register" className="text-bronze underline">
Create one
</Link>
</p>
frontend/app/page.tsx
+9 -7
View File
@@ -4,15 +4,17 @@ import { Button } from "@/components/ui/button";
export default function Home() {
return (
<div className="space-y-6">
<div className="space-y-2">
<h1 className="text-3xl font-bold">Provenance</h1>
<p className="text-neutral-600">
Trace where you come from — your family and your land — with every fact linked to a
source, on infrastructure you control.
<div className="space-y-8 py-4">
<div className="space-y-4">
<h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
Where it came from matters
</h1>
<p className="max-w-prose text-lg text-[var(--muted)]">
Trace where you come from — your family <span className="text-bronze">and</span> your
land — with every fact linked to a source, on infrastructure you control.
</p>
</div>
<div className="flex gap-3">
<div className="flex flex-wrap gap-3">
<Link href="/register">
<Button>Create an account</Button>
</Link>
frontend/app/register/page.tsx
+2 -2
View File
@@ -70,9 +70,9 @@ export default function RegisterPage() {
{loading ? "Creating…" : "Create account"}
</Button>
</form>
<p className="mt-4 text-sm text-neutral-600">
<p className="mt-4 text-sm text-[var(--muted)]">
Already have an account?{" "}
<Link href="/login" className="underline">
<Link href="/login" className="text-bronze underline">
Sign in
</Link>
</p>
frontend/app/trees/[id]/page.tsx
+4 -4
View File
@@ -52,11 +52,11 @@ export default function TreeDetailPage() {
}
}
if (!ready) return <p className="text-neutral-500">Loading…</p>;
if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;
return (
<div className="space-y-6">
<Link href="/trees" className="text-sm text-neutral-500 hover:underline">
<Link href="/trees" className="text-sm text-[var(--muted)] hover:underline">
← All trees
</Link>
@@ -76,14 +76,14 @@ export default function TreeDetailPage() {
<div>
<h2 className="mb-2 text-lg font-semibold">People</h2>
{persons.length === 0 ? (
<p className="text-neutral-500">No people yet.</p>
<p className="text-[var(--muted)]">No people yet.</p>
) : (
<ul className="space-y-2">
{persons.map((person) => (
<li key={person.id}>
<Card>
<CardContent className="p-4">
{person.primary_name ?? <span className="text-neutral-400">Unnamed</span>}
{person.primary_name ?? <span className="text-[var(--muted)]">Unnamed</span>}
</CardContent>
</Card>
</li>
frontend/app/trees/page.tsx
+4 -4
View File
@@ -47,7 +47,7 @@ export default function TreesPage() {
router.push("/login");
}
if (!ready) return <p className="text-neutral-500">Loading…</p>;
if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;
return (
<div className="space-y-6">
@@ -75,16 +75,16 @@ export default function TreesPage() {
</Card>
{trees.length === 0 ? (
<p className="text-neutral-500">No trees yet — create your first one above.</p>
<p className="text-[var(--muted)]">No trees yet — create your first one above.</p>
) : (
<ul className="space-y-2">
{trees.map((tree) => (
<li key={tree.id}>
<Link href={`/trees/${tree.id}`}>
<Card className="transition-colors hover:bg-neutral-50">
<Card className="transition-colors hover:border-bronze/50">
<CardContent className="flex items-center justify-between p-4">
<span className="font-medium">{tree.name}</span>
<span className="text-xs uppercase tracking-wide text-neutral-400">
<span className="text-xs uppercase tracking-wide text-bronze">
{tree.visibility}
</span>
</CardContent>