Page design — production rules

Distilled from refining a scaffolded site into a shipped one. Apply when building or generating Impulse pages.

Fonts

Only use a font that is actually loaded. Default titles and body to a system sans stack: Arial, Helvetica, sans-serif. Never name a Google/web font unless it is enqueued — unloaded fonts fall back to a serif and look unintentional.

Text contrast

Text colour follows the background. Dark text (#1d2327 / #000000) on light/white backgrounds; light text on dark. Never light text on a light background. Greyscale palette: #1d2327 / #555 / #999 / #e0e0e0 / #f5f5f5 / #fff.

One background environment per page

Exactly one environment effect per page. The page-level environment and every screen section must declare the same effect, or sections leave it empty to inherit. A 3D depth image is page-level only — setting it on multiple stacked sections spawns multiple full-screen canvases that composite and strobe. Never combine two environment effects (e.g. depth image plus wave).

Cards are styled grid cells, not nested sections

A grid cell is a multi-child, styleable container. Put content directly in the cell and style the cell: cell_bg, cell_border_width/color, cell_radius, cell_padding_h/v. Do not wrap a cell's content in a section just to get a card background. Frosted-white card on a light page: cell_bg: rgba(255,255,255,0.82), cell_border_color: #e0e0e0, cell_radius: 8, dark text.

Buttons

Frosted/glass buttons keep the author's text colour — on light surfaces set text colour dark (#000000). Button URLs are clean root-relative paths (/membership), never backslash-escaped.

Cinematic titles

Use kinetic per-line mode with smooth entrance motions (rise, drop, glide, fade-in, blur-in, zoom-in, flip-up-in, unfold-in). Avoid noise-flicker, shake, scatter, spin, glitch, tremor, distortion — they read as strobing. Few per screen.

Navigation

3-4 essential links, right-aligned, logo left. No "Home" link (the logo is home). No duplicate CTAs. No cart icon unless the site sells multiple physical products. No account icon unless customer accounts are enabled.

Cart and checkout match the model

Single-purchase / membership / service sites skip the cart (buy button goes straight to checkout). Checkout collects only what is needed — services/memberships: email, name, phone; no shipping address unless physical goods.

Wording adapts to store type

Memberships/services say "Payment" or "Payments" and "Paid"; product stores say "Order" or "Orders" and "Spent".