---
title: Frontend Design
description: Design guidelines for building distinctive websites with PageWeave.
section: Platform
order: 3
---

# Frontend Design

PageWeave uses Tailwind CSS v4 + daisyUI 5. All pages support Liquid templating.

## Core Rules

- **MUST use daisyUI components** + semantic colors (`primary`, `base-100`) — NOT Tailwind color names (`red-500`, `blue-600`)
- **MUST use characterful fonts** — NEVER generic (Inter, Roboto, Arial, system-ui). Pair display + body fonts
- **NEVER generic AI aesthetics** — overused fonts, purple gradients on white, predictable card-grid layouts, cookie-cutter components

## Aesthetic Direction

Pick a clear style before coding. Commit fully:

- **Brutalist** — raw typography, high contrast, minimal decoration
- **Editorial** — magazine layouts, serif fonts, generous whitespace
- **Retro** — vintage color palettes, distressed textures, classic typography
- **Luxury** — refined details, gold accents, elegant spacing
- **Playful** — bold colors, rounded shapes, animated elements
- **Organic** — natural shapes, earth tones, flowing layouts
- **Industrial** — monospace fonts, grid systems, utilitarian

## Design Principles

### Typography
Use distinctive, characterful fonts. Pair display + body fonts deliberately.

### Color
Cohesive palette with dominant colors and sharp accents. Avoid timid evenly-distributed palettes.

### Motion
Staggered load reveals, hover micro-interactions, scroll-triggered effects. One orchestrated page load > scattered animations.

### Spatial Composition
Asymmetry, overlap, generous whitespace, diagonal flow, grid-breaking elements.

### Backgrounds
Gradients, textures, patterns, noise — never flat solid colors.

### Complexity Matching
Maximalist = elaborate code + animations. Minimalist = restraint, precision, spacing.

## CSS Cascade Order

1. daisyUI base styles
2. Tailwind custom CSS
3. Theme CSS (from `update_theme`)
4. html_head content

daisyUI 5 + Tailwind v4: utility classes read `--color-primary`, not `--p`. Set `--color-*` variants in custom themes.