Moon sections are self-contained HTML files. Everything they need (fonts, styles, layout) is inside the file. There are no external stylesheets to override and no framework-specific class names to learn. Customisation is direct and immediate.
Changing copy
Find the text inside the HTML tags and replace it. Headlines are usually inside h1 or h2 tags. Body text is in p tags. Button labels are in div or a tags inside the CTA area. You can also paste the template into Claude Code or Bolt and ask it to update the copy.
Changing colours
Most Moon sections use a small set of hex values. Find the primary colour value (e.g. #2563EB for blue, #111 for near-black) and do a global find-and-replace with your brand colour. Do not change the neutral values (#aaa, #f5f5f5, #fff) unless you intend to change the overall light or dark mode of the section.
Changing typography
Moon sections use Geist Sans by default, loaded via a CDN import at the top of the style block. To switch to a different font, replace the CDN import URL with the new font's CDN URL and update the font-family declaration in the body rule. To scale all type up or down proportionally, change the base font-size on the body element and all sizes defined in em units will scale with it.
Converting to a React or Svelte component
Paste the Moon template into Claude Code or Bolt and ask: "Convert this to a React component. Use Tailwind for the styles. Keep the layout and spacing exactly as defined." The AI will translate the inline styles to class names and wrap everything in a properly structured component. The design values are preserved; only the format changes.
For a deeper understanding of which specific design decisions have the most impact on whether a vibe-coded product looks professional, the vibe coder's design guide covers typography, colour, spacing, and component style with specific values and reasoning.