First Customization

Transform Fast Unicorn into your own branded application before you start adding new features.

This first pass gives you quick wins through config, content, messages, and assets so the project already feels like your product without forcing you to touch lower-level architecture too early.

The purpose of this stage is not to rebuild the template. It is to make the product feel like yours as early as possible while keeping the architecture stable.

What you'll customize

This first pass focuses on the most visible and lowest-risk changes.

Start with these files

• src/config/site.ts: Update the product name, description, and brand metadata.
• content/landing/en.json: Update the marketing content for the English locale.
• content/landing/es.json: Update the marketing content for the Spanish locale.
• content/landing/cn.json: Update the marketing content for the Chinese locale.
• messages/en/*.json: Update the localized UI labels for the English locale.
• messages/es/*.json: Update the localized UI labels for the Spanish locale.
• messages/cn/*.json: Update the localized UI labels for the Chinese locale.
• .env.example: Update the environment variables for the project.

Step 1: Set your brand identity

Update the core product metadata first so the rest of the customization work has a stable foundation.

This gives every later change a consistent base for naming, metadata, email defaults, and visual assets.

export const siteConfig = {
name: "Your Product Name",
description: "Your product positioning for SEO and metadata",
email: "hello@yourdomain.com",
resendEmail: "Your Product <noreply@yourdomain.com>",
logos: {
  logo: "/logos/logo.svg",
  textLogo: "/logos/text-logo.svg",
  textLogoWhite: "/logos/text-logo-white.svg",
  logoForSidebar: "/logos/sidebar-logo.svg",
  error404: "/errors/404.svg",
},
urlLogoEmail: "https://yourdomain.com/logos/logo.png",
}

Update these values

• Product name
• Description
• Email
• Resend email
• Logo paths (logo, textLogo, textLogoWhite, logoForSidebar, error404)
• Email logo URL

Update the environment variables

• .env.example: Update the environment variables for the project.

Step 2: Replace visible landing content

Move into the landing content once the product identity is defined.

Marketing content lives in locale-specific JSON files under content/landing/, not in a TypeScript config. Each file (e.g. en.json, es.json, cn.json) is loaded via src/content/loaders.ts and validated with Zod schemas defined in src/content/schemas.ts.

At this point, the goal is not perfection. The goal is to replace the most visible placeholder content so the app stops feeling generic.

{
"hero": {
  "title": "Your core promise",
  "description": "Explain what your product does and why it matters."
},
"testimonials": [...],
"faq": [...],
"pricing": [...],
"cta": {
  "title": "Your next action",
  "description": "Guide users toward signup, demo, or contact."
},
"footerLinks": [...]
}

Content areas to replace

• Hero messaging
• Testimonials
• FAQ
• Pricing
• CTA
• Footer links

Step 3: Replace assets

Swap placeholders in public/ so the interface stops feeling like a starter project.

Step 4: Update localized copy

Review your message files so they stay aligned with the config values you just changed.

Review these locale directories

• messages/en/*.json (system.json, navbar.json, dashboard.json, auth.json)
• messages/es/*.json (system.json, navbar.json, dashboard.json, auth.json)
• messages/cn/*.json (system.json, navbar.json, dashboard.json, auth.json)

Step 5: Review integration defaults

Confirm the default assumptions match your real product before you move into feature work.

Integration behavior is controlled through environment variables in src/env.js, not through a separate config file. Review your .env to make sure the values match your intended setup.

Validate these assumptions

• Auth provider keys in .env
• Stripe keys and checkout mode in .env
• Resend API key and sender in .env
• Environment validation schema in src/env.js

Checklist before feature work

Use this list to make sure the boilerplate already feels like your product before new feature development starts.

Recommended order

1. Update src/config/site.ts with product identity and brand metadata.
2. Replace marketing content in content/landing/*.json for each locale.
3. Swap placeholder assets in public/logos, public/hero, public/characteristics, public/testimonials, public/errors, and public/auth.
4. Review all locale message files under messages/<locale>/*.json.
5. Confirm integration defaults in your .env and src/env.js.
6. Only then move into feature work.

Because Fast Unicorn is structured so the first layer of customization happens through config, messages, and assets, you can make the product unmistakably yours while keeping the architecture stable.

That means you gain clarity first. Then you gain speed. Then you decide what deeper product work actually needs custom implementation.

Where to go next

Once the identity, copy, and integration defaults are in place, it becomes much easier to decide what should be built next.