mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): apply Justine ink & parchment design system

Browse Source 
- Map Justine tokens to shadcn CSS variables (--vibn-* aliases)
- Switch fonts to Inter + Lora via next/font (IBM Plex Mono for code)
- Base typography: body Inter, h1–h3 Lora; marketing hero + wordmark serif
- Project shell and global chrome use semantic colors
- Replace Outfit/Newsreader references across TSX inline styles

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-04-01 21:03:40 -07:00
parent 06238f958a
commit bada63452f
33 changed files with 300 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/layout.tsx
View File

@@ -1,19 +1,19 @@
import type { Metadata } from "next";
import { Outfit, Newsreader, IBM_Plex_Mono } from "next/font/google";
import { Inter, Lora, IBM_Plex_Mono } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/sonner";
import { Providers } from "@/app/components/Providers";
const outfit = Outfit({
variable: "--font-outfit",
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
weight: ["400", "500", "600", "700"],
});
const newsreader = Newsreader({
variable: "--font-newsreader",
const lora = Lora({
variable: "--font-lora",
subsets: ["latin"],
weight: ["400", "500"],
weight: ["400", "500", "600", "700"],
style: ["normal", "italic"],
});
@@ -34,7 +34,7 @@ export const metadata: Metadata = {
},
other: {
"mobile-web-app-capable": "yes",
"msapplication-TileColor": "#1a1a1a",
"msapplication-TileColor": "#1a1510",
},
};
@@ -47,12 +47,12 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#1a1a1a" />
<meta name="theme-color" content="#1a1510" />
<link rel="apple-touch-icon" href="/vibn-logo-circle.png" />
<link rel="manifest" href="/manifest.json" />
</head>
<body
className={`${outfit.variable} ${newsreader.variable} ${ibmPlexMono.variable} antialiased`}
className={`${inter.variable} ${lora.variable} ${ibmPlexMono.variable} antialiased`}
>
<Providers>
{children}
@@ -69,4 +69,3 @@ export default function RootLayout({
</html>
);
}