PageWeave/Design

Guides / Design / The Core Rules

1 Design rulesfundamentalsprinciples .md

The Core Rules

The non-negotiables of designing on PageWeave — daisyUI semantics, characterful type, and the death of generic AI aesthetics.

These rules are the floor. Everything else in this library builds on them.

1. Semantic colors only

Use daisyUI semantic tokens (bg-primary, text-base-content, border-base-300) — never Tailwind color names (bg-red-500). Semantic colors re-theme instantly; hex values fossilize. The only exception: a fixed color that must survive theming (a brand logo, a chart series).

2. Characterful fonts, always

Never Inter, Roboto, Arial, or bare system stacks. Pair a display face with a body face deliberately:

  • Editorial: Fraunces + Source Serif 4
  • Technical: Big Shoulders Display + JetBrains Mono
  • Warm: Young Serif + Karla
  • Precise: Instrument Sans + Spline Sans Mono

Load via Google Fonts in html_head (PageWeave proxies them for GDPR compliance). Two families is the norm; three is the ceiling.

3. Commit to one aesthetic direction

Brutalist, editorial, retro, luxury, playful, organic, industrial — pick before writing CSS and commit fully. A site that's "kind of editorial with some playful cards" is neither. Intentionality, not intensity, is what separates designed from defaulted.

4. One accent, used sparingly

Dominant neutrals + one saturated accent beats five competing hues. primary appears once per viewport on the element that matters most.

5. Motion serves comprehension

One orchestrated load sequence > scattered animations everywhere. Every animation has a job: direct attention, confirm action, or explain change. Respect prefers-reduced-motion.

6. Backgrounds are never flat by accident

Gradients, grain, patterns, hairlines — atmosphere comes from layering, not from defaulting to bg-white. But texture must match the register: grain for paper feels, blueprint grids for industrial, nothing for luxury calm.

7. Complexity matches ambition

Maximalist designs need elaborate code. Minimalist designs need obsessive spacing precision. The failure mode is maximalist ambition with minimalist effort.

8. Markdown is a design constraint

If content can't be expressed cleanly in markdown, question whether it needs to exist. Design pages so their .md twin remains useful.