Design System

Every VoxelSite website has a design system — a set of design tokens that control colors, typography, spacing, and visual style across the entire site.

Foundation tokens

The design system lives in assets/css/style.css. It's a CSS file with custom properties (CSS variables) in the :root block:

:root {
  --color-primary-500: #2563eb;
  --color-accent-500: #f59e0b;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --radius-default: 0.75rem;
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  /* ... more tokens */
}

VoxelSite populates these tokens uniquely for each site based on the business type, style preference, and any color preferences you specify.

How design changes work

When you ask VoxelSite to change colors, fonts, or spacing, it often only needs to update style.css. Because all pages reference these tokens through utility classes, the change propagates everywhere automatically.

For example: "Make the brand color dark green" updates the color tokens in style.css. Every page, button, and heading that references those tokens picks up the new color — without VoxelSite needing to rewrite each page.

Structural changes (like rearranging a layout or adding sections) require updating the affected page files.

CSS architecture

VoxelSite generates two CSS files, loaded in this order:

1. style.css — Design tokens (colors, fonts, spacing, shadows), minimal resets, keyframes, and any custom overrides
2. tailwind.css — Compiled Tailwind utility classes (generated by VoxelSite's built-in PHP compiler)

The AI uses Tailwind utility classes directly in HTML for layout, spacing, and styling. VoxelSite's built-in PHP compiler converts these classes to static CSS — no Node.js or build tools needed on your server.

Typography

VoxelSite uses Google Fonts for typography. The font is loaded via a <link> tag in _partials/header.php. Each site gets fonts chosen to match its personality:

• A law firm might get Inter (clean, professional)
• A bakery might get Playfair Display (warm, artisan)
• A tech startup might get Space Grotesk (modern, geometric)

Icons

VoxelSite ships with a full set of Lucide SVG icons in assets/icons/. The AI uses these when building your pages — no external CDN or icon font required.

Changing the design

There are two approaches:

Through conversation — Use the Change Design action or simply describe what you want:

• "Change the colors to a warm terracotta palette"
• "Use a more modern, sans-serif font"
• "Make the design darker and more premium"
• "Increase spacing — everything feels too cramped"

VoxelSite figures out whether to update tokens, page files, or both.

Through the visual editor — Click the Visual button, select an element, and open the style panel. Adjust typography, colors, spacing, borders, and effects using visual controls with a live JIT preview. See the Visual Editor docs for details.