jeffemmett
/
nofi-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add handwritten sharpie fonts and casual wobble styling 

Swap clean monospace headings for Permanent Marker (sharpie) and
Caveat (handwriting) Google Fonts to match the irreverent anti-finance
tone. Add wobble rotations and scrawly underlines on section headers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-25 19:06:31 -08:00
parent 89ad2b901f
commit 0e1d128e0c
3 changed files with 61 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/globals.css
View File

@ -8,6 +8,8 @@
--color-zen: #f5f5dc; --color-zen: #f5f5dc;
--color-sloth: #c3b091; --color-sloth: #c3b091;
--font-family-mono: "Courier New", monospace; --font-family-mono: "Courier New", monospace;
--font-family-marker: var(--font-marker), "Permanent Marker", cursive;
--font-family-caveat: var(--font-caveat), "Caveat", cursive;
} }
@keyframes float-up { @keyframes float-up {
@ -54,3 +56,27 @@
animation-delay: 1s; animation-delay: 1s;
width: 0; width: 0;
} }
/* Casual wobble classes for that hand-drawn feel */
.wobble-1 { transform: rotate(-1.5deg); }
.wobble-2 { transform: rotate(0.8deg); }
.wobble-3 { transform: rotate(-0.5deg); }
.wobble-4 { transform: rotate(1.2deg); }
/* Scrawly underline for section headers */
.scrawl-underline {
position: relative;
display: inline-block;
}
.scrawl-underline::after {
content: '';
position: absolute;
left: -5%;
bottom: -4px;
width: 110%;
height: 3px;
background: var(--color-anti-green);
transform: rotate(-0.5deg) scaleX(0.95);
border-radius: 2px;
opacity: 0.6;
}

14
app/layout.tsx
View File

@ -1,6 +1,18 @@
import type { Metadata } from 'next' import type { Metadata } from 'next'
import { Permanent_Marker, Caveat } from 'next/font/google'
import './globals.css' import './globals.css'
const marker = Permanent_Marker({
weight: '400',
subsets: ['latin'],
variable: '--font-marker',
})
const caveat = Caveat({
subsets: ['latin'],
variable: '--font-caveat',
})
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'NoFi | No Finance. No Money. No Tokens. Just Do Less.', title: 'NoFi | No Finance. No Money. No Tokens. Just Do Less.',
description: 'The revolutionary movement of doing absolutely nothing with your money. Because you don\'t have any. And that\'s the point.', description: 'The revolutionary movement of doing absolutely nothing with your money. Because you don\'t have any. And that\'s the point.',
@ -20,7 +32,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body className="bg-void text-zen font-mono antialiased"> <body className={`bg-void text-zen font-mono antialiased ${marker.variable} ${caveat.variable}`}>
{children} {children}
</body> </body>
</html> </html>

44
app/page.tsx
View File

