designslife/WebForm-mw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visual identity: Field Almanac — Fraunces+DM Sans, OKLCH cream/leaf/clay palette, paper texture, hand-drawn stage icons, draft auto-save, stage progress dots

Browse Source
This commit is contained in:
Joel Brock
2026-05-09 21:48:45 -07:00
parent dcdf315244
commit 656bf7fd0a
9 changed files with 776 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/layout.tsx
View File

@@ -1,22 +1,36 @@
import type { Metadata } from "next";
import { Inter, Source_Serif_4 } from "next/font/google";
import { Fraunces, DM_Sans } from "next/font/google";
import "./globals.css";
const inter = Inter({
variable: "--font-sans",
/**
* Display face: Fraunces. A variable serif with strong optical interest —
* elegant in long descenders and bracketed serifs, reads like a field guide
* or almanac. We use the SOFT axis to round the inktraps slightly so it
* doesn't read as "old print" but as "warm modern editorial."
*/
const display = Fraunces({
variable: "--font-display",
subsets: ["latin"],
axes: ["SOFT", "opsz"],
display: "swap",
});
const serif = Source_Serif_4({
variable: "--font-serif",
/**
* Body face: DM Sans. A humanist geometric sans with a slightly soft feel —
* legible at small sizes for forms, doesn't read as cold/corporate the way
* Inter or Helvetica does.
*/
const body = DM_Sans({
variable: "--font-body",
subsets: ["latin"],
display: "swap",
});
export const metadata: Metadata = {
title: "Co-op Check-in · Food Co-op Initiative",
description: "Update your co-op's progress through the FCI organizing framework.",
description:
"Update your co-op's progress through the FCI organizing framework. A monthly check-in for food co-ops in development.",
robots: { index: false, follow: false }, // Form pages are tokenized; not for crawlers.
};
export default function RootLayout({
@@ -27,9 +41,11 @@ export default function RootLayout({
return (
<html
lang="en"
className={`${inter.variable} ${serif.variable} h-full antialiased`}
className={`${display.variable} ${body.variable} h-full antialiased`}
>
<body className="min-h-full flex flex-col font-sans">{children}</body>
<body className="min-h-full flex flex-col font-body bg-paper text-ink">
{children}
</body>
</html>
);
}