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-sloth: #c3b091;
--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 {
@ -54,3 +56,27 @@
animation-delay: 1s;
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 { Permanent_Marker, Caveat } from 'next/font/google'
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 = {
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.',
@ -20,7 +32,7 @@ export default function RootLayout({
}) {
return (
<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}
</body>
</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">
a movement against movements
</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
</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.
</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.
</p>
<div className="inline-block border border-zen/20 px-8 py-4 hover:border-anti-green/50 transition-all duration-[3000ms]">
<span className="text-zen/50 text-sm tracking-widest uppercase">
<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="font-caveat text-zen/50 text-lg">
Don&apos;t click anything. That&apos;s the spirit.
</span>
</div>
@ -31,7 +31,7 @@ export default function Home() {
{/* Anti-Whitepaper */}
<section className="py-32 px-4 bg-nothing">
<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
</h2>
<div className="space-y-12 text-lg leading-relaxed text-zen/60">
@ -43,7 +43,7 @@ export default function Home() {
<p>
It won&apos;t. So we stopped trying.
</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
is no financial system. The best token is no token.
The best thing to do with your money is to not have any.
@ -60,7 +60,7 @@ export default function Home() {
{/* Features (Anti-Features) */}
<section className="py-32 px-4 bg-less">
<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
</h2>
<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."
}
].map((f, i) => (
<div key={i} className="border border-zen/10 p-8 hover:border-anti-green/30 transition-all duration-1000">
<div className="text-4xl text-anti-green mb-4 font-bold">{f.icon}</div>
<h3 className="text-lg mb-3 text-zen/80">{f.title}</h3>
<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="font-marker text-4xl text-anti-green mb-4 font-bold">{f.icon}</div>
<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>
</div>
))}
@ -109,11 +109,11 @@ export default function Home() {
{/* Tokenomics */}
<section className="py-32 px-4 bg-nothing">
<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
</h2>
<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">Circulating Supply: 0</p>
<p className="text-xl text-zen/60">Market Cap: 0</p>
@ -128,7 +128,7 @@ export default function Home() {
{/* Comparisons */}
<section className="py-32 px-4 bg-less">
<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
</h2>
<div className="overflow-x-auto">
@ -194,10 +194,10 @@ export default function Home() {
{/* Manifesto */}
<section className="py-32 px-4 bg-nothing">
<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
</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 the best investment is a nap.</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 */}
<section className="py-32 px-4 bg-less">
<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
</h2>
<div className="space-y-12">
@ -247,8 +247,8 @@ export default function Home() {
}
].map((faq, i) => (
<div key={i}>
<h3 className="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>
<h3 className="font-marker text-zen/80 mb-3">{faq.q}</h3>
<p className="font-caveat text-zen/40 text-lg leading-relaxed pl-4 border-l border-zen/10">{faq.a}</p>
</div>
))}
</div>
@ -258,15 +258,15 @@ export default function Home() {
{/* CTA */}
<section className="py-32 px-4 bg-void">
<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>?
</h2>
<p className="text-zen/40 mb-12">
You already are. Congratulations. You&apos;ve reached the end of the website
and accomplished exactly as much as we intended.
</p>
<div className="inline-block border border-zen/20 px-12 py-6 cursor-not-allowed opacity-50">
<span className="text-zen/30 text-sm tracking-widest uppercase">
<div className="inline-block border border-zen/20 px-12 py-6 cursor-not-allowed opacity-50 wobble-2">
<span className="font-caveat text-zen/30 text-lg tracking-widest">
Button Intentionally Disabled
</span>
</div>