From b8f5c350453d31d42b777f9e0311df3c80b48a3d Mon Sep 17 00:00:00 2001 From: Justin Paul Date: Sat, 6 Jun 2026 11:49:58 -0400 Subject: [PATCH] Apply brand identity to the frontend (ink + bronze + paper) 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) Signed-off-by: Justin Paul --- frontend/app/globals.css | 33 ++++++++++++++++++++--- frontend/app/layout.tsx | 23 ++++++++++------ frontend/app/login/page.tsx | 4 +-- frontend/app/page.tsx | 16 ++++++----- frontend/app/register/page.tsx | 4 +-- frontend/app/trees/[id]/page.tsx | 8 +++--- frontend/app/trees/page.tsx | 8 +++--- frontend/components/ui/button.tsx | 10 ++++--- frontend/components/ui/card.tsx | 7 +++-- frontend/components/ui/input.tsx | 2 +- frontend/public/favicon.svg | 5 ++++ frontend/public/provenance-logo-plain.svg | 20 ++++++++++++++ frontend/public/provenance-mark.svg | 19 +++++++++++++ 13 files changed, 121 insertions(+), 38 deletions(-) create mode 100644 frontend/public/favicon.svg create mode 100644 frontend/public/provenance-logo-plain.svg create mode 100644 frontend/public/provenance-mark.svg diff --git a/frontend/app/globals.css b/frontend/app/globals.css index cc6da71..517decd 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -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); +} diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index a49acdb..6c97fc7 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -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 ( - -
+ +
- - Provenance + + {/* eslint-disable-next-line @next/next/no-img-element */} + Provenance -
-
{children}
+
{children}
+
+
+ where it came from matters +
+
); diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx index f6e3ec1..b79f6fb 100644 --- a/frontend/app/login/page.tsx +++ b/frontend/app/login/page.tsx @@ -62,9 +62,9 @@ export default function LoginPage() { {loading ? "Signing in…" : "Sign in"} -

+

No account?{" "} - + Create one

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index cf2db05..e30ed1b 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -4,15 +4,17 @@ import { Button } from "@/components/ui/button"; export default function Home() { return ( -
-
-

Provenance

-

- Trace where you come from — your family and your land — with every fact linked to a - source, on infrastructure you control. +

+
+

+ Where it came from matters +

+

+ Trace where you come from — your family and your + land — with every fact linked to a source, on infrastructure you control.

-
+
diff --git a/frontend/app/register/page.tsx b/frontend/app/register/page.tsx index a580d1d..fe67991 100644 --- a/frontend/app/register/page.tsx +++ b/frontend/app/register/page.tsx @@ -70,9 +70,9 @@ export default function RegisterPage() { {loading ? "Creating…" : "Create account"} -

+

Already have an account?{" "} - + Sign in

diff --git a/frontend/app/trees/[id]/page.tsx b/frontend/app/trees/[id]/page.tsx index 7723848..cf3f2db 100644 --- a/frontend/app/trees/[id]/page.tsx +++ b/frontend/app/trees/[id]/page.tsx @@ -52,11 +52,11 @@ export default function TreeDetailPage() { } } - if (!ready) return

Loading…

; + if (!ready) return

Loading…

; return (
- + ← All trees @@ -76,14 +76,14 @@ export default function TreeDetailPage() {

People

{persons.length === 0 ? ( -

No people yet.

+

No people yet.

) : (
    {persons.map((person) => (
  • - {person.primary_name ?? Unnamed} + {person.primary_name ?? Unnamed}
    • diff --git a/frontend/app/trees/page.tsx b/frontend/app/trees/page.tsx index ef22baa..691ad23 100644 --- a/frontend/app/trees/page.tsx +++ b/frontend/app/trees/page.tsx @@ -47,7 +47,7 @@ export default function TreesPage() { router.push("/login"); } - if (!ready) return

    Loading…

    ; + if (!ready) return

    Loading…

    ; return (
    @@ -75,16 +75,16 @@ export default function TreesPage() { {trees.length === 0 ? ( -

    No trees yet — create your first one above.

    +

    No trees yet — create your first one above.

    ) : (
      {trees.map((tree) => (
    • - + {tree.name} - + {tree.visibility} diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx index d00fdb9..6d9ee94 100644 --- a/frontend/components/ui/button.tsx +++ b/frontend/components/ui/button.tsx @@ -4,13 +4,15 @@ import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const buttonVariants = cva( - "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bronze focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { - default: "bg-neutral-900 text-white hover:bg-neutral-700", - outline: "border border-neutral-300 bg-transparent hover:bg-neutral-100", - ghost: "hover:bg-neutral-100", + // Bronze is the brand accent; paper reads cleanly on it. + default: "bg-bronze text-paper hover:bg-bronze-deep", + outline: + "border border-bronze text-bronze bg-transparent hover:bg-bronze hover:text-paper", + ghost: "text-[var(--foreground)] hover:bg-bronze/10", }, size: { default: "h-10 px-4 py-2", diff --git a/frontend/components/ui/card.tsx b/frontend/components/ui/card.tsx index e80f38f..3267028 100644 --- a/frontend/components/ui/card.tsx +++ b/frontend/components/ui/card.tsx @@ -5,7 +5,10 @@ import { cn } from "@/lib/utils"; export function Card({ className, ...props }: React.HTMLAttributes) { return (
      ); @@ -16,7 +19,7 @@ export function CardHeader({ className, ...props }: React.HTMLAttributes) { - return

      ; + return

      ; } export function CardContent({ className, ...props }: React.HTMLAttributes) { diff --git a/frontend/components/ui/input.tsx b/frontend/components/ui/input.tsx index ec680da..9a51283 100644 --- a/frontend/components/ui/input.tsx +++ b/frontend/components/ui/input.tsx @@ -7,7 +7,7 @@ export const Input = React.forwardRef +Provenance icon + + + diff --git a/frontend/public/provenance-logo-plain.svg b/frontend/public/provenance-logo-plain.svg new file mode 100644 index 0000000..820aefd --- /dev/null +++ b/frontend/public/provenance-logo-plain.svg @@ -0,0 +1,20 @@ + +Provenance + + + + + + + + + + + + + + + + + diff --git a/frontend/public/provenance-mark.svg b/frontend/public/provenance-mark.svg new file mode 100644 index 0000000..114a504 --- /dev/null +++ b/frontend/public/provenance-mark.svg @@ -0,0 +1,19 @@ + +Provenance mark + + + + + + + + + + + + + + + +