How to customize your site's appearance with style.woozie, woozie.rules, themes, fonts, and CSS variables.

Styling and Themes

Woozie looks good out of the box, but you can change anything. There are two files that control the look: woozie.rules for high-level settings and style.woozie for detailed CSS overrides.

woozie.rules

The project config file. This is where you set the theme, font, and title.

theme: dark
title: My Website
font: Inter

Option	What it does	Default
`title`	Browser tab title	`Woozie App`
`theme`	`dark` or `light`	`light`
`font`	Any Google Font name	`Inter`
`color`	Primary accent color	purple
`lang`	HTML lang attribute	`en`
`favicon`	Path to favicon file	none

Plugin registration

This is also where you register local plugins:

plugins:
    navbar = plugins/navbar.woozie
    footer = plugins/footer.woozie

Then use @navbar and @footer in your pages.

style.woozie

For more control, create a style.woozie file in your project root. It uses a simplified CSS-like syntax:

// style.woozie

body:
    background = #0a0a0a
    color = #ffffff

heading:
    color = #8b5cf6
    font-size = 2.5rem

button:
    border-radius = 12px
    padding = 12px 24px

card:
    background = rgba(255, 255, 255, 0.05)
    border = 1px solid rgba(255, 255, 255, 0.1)

Rules

Indent with 4 spaces, same as .woozie files
Each selector is a component name followed by :
Properties use = instead of :
One property per line
Comments start with //

The selector names map to component names: hero, card, button, nav, heading, etc.

Dark mode

Set theme: dark in woozie.rules. That's the whole process.

The dark theme gives you:

Dark backgrounds with glass effects
Purple accent colors
Subtle borders and soft shadows
Smooth transitions on hover

Switch to light with theme: light.

Custom fonts

Set any font from Google Fonts:

font: Poppins

font: JetBrains Mono

Woozie loads the font from Google's CDN automatically.

CSS variables

The design system uses CSS custom properties under the hood. You can override them in style.woozie:

:root:
    --primary = #8b5cf6
    --bg = #0a0a0f
    --surface = rgba(255, 255, 255, 0.05)
    --border = rgba(255, 255, 255, 0.1)
    --text = #e2e8f0
    --text-muted = #94a3b8
    --radius = 12px

This is the nuclear option — it changes the look of every component at once.