@ -8,17 +8,17 @@ export default function Home() {
<p className="text-sloth text-sm tracking-[0.5em] uppercase mb-8 animate-slow-pulse"> <p className="text-sloth text-sm tracking-[0.5em] uppercase mb-8 animate-slow-pulse">
a movement against movements a movement against movements
</p> </p>
<h1 className="text-7xl md:text-9xl font-bold mb-6 tracking-tighter"> <h1 className="font-marker text-7xl md:text-9xl font-bold mb-6 tracking-tighter wobble-1">
<span className="text-anti-green">No</span>Fi <span className="text-anti-green">No</span>Fi
</h1> </h1>
<p className="text-2xl md:text-4xl text-zen/70 mb-4"> <p className="font-caveat text-3xl md:text-5xl text-zen/70 mb-4">
No Finance. No Money. No Tokens. No Finance. No Money. No Tokens.
</p> </p>
<p className="text-xl md:text-2xl text-sloth mb-16"> <p className="font-caveat text-2xl md:text-3xl text-sloth mb-16">
Just Do Less. Just Do Less.
</p> </p>
<div className="inline-block border border-zen/20 px-8 py-4 hover:border-anti-green/50 transition-all duration-[3000ms]"> <div className="inline-block border border-zen/20 px-8 py-4 hover:border-anti-green/50 transition-all duration-[3000ms] wobble-3">
<span className="text-zen/50 text-sm tracking-widest uppercase"> <span className="font-caveat text-zen/50 text-lg">
Don&apos;t click anything. That&apos;s the spirit. Don&apos;t click anything. That&apos;s the spirit.
</span> </span>
</div> </div>
@ -31,7 +31,7 @@ export default function Home() {
{/* Anti-Whitepaper */} {/* Anti-Whitepaper */}
<section className="py-32 px-4 bg-nothing"> <section className="py-32 px-4 bg-nothing">
<div className="max-w-3xl mx-auto"> <div className="max-w-3xl mx-auto">
<h2 className="text-sm tracking-[0.5em] uppercase text-anti-green mb-16 text-center"> <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-2">
The Anti-Whitepaper The Anti-Whitepaper
</h2> </h2>
<div className="space-y-12 text-lg leading-relaxed text-zen/60"> <div className="space-y-12 text-lg leading-relaxed text-zen/60">
@ -43,7 +43,7 @@ export default function Home() {
<p> <p>
It won&apos;t. So we stopped trying. It won&apos;t. So we stopped trying.
</p> </p>
<p className="text-zen/80 text-xl border-l-2 border-anti-green pl-6"> <p className="font-caveat text-zen/80 text-2xl border-l-2 border-anti-green pl-6 wobble-1">
NoFi is the radical proposition that the best financial system NoFi is the radical proposition that the best financial system
is no financial system. The best token is no token. is no financial system. The best token is no token.
The best thing to do with your money is to not have any. The best thing to do with your money is to not have any.
@ -60,7 +60,7 @@ export default function Home() {
{/* Features (Anti-Features) */} {/* Features (Anti-Features) */}
<section className="py-32 px-4 bg-less"> <section className="py-32 px-4 bg-less">
<div className="max-w-5xl mx-auto"> <div className="max-w-5xl mx-auto">
<h2 className="text-sm tracking-[0.5em] uppercase text-anti-green mb-16 text-center"> <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-3">
Features We Don&apos;t Have Features We Don&apos;t Have
</h2> </h2>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
@ -96,9 +96,9 @@ export default function Home() {
desc: "We have no team, no advisors, no investors. We barely have a website. Look at us underachieve." desc: "We have no team, no advisors, no investors. We barely have a website. Look at us underachieve."
} }
].map((f, i) => ( ].map((f, i) => (
<div key={i} className="border border-zen/10 p-8 hover:border-anti-green/30 transition-all duration-1000"> <div key={i} className={`border border-zen/10 p-8 hover:border-anti-green/30 transition-all duration-1000 wobble-${(i % 4) + 1}`}>
<div className="text-4xl text-anti-green mb-4 font-bold">{f.icon}</div> <div className="font-marker text-4xl text-anti-green mb-4 font-bold">{f.icon}</div>
<h3 className="text-lg mb-3 text-zen/80">{f.title}</h3> <h3 className="font-marker text-lg mb-3 text-zen/80">{f.title}</h3>
<p className="text-sm text-zen/40 leading-relaxed">{f.desc}</p> <p className="text-sm text-zen/40 leading-relaxed">{f.desc}</p>
</div> </div>
))} ))}
@ -109,11 +109,11 @@ export default function Home() {
{/* Tokenomics */} {/* Tokenomics */}
<section className="py-32 px-4 bg-nothing"> <section className="py-32 px-4 bg-nothing">
<div className="max-w-3xl mx-auto text-center"> <div className="max-w-3xl mx-auto text-center">
<h2 className="text-sm tracking-[0.5em] uppercase text-anti-green mb-16"> <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 scrawl-underline mx-auto w-fit wobble-4">
Tokenomics Tokenomics
</h2> </h2>
<div className="space-y-8"> <div className="space-y-8">
<div className="text-8xl font-bold text-zen/10">$0</div> <div className="font-marker text-8xl font-bold text-zen/10">$0</div>
<p className="text-xl text-zen/60">Total Supply: 0</p> <p className="text-xl text-zen/60">Total Supply: 0</p>
<p className="text-xl text-zen/60">Circulating Supply: 0</p> <p className="text-xl text-zen/60">Circulating Supply: 0</p>
<p className="text-xl text-zen/60">Market Cap: 0</p> <p className="text-xl text-zen/60">Market Cap: 0</p>
@ -128,7 +128,7 @@ export default function Home() {
{/* Comparisons */} {/* Comparisons */}
<section className="py-32 px-4 bg-less"> <section className="py-32 px-4 bg-less">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<h2 className="text-sm tracking-[0.5em] uppercase text-anti-green mb-16 text-center"> <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-1">
NoFi vs. Everything Else NoFi vs. Everything Else
</h2> </h2>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
@ -194,10 +194,10 @@ export default function Home() {
{/* Manifesto */} {/* Manifesto */}
<section className="py-32 px-4 bg-nothing"> <section className="py-32 px-4 bg-nothing">
<div className="max-w-3xl mx-auto"> <div className="max-w-3xl mx-auto">
<h2 className="text-sm tracking-[0.5em] uppercase text-anti-green mb-16 text-center"> <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-2">
The NoFi Manifesto The NoFi Manifesto
</h2> </h2>
<div className="space-y-6 text-center text-xl leading-relaxed text-zen/70"> <div className="space-y-6 text-center text-2xl leading-relaxed text-zen/70 font-caveat">
<p>We believe in doing less.</p> <p>We believe in doing less.</p>
<p>We believe the best investment is a nap.</p> <p>We believe the best investment is a nap.</p>
<p>We believe every problem caused by money<br/>can be solved by less money.</p> <p>We believe every problem caused by money<br/>can be solved by less money.</p>
@ -212,7 +212,7 @@ export default function Home() {
{/* FAQ */} {/* FAQ */}
<section className="py-32 px-4 bg-less"> <section className="py-32 px-4 bg-less">
<div className="max-w-3xl mx-auto"> <div className="max-w-3xl mx-auto">
<h2 className="text-sm tracking-[0.5em] uppercase text-anti-green mb-16 text-center"> <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-3">
Frequently Unasked Questions Frequently Unasked Questions
</h2> </h2>
<div className="space-y-12"> <div className="space-y-12">
@ -247,8 +247,8 @@ export default function Home() {
} }
].map((faq, i) => ( ].map((faq, i) => (
<div key={i}> <div key={i}>
<h3 className="text-zen/80 mb-3">{faq.q}</h3> <h3 className="font-marker text-zen/80 mb-3">{faq.q}</h3>
<p className="text-zen/40 text-sm leading-relaxed pl-4 border-l border-zen/10">{faq.a}</p> <p className="font-caveat text-zen/40 text-lg leading-relaxed pl-4 border-l border-zen/10">{faq.a}</p>
</div> </div>
))} ))}
</div> </div>
@ -258,15 +258,15 @@ export default function Home() {
{/* CTA */} {/* CTA */}
<section className="py-32 px-4 bg-void"> <section className="py-32 px-4 bg-void">
<div className="max-w-2xl mx-auto text-center"> <div className="max-w-2xl mx-auto text-center">
<h2 className="text-4xl md:text-6xl font-bold mb-8"> <h2 className="font-marker text-4xl md:text-6xl font-bold mb-8 wobble-4">
Ready to do <span className="text-anti-green">nothing</span>? Ready to do <span className="text-anti-green">nothing</span>?
</h2> </h2>
<p className="text-zen/40 mb-12"> <p className="text-zen/40 mb-12">
You already are. Congratulations. You&apos;ve reached the end of the website You already are. Congratulations. You&apos;ve reached the end of the website
and accomplished exactly as much as we intended. and accomplished exactly as much as we intended.
</p> </p>
<div className="inline-block border border-zen/20 px-12 py-6 cursor-not-allowed opacity-50"> <div className="inline-block border border-zen/20 px-12 py-6 cursor-not-allowed opacity-50 wobble-2">
<span className="text-zen/30 text-sm tracking-widest uppercase"> <span className="font-caveat text-zen/30 text-lg tracking-widest">
Button Intentionally Disabled Button Intentionally Disabled
</span> </span>
</div> </div>