Complete guide to customizing SpaceZero's design tokens, components, and configuration for your brand identity.
SpaceZero is designed to be fully customizable with minimal effort.
The single source of truth — change here, updates everywhere:
:root {
/* Brand Colors */
--action: #8b5cf6; /* Primary brand color */
--surface: #0f172a; /* Page background */
--layer: #1e293b; /* Card/modal background */
--codeblock: #020617; /* Code blocks */
/* Text Colors */
--regular: #f8fafc; /* Primary text */
--muted: #94a3b8; /* Secondary text */
--warning: #fbbf24; /* Warnings */
--success: #10b981; /* Success states */
--destructive: #ef4444; /* Errors */
/* Borders & Inputs */
--border: #334155;
--input: #1e293b;
}
<!-- index.html -->
<link href="https://fonts.googleapis.com/css2?family=Homenaje:wght@300;400;500;700;800&family=Unbounded:wght@500;600;700;800&family=VT323:wght@400;500;600&display=swap" rel="stylesheet" />
Font utilities live in src/index.css (@layer theme) — not in tailwind.config.js:
@layer theme {
.font-hero {
font-family: 'Unbounded', sans-serif;
}
.font-sans {
font-family: 'Homenaje', sans;
}
.font-mono {
font-family: 'VT323', monospace;
}
}
export const appConfig: AppConfig = {
name: import.meta.env.VITE_APP_NAME || 'SpaceZero',
tagline: import.meta.env.VITE_APP_TAGLINE || '...',
description: import.meta.env.VITE_APP_DESCRIPTION || '...',
domain: import.meta.env.VITE_APP_DOMAIN || 'myapp.space',
appBadge: import.meta.env.VITE_APP_BADGE || 'Micro-SaaS',
pwa: { name, shortName, description, themeColor: '#121212', backgroundColor: '#121212' },
monetization: {
gumroadProductId: import.meta.env.VITE_GUMROAD_PRODUCT_ID || '',
// resolved in app.ts — accepts a full URL, user.gumroad.com/l/permalink, username/permalink, or legacy bare permalink
gumroadProductUrl: resolveGumroadUrl(import.meta.env.VITE_GUMROAD_PRODUCT_ID),
priceDisplay: import.meta.env.VITE_PRICE_DISPLAY || '
originalPriceDisplay: import.meta.env.VITE_ORIGINAL_PRICE_DISPLAY || '
planName: import.meta.env.VITE_PLAN_NAME || 'Lifetime Access',
features: ['...'],
},
auth: { googleEnabled: true, githubEnabled: true, emailEnabled: true },
newsletter: { enabled: false, /* ConvertKit IDs */ },
links: {
privacy: '/privacy',
terms: '/terms',
supportEmail: import.meta.env.VITE_SUPPORT_EMAIL || '[email protected]',
},
debug: {
skipAuthRedirectToProfile: import.meta.env.VITE_DEBUG_SKIP_AUTH === 'true',
},
};
VITE_APP_NAME=MyApp
VITE_APP_TAGLINE=My Micro-App
VITE_APP_DESCRIPTION=What my app does
VITE_APP_DOMAIN=myapp.space
VITE_APP_PUBLISHER_NAME=My Company
VITE_APP_PUBLISHER_URL=https://mycompany.com
VITE_GITHUB_ORG=myorg
Per-page SEO (title, description, canonical, OpenGraph, Twitter cards, JSON-LD) is not configured via env vars — it is generated at build time per route (ROUTE_SEO_CONFIG in vite.config.ts) and per article (prerendered pages). Only the global app identity above lives in env.
Customize hero, features, pricing:
<Hero>
<Badge>{appConfig.appBadge}</Badge>
<HeroTitle>{appConfig.name}</HeroTitle>
<HeroDescription>{appConfig.tagline}</HeroDescription>
</Hero>
<Section cols={2}>
<Card>
<CardTitle><Icon name="YourIcon" /><span>Your Feature</span></CardTitle>
<CardContent>Your feature description</CardContent>
</Card>
</Section>
Add your icons to the ICONS map:
const ICONS: Record<string, IconComponent> = {
// ... existing
YourCustomIcon,
};
Change the default size:
export const DEFAULT_ICON_SIZE = 20;
public/ ships two files:
favicon.svg — the app iconrobots.txt — crawler rulesThe PWA manifest (generated by vite-plugin-pwa) references favicon.ico via includeAssets in vite.config.ts — replace or add that file there if you want a full-size icon set.
const SITEMAP_ROUTES = [
{ path: '/', priority: 1.0, changefreq: 'weekly' },
{ path: '/your-feature', priority: 0.8, changefreq: 'monthly' },
];
const CHANGELOG_ENTRIES = [
{ version: '1.0.0', date: '2026-12-01', title: 'Launch', ... },
];
The SoftwareApplication schema uses env placeholders — update the placeholders and the values they map to in vite.config.ts:
{
"@type": "SoftwareApplication",
"name": "%VITE_APP_NAME%",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Cloud",
"offers": {
"@type": "Offer",
"price": "%VITE_APP_PRICE%",
"priceCurrency": "%VITE_APP_CURRENCY%"
}
}
src/index.css colorsindex.html fonts + JSON-LDsrc/app.ts.env variablespublic/ assetsvite.config.ts routes + changelogsrc/pages/Home.tsxicon.tsxnpm run build and verify