Skip to content
BaseLayer Themes

Docs

Customize

Branding, theme tokens, and trimming blocks.

Brand tokens

Edit src/styles/theme.css @theme block:

  • Surface colors (--color-bg, --color-surface)
  • Text scale (--color-text, --color-muted)
  • Brand (--color-brand, --color-brand-hover)

Fonts are set in identity.ts and applied on <html> via CSS variables.

CSS load order

Do not change this order in src/styles/global.css:

@import "tailwindcss";
@source "../**/*.{astro,ts,js,mjs}";
@import "./theme.css";
@import "./base.css";

Compose pages

Pages import only the blocks they need. Start at the Blocks overview for config and examples; use Components for atoms inside custom layouts.

---
import Hero01 from "@/blocks/hero/Hero01.astro";
import CTA01 from "@/blocks/cta/CTA01.astro";
---
<BaseLayout>
  <Hero01 />
  <CTA01 />
</BaseLayout>

Config-first: set defaults in blocks.ts, then import with no props. Inline: pass props on the page to override config for one-off copy. See Blocks overview for the full pattern.

Sellable theme workflow

  1. Unzip your theme package to a working folder
  2. Rebrand config + theme.css
  3. Remove unused blocks and pages
  4. Delete /blocks/ and /system/* dev routes (or set dev.showDevRoutes: false)
  5. Deploy — documentation lives at baselayerthemes.com/docs

How themes are packaged for buyers (structure and Sanity variants): Templates.