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/components/ui/button.tsx
+6 -4
View File
@@ -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",
frontend/components/ui/card.tsx
+5 -2
View File
@@ -5,7 +5,10 @@ import { cn } from "@/lib/utils";
export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn("rounded-lg border border-neutral-200 bg-white/50 shadow-sm", className)}
className={cn(
"rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-sm",
className,
)}
{...props}
/>
);
@@ -16,7 +19,7 @@ export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDiv
}
export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
return <h3 className={cn("text-lg font-semibold", className)} {...props} />;
return <h3 className={cn("font-serif text-lg font-semibold", className)} {...props} />;
}
export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
frontend/components/ui/input.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttribute
<input
ref={ref}
className={cn(
"flex h-10 w-full rounded-md border border-neutral-300 bg-transparent px-3 py-2 text-sm placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 disabled:opacity-50",
"flex h-10 w-full rounded-md border border-[var(--border)] bg-[var(--surface)] px-3 py-2 text-sm placeholder:text-[var(--muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bronze disabled:opacity-50",
className,
)}
{...props}