Solvane

What it is

The marketing site of an AI agent platform, complete: a pixel-art hero with its stack of live notifications, a customer bar, an orchestration board, four guide chapters as book covers, four product blocks, a sky-blue section with three tabs, an animated word search and a footer. One page, one HTML file.

The subject of this template is the interface mock-up. The eight product screens it shows — the department wheel, the launch kanban, the agent conversation, the email preview, the campaign report, the analytics dashboard, the task queue, the department row — are all HTML and CSS. There is not a single screenshot in the folder. That is what makes them editable: changing a figure in the campaign report means changing a <dd>.

The design follows that of a commercial site, of which only the structure has been kept. All the code was rewritten: the original shipped a Next.js React bundle, 147 kB of compiled Tailwind, three third-party analytics scripts, and inline styles on every animated block — which a strict security policy blocks outright.

What you change first

The colours — twelve lines

Right at the top of assets/css/style.css:

--accent:        #2b3fc4;  /* fills a surface: buttons, chips, the stroke */
--accent-deep:   #1e2c8f;  /* writes on a light surface, and hovers */
--accent-soft:   #dfe3fb;  /* tints a chip, never text */
--surface:       #f5f5f2;  /* the page */
--sky:           #0756d0;  /* the blue the illustrations are painted in */

One thing to grasp before touching anything else: there are three indigos, not one. The solid accent carries white at 8.04:1; the deep one writes on the page at 10.61:1. Over the pixel-art sky you write in white (6.46:1) and never in a lightened accent, which would not reach 3:1 there. Change one, change all three.

The name

Search for “Solvane” in index.html. No CSS class carries the brand name: a find-and-replace can't break anything.

The word search

The grid of letters and its eleven strokes are produced by _mesures/grille-mots.py, from a fixed seed. Change the list of trades at the top, run it, paste back the HTML and the grid-area rules it prints.

The twelve effects, and how they're built

The reference site writes all of its animations in CSS — 36 @keyframes, no animation-timeline. They were therefore read out of its stylesheet to the millisecond rather than estimated by eye.

What you should know

• No external requests. Measured at 390, 1440 and 2560 px: every request is local. The original loaded three analytics domains.
• Scroll reveals can't hide the content. The hidden state only exists once the JavaScript has run. Checked by disabling it: 15 headings out of 15 stay visible, the three tab panels follow each other down the page, the eleven word-search strokes are drawn.
• Zero inline styles, zero inline scripts. The template honours the site's strict security policy — the very one the original's style="--notif-rotate-y:-12deg" breaks. The _headers file carries the policy and the bench serves it, so the page is measured exactly as it ships.
• Every pixel-art illustration is generated, and therefore free of rights. None of the original's images survive.
• Accessibility: skip link, menu state announced, decorations hidden from screen readers, one visible focus ring drawn outside the box, animations switched off if the system asks — delays included.
• Responsive checked at 390, 1440 and 2560 px, on load and after scrolling all the way down, with no horizontal overflow.

What isn't perfect

Better said here than left for you to find out.