// guide

work with the limits.

Google Sites doesn't let you write CSS on the page itself. The trick: use its theme picker for the basics, and drop in the embed snippets for everything else.

// 01 — limits

what you can't do.

no custom css

You can't style the Google Sites page itself with CSS. The page chrome is locked to their theme system.

embeds are iframes

Embed code blocks render inside a sandboxed iframe with a fixed size you set. Choose dimensions wisely.

limited fonts

Sites' theme picker has a small font list. Anything fancy (like Geist) has to live inside an embed via Google Fonts.

fixed grid

Sites uses a 12-column grid. Don't fight it for layout — design each embed to be a self-contained section.

// 02 — theme

set these in google sites.

colors
  • page bg
    #0a0014
  • text
    #ffffff
  • accent · fuchsia
    #d946ef
  • accent · cyan
    #22d3ee
  • accent · amber
    #fbbf24
  • accent · violet
    #a78bfa
fonts
headings
Geist · 900
sub-heads
Geist · 700
body
Geist · 400
emphasis
Geist · 600
tags / code
Geist Mono · 500

Sites won't offer Geist in its picker. Pick the closest sans in the theme, and let the embeds carry the Geist look where it matters.

// 03 — steps

putting it together.

  1. 01

    set the page background

    In Sites: Themes → Custom → set background to #0a0014, primary text to white. This makes embeds blend in seamlessly.

  2. 02

    structure your pages

    Add Pages from the right sidebar. Mirror the demo: Home, About, Embeds-style content. Each page = one scrollable column.

  3. 03

    drop in embeds

    Insert → Embed → Embed code. Paste a snippet from the /embeds page. Resize the block to the recommended dimensions.

  4. 04

    stack sections

    Put a hero embed on top, then headers + content embeds, then a CTA at the bottom. Use Sites' built-in divider for breathing room.