Design options
Choose the look, then the motion
Everything on this page is live. Pick a scheme or set individual colours, try each animation, and the rest of the site follows — no reload, and your choice is remembered as you move between pages.
Step one
Colour schemes
Eight starting points. Any of them can then be adjusted colour by colour — these are a place to begin, not a menu you are held to.
The ten colours in play
This is the whole palette. Every element on the site draws from these ten and nothing else, which is why changing one repaints consistently instead of leaving a stray hard-coded colour behind.
Text on dark panels and on buttons is not in the list on purpose. It is worked out from the colour you pick — choose a pale brand and the button text flips to near-black by itself, so a scheme can never be chosen that cannot be read.
Step two
Background pattern
An optional texture behind the hero, the page headers and the closing panel. Its size and strength are sliders in the design panel — these tiles show the shape at a readable strength so they can be compared.
The same panel sets the size of what sits on that band — the headline, the text under it, the button, and the height of the band itself — as percentages of the design, so each one still adapts to a phone.
Step three
Animation catalogue
How content arrives as you scroll. Each tile plays the effect on its own; “Use on site” applies it everywhere, so you can scroll the home page and see it in context before deciding.
Step four
Card hover
What a card does under the cursor. Invisible on a phone, so it is worth deciding how much it matters to you.
Button hover
Hover each one. Darkening is the quiet default; the sweep is the loudest.
Hero message transition
The rotating phrase beside the headline on the home page. Each phrase leaves fully before the next arrives — overlapping them reads as a fault rather than an effect.
Built around your work.
Loads fast, everywhere.
Reads well on a phone.
Yours to change later.
Scrolling band
A strip of services that can sit under the home page hero. It is off by default — switch it on below to see it in place, and set its speed in the design panel.
Happy with it?
Open the design panel and press Save config file. That
downloads website-design.json — email it back and the real
site is built with exactly these settings. There is a share link too, if
that is easier.