# Pattern House

A three-page, dependency-free creative studio template with original geometric artwork, a warm editorial style, and real local downloads. All content is fictional demo content.

## Open the template

Open `index.html`, or serve this folder with any static web server. The pages use only relative links and local files. There is no build step, remote font, analytics, backend, or network request.

- `index.html`: illustrated landing page, palette and repeat-scale playground, studio introduction, and native FAQ details.
- `collection.html`: complete artwork collection with category filtering and full artwork previews.
- `contact.html`: local creative brief generator. It creates a downloadable `.txt` file; no submission is sent.
- `styles.css`: responsive layout, visual tokens, and reduced-motion styles.
- `app.js`: accessible navigation, dialog handling, filters, palette and scale controls, and local brief export.

## Original editable assets

All ten SVGs are original artwork made for this template, contain a title, description, and viewBox, and have no external dependencies. Presentation text uses editable Arial or Georgia system-font text.

| File | Use | Canvas / repeat |
| --- | --- | --- |
| `assets/hero-garden.svg` | Bold garden illustration | 960 × 900 |
| `assets/illustration-workshop.svg` | Print workshop illustration | 900 × 720 |
| `assets/illustration-play.svg` | Abstract balancing illustration | 900 × 720 |
| `assets/pattern-checker.svg` | Seamless checker pattern | 800 × 800 / 200 px repeat |
| `assets/pattern-petals.svg` | Seamless flower pattern | 800 × 800 / 200 px repeat |
| `assets/pattern-loops.svg` | Seamless interwoven loops | 800 × 800 / 200 px repeat |
| `assets/background-paper.svg` | Subtle vector paper background | 1200 × 800 / 120 px repeat |
| `assets/presentation-cover.svg` | Editable cover graphic | 1600 × 900 |
| `assets/presentation-system.svg` | Editable process layout | 1600 × 900 |
| `assets/presentation-pause.svg` | Editable section divider | 1600 × 900 |

The repeat patterns use `patternUnits="userSpaceOnUse"` with integral repeat counts so their exported canvases tile seamlessly. Edit the fills and paths in a vector editor, or change the source SVG. The paper background has a very subtle grain by design.

## Controls

- Mobile navigation: disclosure button, Escape to close and restore focus, outside pointer close, and link close. Navigation is visible without JavaScript.
- Artwork: each download arrow links directly to its full local SVG. Eye buttons open a native dialog. Escape, the close button, or the backdrop close the dialog and restore focus.
- Filters: Everything, Patterns, Illustrations, Slides, and Backgrounds. The visible count updates accessibly; all ten pieces remain available without JavaScript.
- Palette explorer: Sunroom, Blue hour, and Garden update the live CSS pattern and its labels. The scale range changes its repeat size from 60 to 180 px. This explorer does **not** alter the static SVG downloads.
- Motion: the small decorative flower turns slowly. The pause button stops it, and the system reduced-motion preference is honored automatically.
- Brief maker: native required fields for project name, scope, and style, with optional palette and notes. Submit is disabled in the HTML until the local `preventDefault` handler is installed. Generated text is shown with `textContent` and exported through a local Blob URL. Start fresh clears it and revokes the previous URL. A blank text brief is provided for use without JavaScript.

## Customize

Change the ink, paper, tomato, butter yellow, blue, and olive variables at the top of `styles.css`. The live playground has its own `--p-base`, `--p-ink`, and `--p-accent` variables; preset values live in `app.js`. Replace the fictional studio copy with your own. There is intentionally no contact delivery service or fabricated client proof.

Only system fonts are used. Body text is at least 14 px on mobile, metadata at least 12 px, and interactive targets at least 44 px. Motion is decorative, there is no scroll hijacking, and all assets and content remain available without JavaScript.