Design

Eighteen looks. The quiet ones:

• Plain — type on a quiet background.
• Card — a raised panel in the middle, over your background image.
• Split — words on one side, picture on the other; on a phone the picture sits above the words as a band a little over a third of the screen tall.
• Gradient — a wash of colour built from your accent, no image needed.
• Midnight — dark, with one bright accent.
• Poster — one enormous headline; best with three or four words.
• Notice — plain and businesslike, written for maintenance.
• Frame — your image edge to edge, the words in a thin frame on top.

And the ones with something going on:

• Aurora — soft lights drifting slowly behind the words, out and back once, then resting.
• Glass — a frosted panel over your picture, darkened by Overlay darkness like Card, Midnight and Frame; wants a photograph with somewhere quiet in the middle.
• Spotlight — a light that follows the pointer across the dark, resting in the middle for anyone without one.
• Blueprint — drafting paper with a glow behind the headline.
• Terminal — monospace on black with a cursor that blinks four times and stays lit. Screen readers read the headline without the $ prompt.
• Marquee — your headline running across the top in a band, and again in full underneath. A pause button at the end of the band stops it, and starts it again. On a right-to-left site the band runs the other way. The button needs the page's script, so without the script the band stands still.

And four that arrange the page differently rather than colour it differently:

• Ledger — thin lines running the full width, with the logo, the headline, the message and the form all lined up on one side — the left on a left-to-right site, the right on a right-to-left one — and the countdown as four cells of one band rather than four boxes. Nothing is rounded.
• Rail — a band of your accent colour down the left edge of the page, the full height of it, with the words set clear of it. A letterhead. On a right-to-left site the band is on the right.
• Corner — your picture edge to edge and the words in the bottom corner, with the picture darkened most underneath them and lightest at the top. The one design whose weight is at the foot of the page rather than in the middle.
• Postcard — a wide card with your picture across the top of it and the words underneath, which is the one place a picture needs nothing washed over it to stay readable. With no picture chosen the strip is a band of your accent, so the shape is the same either way.

Every bit of that motion stops when a reader's system asks for less — the lights settle, the band holds still and the cursor stops blinking, rather than the whole thing vanishing.

Small type in your accent colour — the line over a maintenance page, and the message that answers a sign-up — uses the accent only where it can be read against what is really behind it, the lights and glows included, and your text colour where it cannot. The keyboard focus ring does the same at 3:1. On Gradient, Aurora, Blueprint and Marquee that means the text colour.

Colours are left empty on purpose. Empty means "whatever this design says", so changing design actually changes the colours. Set one and it wins, whichever design you pick afterwards. The button's text colour is worked out from your accent, so a pale accent gets dark text rather than white on white, and its edge is worked out too, so a button the same colour as the page still has a visible shape.

Gradient is the one design built entirely out of your accent — the page is the colour you choose there. A deep accent needs nothing else; with a pale one, set Text to something dark as well, or the words will be light on light.

The picture only appears for the seven designs that use one — Card, Split, Midnight, Frame, Glass, Corner and Postcard. The others hide the field rather than offering a control that quietly does nothing. Overlay darkness is for the five that put the picture behind the words; raise it until the words read over the busiest part of your photograph. Postcard puts the picture inside the card instead, above the words rather than behind them, so it is not offered the overlay and does not need it.

Alignment appears for the thirteen designs that can honour it. Split, Notice, Ledger, Rail and Corner lay their own text out — hanging off the start margin, or beside a picture, is what each of them is — so the field stays away rather than offering a choice the page would ignore.

Right-to-left sites (Arabic, Hebrew, Persian, Urdu) get the page mirrored: labels, the left-aligned designs and Split's picture all follow the language's direction.

Font offers four stacks, all of them already on the reader's machine. A webfont is two extra round trips before a single word appears, on the one page that has the least excuse for being slow.