Customization
How to customize the site's appearance, fonts, and theme tokens.
Site identity
All site-level metadata is in site.config.ts at the project root. Edit the
three fields there — name, description, url — and everything else (page
titles, <meta> tags, sitemap) updates automatically.
Styling
Styles are written in Tailwind CSS v4. Theme tokens are defined as CSS custom
properties in src/app/globals.css under @theme. Edit that file to change
colors, spacing, or any other design token.
Dark mode is handled by the .dark class via next-themes. Colors are defined
as raw values in :root (light) and .dark, then aliased into Tailwind's token
layer via @theme inline:
@theme inline {
--color-background: var(--background);
}
:root {
--background: oklch(1 0 0);
}
.dark {
--background: oklch(0.145 0 0);
}Fonts
Fonts are platform-native — no web font downloads. They are set as CSS variables
in globals.css under @theme inline:
--font-sans:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial, sans-serif;
--font-mono:
ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;Change these variables to use any font stack you prefer. To load a web font, add
it in src/app/layout.tsx using next/font.
Prose styles
MDX content is wrapped in a .prose class. The prose styles are defined
entirely in globals.css — there is no @tailwindcss/typography dependency.
Edit the .prose block directly to change heading sizes, line height, link
colors, or any other prose-specific style.
Syntax highlighting themes
Shiki themes are configured in src/lib/mdx-options.ts:
themes: {
light: 'github-light',
dark: 'github-dark',
},Replace these with any Shiki-bundled theme.
robots.txt
A robots.txt is included at public/robots.txt. It currently allows all
crawlers and points to the sitemap:
User-Agent: *
Allow: /
Sitemap: https://mssg.powerium.io/sitemap.xmlUpdate the Sitemap URL to match your own domain after forking. You can also
restrict crawlers, block specific paths, or remove the file entirely — Next.js
serves everything in public/ as static assets at the root.
Adding shadcn/ui components
The project is pre-configured for shadcn/ui (style: new-york, Tailwind v4).
Add new primitives with:
bunx shadcn add <component>Components are installed to src/components/ui/.