# Julkee × Lempee — Web > How JxL sites are built: structure, layout, components, motion, interaction, accessibility and the rules that keep it robust. > Brand rules (logo, colour, type, imagery, voice) live in **jxl-brand.md**; CSS variables in **jxl-tokens.css**. > Reference implementation: the online brand book (`jxl-online-brand-book`, `src/`) — every rule here is running code there. Motion first tested in production on the DICE landing page. > Updated: 2026-09-23 · Replaces jxl-web.md (2026-04), jxl-components.md (web parts) and jxl-motion.md --- ## 1. SITE STRUCTURE ### Canvas and sections - The page canvas is **Infinity Black**. Every section is a **rounded card** on it: inset by the gutter, `border-radius: clamp(20px, 3vw, 48px)`, `clamp(16px, 2.5vw, 28px)` between cards. - Card grounds alternate: white · off-white · Julkee Blue · black. A **black card gets a 1.5px white border** — otherwise its edge vanishes into the canvas (typography, the line generator). - The last card before the footer is always white. - Hero: full-bleed brand video (heartbeat), no overlay text. ### Section heads - Eyebrow = the category (e.g. "03 — Logo", "Valokuvat"); the big black title = an **active, descriptive line** ("Lataa logo oikeassa värissä", "Musta vaalealle, valkoinen tummalle"). - **Never repeat** the eyebrow as the title. Titles always ALL CAPS, with **no periods or colons** — join two parts with a comma or rephrase. - Headings enter letter by letter, the lede line by line (see §4). ### Navigation — sidebar - Desktop: fixed white sidebar, 276px. Each page is a group with its section list; any group expands independently (peek at another page without leaving). - Current page: pulsing blue dot; current section: scroll-spy dot. Link hover/focus fills with a random brand colour (blue, red, black — never white on white). - ≤900px: a 64px sticky top bar with a slide-down panel; the panel scrolls natively, the page behind is frozen, Escape closes it. - Logo hover (and keyboard focus): the wordmark slides up and out, the flat loop + slogan "Jatkuvan markkinoinnin toimisto" rise in on the spring (§3, Brand moments). - Footer lang toggle (FI / EN) and a cart button that opens the contact dialog. ### Page transition — the loop loader 1. **Leaving:** a click on a link to another page fades a black cover in (250ms), then navigates; a `sessionStorage` flag marks the next page. 2. **Arriving:** an inline `` script sees the flag and sets `html.is-arriving` **before first paint**, so the page opens already covered. A small white loop draws its outline (500ms, `--ease-ui`) and fills (200ms, 400ms in); at ~700ms the cover lifts (350ms fade). The first scroll entrances wait until it has lifted. 3. **Critical paint:** a tiny inline `