Facet

Overview

Most multipurpose themes hand you a colour picker and call it flexibility. You get the same website in a different hue — because what actually separates a law firm’s site from a design studio’s is not colour, it is the typeface, the spacing and the register.

Facet ships five presets, and each one moves four things at once: palette, type pairing, spatial density, and the hero scene. Corporate is deep navy and tight neutral type. Studio is warm sand with a serif voice and generous air. Tech is near-black with one electric accent. Soft is light and rounded. Bold is high-contrast with oversized type. Switching between them is one dropdown.

Under it, a single preset registry is the source of truth — the Customizer controls, the CSS custom properties, which webfonts load and which hero scene boots are all generated from that one array, and the stylesheet never names a colour, a font or a size. Only the active preset’s fonts are served, so a site carries one type pairing rather than five. Foreground colours are measured rather than declared: choose a pale brand colour and the theme computes the contrast and gives you dark button text instead of unreadable white-on-yellow.

The hero is one WebGL2 program drawing five selectable scenes — a domain-warped gradient mesh, a real moire interference pattern between two rotated line gratings, a perspective lattice, light orbs and a flow field. It reads the live design tokens at boot, so it always arrives already wearing the active palette, and it stays off on touch devices, under reduced-motion or reduced-data, and on weak GPUs.