Skip to content
BaseLayer Themes

Customize

Branding, theme tokens, and trimming blocks.

Live tokens from src/styles/theme.css.

Surfaces

bg

--color-bg

surface

--color-surface

elevated

--color-elevated

strong

--color-strong

Brand

brand

--color-brand

brand-hover

--color-brand-hover

brand-active

--color-brand-active

brand-soft

--color-brand-soft

brand-fg

--color-brand-fg

Secondary

secondary

--color-secondary

secondary-hover

--color-secondary-hover

secondary-active

--color-secondary-active

secondary-soft

--color-secondary-soft

secondary-fg

--color-secondary-fg

Tertiary

tertiary

--color-tertiary

tertiary-hover

--color-tertiary-hover

tertiary-active

--color-tertiary-active

tertiary-soft

--color-tertiary-soft

tertiary-fg

--color-tertiary-fg

Semantic

success

--color-success

warning

--color-warning

danger

--color-danger

Brand tokens

Edit src/styles/theme.css @theme block. The swatches above read the live CSS variables.

Token family Role Examples
Surfaces Page chrome --color-bg, --color-surface, --color-elevated
Text Copy hierarchy --color-text, --color-muted, --color-strong
brand Primary identity --color-brand, --color-brand-soft, --color-brand-fg
secondary Supporting accent (cyan by default) --color-secondary, --color-secondary-soft
tertiary Highlight accent (mint by default) --color-tertiary, --color-tertiary-soft

Each brand family includes *, *-hover, *-active, *-soft, and *-fg.

--color-accent aliases secondary for back-compat.

Buttons: brand | secondary | tertiary | outline | ghost | link.

Banners also accept secondary, secondary-soft, tertiary, tertiary-soft backgrounds. Scrollers accept secondary-soft / tertiary-soft.

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.

Images

Photography belongs in src/assets/images/ and should be rendered with OptimizedImage so builds emit WebP + srcset. Demo assets are exported as photos.*. Full guide: Images.

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.