.gitignore

@@ -43,5 +43,16 @@ next-env.d.ts
 *.md
 !README.md
 
+# hidden files (allow some, ignore others)
+.**
+!/.storybook
+!/.yarn
+!/yarnrc.yml
+!/.claude
+!/.vscode
+!/.gitattributes
+!/.gitignore
+!/biome.json
+
 *storybook.log
 storybook-static

.storybook/preview.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import type { Preview } from '@storybook/nextjs-vite'
+import { fraunces, publicSans } from '../src/shared/lib'
+import '../app/globals.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className={`${fraunces.variable} ${publicSans.variable}`}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default preview

app/layout.tsx

@@ -1,24 +1,7 @@
 import type { Metadata } from 'next'
-import { Fraunces, Public_Sans } from 'next/font/google'
+import { fraunces, publicSans } from '$shared/lib'
 import './globals.css'
 
-/**
- * Heading font — variable axes for brutalist variation settings
- */
-const fraunces = Fraunces({
-  subsets: ['latin'],
-  variable: '--font-fraunces',
-  axes: ['opsz', 'SOFT', 'WONK'],
-})
-
-/**
- * Body font
- */
-const publicSans = Public_Sans({
-  subsets: ['latin'],
-  variable: '--font-public-sans',
-})
-
 export const metadata: Metadata = {
   title: 'Portfolio',
   description: 'Portfolio',

src/shared/lib/fonts.ts

@@ -0,0 +1,18 @@
+import { Fraunces, Public_Sans } from 'next/font/google'
+
+/**
+ * Heading font — variable axes for brutalist variation settings
+ */
+export const fraunces = Fraunces({
+  subsets: ['latin'],
+  variable: '--font-fraunces',
+  axes: ['opsz', 'SOFT', 'WONK'],
+})
+
+/**
+ * Body font
+ */
+export const publicSans = Public_Sans({
+  subsets: ['latin'],
+  variable: '--font-public-sans',
+})

src/shared/lib/index.ts

@@ -1,2 +1,3 @@
 export { cn } from './cn'
 export type { ClassValue } from 'clsx'
+export * from './fonts'

src/shared/styles/theme.css

@@ -80,6 +80,9 @@
 }
 
 @theme inline {
+  --font-heading: var(--font-fraunces);
+  --font-body: var(--font-public-sans);
+
   --color-ochre-clay: var(--ochre-clay);
   --color-slate-indigo: var(--slate-indigo);
   --color-burnt-oxide: var(--burnt-oxide);