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.xml

Update 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/.