Facet

TYPE WEBSITE TEMPLATE
PAGES FIVE
SHEET 02 OF 02

A five-page HTML template for creative studios, digital agencies and applied-AI teams. It treats glass as a material system rather than decoration: translucency encodes depth, so a floating panel reads as lighter and thinner than the surface beneath it, the way real glass does.

01 SPECIFICATION

PAGES	Home, work, studio, services, contact: five real files, real links between them
STACK	Plain HTML, CSS and vanilla JavaScript. No build step, no npm install, no framework
MATERIAL	Liquid glass as a four-tier system, `--glass-1` to `--glass-4`, where translucency encodes depth
THEMES	Dark and light, both authored independently. Neither is an inversion of the other
TYPE	Bricolage Grotesque (display), Schibsted Grotesk (body), Martian Mono (data and labels)
MOTION	GSAP 3.13 with ScrollTrigger. Scroll-linked throughout, never scroll-jacked
ARTWORK	Five original SVG illustrations drawn for this template. Zero stock, zero hotlinks, zero third-party logos
DOCUMENTATION	README, a ten-section styled documentation page, and a plain-language licence

02 PAGES

Facet homepage in the dark theme: oversized editorial headline, meta grid and a glass statistics panel — EX 01 **Home, dark theme.** The headline owns the first screen. Beneath it a meta grid carries the studio facts, then a wide glass stage holds the counters, whose values live in the HTML and animate up to what is already there.

Facet homepage in the light theme, on a warm paper background — EX 02 **Home, light theme.** Authored separately rather than inverted: a warm paper ground, a darker amber that holds WCAG AA against it, and glass tiers retuned so translucency still reads as depth on a light surface.

Facet work page: an editorial index of four case studies with results and tags — EX 03 **Work index.** An editorial list rather than a card grid, weighted so one case study carries more space than the rest.

Facet studio page showing a nested bento grid and team profiles — EX 04 **Studio.** A nested, weighted bento grid: tiles sized by what they hold, not split into equal thirds.

Facet services page with three pricing tiers presented in glass cards — EX 05 **Services.** Three tiers where the glass system does the ranking: the recommended tier sits on a lighter, thinner surface than the two beside it.

Facet contact page with an enquiry form showing inline validation states — EX 06 **Contact.** Inline validation with loading and success states. It sends nothing until the buyer connects an endpoint, and the documentation covers exactly how.

03 THE MATERIAL SYSTEM

The distinction the whole template rests on: a trend used decoratively reads as generated, the same trend used structurally reads as considered. Glass here is not a frosted card with a gradient on it. It is four defined tiers, and which tier a surface uses states how far forward it sits.

TIER 1 / STAGE: The furthest back. Heaviest tint, least transparency. Holds whole sections.
TIER 2 / PANEL: Grouped content sitting on a stage. Enough transparency to show the ground moving beneath it on scroll.
TIER 3 / TILE: Individual items inside a panel. Lighter and thinner again, with the specular edge picking up pointer position.
TIER 4 / CONTROL: The closest to the reader: the floating nav pill, buttons, the theme toggle. Thinnest and brightest, because it is nearest.
REFRACTION: True feDisplacementMap refraction renders only in Chromium. It is feature-tested, and every other browser keeps the full blur, tint, specular edge and shadow. Documented openly in the product rather than hidden.

04 MOTION

KINETIC HEADLINE: One per page, on the hero only. Kinetic type on every heading is the version of this that reads as generated.
SCROLL-LINKED REVEALS: Driven by IntersectionObserver, so elements start hidden only when the observer is actually available to reveal them.
POINTER-TRACKED SPECULAR: The highlight on a glass edge follows the cursor, which is what makes the surface read as material rather than as a blur filter.
HOVER TILT: Nine degrees, spring-eased. Enough to register as physical, small enough not to become the point.
NEVER SCROLL-JACKED: Motion is linked to scroll position, never a hijack of it. The reader keeps control of the page at all times.

05 BUILD RECORD

CONTRAST	WCAG AA in both themes, verified against computed CSS rather than by eye
STRUCTURE	Correct heading order on every page, no skipped levels, skip-to-content link
TARGETS	48px minimum touch targets; body text never below 16px; visible focus rings
PREFERENCES	Honours reduced-motion, reduced-transparency and increased-contrast
NO-JS	Every page fully readable if the motion library never loads. No counter reads zero
ASSETS	All local. No hotlinked images, so nothing breaks offline
TRADEMARKS	None. All artwork original to the template