Customization Checklist

Complete this 30-45 minute checklist to customize Fabrk before launch. Covers visual identity, content, configuration, and quality assurance.

Default: Green CRT terminal

Action: Pick a theme that matches your brand aesthetic.

Options:

• Professional SaaS → blue (cool, trustworthy)
• Developer tools → green (classic terminal)
• Creative apps → purple or gameboy (playful)
• Warm/nostalgic → amber (cozy, vintage)
• Minimalist → bw or gbpocket (clean, focused)

How to change:

1. 1. Edit src/design-system/providers/ThemeProvider.tsx:82
2. 2. Change defaultColorTheme = 'green' to your choice
3. 3. Restart dev server

Documentation: Theme Guide

Default: Green primary color

Action: Replace with your company's brand colors.

Steps:

1. 1. Convert your brand color to OKLCH → oklch.com
2. 2. Edit src/app/globals.css:root block (~line 15)
3. 3. Update --primary and --primary-foreground tokens
4. 4. Run npm run scan:hex to verify

Documentation: Customization Guide

Default: Fabrk logo and branding

Action: Replace with your company logo and favicon.

Logo locations:

• /public/logo.svg - Main logo
• /public/logo-light.svg - Light theme variant
• /public/og-image.png - Social media preview (1200x630px)

Favicon locations:

• /public/favicon.ico - Browser tab icon
• /public/icon.svg - Modern SVG icon
• /public/apple-touch-icon.png - iOS home screen (180x180px)

Location: src/app/layout.tsx

Action: Set your product name, description, and SEO metadata.

SEO best practices:

• Title: 50-60 characters
• Description: 150-160 characters
• Include primary keywords naturally
• Match OpenGraph and Twitter metadata

Location: src/app/(public)/page.tsx

Action: Replace with your product's value proposition.

Writing tips:

• Focus on benefits, not features
• Use active voice ("Ship faster" not "Faster shipping is enabled")
• Keep hero headline under 10 words
• Include clear call-to-action

Location: Vercel Dashboard → Settings → Environment Variables

Required variables:

• DATABASE_URL - Database connection
• NEXTAUTH_SECRET - Auth secret (generate with: openssl rand -base64 32)
• NEXTAUTH_URL - Your production domain
• RESEND_API_KEY - Email API key
• STRIPE_SECRET_KEY or POLAR_ACCESS_TOKEN - Payment provider

Steps:

1. 1. Go to Vercel Dashboard → Project → Settings → Domains
2. 2. Add your domain: yourproduct.com
3. 3. Update DNS records at your registrar
4. 4. Wait for DNS propagation (5-60 min)

Choose one:

• Option A: Stripe - See Stripe Integration
• Option B: Polar - See Polar Integration
• Option C: Lemonsqueezy - See Lemonsqueezy Integration

Steps:

1. 1. Open site in Chrome
2. 2. Open DevTools (F12) → Lighthouse tab
3. 3. Run "Accessibility" audit
4. 4. Target score: 90+

Common issues:

• Missing aria-label on icon-only buttons
• Insufficient color contrast (4.5:1 for text)
• Missing form labels

Test checklist:

• [ ] Navigation menu opens/closes correctly
• [ ] Forms are usable (inputs large enough to tap)
• [ ] Text is readable (minimum 14px font size)
• [ ] Buttons are tappable (minimum 44px touch targets)
• [ ] No horizontal scrolling

Command:

npm run scan:hex

Expected output:

No hardcoded colors found
Design system compliance verified

Steps:

1. 1. Build production version: npm run build
2. 2. Start production server: npm start
3. 3. Run Lighthouse performance audit

Target scores:

• Performance: 90+
• Accessibility: 90+
• Best Practices: 95+
• SEO: 90+

• [ ] Color theme selected and brand colors updated
• [ ] Logo and favicon replaced
• [ ] Site metadata (title, description, OG image) updated
• [ ] Landing page copy reflects your product
• [ ] Environment variables configured in Vercel
• [ ] Custom domain connected and DNS configured
• [ ] Payment provider configured and tested
• [ ] Accessibility audit passed (90+ score)
• [ ] Mobile responsiveness tested
• [ ] Design system compliance verified
• [ ] Performance audit passed (90+ score)