[ { "schemaVersion": 2, "id": "01", "slug": "civic-service", "name": "Civic Service", "brand": "Northbank Council", "family": "Clarity & editorial", "status": "ready", "thesis": "Make a necessary task easy to understand and finish.", "suitableFor": [ "Public services", "Support" ], "character": "Restrained", "traits": { "composition": "Single-column service guidance with a prerequisite rail", "navigation": "Breadcrumbs and explicit back links", "typography": "DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Plain white surfaces, square controls, restrained green emphasis", "motion": "None" }, "effort": "Low", "definingFeatures": [ "Task-first headings", "Requirements before action", "Plain review and confirmation" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/01-civic-service/start", "states": [ { "key": "book", "label": "Choose a collection", "route": "/preview/01-civic-service/book" }, { "key": "confirmation", "label": "Booking confirmation", "route": "/preview/01-civic-service/confirmation" } ], "referenceImages": [ { "file": "/previews/01/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/01/76e7122407c55fe8-desktop.jpg", "route": "/preview/01-civic-service/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7343fa68f81c25e14ee4c9e863acab0cddbac7608542e624bdf123b52b909187", "sha256": "76e7122407c55fe8c4595f1f727e65ca5f171f64f7e6089d7717d5048ad79dd5", "fullPage": false }, { "file": "/previews/01/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/01/0ceda4e3e75338db-mobile.jpg", "route": "/preview/01-civic-service/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7343fa68f81c25e14ee4c9e863acab0cddbac7608542e624bdf123b52b909187", "sha256": "0ceda4e3e75338db43ccb322369941ac403e214ac0dab475fdcffcc8bbc3742a", "fullPage": false }, { "file": "/previews/01/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/01/003b1467cb2be2d3-detail.jpg", "route": "/preview/01-civic-service/book", "viewport": { "width": 1440, "height": 1000 }, "state": "book", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7343fa68f81c25e14ee4c9e863acab0cddbac7608542e624bdf123b52b909187", "sha256": "003b1467cb2be2d36b9894d62d596214db0137ed29131e05b729ff8078408490", "fullPage": false }, { "file": "/previews/01/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/01/5a00dcfbf8eeeca4-full-page.jpg", "route": "/preview/01-civic-service/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7343fa68f81c25e14ee4c9e863acab0cddbac7608542e624bdf123b52b909187", "sha256": "5a00dcfbf8eeeca4b6f66b16735af9795685ba6c1b22eb82aa925ce84f13bd43", "fullPage": true } ], "sourcePath": "src/designs/01-civic-service", "neighbours": [ "14", "25" ], "palette": { "page": "#fff", "surface": "#ffffff", "ink": "#182d3d", "accent": "#166347" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make a necessary task easy to understand and finish. Suitable for municipal services, public guidance, support centres, and practical organisations whose visitors arrive with a specific question.\n\n**Visual grammar.** A compact wordmark bar leads into breadcrumbs, a plain page title, an explanatory summary, and one dominant reading column. A secondary contents rail appears only on long guidance pages. Use a humanist sans, strong headings, square controls, white backgrounds, dark navy text, and restrained green action emphasis. Show eligibility and required documents before the action.\n\n**Specimen and flow.** *Northbank Council* demonstrates finding a bulky waste collection service, checking requirements, and choosing a collection slot from local fixtures. Supporting states show an unavailable address and a confirmation page containing a reference and next steps.\n\n**Adaptation and identity.** Mobile retains the same reading order and puts the contents list above the article. Preserve explicit labels, plain language, and task hierarchy; avoid decorative hero photography, ornamental cards, and surprise navigation. Motion is unnecessary. **Effort: low.**\n\n**Distinctive composition.** Plain humanist service labels replace monospaced editorial captions. The existing task-first service composition remains.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Public services", "Support" ], "visitorGoals": [ "Understand a service" ], "conversionActions": [ "Complete a service request" ], "siteSize": "Service site", "interactionTypes": [ "Guided form", "Breadcrumb navigation" ], "keywords": [ "Public services", "Support", "Task-first headings", "Requirements before action", "Plain review and confirmation" ] }, "patterns": [ "Task-first headings", "Requirements before action", "Plain review and confirmation" ], "downloadUrl": "/downloads/01-civic-service.zip" }, { "schemaVersion": 2, "id": "02", "slug": "precision-saas", "name": "Precision SaaS", "brand": "RelayDesk", "family": "Clarity & editorial", "status": "ready", "thesis": "Explain a software product through concrete capabilities, evidence, and a credible path into its interface.", "suitableFor": [ "Software", "Marketing" ], "character": "Restrained", "traits": { "composition": "Asymmetric product story beside a readable working inbox", "navigation": "Capability links and a sample workspace", "typography": "DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Cool white product surfaces with fine rules and a blue action colour", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Product evidence beside the claim", "Alternating capability sections", "A concrete plan comparison" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/02-precision-saas/start", "states": [ { "key": "inbox", "label": "Sample inbox", "route": "/preview/02-precision-saas/inbox" }, { "key": "detail", "label": "Request detail", "route": "/preview/02-precision-saas/detail" } ], "referenceImages": [ { "file": "/previews/02/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/02/bb08e127c585767b-desktop.jpg", "route": "/preview/02-precision-saas/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f53ce8f81cbb556899b2e603878922fd15a402e9ca077760fbe8a8259f5d902e", "sha256": "bb08e127c585767b97bbfc1a930885507916f20aab7ca7fa0d1b92fe33cb8d61", "fullPage": false }, { "file": "/previews/02/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/02/078e57f430bb83b7-mobile.jpg", "route": "/preview/02-precision-saas/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f53ce8f81cbb556899b2e603878922fd15a402e9ca077760fbe8a8259f5d902e", "sha256": "078e57f430bb83b73c8719cccc046f202f4b2eb271a128c938519174306336db", "fullPage": false }, { "file": "/previews/02/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/02/170ef779b0894a6c-detail.jpg", "route": "/preview/02-precision-saas/inbox", "viewport": { "width": 1440, "height": 1000 }, "state": "inbox", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f53ce8f81cbb556899b2e603878922fd15a402e9ca077760fbe8a8259f5d902e", "sha256": "170ef779b0894a6ceaae63e6d7ecf9b4741935b979061d50c2ff7fe85d0d37a5", "fullPage": false }, { "file": "/previews/02/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/02/614f975c1c3e45a1-full-page.jpg", "route": "/preview/02-precision-saas/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f53ce8f81cbb556899b2e603878922fd15a402e9ca077760fbe8a8259f5d902e", "sha256": "614f975c1c3e45a117e27a50f5b3c98b6219aacd474ad71cddd88d80f6e24cd7", "fullPage": true } ], "sourcePath": "src/designs/02-precision-saas", "neighbours": [ "11", "20" ], "palette": { "page": "#f8fafc", "surface": "#ffffff", "ink": "#202d42", "accent": "#305ed6" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Explain a software product through concrete capabilities, evidence, and a credible path into its interface. Suitable for subscription software, professional tools, and product launches needing a conventional commercial structure.\n\n**Visual grammar.** Use a tidy horizontal navigation, asymmetric hero with product copy beside a real interface preview, alternating capability sections, a compact comparison table, and a direct closing action. A neutral grotesk, pale grey surfaces, charcoal text, and a single blue accent establish order. Reserve rounded containers for genuine interface groupings; screenshots should show readable features, not floating abstract rectangles.\n\n**Specimen and flow.** *RelayDesk* presents a small client request tracker. Visitors inspect a worked request, compare three fictional plans, then open an interactive sample inbox. Supporting states include a populated request detail and an empty workspace with a useful first action.\n\n**Adaptation and identity.** Mobile promotes copy before the preview and presents plan differences as labelled sections. Preserve capability-led storytelling and visible product evidence; avoid generic metric claims, gradient decoration, and autoplay demos. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Software", "SaaS", "B2B services" ], "visitorGoals": [ "Evaluate a product" ], "conversionActions": [ "Try a product demo" ], "siteSize": "Small brochure", "interactionTypes": [ "Product demo", "Feature comparison" ], "keywords": [ "Software", "Marketing", "Product evidence beside the claim", "Alternating capability sections", "A concrete plan comparison" ] }, "patterns": [ "Product evidence beside the claim", "Alternating capability sections", "A concrete plan comparison" ], "downloadUrl": "/downloads/02-precision-saas.zip" }, { "schemaVersion": 2, "id": "03", "slug": "swiss-grid", "name": "Swiss Grid", "brand": "Form Conference", "family": "Clarity & editorial", "status": "ready", "thesis": "Build hierarchy through alignment, scale, and disciplined contrast.", "suitableFor": [ "Events", "Culture" ], "character": "Restrained", "traits": { "composition": "Rigorous typographic grid with indexed programme rows", "navigation": "Numbered sections and day filters", "typography": "Space Grotesk", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Warm paper, black rules, typographic alignment and red accents", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Aligned large and small type", "Programme as strong ruled rows", "Oversized left-aligned titles" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/03-swiss-grid/start", "states": [ { "key": "speaker", "label": "Speaker profile", "route": "/preview/03-swiss-grid/speaker" }, { "key": "saved", "label": "Saved sessions", "route": "/preview/03-swiss-grid/saved" } ], "referenceImages": [ { "file": "/previews/03/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/03/548518c54ef40c33-desktop.jpg", "route": "/preview/03-swiss-grid/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be0af4de92315b109ca07cbb6badc215df66b70465077608899b77721b3456fb", "sha256": "548518c54ef40c339f35828af79b419c7bd56d53c88efc1bb6560a5b5a4b76bf", "fullPage": false }, { "file": "/previews/03/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/03/239efd6294d44a4d-mobile.jpg", "route": "/preview/03-swiss-grid/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be0af4de92315b109ca07cbb6badc215df66b70465077608899b77721b3456fb", "sha256": "239efd6294d44a4df99d8acf09b59015d58c57d725378e65ce54226542ecef91", "fullPage": false }, { "file": "/previews/03/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/03/f8c5344a84df881a-detail.jpg", "route": "/preview/03-swiss-grid/speaker", "viewport": { "width": 1440, "height": 1000 }, "state": "speaker", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be0af4de92315b109ca07cbb6badc215df66b70465077608899b77721b3456fb", "sha256": "f8c5344a84df881a263c6bae2ddb8e2262288029ae3c13676394570ff0111c42", "fullPage": false }, { "file": "/previews/03/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/03/77f5adbe28cd061f-full-page.jpg", "route": "/preview/03-swiss-grid/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be0af4de92315b109ca07cbb6badc215df66b70465077608899b77721b3456fb", "sha256": "77f5adbe28cd061fe346d50a74fbf8ffe5547a5cce548bae6f9af28700015d21", "fullPage": true } ], "sourcePath": "src/designs/03-swiss-grid", "neighbours": [ "31", "30" ], "palette": { "page": "#f4f2eb", "surface": "#ffffff", "ink": "#181a18", "accent": "#c6321e" }, "fonts": [ "Space Grotesk" ], "brief": "**Philosophy and fit.** Build hierarchy through alignment, scale, and disciplined contrast. Suitable for conferences, studios, exhibitions, and editorial brands that want typography to carry their identity.\n\n**Visual grammar.** Use a visibly rigorous grid, left-aligned oversized headings, numbered sections, generous outer margins, and restrained image crops. Small labels align with large type rather than floating in pills. A neutral sans works across a severe size range. An off-white ground, near-black text, and one vermilion accent organise the composition. Navigation is a short indexed list; rules and whitespace divide material instead of card backgrounds.\n\n**Specimen and flow.** *Form Conference* lets visitors inspect the programme, filter sessions by day, and open a speaker profile. Supporting screens provide a programme detail with venue information and a saved-session list held locally.\n\n**Adaptation and identity.** On mobile, preserve alignment relationships while reducing the number of columns; the oversized heading must wrap deliberately. Preserve the grid and typographic hierarchy; avoid symmetric feature tiles, decorative shapes, and unrelated typefaces. Motion is limited to quiet state changes. **Effort: low.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Events", "Design conference" ], "visitorGoals": [ "Explore an event" ], "conversionActions": [ "Reserve a place" ], "siteSize": "Small brochure", "interactionTypes": [ "Programme navigation", "Ticket selection" ], "keywords": [ "Events", "Culture", "Aligned large and small type", "Programme as strong ruled rows", "Oversized left-aligned titles" ] }, "patterns": [ "Aligned large and small type", "Programme as strong ruled rows", "Oversized left-aligned titles" ], "downloadUrl": "/downloads/03-swiss-grid.zip" }, { "schemaVersion": 2, "id": "04", "slug": "quiet-atelier", "name": "Quiet Atelier", "brand": "Alder Studio", "family": "Clarity & editorial", "status": "ready", "thesis": "Let a small selection of work convey confidence through space and restraint.", "suitableFor": [ "Portfolio", "Architecture" ], "character": "Restrained", "traits": { "composition": "Spacious introduction and staggered image-caption project sequence", "navigation": "Modest text navigation and project index", "typography": "Libre Baskerville + DM Sans", "density": "Low", "imagery": "Licensed illustrative photography", "surface": "Warm neutral surfaces and generous photographic whitespace", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Selective project curation", "Staggered imagery with captions", "Material-led case studies" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/04-quiet-atelier/start", "states": [ { "key": "project", "label": "A room to return to", "route": "/preview/04-quiet-atelier/project" }, { "key": "enquiry", "label": "Project enquiry", "route": "/preview/04-quiet-atelier/enquiry" } ], "referenceImages": [ { "file": "/previews/04/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/04/16b274f55096686d-desktop.jpg", "route": "/preview/04-quiet-atelier/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:93e635bbf276f5244d7e1ee0318cdd19f3d32010bc569fbd476baead1cbaf6f6", "sha256": "16b274f55096686d8af8e84800d1e0adb2d48068ed54fb87e242a23dbccd056a", "fullPage": false }, { "file": "/previews/04/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/04/9bc84cb892e3d8df-mobile.jpg", "route": "/preview/04-quiet-atelier/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:93e635bbf276f5244d7e1ee0318cdd19f3d32010bc569fbd476baead1cbaf6f6", "sha256": "9bc84cb892e3d8dfcdb4a40b672814458e071859c3db920e3df00869b60e5554", "fullPage": false }, { "file": "/previews/04/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/04/58661d7f41249fdf-detail.jpg", "route": "/preview/04-quiet-atelier/project", "viewport": { "width": 1440, "height": 1000 }, "state": "project", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:93e635bbf276f5244d7e1ee0318cdd19f3d32010bc569fbd476baead1cbaf6f6", "sha256": "58661d7f41249fdfbfad84cc827bfe1106ecf69e8d05291d828d06cdf74ecd97", "fullPage": false }, { "file": "/previews/04/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/04/9e530bd4e444d305-full-page.jpg", "route": "/preview/04-quiet-atelier/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:93e635bbf276f5244d7e1ee0318cdd19f3d32010bc569fbd476baead1cbaf6f6", "sha256": "9e530bd4e444d305481e46bf334284aced9c3a49406905b77bdf4cc8f8277262", "fullPage": true } ], "sourcePath": "src/designs/04-quiet-atelier", "neighbours": [ "22", "28" ], "palette": { "page": "#f6f2eb", "surface": "#ffffff", "ink": "#3c372d", "accent": "#79614e" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Let a small selection of work convey confidence through space and restraint. Suitable for independent designers, photographers, craftspeople, and small professional practices with strong visual portfolios.\n\n**Visual grammar.** The opening view pairs a short introduction with one carefully positioned image, followed by a staggered sequence of selected projects. Use a modest text navigation and an index rather than a persistent sidebar. Warm white, brown-black ink, muted clay accents, a refined serif heading, and a small neutral sans create a subdued rhythm. Avoid treating every project as an identically sized tile.\n\n**Specimen and flow.** *Alder Studio* presents furniture and interiors. Visitors choose a project, move through its image-and-caption sequence, and open an enquiry form prefilled with that project. Supporting states show the complete project index and locally validated enquiry feedback.\n\n**Adaptation and identity.** Mobile converts the staggered composition into an intentional image sequence with captions directly beneath each image. Preserve selective curation, spaciousness, and material imagery; avoid enormous empty areas, hidden contact information, and compulsory animation. **Effort: low.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Architecture", "Design studio" ], "visitorGoals": [ "Evaluate past work" ], "conversionActions": [ "Enquire about a project" ], "siteSize": "Portfolio & enquiry", "interactionTypes": [ "Project gallery", "Contact form" ], "keywords": [ "Portfolio", "Architecture", "Selective project curation", "Staggered imagery with captions", "Material-led case studies" ] }, "patterns": [ "Selective project curation", "Staggered imagery with captions", "Material-led case studies" ], "downloadUrl": "/downloads/04-quiet-atelier.zip" }, { "schemaVersion": 2, "id": "05", "slug": "scholarly-folio", "name": "Scholarly Folio", "brand": "The Commonplace Edition", "family": "Clarity & editorial", "status": "ready", "thesis": "Support close reading while keeping commentary and sources within reach.", "suitableFor": [ "Research", "Reading" ], "character": "Restrained", "traits": { "composition": "Book-like reading column between chapter index and annotation margin", "navigation": "Chapters, numbered annotations, and bibliography", "typography": "Libre Baskerville + DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Cream paper, marginal notes, hairline separators and scholarly numbering", "motion": "None" }, "effort": "Medium", "definingFeatures": [ "Passage-level notes", "Stable scholarly reading measure", "Sources separated from interpretation" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/05-scholarly-folio/start", "states": [ { "key": "reading", "label": "Reading-only mode", "route": "/preview/05-scholarly-folio/reading" }, { "key": "sources", "label": "Bibliography", "route": "/preview/05-scholarly-folio/sources" } ], "referenceImages": [ { "file": "/previews/05/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/05/7edafbc9a76b2e45-desktop.jpg", "route": "/preview/05-scholarly-folio/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:449166e65bd21ca64e9b3a27407cc958240882a15e799a0e023ebecec9861d36", "sha256": "7edafbc9a76b2e45a86d22a04ba924c7658b0c81d0c5635de77b1947415e3b8f", "fullPage": false }, { "file": "/previews/05/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/05/3c3b8af031d05441-mobile.jpg", "route": "/preview/05-scholarly-folio/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:449166e65bd21ca64e9b3a27407cc958240882a15e799a0e023ebecec9861d36", "sha256": "3c3b8af031d054410540038542d8f2044b86dc9b921fbf8a3192884f83d8816d", "fullPage": false }, { "file": "/previews/05/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/05/9fa7f23fdea1a7da-detail.jpg", "route": "/preview/05-scholarly-folio/reading", "viewport": { "width": 1440, "height": 1000 }, "state": "reading", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:449166e65bd21ca64e9b3a27407cc958240882a15e799a0e023ebecec9861d36", "sha256": "9fa7f23fdea1a7da7cabb18d2ad59bc364060643624801cdc17e70e1275fa899", "fullPage": false }, { "file": "/previews/05/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/05/6bd0554067d870cf-full-page.jpg", "route": "/preview/05-scholarly-folio/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:449166e65bd21ca64e9b3a27407cc958240882a15e799a0e023ebecec9861d36", "sha256": "6bd0554067d870cf524603dec36b63922d15f1f502ca71326afcfb4086403e9e", "fullPage": true } ], "sourcePath": "src/designs/05-scholarly-folio", "neighbours": [ "07", "34" ], "palette": { "page": "#f7f4eb", "surface": "#ffffff", "ink": "#3c332b", "accent": "#7b3542" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Support close reading while keeping commentary and sources within reach. Suitable for annotated texts, research essays, translations, archival editions, and educational publications.\n\n**Visual grammar.** A book-like serif reading column sits between a narrow chapter index and a wider annotation margin. Use parchment-white, dark brown-black text, restrained burgundy links, paragraph numbers, and precise footnote markers. The title treatment resembles a scholarly title page. Notes are connected to passages through labels and alignment rather than colour alone; the navigation distinguishes chapters, annotations, and bibliography.\n\n**Specimen and flow.** *The Commonplace Edition* contains an original fictional essay with author commentary. Selecting an annotation highlights its passage and reveals the note. Supporting views show the bibliography with source metadata and a reading-only mode that suppresses secondary material.\n\n**Adaptation and identity.** Mobile brings each opened note into the reading flow with a clear return control. Preserve the relationship between text, notes, and sources; avoid magazine teasers, decorative manuscript imitation, and hover-only notes. Motion is unnecessary. **Effort: medium.**\n\n**Distinctive composition.** Serif italic marginal captions reinforce the scholarly folio, separating its reading character from the Knowledge Garden workspace.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Research", "Education", "Academic publishing" ], "visitorGoals": [ "Read research" ], "conversionActions": [ "Explore a publication" ], "siteSize": "Digital publication", "interactionTypes": [ "Citations", "Long-form reading" ], "keywords": [ "Research", "Reading", "Passage-level notes", "Stable scholarly reading measure", "Sources separated from interpretation" ] }, "patterns": [ "Passage-level notes", "Stable scholarly reading measure", "Sources separated from interpretation" ], "downloadUrl": "/downloads/05-scholarly-folio.zip" }, { "schemaVersion": 2, "id": "06", "slug": "editorial-newspaper", "name": "Editorial Newspaper", "brand": "The Northbank Record", "family": "Clarity & editorial", "status": "ready", "thesis": "Communicate editorial judgement across many stories at once.", "suitableFor": [ "Editorial", "News" ], "character": "Restrained", "traits": { "composition": "Newspaper masthead, ranked lead story, secondary columns, and compact briefs", "navigation": "Section links and article reading", "typography": "Libre Baskerville + DM Sans", "density": "High", "imagery": "Licensed illustrative photography", "surface": "Newsprint columns, ink rules, headlines and compact metadata", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Visible editorial ranking", "Unequal image and headline scales", "Rules instead of story cards" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/06-editorial-newspaper/start", "states": [ { "key": "article", "label": "The river path returns", "route": "/preview/06-editorial-newspaper/article" }, { "key": "saved", "label": "Saved reading", "route": "/preview/06-editorial-newspaper/saved" } ], "referenceImages": [ { "file": "/previews/06/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/06/1aadf66e02a98e7b-desktop.jpg", "route": "/preview/06-editorial-newspaper/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7b2b1ef90083ac4c8a96ed46a39d2cc6751fcde6d1570284d2538d552de6b6d6", "sha256": "1aadf66e02a98e7b6e2cb8c5769e64675d4ef72abff619c2716d86b1e7c22f0d", "fullPage": false }, { "file": "/previews/06/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/06/1484bd262d8d6cc8-mobile.jpg", "route": "/preview/06-editorial-newspaper/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7b2b1ef90083ac4c8a96ed46a39d2cc6751fcde6d1570284d2538d552de6b6d6", "sha256": "1484bd262d8d6cc8d5b693b6ba4e1153ea4de6e5e8101f6dc1ec0f397670358d", "fullPage": false }, { "file": "/previews/06/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/06/95eb426ba0f8e95c-detail.jpg", "route": "/preview/06-editorial-newspaper/article", "viewport": { "width": 1440, "height": 1000 }, "state": "article", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7b2b1ef90083ac4c8a96ed46a39d2cc6751fcde6d1570284d2538d552de6b6d6", "sha256": "95eb426ba0f8e95c2ba8c476caa7b2d0e611366fd91324459a54b9026d53cbe9", "fullPage": false }, { "file": "/previews/06/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/06/d583a957b572b500-full-page.jpg", "route": "/preview/06-editorial-newspaper/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7b2b1ef90083ac4c8a96ed46a39d2cc6751fcde6d1570284d2538d552de6b6d6", "sha256": "d583a957b572b500a6d2d6cdc196f52c3092ae160dfef6c329533bbddb640652", "fullPage": true } ], "sourcePath": "src/designs/06-editorial-newspaper", "neighbours": [ "09", "07" ], "palette": { "page": "#f8f6ee", "surface": "#ffffff", "ink": "#232825", "accent": "#9b302f" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Communicate editorial judgement across many stories at once. Suitable for newsrooms, city publications, trade journals, and frequently updated magazines.\n\n**Visual grammar.** A strong masthead, date line, section navigation, lead story, secondary columns, and compact briefs create an unmistakable front page. Use assertive serif headlines, readable body text, small sans metadata, warm white, near-black ink, thin dividing rules, and restrained red alerts. Image scale indicates editorial priority. Stories share a typographic system without being enclosed in repetitive cards.\n\n**Specimen and flow.** *The Northbank Record* offers fictional local reporting. Visitors browse the front page, switch section, and open a feature with related coverage. Supporting states include a search results page and a saved-reading list with a clear empty state.\n\n**Adaptation and identity.** Mobile keeps the lead hierarchy and orders secondary stories explicitly rather than stacking desktop columns blindly. Preserve visible editorial ranking, meaningful sections, and useful metadata; avoid infinite feeds, identical story weights, and a hero that consumes the whole opening screen. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "News", "Journalism", "Local publishing" ], "visitorGoals": [ "Follow the news" ], "conversionActions": [ "Read an article" ], "siteSize": "Digital publication", "interactionTypes": [ "Article navigation", "Topic filters" ], "keywords": [ "Editorial", "News", "Visible editorial ranking", "Unequal image and headline scales", "Rules instead of story cards" ] }, "patterns": [ "Visible editorial ranking", "Unequal image and headline scales", "Rules instead of story cards" ], "downloadUrl": "/downloads/06-editorial-newspaper.zip" }, { "schemaVersion": 2, "id": "07", "slug": "literary-review", "name": "Literary Review", "brand": "The Long Afternoon", "family": "Clarity & editorial", "status": "ready", "thesis": "Treat sustained reading as the main event.", "suitableFor": [ "Editorial", "Reading" ], "character": "Restrained", "traits": { "composition": "Literary issue with a large lead essay and a spare contents list", "navigation": "Issue, essay, and author links", "typography": "Libre Baskerville + DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Warm paper, large serif type and quiet editorial separators", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Measured serif reading", "Issue-level identity", "Deliberate end-of-essay continuation" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/07-literary-review/start", "states": [ { "key": "essay", "label": "The art of staying", "route": "/preview/07-literary-review/essay" }, { "key": "author", "label": "About the contributor", "route": "/preview/07-literary-review/author" } ], "referenceImages": [ { "file": "/previews/07/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/07/dc0844e2ef14e31f-desktop.jpg", "route": "/preview/07-literary-review/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ad62dafd5cc790c4c4600c7f3a531da3d7d64829252f82aaa6f82f8ad879983a", "sha256": "dc0844e2ef14e31fb27517683266bc19da69a448352f87f2fad9827f755c5934", "fullPage": false }, { "file": "/previews/07/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/07/ca820b5677394325-mobile.jpg", "route": "/preview/07-literary-review/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ad62dafd5cc790c4c4600c7f3a531da3d7d64829252f82aaa6f82f8ad879983a", "sha256": "ca820b5677394325af1c0379e45c7724bd5ed655fab160f93191e2e01e25e411", "fullPage": false }, { "file": "/previews/07/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/07/280967881e9f1989-detail.jpg", "route": "/preview/07-literary-review/essay", "viewport": { "width": 1440, "height": 1000 }, "state": "essay", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ad62dafd5cc790c4c4600c7f3a531da3d7d64829252f82aaa6f82f8ad879983a", "sha256": "280967881e9f19895bddefb950df001770a7e17cf7603166e998710ccf3cfdee", "fullPage": false }, { "file": "/previews/07/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/07/3134793428ffd55b-full-page.jpg", "route": "/preview/07-literary-review/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ad62dafd5cc790c4c4600c7f3a531da3d7d64829252f82aaa6f82f8ad879983a", "sha256": "3134793428ffd55b309963a31d280d8f80807f0d7c1f2288902f628c0edc25fb", "fullPage": true } ], "sourcePath": "src/designs/07-literary-review", "neighbours": [ "05", "06" ], "palette": { "page": "#f5f1e7", "surface": "#ffffff", "ink": "#29372e", "accent": "#405d47" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Treat sustained reading as the main event. Suitable for essays, criticism, literary magazines, personal publications, and thoughtful cultural commentary.\n\n**Visual grammar.** An understated masthead opens into a current issue with one lead essay and a sparse textual contents list. Article pages use a generous book serif, a measured line length, clear paragraph rhythm, restrained drop capitals, and ample separation around section changes. Use ivory, charcoal, and muted forest accents. Navigation follows issues, authors, and subjects; small illustrations may punctuate reading without becoming the interface.\n\n**Specimen and flow.** *The Long Afternoon* lets visitors browse an issue, open an essay, and continue to the next essay through a deliberate end-of-article link. Supporting views include an author page and a reader preference panel for text size and line spacing.\n\n**Adaptation and identity.** Mobile protects reading width and keeps preferences simple. Preserve the cadence of essays and the identity of each issue; avoid scholarly annotation rails, news urgency, autoplay media, and constant related-content interruptions. **Effort: low.**\n\n**Distinctive composition.** Literary italic captions replace the collection’s repeated monospaced label treatment. The review’s editorial composition is retained.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Literature", "Arts", "Publishing" ], "visitorGoals": [ "Discover writing" ], "conversionActions": [ "Read a review" ], "siteSize": "Digital publication", "interactionTypes": [ "Issue navigation", "Reading list" ], "keywords": [ "Editorial", "Reading", "Measured serif reading", "Issue-level identity", "Deliberate end-of-essay continuation" ] }, "patterns": [ "Measured serif reading", "Issue-level identity", "Deliberate end-of-essay continuation" ], "downloadUrl": "/downloads/07-literary-review.zip" }, { "schemaVersion": 2, "id": "08", "slug": "documentary-story", "name": "Documentary Story", "brand": "The River Works", "family": "Clarity & editorial", "status": "ready", "thesis": "Build understanding through a deliberate sequence of evidence, place, and explanation.", "suitableFor": [ "Editorial", "Education" ], "character": "Restrained", "traits": { "composition": "Linear documentary chapters with evidence plates and substantial text", "navigation": "Chapter index plus continuous reading", "typography": "DM Sans + Libre Baskerville", "density": "Medium", "imagery": "Licensed illustrative photography and original diagrams", "surface": "Full-bleed photography alternating with quiet reading surfaces", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Explanatory progression", "Large evidence images with captions", "Plain reading alternative" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/08-documentary-story/start", "states": [ { "key": "chapters", "label": "Chapter overview", "route": "/preview/08-documentary-story/chapters" }, { "key": "reading", "label": "Continuous reading", "route": "/preview/08-documentary-story/reading" } ], "referenceImages": [ { "file": "/previews/08/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/08/92810eb1b393540f-desktop.jpg", "route": "/preview/08-documentary-story/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0ebd20a4c707266cedde73bdd2dc3a2c7b8602515325f02808909257888bc18b", "sha256": "92810eb1b393540fa29598a190fe7d8f0c05bc0ee316edba758096e3e61c8a15", "fullPage": false }, { "file": "/previews/08/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/08/7203278219f35de6-mobile.jpg", "route": "/preview/08-documentary-story/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0ebd20a4c707266cedde73bdd2dc3a2c7b8602515325f02808909257888bc18b", "sha256": "7203278219f35de61c55b3a73e926ee3c63697357dce768978998347d1bc74c6", "fullPage": false }, { "file": "/previews/08/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/08/f8c9cdb090d7210d-detail.jpg", "route": "/preview/08-documentary-story/chapters", "viewport": { "width": 1440, "height": 1000 }, "state": "chapters", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0ebd20a4c707266cedde73bdd2dc3a2c7b8602515325f02808909257888bc18b", "sha256": "f8c9cdb090d7210dd8dc7f0e5cca957c239a61fb2f7cb30fea8b3e8fada3e584", "fullPage": false }, { "file": "/previews/08/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/08/4e7839a93cee8f7e-full-page.jpg", "route": "/preview/08-documentary-story/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0ebd20a4c707266cedde73bdd2dc3a2c7b8602515325f02808909257888bc18b", "sha256": "4e7839a93cee8f7e0006f4d4f9bdb866b53705a9c4baff53ec14aa034112c3d8", "fullPage": true } ], "sourcePath": "src/designs/08-documentary-story", "neighbours": [ "28", "26" ], "palette": { "page": "#eae7dc", "surface": "#ffffff", "ink": "#232e2d", "accent": "#b08a37" }, "fonts": [ "DM Sans", "Libre Baskerville" ], "brief": "**Philosophy and fit.** Build understanding through a deliberate sequence of evidence, place, and explanation. Suitable for investigative features, historical accounts, project retrospectives, and visual explainers.\n\n**Visual grammar.** Use a linear chapter structure with substantial text, full-width documentary images, maps or diagrams where useful, and short transitional passages. A small chapter index provides orientation. A sober sans heading and readable serif body sit on alternating ink and paper sections, with an ochre accent for annotations. Sticky imagery may accompany a passage, but all content remains meaningful in normal document order.\n\n**Specimen and flow.** *The River Works* explains a fictional town's abandoned water system. Readers progress through five chapters, inspect a labelled mechanism diagram, and open evidence captions. Supporting states provide a chapter overview and a plain continuous-reading version.\n\n**Adaptation and identity.** Mobile replaces sticky side-by-side scenes with image-and-text sequences. Reduced motion removes animated transitions. Preserve the explanatory progression and substantial writing; avoid scroll hijacking, text revealed too slowly to read, and spectacle unsupported by content. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Documentary", "Nonprofit", "Environment" ], "visitorGoals": [ "Understand a story" ], "conversionActions": [ "Explore the evidence" ], "siteSize": "Digital publication", "interactionTypes": [ "Photo essay", "Story chapters" ], "keywords": [ "Editorial", "Education", "Explanatory progression", "Large evidence images with captions", "Plain reading alternative" ] }, "patterns": [ "Explanatory progression", "Large evidence images with captions", "Plain reading alternative" ], "downloadUrl": "/downloads/08-documentary-story.zip" }, { "schemaVersion": 2, "id": "09", "slug": "glossy-fashion", "name": "Glossy Fashion", "brand": "Contour Quarterly", "family": "Clarity & editorial", "status": "ready", "thesis": "Use art direction and image sequencing to establish a strong editorial world.", "suitableFor": [ "Editorial", "Fashion" ], "character": "Expressive", "traits": { "composition": "Photographic cover with large display type and alternating editorial spreads", "navigation": "Issue chapters and contributor credits", "typography": "Libre Baskerville + DM Sans", "density": "Low", "imagery": "Licensed illustrative photography", "surface": "Oversized serif display, editorial photography and acid-yellow fields", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Deliberate image scale", "Portrait-aware mobile composition", "A distinct issue identity" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/09-glossy-fashion/start", "states": [ { "key": "story", "label": "The quiet edge", "route": "/preview/09-glossy-fashion/story" }, { "key": "archive", "label": "Issue archive", "route": "/preview/09-glossy-fashion/archive" } ], "referenceImages": [ { "file": "/previews/09/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/09/844c846a75b06e6c-desktop.jpg", "route": "/preview/09-glossy-fashion/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dd7f72f1c9ddbd90151d8d36e12895aadf96beb1b123f2dc8a5b1d43764db101", "sha256": "844c846a75b06e6c87bcf0ccfa91da3326e472204c4b581f7c5ff42d96dc2ff6", "fullPage": false }, { "file": "/previews/09/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/09/f460d2f9fd5c7d43-mobile.jpg", "route": "/preview/09-glossy-fashion/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dd7f72f1c9ddbd90151d8d36e12895aadf96beb1b123f2dc8a5b1d43764db101", "sha256": "f460d2f9fd5c7d434f1c42e410cc7746d16e04f4fc9a61a67050f6a06171c122", "fullPage": false }, { "file": "/previews/09/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/09/e20905f4be8bb032-detail.jpg", "route": "/preview/09-glossy-fashion/story", "viewport": { "width": 1440, "height": 1000 }, "state": "story", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dd7f72f1c9ddbd90151d8d36e12895aadf96beb1b123f2dc8a5b1d43764db101", "sha256": "e20905f4be8bb0323066c80204862fc082f723439dc32897989d59f929fc4143", "fullPage": false }, { "file": "/previews/09/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/09/47eda8441e6aec65-full-page.jpg", "route": "/preview/09-glossy-fashion/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dd7f72f1c9ddbd90151d8d36e12895aadf96beb1b123f2dc8a5b1d43764db101", "sha256": "47eda8441e6aec65499f3306a369be4e7764c293517595d8f824086c4f0fe0d9", "fullPage": true } ], "sourcePath": "src/designs/09-glossy-fashion", "neighbours": [ "06", "36" ], "palette": { "page": "#f3f2eb", "surface": "#ffffff", "ink": "#191b18", "accent": "#d8e34a" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Use art direction and image sequencing to establish a strong editorial world. Suitable for fashion publications, visual culture platforms, photography features, and campaign-led brands.\n\n**Visual grammar.** Compose a full-bleed cover image with an assertive display serif, tightly edited cover lines, and a discreet issue navigation. Interior pages alternate large photographic spreads, intentional white space, cropped details, and short interviews. Use black, paper white, and a single seasonal acid accent. Keep body copy on stable, readable surfaces even when headlines intersect images.\n\n**Specimen and flow.** *Contour Quarterly* presents a fictional visual culture issue. Visitors enter a cover story, move through its image-led chapters, and explore the contributors. Supporting screens provide an issue archive and an image detail view with caption and credit.\n\n**Adaptation and identity.** Mobile uses dedicated portrait crops and restores headings to predictable positions. Preserve editorial image scale and deliberate sequencing; avoid retail product grids, anonymous stock imagery, illegible type overlays, and page-turn gimmicks. Motion remains optional. **Effort: medium.**\n\n**Distinctive composition.** Widely spaced fashion captions use the humanist sans rather than technical monospace; the image-led editorial hierarchy remains.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Fashion", "Creative studio" ], "visitorGoals": [ "Explore a collection" ], "conversionActions": [ "Enquire about a collection" ], "siteSize": "Portfolio & enquiry", "interactionTypes": [ "Editorial imagery", "Collection detail" ], "keywords": [ "Editorial", "Fashion", "Deliberate image scale", "Portrait-aware mobile composition", "A distinct issue identity" ] }, "patterns": [ "Deliberate image scale", "Portrait-aware mobile composition", "A distinct issue identity" ], "downloadUrl": "/downloads/09-glossy-fashion.zip" }, { "schemaVersion": 2, "id": "10", "slug": "evidence-ledger", "name": "Evidence Ledger", "brand": "Public Works Ledger", "family": "Clarity & editorial", "status": "ready", "thesis": "Make claims inspectable and provenance visible.", "suitableFor": [ "Research", "Public services" ], "character": "Restrained", "traits": { "composition": "Faceted records table and an assertion/source comparison", "navigation": "Record index with explicit evidence links", "typography": "DM Sans", "density": "High", "imagery": "Typography, rules, and interface structure", "surface": "Ruled evidence tables, sober metadata and explicit status badges", "motion": "None" }, "effort": "Medium", "definingFeatures": [ "Provenance beside claims", "Dates and status in every record", "Evidence separated from interpretation" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/10-evidence-ledger/start", "states": [ { "key": "record", "label": "Assertion and source", "route": "/preview/10-evidence-ledger/record" }, { "key": "unavailable", "label": "Unavailable source", "route": "/preview/10-evidence-ledger/unavailable" } ], "referenceImages": [ { "file": "/previews/10/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/10/62a4aa7d1bdb1562-desktop.jpg", "route": "/preview/10-evidence-ledger/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6ac4ad3a7c357ef3c04fc51ba09d80638e412089f62b80309c4aa19f00ed6510", "sha256": "62a4aa7d1bdb1562832ea42f9f0a17ac67d82cf5c45cd62c4f29e66f99ac4e6f", "fullPage": false }, { "file": "/previews/10/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/10/1bb38eadd7234ad3-mobile.jpg", "route": "/preview/10-evidence-ledger/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6ac4ad3a7c357ef3c04fc51ba09d80638e412089f62b80309c4aa19f00ed6510", "sha256": "1bb38eadd7234ad392b716785e715a64fe6e6e823571e78821dc483f252079a7", "fullPage": false }, { "file": "/previews/10/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/10/29cf2ff2d7e76ecb-detail.jpg", "route": "/preview/10-evidence-ledger/record", "viewport": { "width": 1440, "height": 1000 }, "state": "record", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6ac4ad3a7c357ef3c04fc51ba09d80638e412089f62b80309c4aa19f00ed6510", "sha256": "29cf2ff2d7e76ecb636ecdb4a66da6015b880e22e2b87907a40b09caa0a37723", "fullPage": false }, { "file": "/previews/10/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/10/813554089025cbbb-full-page.jpg", "route": "/preview/10-evidence-ledger/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6ac4ad3a7c357ef3c04fc51ba09d80638e412089f62b80309c4aa19f00ed6510", "sha256": "813554089025cbbb3e824a37abf9b203a7ac0234312a5bcad6ec3b2223a97356", "fullPage": true } ], "sourcePath": "src/designs/10-evidence-ledger", "neighbours": [ "11", "18" ], "palette": { "page": "#f6f7f5", "surface": "#ffffff", "ink": "#23374a", "accent": "#80611d" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make claims inspectable and provenance visible. Suitable for institutional research, public record collections, policy trackers, and structured investigative resources.\n\n**Visual grammar.** Use a sober index with compact search, a faceted records table, and a persistent evidence summary. Record pages distinguish the statement, its supporting material, the applicable dates, and interpretation. A humanist sans, tabular numerals, thin rules, white surfaces, navy text, and restrained ochre status marks produce a documentary character. Status labels always include text.\n\n**Specimen and flow.** *Public Works Ledger* contains explicitly fictional contracts and organisations. Visitors filter records, inspect a single assertion, and open its source excerpt beside the assertion. Supporting states show conflicting fixture evidence and a record whose source is unavailable.\n\n**Adaptation and identity.** Mobile turns rows into labelled records and places source material after its associated claim. Preserve provenance, date context, and the distinction between evidence and interpretation; avoid unsupported score badges, dashboard ornament, and graphs that imply unrecorded relationships. Motion is unnecessary. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Research", "Public policy", "Reporting" ], "visitorGoals": [ "Inspect evidence" ], "conversionActions": [ "Compare source material" ], "siteSize": "Digital publication", "interactionTypes": [ "Data tables", "Source notes" ], "keywords": [ "Research", "Public services", "Provenance beside claims", "Dates and status in every record", "Evidence separated from interpretation" ] }, "patterns": [ "Provenance beside claims", "Dates and status in every record", "Evidence separated from interpretation" ], "downloadUrl": "/downloads/10-evidence-ledger.zip" }, { "schemaVersion": 2, "id": "11", "slug": "operations-console", "name": "Operations Console", "brand": "Dispatch Board", "family": "Workspaces & discovery", "status": "ready", "thesis": "Help experienced users recognise exceptions and complete repetitive work quickly.", "suitableFor": [ "Operations", "Dashboards" ], "character": "Restrained", "traits": { "composition": "Dense shipment table, narrow functional sidebar, and contextual detail", "navigation": "Persistent application sidebar and row selection", "typography": "DM Sans", "density": "High", "imagery": "Typography, rules, and interface structure", "surface": "Dense white tables, cool grey workspace and compact status labels", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Labelled operational exceptions", "Batch actions next to records", "Tabular alignment and visible selection" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/11-operations-console/start", "states": [ { "key": "detail", "label": "Shipment details", "route": "/preview/11-operations-console/detail" }, { "key": "empty", "label": "Empty results", "route": "/preview/11-operations-console/empty" } ], "referenceImages": [ { "file": "/previews/11/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/11/e3787b34bd9fc177-desktop.jpg", "route": "/preview/11-operations-console/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fd8b78eae2c6cb25d82b500efc73532077d3c5d00b352abcd47059ec923b8934", "sha256": "e3787b34bd9fc1779a6d7372dfc887198750b2190ecb408727dd5ca31f37cd39", "fullPage": false }, { "file": "/previews/11/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/11/cbd83ba6fa69721e-mobile.jpg", "route": "/preview/11-operations-console/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fd8b78eae2c6cb25d82b500efc73532077d3c5d00b352abcd47059ec923b8934", "sha256": "cbd83ba6fa69721ec4fc52c89a01aca8fa280840a52d9a4f2e31ffc73408f3da", "fullPage": false }, { "file": "/previews/11/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/11/aac6aae129bb5d7b-detail.jpg", "route": "/preview/11-operations-console/detail", "viewport": { "width": 1440, "height": 1000 }, "state": "detail", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fd8b78eae2c6cb25d82b500efc73532077d3c5d00b352abcd47059ec923b8934", "sha256": "aac6aae129bb5d7bb6d217547062631689c664fc08d7d112763ba3aa2aae1768", "fullPage": false }, { "file": "/previews/11/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/11/bd39f8fb92368142-full-page.jpg", "route": "/preview/11-operations-console/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fd8b78eae2c6cb25d82b500efc73532077d3c5d00b352abcd47059ec923b8934", "sha256": "bd39f8fb92368142d10efe693859dcfc81033a38ef5be607d8ad97c2381bc621", "fullPage": true } ], "sourcePath": "src/designs/11-operations-console", "neighbours": [ "10", "13" ], "palette": { "page": "#f4f6f8", "surface": "#fff", "ink": "#263241", "accent": "#265f4d" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Help experienced users recognise exceptions and complete repetitive work quickly. Suitable for inventory, fulfilment, support queues, administration, and internal operational tools.\n\n**Visual grammar.** A compact application bar and narrow functional sidebar frame a dense, well-aligned table. Use a readable UI sans, tabular numerals, cool white surfaces, slate text, and restrained amber or red for labelled exceptions. Row detail opens in a side panel; filtering and batch actions sit close to the affected records. Counts support the work rather than forming a decorative dashboard.\n\n**Specimen and flow.** *Dispatch Board* models fictional outbound shipments. Users filter delayed shipments, inspect one, and locally update its handling status. Supporting states show a batch action confirmation and an empty filtered result with a reset action.\n\n**Adaptation and identity.** Mobile shows the essential shipment fields in a list, with full detail on a separate view. Preserve data density, predictable selection, and efficient keyboard navigation; avoid oversized cards, ambiguous icon-only actions, and indiscriminate compression. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Logistics", "Operations", "B2B services" ], "visitorGoals": [ "Manage work" ], "conversionActions": [ "Update a record" ], "siteSize": "Application", "interactionTypes": [ "Batch actions", "Status filters" ], "keywords": [ "Operations", "Dashboards", "Labelled operational exceptions", "Batch actions next to records", "Tabular alignment and visible selection" ] }, "patterns": [ "Labelled operational exceptions", "Batch actions next to records", "Tabular alignment and visible selection" ], "downloadUrl": "/downloads/11-operations-console.zip" }, { "schemaVersion": 2, "id": "12", "slug": "canvas-workspace", "name": "Canvas Workspace", "brand": "Common Ground", "family": "Workspaces & discovery", "status": "ready", "thesis": "Make spatial arrangement part of thinking and organising.", "suitableFor": [ "Workspaces", "Research" ], "character": "Restrained", "traits": { "composition": "Bounded spatial research board with note clusters and an equivalent outline", "navigation": "Canvas/outline switch and explicit note controls", "typography": "DM Sans", "density": "Medium", "imagery": "Original SVG diagrams and illustrations", "surface": "Dotted canvas, offset paper notes and connector lines", "motion": "Minimal" }, "effort": "High", "definingFeatures": [ "Spatial grouping carries meaning", "Editable note inspector", "Keyboard alternatives to movement" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/12-canvas-workspace/start", "states": [ { "key": "detail", "label": "Selected note inspector", "route": "/preview/12-canvas-workspace/detail" }, { "key": "outline", "label": "Structured outline", "route": "/preview/12-canvas-workspace/outline" } ], "referenceImages": [ { "file": "/previews/12/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/12/52bbc51a6c1d96c9-desktop.jpg", "route": "/preview/12-canvas-workspace/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6a2d588f87081cfbccf09abc507da09a2b9787bc50218fca78fb5b85c8ea6d4a", "sha256": "52bbc51a6c1d96c99b3a758fceafbff2774f30d16cf9564c0491f01e795f437d", "fullPage": false }, { "file": "/previews/12/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/12/ebccc477bf9a7788-mobile.jpg", "route": "/preview/12-canvas-workspace/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6a2d588f87081cfbccf09abc507da09a2b9787bc50218fca78fb5b85c8ea6d4a", "sha256": "ebccc477bf9a77887f4dc74d7e97eec57314b2adc55d28d75ec8e413510680fe", "fullPage": false }, { "file": "/previews/12/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/12/314a24488994c5d2-detail.jpg", "route": "/preview/12-canvas-workspace/detail", "viewport": { "width": 1440, "height": 1000 }, "state": "detail", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6a2d588f87081cfbccf09abc507da09a2b9787bc50218fca78fb5b85c8ea6d4a", "sha256": "314a24488994c5d252dbeb7c6fcb312d4324d7ca6807d8f270cf9ef9049dbda4", "fullPage": false }, { "file": "/previews/12/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/12/b66931047143fe8c-full-page.jpg", "route": "/preview/12-canvas-workspace/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6a2d588f87081cfbccf09abc507da09a2b9787bc50218fca78fb5b85c8ea6d4a", "sha256": "b66931047143fe8c2f6a792cc2b4cad688862313fc3ccfa2c24f5fe6fed75506", "fullPage": true } ], "sourcePath": "src/designs/12-canvas-workspace", "neighbours": [ "18", "13" ], "palette": { "page": "#f5f4ee", "surface": "#ffffff", "ink": "#343b35", "accent": "#5c654d" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make spatial arrangement part of thinking and organising. Suitable for planning boards, visual research, moodboards, and early concept development.\n\n**Visual grammar.** Place an open working surface beneath a compact toolbar, with a collapsible item library and a small context inspector. Use a light dot grid, warm neutral notes, dark text, and distinct labelled item types. The canvas is the main composition; the surrounding interface stays visually quiet. Spatial groups, connections, and relative position carry meaning.\n\n**Specimen and flow.** *Common Ground* provides a bounded fictional research board. Users add a source note, reposition it, and place it into a named group. Supporting states show a selected item's editable detail and a structured outline containing the same content.\n\n**Adaptation and identity.** Mobile defaults to the outline, with an optional canvas inspection mode. Every placement action also has keyboard and explicit-button controls. Preserve spatial relationships and a usable non-spatial view; avoid implementing an infinite rendering engine, requiring drag gestures, or hiding essential content off-screen. **Effort: high.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Creative tools", "Software" ], "visitorGoals": [ "Organise ideas" ], "conversionActions": [ "Create a canvas" ], "siteSize": "Application", "interactionTypes": [ "Canvas controls", "Selection" ], "keywords": [ "Workspaces", "Research", "Spatial grouping carries meaning", "Editable note inspector", "Keyboard alternatives to movement" ] }, "patterns": [ "Spatial grouping carries meaning", "Editable note inspector", "Keyboard alternatives to movement" ], "downloadUrl": "/downloads/12-canvas-workspace.zip" }, { "schemaVersion": 2, "id": "13", "slug": "project-workbench", "name": "Project Workbench", "brand": "Scene Workshop", "family": "Workspaces & discovery", "status": "ready", "thesis": "Keep a project's structure, current object, and relevant properties available together.", "suitableFor": [ "Workspaces", "Authoring" ], "character": "Restrained", "traits": { "composition": "Three-pane project tree, central scene, and contextual inspector", "navigation": "Hierarchical object selection and named mobile views", "typography": "DM Sans", "density": "High", "imagery": "Typography, rules, and interface structure", "surface": "Dark work panels, nested tool rails and a coloured scene canvas", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Visible project context", "Object and properties stay connected", "Clear unsaved and discard states" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/13-project-workbench/start", "states": [ { "key": "edit", "label": "Unsaved scene edits", "route": "/preview/13-project-workbench/edit" }, { "key": "preview", "label": "Scene preview", "route": "/preview/13-project-workbench/preview" } ], "referenceImages": [ { "file": "/previews/13/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/13/81d2841d1787884c-desktop.jpg", "route": "/preview/13-project-workbench/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7e3386bbeea7670f06e2d4e46b323c52733a39ecb084c50099ebc77c5c65c3b0", "sha256": "81d2841d1787884c97a2ac608592b86595069e6318415524761bb2f700fe69e3", "fullPage": false }, { "file": "/previews/13/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/13/d253832a110219b1-mobile.jpg", "route": "/preview/13-project-workbench/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7e3386bbeea7670f06e2d4e46b323c52733a39ecb084c50099ebc77c5c65c3b0", "sha256": "d253832a110219b1fd69cbd3cbcd5abf06491ae56f1c80f8cf40ad166d2fdba3", "fullPage": false }, { "file": "/previews/13/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/13/39b067ec17ddde5c-detail.jpg", "route": "/preview/13-project-workbench/edit", "viewport": { "width": 1440, "height": 1000 }, "state": "edit", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7e3386bbeea7670f06e2d4e46b323c52733a39ecb084c50099ebc77c5c65c3b0", "sha256": "39b067ec17ddde5c2380b9c87be410c0a9104fdf68b284f6de46de33005cb9f7", "fullPage": false }, { "file": "/previews/13/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/13/51cf1c25dcfe49f7-full-page.jpg", "route": "/preview/13-project-workbench/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7e3386bbeea7670f06e2d4e46b323c52733a39ecb084c50099ebc77c5c65c3b0", "sha256": "51cf1c25dcfe49f7dd3305d4f18cb48f70cfe67a0ff2bebd56524b88dc398bae", "fullPage": true } ], "sourcePath": "src/designs/13-project-workbench", "neighbours": [ "11", "12" ], "palette": { "page": "#20262c", "surface": "#2b343c", "ink": "#e5ecec", "accent": "#8ed2ba" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Keep a project's structure, current object, and relevant properties available together. Suitable for content editors, asset managers, authoring tools, and technical project interfaces.\n\n**Visual grammar.** Use a three-pane composition: a hierarchical navigator, a central document or object view, and a contextual inspector. A restrained app header holds global actions. Neutral sans text, monospace identifiers, graphite surfaces, bright readable text, and a single teal selection accent establish a workmanlike environment. Pane boundaries and selected states should be clear without elaborate chrome.\n\n**Specimen and flow.** *Scene Workshop* contains a fictional collection of game scenes. Users select a scene, edit its descriptive metadata, and preview the resulting scene card. Supporting states show unsaved changes with a discard action and a search result that opens the matching object.\n\n**Adaptation and identity.** Mobile converts panes into labelled views while preserving selection and edits. Preserve hierarchical context and the relationship between object and inspector; avoid turning the centre into a metrics dashboard or building a full code editor. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Project management", "Software" ], "visitorGoals": [ "Coordinate a project" ], "conversionActions": [ "Update a task" ], "siteSize": "Application", "interactionTypes": [ "Task board", "Project details" ], "keywords": [ "Workspaces", "Authoring", "Visible project context", "Object and properties stay connected", "Clear unsaved and discard states" ] }, "patterns": [ "Visible project context", "Object and properties stay connected", "Clear unsaved and discard states" ], "downloadUrl": "/downloads/13-project-workbench.zip" }, { "schemaVersion": 2, "id": "14", "slug": "guided-journey", "name": "Guided Journey", "brand": "Workshop Finder", "family": "Workspaces & discovery", "status": "ready", "thesis": "Reduce a complicated decision into understandable, reversible steps.", "suitableFor": [ "Onboarding", "Public services" ], "character": "Restrained", "traits": { "composition": "Calm single-column question stage with a persistent answer summary", "navigation": "Reversible steps and an editable review", "typography": "DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Warm off-white, generous form rows and a muted purple progress line", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Visible progress", "Grouped clear choices", "Answers remain easy to revise" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/14-guided-journey/start", "states": [ { "key": "review", "label": "Review your choices", "route": "/preview/14-guided-journey/review" }, { "key": "incomplete", "label": "Required answer guidance", "route": "/preview/14-guided-journey/incomplete" } ], "referenceImages": [ { "file": "/previews/14/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/14/b64c035b71633746-desktop.jpg", "route": "/preview/14-guided-journey/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7edf71f67c0d24257a6551422a36edfecfbd180156bc9e064e45d07b75d65b72", "sha256": "b64c035b71633746cd85ef03b88cd01bdd7e077c418188ed71fcdf55a26ac39a", "fullPage": false }, { "file": "/previews/14/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/14/69d4ed0bacb1981d-mobile.jpg", "route": "/preview/14-guided-journey/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7edf71f67c0d24257a6551422a36edfecfbd180156bc9e064e45d07b75d65b72", "sha256": "69d4ed0bacb1981dbc8c8caa9950b57d1d974ec6bbf94f36a84ada85ff3affc9", "fullPage": false }, { "file": "/previews/14/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/14/1e8bc70522c7763a-detail.jpg", "route": "/preview/14-guided-journey/review", "viewport": { "width": 1440, "height": 1000 }, "state": "review", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7edf71f67c0d24257a6551422a36edfecfbd180156bc9e064e45d07b75d65b72", "sha256": "1e8bc70522c7763a0adc1a12b012ca17bdb2b0f58fa7942211d9e1dde2b6299e", "fullPage": false }, { "file": "/previews/14/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/14/3b3e2c0485c072bb-full-page.jpg", "route": "/preview/14-guided-journey/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7edf71f67c0d24257a6551422a36edfecfbd180156bc9e064e45d07b75d65b72", "sha256": "3b3e2c0485c072bbcb32d179ccc7764e9b44d0d0f2726ede721c3c5251a5ef97", "fullPage": true } ], "sourcePath": "src/designs/14-guided-journey", "neighbours": [ "01", "29" ], "palette": { "page": "#f4f0ea", "surface": "#ffffff", "ink": "#392d44", "accent": "#6d4d8c" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Reduce a complicated decision into understandable, reversible steps. Suitable for onboarding, applications, configuration, booking preparation, and structured self-assessment.\n\n**Visual grammar.** Use a calm single-column stage, a compact progress indicator, a clear current question, and a persistent summary of collected choices. A warm sans, generous control spacing, pale stone background, dark plum text, and a restrained violet action colour support focus. Group related questions together; introduce explanatory text before unfamiliar choices rather than hiding it behind tooltips.\n\n**Specimen and flow.** *Workshop Finder* guides visitors through choosing an interest, available day, and preferred format before recommending fixture workshops. Supporting states show an incomplete required answer with inline guidance and a review screen where any answer can be edited.\n\n**Adaptation and identity.** Mobile keeps the current question and navigation actions in a stable order, without obscuring content behind fixed controls. Preserve reversibility, visible progress, and informative summaries; avoid one-click-per-word pacing, false urgency, and unexplained branching. Motion can be disabled entirely. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Education", "Workshops" ], "visitorGoals": [ "Choose an experience" ], "conversionActions": [ "Complete a guided choice" ], "siteSize": "Service site", "interactionTypes": [ "Multi-step form", "Review summary" ], "keywords": [ "Onboarding", "Public services", "Visible progress", "Grouped clear choices", "Answers remain easy to revise" ] }, "patterns": [ "Visible progress", "Grouped clear choices", "Answers remain easy to revise" ], "downloadUrl": "/downloads/14-guided-journey.zip" }, { "schemaVersion": 2, "id": "15", "slug": "temporal-planner", "name": "Temporal Planner", "brand": "Weekcraft", "family": "Workspaces & discovery", "status": "ready", "thesis": "Make time, duration, overlap, and availability immediately legible.", "suitableFor": [ "Planning", "Workspaces" ], "character": "Restrained", "traits": { "composition": "Time-based week grid paired with an agenda rail", "navigation": "Week, agenda, and explicit rescheduling form", "typography": "DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Ruled time grid and softly coloured duration blocks", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Readable duration and overlap", "Labelled activity categories", "Non-drag scheduling controls" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/15-temporal-planner/start", "states": [ { "key": "edit", "label": "Move a session", "route": "/preview/15-temporal-planner/edit" }, { "key": "agenda", "label": "Agenda view", "route": "/preview/15-temporal-planner/agenda" } ], "referenceImages": [ { "file": "/previews/15/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/15/1f485563ec0e558f-desktop.jpg", "route": "/preview/15-temporal-planner/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4d68aadc30dd4e7c06776ce9b6ac567090cde45c2e897e54110a2e32e03b5dde", "sha256": "1f485563ec0e558fa8fecc48f6f13a7742d1fb020f487ec4dbca8a1f6623ac3a", "fullPage": false }, { "file": "/previews/15/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/15/0e385a43797b0265-mobile.jpg", "route": "/preview/15-temporal-planner/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4d68aadc30dd4e7c06776ce9b6ac567090cde45c2e897e54110a2e32e03b5dde", "sha256": "0e385a43797b0265d4dd7a386312fe751e1f95691929b28ed05036571db4ba92", "fullPage": false }, { "file": "/previews/15/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/15/70bc1ce4c23d795e-detail.jpg", "route": "/preview/15-temporal-planner/edit", "viewport": { "width": 1440, "height": 1000 }, "state": "edit", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4d68aadc30dd4e7c06776ce9b6ac567090cde45c2e897e54110a2e32e03b5dde", "sha256": "70bc1ce4c23d795e64462df9049c96d8171bbb44c86ffc29f0bc45b3794c6f5b", "fullPage": false }, { "file": "/previews/15/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/15/7b40aaf819f7e96d-full-page.jpg", "route": "/preview/15-temporal-planner/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4d68aadc30dd4e7c06776ce9b6ac567090cde45c2e897e54110a2e32e03b5dde", "sha256": "7b40aaf819f7e96d378e8d4cee2e6e8f1a97c86f1ef5454ac4a6971ab45fdc63", "fullPage": true } ], "sourcePath": "src/designs/15-temporal-planner", "neighbours": [ "11", "14" ], "palette": { "page": "#f7f8fa", "surface": "#ffffff", "ink": "#2c3d51", "accent": "#356d9c" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make time, duration, overlap, and availability immediately legible. Suitable for schedules, personal planning, project calendars, event programmes, and resource booking.\n\n**Visual grammar.** Use a time-based grid with explicit day and hour labels, a narrow agenda rail, and a compact toolbar for period and view changes. A friendly UI sans, clean white ground, dark blue-grey ink, and a small palette of labelled activity categories organise the page. Current selection, unavailable periods, and overlapping items have visibly different treatments.\n\n**Specimen and flow.** *Weekcraft* contains a fictional workshop schedule. Users select a session, move it through an explicit date-and-time form, and inspect the updated week. Supporting states show a scheduling conflict and an agenda view containing the same appointments.\n\n**Adaptation and identity.** Mobile defaults to the agenda or a single-day view; horizontal swiping is optional. Preserve the time structure and text labels; avoid drag-only editing, colour-only categories, and compressing a whole week into unreadable columns. Motion simply confirms a change. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Scheduling", "Studios" ], "visitorGoals": [ "Plan a session" ], "conversionActions": [ "Move a booking" ], "siteSize": "Application", "interactionTypes": [ "Calendar", "Conflict validation" ], "keywords": [ "Planning", "Workspaces", "Readable duration and overlap", "Labelled activity categories", "Non-drag scheduling controls" ] }, "patterns": [ "Readable duration and overlap", "Labelled activity categories", "Non-drag scheduling controls" ], "downloadUrl": "/downloads/15-temporal-planner.zip" }, { "schemaVersion": 2, "id": "16", "slug": "field-atlas", "name": "Field Atlas", "brand": "Northbank Footpaths", "family": "Workspaces & discovery", "status": "ready", "thesis": "Use location as the primary route into information.", "suitableFor": [ "Maps", "Discovery" ], "character": "Restrained", "traits": { "composition": "Large illustrated district map linked to a compact trail list", "navigation": "Equivalent map and list selection", "typography": "DM Sans", "density": "Medium", "imagery": "Original SVG diagrams and illustrations", "surface": "Muted terrain colours, map lines and numbered place markers", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Geography is the entry point", "Matching list and map state", "Access notes beside route details" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/16-field-atlas/start", "states": [ { "key": "detail", "label": "Riverside loop", "route": "/preview/16-field-atlas/detail" }, { "key": "list", "label": "List-only results", "route": "/preview/16-field-atlas/list" } ], "referenceImages": [ { "file": "/previews/16/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/16/f680114693e7cc8c-desktop.jpg", "route": "/preview/16-field-atlas/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e85dd591cf3b310868218d3612606731ef362932fc61a985b7255c271969ca22", "sha256": "f680114693e7cc8c4482cbf1489a0cf92ae46435222e218beef122c9b55ef177", "fullPage": false }, { "file": "/previews/16/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/16/d5c472079e9ce461-mobile.jpg", "route": "/preview/16-field-atlas/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e85dd591cf3b310868218d3612606731ef362932fc61a985b7255c271969ca22", "sha256": "d5c472079e9ce461576f544804a5342420c8a38bb1e61563a15b28dc5718b87e", "fullPage": false }, { "file": "/previews/16/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/16/efa3e82b534e33fd-detail.jpg", "route": "/preview/16-field-atlas/detail", "viewport": { "width": 1440, "height": 1000 }, "state": "detail", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e85dd591cf3b310868218d3612606731ef362932fc61a985b7255c271969ca22", "sha256": "efa3e82b534e33fdc1a50e5400d9f190f2355dccc2805ff7690fa05679f0e212", "fullPage": false }, { "file": "/previews/16/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/16/1fab313843e8b426-full-page.jpg", "route": "/preview/16-field-atlas/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e85dd591cf3b310868218d3612606731ef362932fc61a985b7255c271969ca22", "sha256": "1fab313843e8b4263127bb694c1dfac663a63c9bc632deee5e9fc1aa7606be95", "fullPage": true } ], "sourcePath": "src/designs/16-field-atlas", "neighbours": [ "26", "20" ], "palette": { "page": "#f0f0e4", "surface": "#ffffff", "ink": "#2b4439", "accent": "#35694c" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Use location as the primary route into information. Suitable for local guides, public amenities, heritage trails, travel research, and geographically organised collections.\n\n**Visual grammar.** Pair a large, deliberately styled map with a compact searchable place list and a filter bar. Use an earthy cream ground, dark green labels, blue waterways, and distinct labelled place markers. A practical sans and small cartographic labels reinforce the atlas character. The selected place remains obvious in both map and list.\n\n**Specimen and flow.** *Northbank Footpaths* uses an original SVG map of a fictional district. Visitors filter trails by surface, select a route, and inspect its stops and access notes. Supporting states show a route detail and a list-only search result.\n\n**Adaptation and identity.** Mobile uses a clear map/list switch while preserving filters and selection. All places remain reachable through ordinary links; the reference needs no geolocation or external map service. Preserve geographic relationships and readable labels; avoid decorative maps disconnected from results or essential hover interactions. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Travel", "Local discovery" ], "visitorGoals": [ "Explore a place" ], "conversionActions": [ "Save a location" ], "siteSize": "Searchable catalogue", "interactionTypes": [ "Map", "List filters" ], "keywords": [ "Maps", "Discovery", "Geography is the entry point", "Matching list and map state", "Access notes beside route details" ] }, "patterns": [ "Geography is the entry point", "Matching list and map state", "Access notes beside route details" ], "downloadUrl": "/downloads/16-field-atlas.zip" }, { "schemaVersion": 2, "id": "17", "slug": "observatory", "name": "Observatory", "brand": "Watershed Observatory", "family": "Workspaces & discovery", "status": "ready", "thesis": "Help users detect patterns, compare measures, and inspect uncertainty within a coherent instrument panel.", "suitableFor": [ "Dashboards", "Research" ], "character": "Restrained", "traits": { "composition": "Aligned analytical plots on a dark instrument surface", "navigation": "Persistent station/interval controls and an equivalent data table", "typography": "Space Grotesk + IBM Plex Mono", "density": "High", "imagery": "Original SVG diagrams and illustrations", "surface": "Dark instrument panels, cyan data marks and amber comparison lines", "motion": "Minimal" }, "effort": "High", "definingFeatures": [ "Shared chart axes and units", "Missing data distinct from zero", "Selectable readings without hover" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/17-observatory/start", "states": [ { "key": "table", "label": "Measurement table", "route": "/preview/17-observatory/table" }, { "key": "missing", "label": "Missing data interval", "route": "/preview/17-observatory/missing" } ], "referenceImages": [ { "file": "/previews/17/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/17/f27504ef8f1053c4-desktop.jpg", "route": "/preview/17-observatory/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:11e901bdfeac572fc6234a6115d9039dc0938eee448345445b00a3e9bc1b2ff5", "sha256": "f27504ef8f1053c42af27eabd90c7abd7488806ea21bf2454f9016587e7618dd", "fullPage": false }, { "file": "/previews/17/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/17/8050bac51e5481c2-mobile.jpg", "route": "/preview/17-observatory/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:11e901bdfeac572fc6234a6115d9039dc0938eee448345445b00a3e9bc1b2ff5", "sha256": "8050bac51e5481c203966be7d2af60296e1863a5fba14c45e52819b660213058", "fullPage": false }, { "file": "/previews/17/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/17/372974b3ff8f0ef3-detail.jpg", "route": "/preview/17-observatory/table", "viewport": { "width": 1440, "height": 1000 }, "state": "table", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:11e901bdfeac572fc6234a6115d9039dc0938eee448345445b00a3e9bc1b2ff5", "sha256": "372974b3ff8f0ef383777da9c64b15121a16aa52511b1dd7b808f89befd2b14a", "fullPage": false }, { "file": "/previews/17/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/17/971f873846ae8e7a-full-page.jpg", "route": "/preview/17-observatory/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:11e901bdfeac572fc6234a6115d9039dc0938eee448345445b00a3e9bc1b2ff5", "sha256": "971f873846ae8e7af12fc4a1601a803cb9dbc1861c6c0f23f053d4616be3e29b", "fullPage": true } ], "sourcePath": "src/designs/17-observatory", "neighbours": [ "11", "49" ], "palette": { "page": "#101d24", "surface": "#192a33", "ink": "#d8e7e8", "accent": "#6ad0ce" }, "fonts": [ "Space Grotesk", "IBM Plex Mono" ], "brief": "**Philosophy and fit.** Help users detect patterns, compare measures, and inspect uncertainty within a coherent instrument panel. Suitable for analytics, monitoring, scientific demonstrations, and resource tracking.\n\n**Visual grammar.** Use a dark, quiet plotting surface with a persistent control strip and aligned charts sharing meaningful time axes. A technical sans, monospace readouts, muted grid lines, and restrained cyan, amber, and violet series colours support inspection. Keep charts large enough to read; choose panels because their measures relate, not because a grid needs filling.\n\n**Specimen and flow.** *Watershed Observatory* displays clearly labelled synthetic river measurements. Users change a date interval, compare two stations, and inspect a selected reading. Supporting states provide a data table and a missing-data interval with its cause explained in fixture text.\n\n**Adaptation and identity.** Mobile presents plots in a meaningful sequence and replaces small hover targets with selectable readings. Preserve scales, units, labels, and distinctions between missing and zero values; avoid animated counters, fake live activity, and ornamental gauges. **Effort: high.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Research", "Analytics" ], "visitorGoals": [ "Understand change" ], "conversionActions": [ "Inspect a dataset" ], "siteSize": "Application", "interactionTypes": [ "Charts", "Date filters" ], "keywords": [ "Dashboards", "Research", "Shared chart axes and units", "Missing data distinct from zero", "Selectable readings without hover" ] }, "patterns": [ "Shared chart axes and units", "Missing data distinct from zero", "Selectable readings without hover" ], "downloadUrl": "/downloads/17-observatory.zip" }, { "schemaVersion": 2, "id": "18", "slug": "knowledge-garden", "name": "Knowledge Garden", "brand": "The Small Systems Garden", "family": "Workspaces & discovery", "status": "ready", "thesis": "Encourage exploration through connected ideas while showing where each piece belongs.", "suitableFor": [ "Research", "Reading" ], "character": "Restrained", "traits": { "composition": "Compact note workspace with maturity metadata, topic tree and separate backlink panels", "navigation": "Contextual links, topic hierarchy, and a local search", "typography": "DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Soft green paper, inline links and quiet backlink rails", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Textual connections carry meaning", "Hierarchy separate from backlinks", "Stable note URLs" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/18-knowledge-garden/start", "states": [ { "key": "note", "label": "A connected concept", "route": "/preview/18-knowledge-garden/note" }, { "key": "search", "label": "Matched passages", "route": "/preview/18-knowledge-garden/search" } ], "referenceImages": [ { "file": "/previews/18/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/18/eebe1a19fda037f7-desktop.jpg", "route": "/preview/18-knowledge-garden/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8555d6b41768024802d96a04e1903d4b0f3474dae435127eda6fb8c44c705c53", "sha256": "eebe1a19fda037f779f6a11a5695cb3f06ea85909bc2c6a11e08b04ecf12a694", "fullPage": false }, { "file": "/previews/18/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/18/b42694aaf6f80c62-mobile.jpg", "route": "/preview/18-knowledge-garden/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8555d6b41768024802d96a04e1903d4b0f3474dae435127eda6fb8c44c705c53", "sha256": "b42694aaf6f80c6229cf3a4943e2f8d848ff2b21ea11ddd1fcd9119469d77d5b", "fullPage": false }, { "file": "/previews/18/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/18/eebe1a19fda037f7-detail.jpg", "route": "/preview/18-knowledge-garden/note", "viewport": { "width": 1440, "height": 1000 }, "state": "note", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8555d6b41768024802d96a04e1903d4b0f3474dae435127eda6fb8c44c705c53", "sha256": "eebe1a19fda037f779f6a11a5695cb3f06ea85909bc2c6a11e08b04ecf12a694", "fullPage": false }, { "file": "/previews/18/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/18/97a29e691be73e33-full-page.jpg", "route": "/preview/18-knowledge-garden/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8555d6b41768024802d96a04e1903d4b0f3474dae435127eda6fb8c44c705c53", "sha256": "97a29e691be73e333ae439e19291b06babfcaa31a9c39e61955e9700989d046e", "fullPage": true } ], "sourcePath": "src/designs/18-knowledge-garden", "neighbours": [ "12", "05" ], "palette": { "page": "#f4f5ee", "surface": "#ffffff", "ink": "#344237", "accent": "#4b6b4d" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Encourage exploration through connected ideas while showing where each piece belongs. Suitable for personal knowledge bases, wikis, research notes, and living project documentation.\n\n**Visual grammar.** Use a readable central note, a compact topic tree, and a contextual rail for backlinks and related concepts. Soft grey-green surfaces, dark green-black text, compact sans-serif headings, and a clear sans body create a cultivated, practical tone. The interface distinguishes a note's hierarchy from its cross-links; a small trail records the current route through the collection.\n\n**Specimen and flow.** *The Small Systems Garden* contains fictional notes on everyday design. Visitors open a concept, follow a contextual link, and inspect notes that link back to it. Supporting views show a topic overview and a local search result with matched passages.\n\n**Adaptation and identity.** Mobile moves the tree and backlinks into clearly labelled sections. Preserve readable notes, meaningful connections, and stable URLs; avoid graph visualisations as compulsory navigation, unexplained tags, and decorative pseudo-botanical clutter. **Effort: medium.**\n\n**Distinctive composition.** A compact sans-serif note workspace separates the topic tree, developing-note metadata, reading surface, and coloured backlink panels. This gives Knowledge Garden an editable, connected character distinct from the book-like Scholarly Folio.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Knowledge management", "Education" ], "visitorGoals": [ "Find an idea" ], "conversionActions": [ "Read a note" ], "siteSize": "Documentation site", "interactionTypes": [ "Search", "Linked notes" ], "keywords": [ "Research", "Reading", "Textual connections carry meaning", "Hierarchy separate from backlinks", "Stable note URLs" ] }, "patterns": [ "Textual connections carry meaning", "Hierarchy separate from backlinks", "Stable note URLs" ], "downloadUrl": "/downloads/18-knowledge-garden.zip" }, { "schemaVersion": 2, "id": "19", "slug": "conversation-desk", "name": "Conversation Desk", "brand": "Desk Guide", "family": "Workspaces & discovery", "status": "ready", "thesis": "Make a bounded information exchange feel direct and responsive.", "suitableFor": [ "Onboarding", "Support" ], "character": "Restrained", "traits": { "composition": "Conversation window with distinct speaker bubbles, reply chips and a compact answer summary", "navigation": "Suggested replies, review, restart, and direct browse", "typography": "DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Warm conversational surface, message rows and a persistent summary rail", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Visible conversational continuity", "Editable collected answers", "A complete non-chat alternative" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/19-conversation-desk/start", "states": [ { "key": "summary", "label": "Answer summary", "route": "/preview/19-conversation-desk/summary" }, { "key": "browse", "label": "Browse workspaces", "route": "/preview/19-conversation-desk/browse" } ], "referenceImages": [ { "file": "/previews/19/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/19/608696c3af4867ef-desktop.jpg", "route": "/preview/19-conversation-desk/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ec86a8d324f036458d7c748397ff0e9ef26cc7bd55da4e749e29ee525bbe2a21", "sha256": "608696c3af4867ef5e18554c26482a2278d597a0b9cbe3d556b00afb9a007ad2", "fullPage": false }, { "file": "/previews/19/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/19/9e390c14ed7bbcfc-mobile.jpg", "route": "/preview/19-conversation-desk/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ec86a8d324f036458d7c748397ff0e9ef26cc7bd55da4e749e29ee525bbe2a21", "sha256": "9e390c14ed7bbcfc72738a861fdea40dcde6ce90c6d28b8f1aedaa593212eebd", "fullPage": false }, { "file": "/previews/19/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/19/f84950f928b5a2f0-detail.jpg", "route": "/preview/19-conversation-desk/summary", "viewport": { "width": 1440, "height": 1000 }, "state": "summary", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ec86a8d324f036458d7c748397ff0e9ef26cc7bd55da4e749e29ee525bbe2a21", "sha256": "f84950f928b5a2f08b3ec9a94bb6f24848bda7523a902cc2a231bca1082cb993", "fullPage": false }, { "file": "/previews/19/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/19/608696c3af4867ef-full-page.jpg", "route": "/preview/19-conversation-desk/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ec86a8d324f036458d7c748397ff0e9ef26cc7bd55da4e749e29ee525bbe2a21", "sha256": "608696c3af4867ef5e18554c26482a2278d597a0b9cbe3d556b00afb9a007ad2", "fullPage": true } ], "sourcePath": "src/designs/19-conversation-desk", "neighbours": [ "14", "20" ], "palette": { "page": "#fbf8f1", "surface": "#ffffff", "ink": "#2e3940", "accent": "#386b89" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make a bounded information exchange feel direct and responsive. Suitable for product guidance, structured support, intake, and interactive learning with a clearly defined decision tree.\n\n**Visual grammar.** A compact conversation window with guide and visitor bubbles sits beside a live summary of resolved answers. Use humanist sans text, warm white, dark ink, restrained blue response emphasis, and subtle dividers between exchanges. Present suggested replies as explicit controls and longer explanations as readable paragraphs. A small persistent navigation offers restart, review, and a direct browse alternative.\n\n**Specimen and flow.** *Desk Guide* helps a fictional coworking visitor choose a workspace. Visitors answer a finite set of scripted questions, receive a fixture recommendation, and revise an earlier answer. Supporting states show an unsupported free-text response with suggested choices and a complete answer summary.\n\n**Adaptation and identity.** Mobile keeps the active exchange and summary easy to reach without trapping the viewport. Preserve conversational continuity and editable answers; avoid fake typing delays, claims of intelligence, and mandatory chat for information available directly. **Effort: medium.**\n\n**Distinctive composition.** A compact conversation window shows guide bubbles, user replies, reply chips, and an adjacent summary sheet. The entry reads as a bounded conversation immediately, separating it from the centred Guided Journey wizard.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Support", "Messaging" ], "visitorGoals": [ "Resolve a conversation" ], "conversionActions": [ "Send a sample reply" ], "siteSize": "Application", "interactionTypes": [ "Conversation list", "Message thread" ], "keywords": [ "Onboarding", "Support", "Visible conversational continuity", "Editable collected answers", "A complete non-chat alternative" ] }, "patterns": [ "Visible conversational continuity", "Editable collected answers", "A complete non-chat alternative" ], "downloadUrl": "/downloads/19-conversation-desk.zip" }, { "schemaVersion": 2, "id": "20", "slug": "the-directory", "name": "The Directory", "brand": "Useful Places", "family": "Workspaces & discovery", "status": "ready", "thesis": "Help users narrow a large collection and compare candidates efficiently.", "suitableFor": [ "Directories", "Discovery" ], "character": "Restrained", "traits": { "composition": "Stable facet rail and comparable horizontal venue listings", "navigation": "Facets, detail pages, and a short comparison tray", "typography": "DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Quiet white and green directory rows, practical attribute badges", "motion": "None" }, "effort": "Medium", "definingFeatures": [ "Comparable attributes in every row", "Visible result feedback", "A practical shortlist" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/20-the-directory/start", "states": [ { "key": "detail", "label": "Venue detail", "route": "/preview/20-the-directory/detail" }, { "key": "compare", "label": "Workspace comparison", "route": "/preview/20-the-directory/compare" } ], "referenceImages": [ { "file": "/previews/20/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/20/c4a101b1bb565d99-desktop.jpg", "route": "/preview/20-the-directory/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a9cee339bff71bbdc1436f1f79cde118422e5af0341ad79b024e9fbbdf1ce110", "sha256": "c4a101b1bb565d99b7316b47f27a3694d4bb1e4e7aaf7d0de066ae6ad3051597", "fullPage": false }, { "file": "/previews/20/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/20/8e9cda6b010e7c82-mobile.jpg", "route": "/preview/20-the-directory/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a9cee339bff71bbdc1436f1f79cde118422e5af0341ad79b024e9fbbdf1ce110", "sha256": "8e9cda6b010e7c821527bef3e031d210d2db9e02dabd3600566c0bc46ad91f7b", "fullPage": false }, { "file": "/previews/20/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/20/f631246332b04e7c-detail.jpg", "route": "/preview/20-the-directory/detail", "viewport": { "width": 1440, "height": 1000 }, "state": "detail", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a9cee339bff71bbdc1436f1f79cde118422e5af0341ad79b024e9fbbdf1ce110", "sha256": "f631246332b04e7c68c49e045488f8def03d2107b542e070e58263b6b4da36b4", "fullPage": false }, { "file": "/previews/20/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/20/6c8873e75af10f2f-full-page.jpg", "route": "/preview/20-the-directory/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a9cee339bff71bbdc1436f1f79cde118422e5af0341ad79b024e9fbbdf1ce110", "sha256": "6c8873e75af10f2f0a10ae10561a1c328a02e2d5c82e4a452584e82db332f0a5", "fullPage": true } ], "sourcePath": "src/designs/20-the-directory", "neighbours": [ "21", "50" ], "palette": { "page": "#f7f9f8", "surface": "#ffffff", "ink": "#263d3d", "accent": "#2b6b65" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Help users narrow a large collection and compare candidates efficiently. Suitable for professional listings, software catalogues, resource collections, local services, and structured recommendations.\n\n**Visual grammar.** Use prominent search, a stable facet column, a concise results summary, and information-rich horizontal listings. A crisp sans, white and pale blue-grey surfaces, deep charcoal text, and restrained teal selections make the contents easy to scan. Each record exposes the same useful attributes; small thumbnails remain secondary. An optional comparison tray collects chosen records.\n\n**Specimen and flow.** *Useful Places* catalogues fictional workspaces. Visitors filter by equipment and opening day, compare selected venues, and inspect a detailed listing. Supporting states show no matching results with removable filters and a comparison view that highlights differing attributes.\n\n**Adaptation and identity.** Mobile uses an explicit filter panel, visible active filters, and stacked comparison attributes. Preserve comparability, predictable facets, and clear result feedback; avoid marketplace promotion modules, arbitrary recommendation ordering, and a wall of image-led cards. Motion is unnecessary. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Directory", "Local business" ], "visitorGoals": [ "Find a provider" ], "conversionActions": [ "Inspect a listing" ], "siteSize": "Searchable catalogue", "interactionTypes": [ "Faceted search", "Listing details" ], "keywords": [ "Directories", "Discovery", "Comparable attributes in every row", "Visible result feedback", "A practical shortlist" ] }, "patterns": [ "Comparable attributes in every row", "Visible result feedback", "A practical shortlist" ], "downloadUrl": "/downloads/20-the-directory.zip" }, { "schemaVersion": 2, "id": "21", "slug": "utility-storefront", "name": "Utility Storefront", "brand": "Bench Supply", "family": "Commerce & places", "status": "ready", "thesis": "Make a purchase easy to evaluate.", "suitableFor": [ "Commerce", "Operations" ], "character": "Restrained", "traits": { "composition": "Compact purchasable SKU matrix with a category tree", "navigation": "Compatibility filters, part codes, and a local basket", "typography": "Bebas Neue + DM Sans", "density": "High", "imagery": "Typography, rules, and interface structure", "surface": "Dense product tables, strong part codes and functional blue actions", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Quantity controls in the matrix", "Compatibility before merchandising", "Clear availability and part codes" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/21-utility-storefront/start", "states": [ { "key": "basket", "label": "Local basket", "route": "/preview/21-utility-storefront/basket" }, { "key": "compatibility", "label": "Battery compatibility", "route": "/preview/21-utility-storefront/compatibility" } ], "referenceImages": [ { "file": "/previews/21/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/21/20fe106efa2f3cd5-desktop.jpg", "route": "/preview/21-utility-storefront/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c04ab76d202f63aac8d8ce0ac8f5e7dc14a66ddcdf3ab9afa2f460682da825a5", "sha256": "20fe106efa2f3cd57bd566a4b34ce51b5aeaa866b51d5d6e676ac5c9c3b42d4d", "fullPage": false }, { "file": "/previews/21/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/21/0a424cd8758b95f3-mobile.jpg", "route": "/preview/21-utility-storefront/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c04ab76d202f63aac8d8ce0ac8f5e7dc14a66ddcdf3ab9afa2f460682da825a5", "sha256": "0a424cd8758b95f33fd85f9eb12cc68f9ccfc9b365d01b778afb65cd605d3d2a", "fullPage": false }, { "file": "/previews/21/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/21/9217c885b040799c-detail.jpg", "route": "/preview/21-utility-storefront/basket", "viewport": { "width": 1440, "height": 1000 }, "state": "basket", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c04ab76d202f63aac8d8ce0ac8f5e7dc14a66ddcdf3ab9afa2f460682da825a5", "sha256": "9217c885b040799c2605f945995f2bf29222fbacb55d9b3d257624bac0ca7727", "fullPage": false }, { "file": "/previews/21/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/21/b0fd53a9fae32703-full-page.jpg", "route": "/preview/21-utility-storefront/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c04ab76d202f63aac8d8ce0ac8f5e7dc14a66ddcdf3ab9afa2f460682da825a5", "sha256": "b0fd53a9fae327038a67ee62a971fb246e6bf3c4191a30eb1fc0a3b9d2dbd6c5", "fullPage": true } ], "sourcePath": "src/designs/21-utility-storefront", "neighbours": [ "20", "22" ], "palette": { "page": "#f5f6f4", "surface": "#ffffff", "ink": "#26333d", "accent": "#285f9a" }, "fonts": [ "Bebas Neue", "DM Sans" ], "brief": "**Philosophy and fit.** Make a purchase easy to evaluate. Suitable for hardware, supplies, specialist equipment, and stores where specifications, availability, and compatibility matter more than a campaign image.\n\n**Visual grammar.** A category tree and breadcrumbs lead into a dense purchasable SKU matrix. Each compact row has a part code, compatibility, stock, quantity input, and add action; thumbnails remain small. Use a utilitarian condensed sans for category labels, monospaced part codes, graphite text, white surfaces, blue links, and amber availability notices. Subtle row bands and rules organise information.\n\n**Specimen and flow.** *Bench Supply* sells workshop tools. Choose a battery platform, configure compatible tool and battery quantities directly in the matrix, and review a local basket. Supporting views include a compatibility detail and a basket with an unavailable-item state. A bulk-entry control accepts known fixture part codes.\n\n**Responsive behaviour.** The category tree becomes a disclosure; each SKU becomes a compact labelled block retaining quantity and add controls. The shopping flow remains usable by keyboard and does not depend on hover.\n\n**Identity rules.** Preserve visible specifications and restrained merchandising. Avoid oversized lifestyle heroes, hidden pricing, and arbitrary card heights. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Retail", "Ecommerce" ], "visitorGoals": [ "Find a product" ], "conversionActions": [ "Add to basket" ], "siteSize": "Storefront", "interactionTypes": [ "Product filters", "Shopping basket" ], "keywords": [ "Commerce", "Operations", "Quantity controls in the matrix", "Compatibility before merchandising", "Clear availability and part codes" ] }, "patterns": [ "Quantity controls in the matrix", "Compatibility before merchandising", "Clear availability and part codes" ], "downloadUrl": "/downloads/21-utility-storefront.zip" }, { "schemaVersion": 2, "id": "22", "slug": "specimen-shop", "name": "Specimen Shop", "brand": "Form Number", "family": "Commerce & places", "status": "ready", "thesis": "Present a small collection as objects worth studying.", "suitableFor": [ "Commerce", "Portfolio" ], "character": "Restrained", "traits": { "composition": "Large object plate with precise caption and a restrained purchase rail", "navigation": "Numbered object index", "typography": "Libre Baskerville + DM Sans", "density": "Low", "imagery": "Licensed illustrative photography", "surface": "Museum-like object photography, fine rules and a warm neutral palette", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Object-and-caption relationship", "Visible material and dimension details", "Asymmetric photographic whitespace" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/22-specimen-shop/start", "states": [ { "key": "detail", "label": "Vessel 03 / material detail", "route": "/preview/22-specimen-shop/detail" }, { "key": "bag", "label": "Your sample bag", "route": "/preview/22-specimen-shop/bag" } ], "referenceImages": [ { "file": "/previews/22/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/22/c2849c04ac39496c-desktop.jpg", "route": "/preview/22-specimen-shop/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f0dd8b25bc3e5a1d38294e0e134e07a7284939e64f506899ddd6bed59520f9da", "sha256": "c2849c04ac39496c14125c9ea99a2a994a026ac090328cc50c86d855853d155a", "fullPage": false }, { "file": "/previews/22/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/22/e0aeeb99f4ed4cea-mobile.jpg", "route": "/preview/22-specimen-shop/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f0dd8b25bc3e5a1d38294e0e134e07a7284939e64f506899ddd6bed59520f9da", "sha256": "e0aeeb99f4ed4cea93bb01aead3a7deeca93ff6b8290c3dffda77db78646e3cb", "fullPage": false }, { "file": "/previews/22/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/22/04300139f00f0f5e-detail.jpg", "route": "/preview/22-specimen-shop/detail", "viewport": { "width": 1440, "height": 1000 }, "state": "detail", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f0dd8b25bc3e5a1d38294e0e134e07a7284939e64f506899ddd6bed59520f9da", "sha256": "04300139f00f0f5e55488020632d86b961e717c739c203df98a665a31b6250c4", "fullPage": false }, { "file": "/previews/22/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/22/2dc90217be4592e2-full-page.jpg", "route": "/preview/22-specimen-shop/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f0dd8b25bc3e5a1d38294e0e134e07a7284939e64f506899ddd6bed59520f9da", "sha256": "2dc90217be4592e24f862eba54ecaecf9e07dfee9cc694e8c8d26295873c37d0", "fullPage": true } ], "sourcePath": "src/designs/22-specimen-shop", "neighbours": [ "04", "21" ], "palette": { "page": "#f3f0e9", "surface": "#ffffff", "ink": "#302f29", "accent": "#62594b" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Present a small collection as objects worth studying. Appropriate for ceramics, independent furniture, collectible editions, and carefully made products with material stories.\n\n**Visual grammar.** Each object occupies a large photographic plate, followed by a caption, dimensions, material swatches, and a restrained purchase rail. Use asymmetric whitespace, a compact index navigation, an elegant serif for object names, and a precise sans for specifications. Bone backgrounds, near-black text, and one mineral accent keep attention on surface and shape.\n\n**Specimen and flow.** *Form Number* offers a fictional ceramics collection. Browse an object index, open a numbered vessel, change its glaze, and add it to a local bag. Supporting views include a material-study page and a bag with quantity and sold-out states. A visible detail photograph supports inspection without requiring zoom gestures.\n\n**Responsive behaviour.** Plates stack above specifications; the purchase rail becomes an ordinary in-flow block. Image changes are immediate under reduced motion.\n\n**Identity rules.** Preserve the object-and-caption relationship. Avoid luxury-site vagueness, tiny essential text, and compulsory cinematic transitions. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Ceramics", "Design retail" ], "visitorGoals": [ "Evaluate a product" ], "conversionActions": [ "Add to basket" ], "siteSize": "Storefront", "interactionTypes": [ "Product variants", "Shopping basket" ], "keywords": [ "Commerce", "Portfolio", "Object-and-caption relationship", "Visible material and dimension details", "Asymmetric photographic whitespace" ] }, "patterns": [ "Object-and-caption relationship", "Visible material and dimension details", "Asymmetric photographic whitespace" ], "downloadUrl": "/downloads/22-specimen-shop.zip" }, { "schemaVersion": 2, "id": "23", "slug": "market-bazaar", "name": "Market Bazaar", "brand": "Saturday Market", "family": "Commerce & places", "status": "ready", "thesis": "Make the individuality of many sellers part of the browsing experience.", "suitableFor": [ "Commerce", "Directories" ], "character": "Expressive", "traits": { "composition": "Distinct vendor stalls with coloured signs and horizontal product shelves", "navigation": "Market date and vendor anchors", "typography": "Space Grotesk + DM Sans", "density": "Medium", "imagery": "Original SVG diagrams and illustrations", "surface": "Cream market canvas, colourful stall bands and original food studies", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Stall-level personalities", "Products grouped by maker", "Collection basket grouped by location" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/23-market-bazaar/start", "states": [ { "key": "vendor", "label": "Meet the maker", "route": "/preview/23-market-bazaar/vendor" }, { "key": "basket", "label": "Collection basket", "route": "/preview/23-market-bazaar/basket" } ], "referenceImages": [ { "file": "/previews/23/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/23/2e61109b68c55c59-desktop.jpg", "route": "/preview/23-market-bazaar/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dca5f2354bac384e60c727140bb61aa224c290d08fda449637ca5a33600b2711", "sha256": "2e61109b68c55c593876cfc97a0deb890152f6bb5936f244899bfe39bdd9fec0", "fullPage": false }, { "file": "/previews/23/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/23/a06a4f7dcba17af8-mobile.jpg", "route": "/preview/23-market-bazaar/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dca5f2354bac384e60c727140bb61aa224c290d08fda449637ca5a33600b2711", "sha256": "a06a4f7dcba17af8d1af1adced2fd627f364d8078e4b07b8353c416bc66046a8", "fullPage": false }, { "file": "/previews/23/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/23/350707012b92c201-detail.jpg", "route": "/preview/23-market-bazaar/vendor", "viewport": { "width": 1440, "height": 1000 }, "state": "vendor", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dca5f2354bac384e60c727140bb61aa224c290d08fda449637ca5a33600b2711", "sha256": "350707012b92c20103473899522133f45820c02d0805d5171c1bf5e29681c42a", "fullPage": false }, { "file": "/previews/23/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/23/f19e56b50c0d79a8-full-page.jpg", "route": "/preview/23-market-bazaar/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dca5f2354bac384e60c727140bb61aa224c290d08fda449637ca5a33600b2711", "sha256": "f19e56b50c0d79a8c039f4acc973e8e8edda1044b78e03e5fa2a3cc33c2727c5", "fullPage": true } ], "sourcePath": "src/designs/23-market-bazaar", "neighbours": [ "22", "32" ], "palette": { "page": "#fff6df", "surface": "#ffffff", "ink": "#3f3429", "accent": "#b3482d" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Make the individuality of many sellers part of the browsing experience. Useful for craft marketplaces, community markets, independent food halls, and local maker directories.\n\n**Visual grammar.** Organise the page into recognisable stalls rather than a uniform product wall. Each vendor receives a coloured sign, short introduction, and horizontal shelf of items. Warm cream supports paprika, cobalt, and mustard accents. Rounded display lettering identifies stalls; straightforward body type handles prices, ingredients, and collection information.\n\n**Specimen and flow.** *Saturday Market* contains fictional bakers, potters, and growers. Choose a market date, browse stalls, and assemble a local collection basket. Supporting views include a vendor profile and a basket grouped by collection location. An empty date state explains when the next market occurs.\n\n**Responsive behaviour.** Stalls become stacked sections with anchor navigation. Shelves use explicit previous and next controls as well as touch scrolling; products remain reachable without dragging.\n\n**Identity rules.** Preserve vendor personality within predictable buying controls. Avoid making every stall a different application or replacing useful categories with decorative chaos. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Marketplace", "Independent retail" ], "visitorGoals": [ "Discover a seller" ], "conversionActions": [ "Reserve an item" ], "siteSize": "Storefront", "interactionTypes": [ "Seller profiles", "Product browsing" ], "keywords": [ "Commerce", "Directories", "Stall-level personalities", "Products grouped by maker", "Collection basket grouped by location" ] }, "patterns": [ "Stall-level personalities", "Products grouped by maker", "Collection basket grouped by location" ], "downloadUrl": "/downloads/23-market-bazaar.zip" }, { "schemaVersion": 2, "id": "24", "slug": "fine-dining", "name": "Fine Dining", "brand": "Ember & Orchard", "family": "Commerce & places", "status": "ready", "thesis": "Build anticipation through pacing, seasonality, and precise hospitality.", "suitableFor": [ "Hospitality", "Food" ], "character": "Restrained", "traits": { "composition": "Seasonal menu sequence with generous intervals and a compact reservation rail", "navigation": "Menu, visiting details, and sample reservations", "typography": "Libre Baskerville + DM Sans", "density": "Low", "imagery": "Licensed illustrative photography", "surface": "Deep wine background, warm cream serif type and food photography", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Course-led typographic rhythm", "Prices and dietary information visible", "Atmosphere beside practical hospitality" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/24-fine-dining/start", "states": [ { "key": "reserve", "label": "Reservation demonstration", "route": "/preview/24-fine-dining/reserve" }, { "key": "visit", "label": "Private dining & visiting", "route": "/preview/24-fine-dining/visit" } ], "referenceImages": [ { "file": "/previews/24/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/24/1c2724f1e0c483da-desktop.jpg", "route": "/preview/24-fine-dining/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ce6e84abc5ef1f38ef73d15e9f32fd027a5dfae98c1ccedb5abccf8508f7e330", "sha256": "1c2724f1e0c483dab9f617719adb60fa89bac24aa93b76cb342fc26230dbe97e", "fullPage": false }, { "file": "/previews/24/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/24/f03347dc7462d0eb-mobile.jpg", "route": "/preview/24-fine-dining/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ce6e84abc5ef1f38ef73d15e9f32fd027a5dfae98c1ccedb5abccf8508f7e330", "sha256": "f03347dc7462d0eb40d4459eac416aee62f0336d18d36fa976df8ea5855aca27", "fullPage": false }, { "file": "/previews/24/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/24/43595cb71a2e0e21-detail.jpg", "route": "/preview/24-fine-dining/reserve", "viewport": { "width": 1440, "height": 1000 }, "state": "reserve", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ce6e84abc5ef1f38ef73d15e9f32fd027a5dfae98c1ccedb5abccf8508f7e330", "sha256": "43595cb71a2e0e210dca5d20a99b5b96ea452eabd3732740ad66476d749b740c", "fullPage": false }, { "file": "/previews/24/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/24/9bc1b84ecf6a5dd4-full-page.jpg", "route": "/preview/24-fine-dining/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ce6e84abc5ef1f38ef73d15e9f32fd027a5dfae98c1ccedb5abccf8508f7e330", "sha256": "9bc1b84ecf6a5dd4fc0199875e1490f4b5618dd273a068bf4b0553d48f647e63", "fullPage": true } ], "sourcePath": "src/designs/24-fine-dining", "neighbours": [ "28", "22" ], "palette": { "page": "#321d23", "surface": "#432c30", "ink": "#f4ebdc", "accent": "#dec192" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Build anticipation through pacing, seasonality, and precise hospitality. Suitable for restaurants, tasting experiences, wine bars, and small culinary venues.\n\n**Visual grammar.** The menu provides the main compositional rhythm: course titles, descriptions, and prices arranged as a carefully typeset sequence. A narrow navigation offers menu, visit, and reservations. Deep oxblood, ivory, and muted brass support editorial food photography, a characterful serif, and generous vertical intervals. Rules and small botanical details replace repeated boxes.\n\n**Specimen and flow.** *Ember & Orchard* presents a seasonal restaurant. Read the current menu, inspect dietary information, and choose a date and party size in a local reservation demonstration. Supporting views include private dining and a clear unavailable-time state with nearby alternatives. The final confirmation is visibly a sample reservation.\n\n**Responsive behaviour.** Menu descriptions and prices remain aligned without shrinking text. The reservation form becomes a simple vertical sequence; photography does not obstruct it.\n\n**Identity rules.** Preserve the menu’s reading rhythm and practical visit information. Avoid autoplay ambience, illegible gold text, and hiding prices behind photographs. **Effort: medium.**\n\n**Distinctive composition.** Serif menu captions and a slower typographic cadence support fine dining, distinct from the new Everyday Eatery’s menu board.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Restaurant", "Fine dining" ], "visitorGoals": [ "Explore a dining experience" ], "conversionActions": [ "Request a table" ], "siteSize": "Small brochure", "interactionTypes": [ "Tasting menu", "Reservation" ], "keywords": [ "Hospitality", "Food", "Course-led typographic rhythm", "Prices and dietary information visible", "Atmosphere beside practical hospitality" ] }, "patterns": [ "Course-led typographic rhythm", "Prices and dietary information visible", "Atmosphere beside practical hospitality" ], "downloadUrl": "/downloads/24-fine-dining.zip" }, { "schemaVersion": 2, "id": "25", "slug": "local-trades", "name": "Local Trades", "brand": "Northline Repairs", "family": "Commerce & places", "status": "ready", "thesis": "Answer the questions a customer has before contacting a local business.", "suitableFor": [ "Services", "Marketing" ], "character": "Restrained", "traits": { "composition": "Local service board with coverage sign, priced work rows and illustrated repair evidence", "navigation": "Service selection and a short enquiry form", "typography": "DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Plain white service surfaces, navy text and burnt-orange actions", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Service and area before decoration", "Visible sample prices", "Clear contact and validation" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/25-local-trades/start", "states": [ { "key": "quote", "label": "Quote request demonstration", "route": "/preview/25-local-trades/quote" }, { "key": "area", "label": "Service-area information", "route": "/preview/25-local-trades/area" } ], "referenceImages": [ { "file": "/previews/25/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/25/11ed186328eb62af-desktop.jpg", "route": "/preview/25-local-trades/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fc28f482dd38e92e11355fa225fa8336c1c23a6b8c1e52803bd5c35de53c3ff0", "sha256": "11ed186328eb62af95ebbc54274b812c64d793316566724b5bf0dab25cee320f", "fullPage": false }, { "file": "/previews/25/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/25/5346dc4f253f9e65-mobile.jpg", "route": "/preview/25-local-trades/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fc28f482dd38e92e11355fa225fa8336c1c23a6b8c1e52803bd5c35de53c3ff0", "sha256": "5346dc4f253f9e65792213045db164efe7d9c46e9eb496aa7bf66b4fa9d6e237", "fullPage": false }, { "file": "/previews/25/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/25/299648e332315f14-detail.jpg", "route": "/preview/25-local-trades/quote", "viewport": { "width": 1440, "height": 1000 }, "state": "quote", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fc28f482dd38e92e11355fa225fa8336c1c23a6b8c1e52803bd5c35de53c3ff0", "sha256": "299648e332315f148ccafeac8da8d5dd96036f5ef06f0b96b7d7ebc24ad6e513", "fullPage": false }, { "file": "/previews/25/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/25/f846c0291030ac80-full-page.jpg", "route": "/preview/25-local-trades/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fc28f482dd38e92e11355fa225fa8336c1c23a6b8c1e52803bd5c35de53c3ff0", "sha256": "f846c0291030ac80f683cd23e27c7a2bc42fe7d169ec0dac1cb29d924f7de761", "fullPage": true } ], "sourcePath": "src/designs/25-local-trades", "neighbours": [ "01", "02" ], "palette": { "page": "#f7f8f5", "surface": "#ffffff", "ink": "#24374b", "accent": "#be491b" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Answer the questions a customer has before contacting a local business. Appropriate for trades, storage facilities, repair services, and appointment-based businesses.\n\n**Visual grammar.** Lead with service, coverage area, opening hours, and a clear contact action. Follow with a price or service table, practical photographs, and specific evidence of work. Use robust sans-serif headings, dark navy text, white and pale grey surfaces, and a safety-orange accent reserved for actions. Navigation names the work directly.\n\n**Specimen and flow.** *Northline Repairs* serves a fictional town. Select a repair type, inspect service details, and complete a quote-request demonstration. Supporting views include service-area information and a submitted-request summary. Form validation explains missing information beside the relevant field; no message is actually sent.\n\n**Responsive behaviour.** Phone and enquiry actions stay easy to reach without covering the page. Service tables collapse into labelled records; addresses and hours remain visible text.\n\n**Identity rules.** Preserve plain answers, real-looking work examples, and clear contact routes. Avoid generic stock-photo heroes, fabricated review badges, and excessive animation. **Effort: low.**\n\n**Distinctive composition.** A service-and-coverage board now leads the page: practical hours, three clearly priced work types, and an illustrated repair detail. This removes the product-marketing hero and pale information card shared with Precision SaaS, while avoiding Service Bay’s industrial ticket language.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Local services", "Trades", "Repair", "Self storage" ], "visitorGoals": [ "Understand services" ], "conversionActions": [ "Request a quote" ], "siteSize": "Service site", "interactionTypes": [ "Service selection", "Coverage information", "Enquiry form" ], "keywords": [ "Services", "Marketing", "Service and area before decoration", "Visible sample prices", "Clear contact and validation", "storage facilities", "local business", "small business", "enquiry driven", "storage" ] }, "patterns": [ "Service and area before decoration", "Visible sample prices", "Clear contact and validation" ], "downloadUrl": "/downloads/25-local-trades.zip" }, { "schemaVersion": 2, "id": "26", "slug": "field-notes", "name": "Field Notes", "brand": "Ridge Journal", "family": "Commerce & places", "status": "ready", "thesis": "Organise discovery around observation, place, and practical preparation.", "suitableFor": [ "Travel", "Editorial" ], "character": "Restrained", "traits": { "composition": "Field report with observation labels, annotated landscape, and preparation notes", "navigation": "Terrain filters, route reports, and a packing checklist", "typography": "Libre Baskerville + DM Sans", "density": "Medium", "imagery": "Licensed illustrative photography", "surface": "Field-paper background, route facts, landscape photos and thin rules", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Observation paired with practical data", "Notebook-like entry metadata", "Preparation stays close to the route" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/26-field-notes/start", "states": [ { "key": "report", "label": "Ridge field report", "route": "/preview/26-field-notes/report" }, { "key": "saved", "label": "Saved routes", "route": "/preview/26-field-notes/saved" } ], "referenceImages": [ { "file": "/previews/26/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/26/31c98a58d844b94d-desktop.jpg", "route": "/preview/26-field-notes/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be0865a7eb35e0ed1e718f7e966e8888ff4f89965c3e46c210894abddab7bf41", "sha256": "31c98a58d844b94d984529ec33064a4405a53a4a916934a76f5e3ea97ac5083c", "fullPage": false }, { "file": "/previews/26/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/26/b89fd7df8346f428-mobile.jpg", "route": "/preview/26-field-notes/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be0865a7eb35e0ed1e718f7e966e8888ff4f89965c3e46c210894abddab7bf41", "sha256": "b89fd7df8346f428dc507d5c3a8afd8458693ef5bee44acae0d1beaf215eedb3", "fullPage": false }, { "file": "/previews/26/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/26/f39f503e777b795a-detail.jpg", "route": "/preview/26-field-notes/report", "viewport": { "width": 1440, "height": 1000 }, "state": "report", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be0865a7eb35e0ed1e718f7e966e8888ff4f89965c3e46c210894abddab7bf41", "sha256": "f39f503e777b795a06e173de364d344600c5b66def23bbed032bb9d357b2169a", "fullPage": false }, { "file": "/previews/26/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/26/62da6cd20480b9d4-full-page.jpg", "route": "/preview/26-field-notes/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be0865a7eb35e0ed1e718f7e966e8888ff4f89965c3e46c210894abddab7bf41", "sha256": "62da6cd20480b9d49b1e8edcc67f30345317e39f1c248fddfdc9a700db5632ed", "fullPage": true } ], "sourcePath": "src/designs/26-field-notes", "neighbours": [ "16", "08" ], "palette": { "page": "#eeeadd", "surface": "#ffffff", "ink": "#384331", "accent": "#5b6f43" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Organise discovery around observation, place, and practical preparation. Fits outdoor guides, conservation groups, travel journals, and field-based education.\n\n**Visual grammar.** Use notebook-like entries with location, season, conditions, and annotated photographs. A modest section index gives access to routes, observations, and equipment. Moss green, sand, and charcoal accompany a readable serif, compact sans labels, and restrained line illustrations. Texture stays behind content and never carries information.\n\n**Specimen and flow.** *Ridge Journal* documents fictional walking routes. Filter routes by terrain, read a route’s field report, and add required equipment to a local packing checklist. Supporting views include an observation detail and a saved-routes list with an empty state. Distances and conditions are explicitly sample data.\n\n**Responsive behaviour.** Annotations move beneath images in a numbered list. Route information appears before decorative imagery; checklists use large labelled controls and work without map gestures.\n\n**Identity rules.** Preserve the relationship between observation and practical detail. Avoid turning the design into a generic green wellness site or making essential information resemble faint handwriting. **Effort: medium.**\n\n**Distinctive composition.** The RIDGE wordmark stays unbroken on narrow phones; navigation wraps onto its own row. The field-journal composition is retained.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Outdoors", "Nature", "Travel" ], "visitorGoals": [ "Plan an outing" ], "conversionActions": [ "Explore a trail" ], "siteSize": "Digital publication", "interactionTypes": [ "Field journal", "Trail notes" ], "keywords": [ "Travel", "Editorial", "Observation paired with practical data", "Notebook-like entry metadata", "Preparation stays close to the route" ] }, "patterns": [ "Observation paired with practical data", "Notebook-like entry metadata", "Preparation stays close to the route" ], "downloadUrl": "/downloads/26-field-notes.zip" }, { "schemaVersion": 2, "id": "27", "slug": "blueprint-studio", "name": "Blueprint Studio", "brand": "Section Works", "family": "Commerce & places", "status": "ready", "thesis": "Explain how a project is organised and constructed.", "suitableFor": [ "Architecture", "Portfolio" ], "character": "Restrained", "traits": { "composition": "Indexed drawing sheets with title blocks and paired plan/result plates", "navigation": "Project rail, drawing views, and construction notes", "typography": "Space Grotesk + IBM Plex Mono", "density": "Medium", "imagery": "Licensed illustrative photography and original diagrams", "surface": "Blueprint blue, cyan drawing lines, measurement ticks and numbered plates", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Numbered project rail", "Aligned technical annotations", "Plan, section, and built-result relationship" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/27-blueprint-studio/start", "states": [ { "key": "material", "label": "Construction note", "route": "/preview/27-blueprint-studio/material" }, { "key": "index", "label": "Project index", "route": "/preview/27-blueprint-studio/index" } ], "referenceImages": [ { "file": "/previews/27/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/27/4853d309d888eda4-desktop.jpg", "route": "/preview/27-blueprint-studio/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:90e7452ae77218c985bf36c9950b33ae22a04d35d34216c9438fd51b78301ada", "sha256": "4853d309d888eda43b9ef793b99a151285598bede2b32c984a9114fb8c5ac1fc", "fullPage": false }, { "file": "/previews/27/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/27/5122bd582e63f071-mobile.jpg", "route": "/preview/27-blueprint-studio/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:90e7452ae77218c985bf36c9950b33ae22a04d35d34216c9438fd51b78301ada", "sha256": "5122bd582e63f07104fcb32a8ec90762ed06d8fdec2e97b3e089370eb7f12e5d", "fullPage": false }, { "file": "/previews/27/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/27/af9ba34a5b888f37-detail.jpg", "route": "/preview/27-blueprint-studio/material", "viewport": { "width": 1440, "height": 1000 }, "state": "material", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:90e7452ae77218c985bf36c9950b33ae22a04d35d34216c9438fd51b78301ada", "sha256": "af9ba34a5b888f37716f842afd6e40f42dccf6997778efd0fa128b444afef642", "fullPage": false }, { "file": "/previews/27/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/27/3e1c001906e26574-full-page.jpg", "route": "/preview/27-blueprint-studio/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:90e7452ae77218c985bf36c9950b33ae22a04d35d34216c9438fd51b78301ada", "sha256": "3e1c001906e26574cdf64d991df99c2e5a104308cd9b0229bd5b45511cc685fa", "fullPage": true } ], "sourcePath": "src/designs/27-blueprint-studio", "neighbours": [ "04", "49" ], "palette": { "page": "#152f4b", "surface": "#1c3b59", "ink": "#e2edf1", "accent": "#8fd4de" }, "fonts": [ "Space Grotesk", "IBM Plex Mono" ], "brief": "**Philosophy and fit.** Explain how a project is organised and constructed. Suitable for architecture, fabrication, engineering portfolios, and technically minded creative studios.\n\n**Visual grammar.** Arrange projects as indexed drawing sheets with title blocks, section markers, disciplined grids, and paired plan-and-photograph views. Use midnight blue, chalk white, and a restrained cyan annotation colour. A technical sans pairs with monospaced drawing labels. Thin lines establish measured relationships without implying that the interface itself is a technical drawing.\n\n**Specimen and flow.** *Section Works* presents fictional small buildings. Select a project, switch between plan, section, and built result, then open the relevant construction note. Supporting views include the project index and a material detail sheet. A compare control allows paired views without requiring a draggable divider.\n\n**Responsive behaviour.** Drawing sheets become stacked plates with a persistent view selector. Captions remain readable outside the drawings, and technical labels receive a text equivalent.\n\n**Identity rules.** Preserve indexed sheets, aligned annotations, and evidence of construction. Avoid decorative measurement marks, microscopic specifications, and animated drafting effects around every element. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Architecture", "Engineering" ], "visitorGoals": [ "Understand a project" ], "conversionActions": [ "Inspect project details" ], "siteSize": "Portfolio & enquiry", "interactionTypes": [ "Technical drawings", "Project dossier" ], "keywords": [ "Architecture", "Portfolio", "Numbered project rail", "Aligned technical annotations", "Plan, section, and built-result relationship" ] }, "patterns": [ "Numbered project rail", "Aligned technical annotations", "Plan, section, and built-result relationship" ], "downloadUrl": "/downloads/27-blueprint-studio.zip" }, { "schemaVersion": 2, "id": "28", "slug": "grand-hotel", "name": "Grand Hotel", "brand": "Alder House", "family": "Commerce & places", "status": "ready", "thesis": "Let visitors imagine an arrival, then make the booking choices concrete.", "suitableFor": [ "Hospitality", "Travel" ], "character": "Restrained", "traits": { "composition": "Hotel masthead, quiet welcome, booking rail and staggered arrival/bedroom sequence", "navigation": "Stay, explore, and explicit availability", "typography": "Libre Baskerville + DM Sans", "density": "Low", "imagery": "Dedicated illustrative hotel exterior and bedroom photographs", "surface": "Cream and sage hospitality surfaces with full-bleed landscape photography", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "An arrival narrative", "Room details at the point of choice", "Practical booking information" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/28-grand-hotel/start", "states": [ { "key": "rooms", "label": "Sample availability", "route": "/preview/28-grand-hotel/rooms" }, { "key": "summary", "label": "Booking summary", "route": "/preview/28-grand-hotel/summary" } ], "referenceImages": [ { "file": "/previews/28/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/28/5ff5530fb6cd7334-desktop.jpg", "route": "/preview/28-grand-hotel/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d386970766548132e1d16d9be9c138acefbc4f01b6fd3ff1aeeabbe0e93698ce", "sha256": "5ff5530fb6cd7334f5d11bb9a24e818b94d72bf66af6e7fa8fe0863e85bbf47b", "fullPage": false }, { "file": "/previews/28/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/28/d01a5ac9dd5d79bc-mobile.jpg", "route": "/preview/28-grand-hotel/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d386970766548132e1d16d9be9c138acefbc4f01b6fd3ff1aeeabbe0e93698ce", "sha256": "d01a5ac9dd5d79bc096d35f57daccae42f25f64669101ef98dc3b0d4c3c9dec4", "fullPage": false }, { "file": "/previews/28/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/28/df965ab15d73eb70-detail.jpg", "route": "/preview/28-grand-hotel/rooms", "viewport": { "width": 1440, "height": 1000 }, "state": "rooms", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d386970766548132e1d16d9be9c138acefbc4f01b6fd3ff1aeeabbe0e93698ce", "sha256": "df965ab15d73eb70ea19cd5c0f000d886da0acdbac31ede3fadf7648a809c972", "fullPage": false }, { "file": "/previews/28/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/28/aa63baa2bd856a42-full-page.jpg", "route": "/preview/28-grand-hotel/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d386970766548132e1d16d9be9c138acefbc4f01b6fd3ff1aeeabbe0e93698ce", "sha256": "aa63baa2bd856a4227edf8025ec23cf22d18b0d9ba192ddc3a289804ade8ce6e", "fullPage": true } ], "sourcePath": "src/designs/28-grand-hotel", "neighbours": [ "08", "24" ], "palette": { "page": "#f5f1e8", "surface": "#ffffff", "ink": "#304535", "accent": "#8a503a" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Let visitors imagine an arrival, then make the booking choices concrete. Fits destination hotels, lodges, retreats, and travel accommodations.\n\n**Visual grammar.** A sequence of wide photographic scenes introduces arrival, rooms, surroundings, and daily life. A compact booking rail accompanies the story. Use restrained serif display type, warm white surfaces, deep forest text, and terracotta accents. Navigation separates staying, exploring, and planning; room information uses consistent comparisons beneath the narrative.\n\n**Specimen and flow.** *Alder House* is a fictional lakeside hotel. Select dates, compare rooms, and review a sample booking summary. Supporting views include a room detail and an availability result with no matching rooms. Amenities, occupancy, and cancellation examples appear beside the decision they affect.\n\n**Responsive behaviour.** The booking rail becomes an accessible expandable section with a persistent summary. Photographic scenes retain ordinary scrolling; essential room details load before optional imagery.\n\n**Identity rules.** Preserve the arrival narrative and explicit booking information. Avoid scroll hijacking, looping video as a requirement, and identical full-screen photographs with no useful content. **Effort: medium.**\n\n**Distinctive composition.** Hospitality has a centred house masthead, a separate welcome and booking rail, and staggered arrival/bedroom photographs. Dedicated exterior and bedroom images establish arrival and rest, distinct from Documentary Story’s landscape narrative and Quiet Atelier’s object study.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Hotel", "Hospitality" ], "visitorGoals": [ "Plan a stay" ], "conversionActions": [ "Request a room" ], "siteSize": "Service site", "interactionTypes": [ "Room comparison", "Booking form" ], "keywords": [ "Hospitality", "Travel", "An arrival narrative", "Room details at the point of choice", "Practical booking information" ] }, "patterns": [ "An arrival narrative", "Room details at the point of choice", "Practical booking information" ], "downloadUrl": "/downloads/28-grand-hotel.zip" }, { "schemaVersion": 2, "id": "29", "slug": "calm-sanctuary", "name": "Calm Sanctuary", "brand": "Evening Room", "family": "Commerce & places", "status": "ready", "thesis": "Reduce the number of simultaneous decisions and let the visitor set the pace.", "suitableFor": [ "Wellness", "Reading" ], "character": "Restrained", "traits": { "composition": "One narrow, low-stimulation column with voluntary pacing", "navigation": "A few activities, back links, and an ordinary exit", "typography": "DM Sans", "density": "Low", "imagery": "Typography, rules, and interface structure", "surface": "Quiet cream field, soft green geometry and unhurried text rhythm", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Limited simultaneous choices", "Voluntary pacing", "Clear, quiet completion" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/29-calm-sanctuary/start", "states": [ { "key": "practice", "label": "A quiet practice", "route": "/preview/29-calm-sanctuary/practice" }, { "key": "finished", "label": "Finished session", "route": "/preview/29-calm-sanctuary/finished" } ], "referenceImages": [ { "file": "/previews/29/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/29/20c38cbecfe3ed95-desktop.jpg", "route": "/preview/29-calm-sanctuary/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dc3a6233d3c42ab34c8d40d67d601596af9bd8c2dd7376251b43b15c44d7420b", "sha256": "20c38cbecfe3ed9558a7dea976d203c99880015c40a52de18762646e7326d483", "fullPage": false }, { "file": "/previews/29/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/29/e8ced71e2fd31e66-mobile.jpg", "route": "/preview/29-calm-sanctuary/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dc3a6233d3c42ab34c8d40d67d601596af9bd8c2dd7376251b43b15c44d7420b", "sha256": "e8ced71e2fd31e66d262ea2ee3521db32d47af5db14bf461212399bc75cc6726", "fullPage": false }, { "file": "/previews/29/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/29/abe0e9325b31df8b-detail.jpg", "route": "/preview/29-calm-sanctuary/practice", "viewport": { "width": 1440, "height": 1000 }, "state": "practice", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dc3a6233d3c42ab34c8d40d67d601596af9bd8c2dd7376251b43b15c44d7420b", "sha256": "abe0e9325b31df8b0e9e5b5a92a5e497818f4c78f5def98802d0ea2809b7106d", "fullPage": false }, { "file": "/previews/29/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/29/639b92ac4b7b6c35-full-page.jpg", "route": "/preview/29-calm-sanctuary/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:dc3a6233d3c42ab34c8d40d67d601596af9bd8c2dd7376251b43b15c44d7420b", "sha256": "639b92ac4b7b6c35432b1ad0e10251676678964d10999831553b04db9c3b581a", "fullPage": true } ], "sourcePath": "src/designs/29-calm-sanctuary", "neighbours": [ "14", "07" ], "palette": { "page": "#eae8de", "surface": "#f8f6ee", "ink": "#443a49", "accent": "#626b57" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Reduce the number of simultaneous decisions and let the visitor set the pace. Appropriate for quiet reading, gentle routines, reflective tools, and low-stimulation personal experiences.\n\n**Visual grammar.** Use one narrow content column, short sequences, abundant breathing room, and persistent but unobtrusive back navigation. Warm stone, deep plum, and muted sage support a soft humanist sans. Essential text retains strong contrast; calm comes from composition and pacing, not faint lettering. Controls have clear boundaries and restrained feedback.\n\n**Specimen and flow.** *Evening Room* offers fictional wind-down activities. Choose an activity, optionally set a duration, and enter a quiet practice screen. Supporting views include personal preferences and a finished-session state that offers an ordinary exit. No streaks, competitive scores, or surprise prompts appear.\n\n**Responsive behaviour.** The primary control sits comfortably within the viewport; orientation changes preserve session state. Sound and motion start off and require deliberate activation.\n\n**Identity rules.** Preserve voluntary pacing and limited choices. Avoid claiming therapeutic outcomes, using autoplay transitions, or introducing celebratory feedback at the end. **Effort: low.**\n\n**Distinctive composition.** Quiet sentence-like labels soften the retreat’s rhythm without adding the technical flavour of monospaced eyebrows.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Wellness", "Retreat", "Personal care" ], "visitorGoals": [ "Explore a practice" ], "conversionActions": [ "Book a session" ], "siteSize": "Service site", "interactionTypes": [ "Session selection", "Appointment booking" ], "keywords": [ "Wellness", "Reading", "Limited simultaneous choices", "Voluntary pacing", "Clear, quiet completion" ] }, "patterns": [ "Limited simultaneous choices", "Voluntary pacing", "Clear, quiet completion" ], "downloadUrl": "/downloads/29-calm-sanctuary.zip" }, { "schemaVersion": 2, "id": "30", "slug": "festival-poster", "name": "Festival Poster", "brand": "Night Signal", "family": "Commerce & places", "status": "ready", "thesis": "Turn a programme into a memorable public announcement.", "suitableFor": [ "Events", "Culture" ], "character": "Expressive", "traits": { "composition": "Oversized festival announcement above a usable programme timetable", "navigation": "Day and venue filters with a saved itinerary", "typography": "Bebas Neue + DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Cobalt and coral poster fields, condensed typography and ruled programme rows", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Poster-scale condensed type", "Clear programme rows under expressive fields", "Visible event conflicts" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/30-festival-poster/start", "states": [ { "key": "event", "label": "Event and sample ticket", "route": "/preview/30-festival-poster/event" }, { "key": "itinerary", "label": "Saved itinerary", "route": "/preview/30-festival-poster/itinerary" } ], "referenceImages": [ { "file": "/previews/30/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/30/5eefb8eed58a1e4b-desktop.jpg", "route": "/preview/30-festival-poster/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0d65249b0db6d37e5f351d0693cb662b758c9963cecc29ea46008dc690addcd2", "sha256": "5eefb8eed58a1e4b120c02dd26e9c9d39f144f9922823c48528d654332bf3a01", "fullPage": false }, { "file": "/previews/30/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/30/cd75f4653d33cb6a-mobile.jpg", "route": "/preview/30-festival-poster/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0d65249b0db6d37e5f351d0693cb662b758c9963cecc29ea46008dc690addcd2", "sha256": "cd75f4653d33cb6a4bcb9d3c7ff1d065abeccf7ba0329dea5d1f90e638deacfb", "fullPage": false }, { "file": "/previews/30/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/30/51e73b9beaf9c112-detail.jpg", "route": "/preview/30-festival-poster/event", "viewport": { "width": 1440, "height": 1000 }, "state": "event", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0d65249b0db6d37e5f351d0693cb662b758c9963cecc29ea46008dc690addcd2", "sha256": "51e73b9beaf9c112ad310677789ec259766e8ffd91c6b09ac60459580804d1f1", "fullPage": false }, { "file": "/previews/30/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/30/70a4eaa27ce290f4-full-page.jpg", "route": "/preview/30-festival-poster/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0d65249b0db6d37e5f351d0693cb662b758c9963cecc29ea46008dc690addcd2", "sha256": "70a4eaa27ce290f48fbc2d3615d8dcbfb4658e4a31ec28ba5701bab3a201db9f", "fullPage": true } ], "sourcePath": "src/designs/30-festival-poster", "neighbours": [ "03", "46" ], "palette": { "page": "#edece5", "surface": "#ffffff", "ink": "#111e50", "accent": "#ee5c49" }, "fonts": [ "Bebas Neue", "DM Sans" ], "brief": "**Philosophy and fit.** Turn a programme into a memorable public announcement. Suitable for festivals, theatre seasons, screenings, exhibitions, and music events.\n\n**Visual grammar.** Oversized condensed type, date stamps, alternating colour fields, and overlapping poster blocks establish the hierarchy. Cobalt, hot coral, and off-white form the base palette. The navigation remains a clear strip for programme, venues, and tickets; the event schedule uses clean rows beneath the expressive masthead.\n\n**Specimen and flow.** *Night Signal* presents a fictional arts weekend. Filter the programme by day and venue, inspect an event, and save it to a local itinerary. Supporting views include a venue guide and an itinerary conflict state when events overlap. Ticket buttons open a clearly labelled sample ticket panel.\n\n**Responsive behaviour.** Poster typography resizes without clipping event names. Schedule rows become stacked records; overlapping decorative elements separate before they crowd information. Motion is optional and never required to read dates.\n\n**Identity rules.** Preserve the collision of bold announcement and usable timetable. Avoid turning every event into an identical rounded card or placing essential text inside raster posters. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Festival", "Music", "Events" ], "visitorGoals": [ "Plan an event visit" ], "conversionActions": [ "Build an itinerary" ], "siteSize": "Small brochure", "interactionTypes": [ "Programme filters", "Saved itinerary" ], "keywords": [ "Events", "Culture", "Poster-scale condensed type", "Clear programme rows under expressive fields", "Visible event conflicts" ] }, "patterns": [ "Poster-scale condensed type", "Clear programme rows under expressive fields", "Visible event conflicts" ], "downloadUrl": "/downloads/30-festival-poster.zip" }, { "schemaVersion": 2, "id": "31", "slug": "bauhaus-workshop", "name": "Bauhaus Workshop", "brand": "Form School", "family": "Playful & material", "status": "ready", "thesis": "Give each shape, colour, and alignment a clear organising role.", "suitableFor": [ "Education", "Events" ], "character": "Expressive", "traits": { "composition": "Rectilinear programme grid with geometric category markers", "navigation": "Geometric programme index and syllabus", "typography": "Space Grotesk + DM Sans", "density": "Medium", "imagery": "Original CSS illustrations and graphic studies", "surface": "Paper, black rules, primary-colour geometry and workshop modules", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Shapes organise actual categories", "Deliberate asymmetry and grid spans", "Primary colours with text labels" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/31-bauhaus-workshop/start", "states": [ { "key": "workshop", "label": "Workshop syllabus", "route": "/preview/31-bauhaus-workshop/workshop" }, { "key": "exercise", "label": "Shape-building exercise", "route": "/preview/31-bauhaus-workshop/exercise" } ], "referenceImages": [ { "file": "/previews/31/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/31/a339bd30789484c7-desktop.jpg", "route": "/preview/31-bauhaus-workshop/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e421eb9c96d2936a740bbca8044c8b15cfba79ecfbc6413252eea39df6fd5407", "sha256": "a339bd30789484c705404fbbfe4f72386e27cc67900314e295cf6c0e3a4e4189", "fullPage": false }, { "file": "/previews/31/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/31/819a8e567e989f03-mobile.jpg", "route": "/preview/31-bauhaus-workshop/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e421eb9c96d2936a740bbca8044c8b15cfba79ecfbc6413252eea39df6fd5407", "sha256": "819a8e567e989f033ebf59517cf8069f0edfbb6503628ade8d38e72b07c113c9", "fullPage": false }, { "file": "/previews/31/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/31/17a3f6638c3c4f61-detail.jpg", "route": "/preview/31-bauhaus-workshop/workshop", "viewport": { "width": 1440, "height": 1000 }, "state": "workshop", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e421eb9c96d2936a740bbca8044c8b15cfba79ecfbc6413252eea39df6fd5407", "sha256": "17a3f6638c3c4f61c46519275dadd861bfc24f065990c3dce359265a3fc52a80", "fullPage": false }, { "file": "/previews/31/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/31/4289ae93a5a71408-full-page.jpg", "route": "/preview/31-bauhaus-workshop/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e421eb9c96d2936a740bbca8044c8b15cfba79ecfbc6413252eea39df6fd5407", "sha256": "4289ae93a5a71408f3001cd8243bb8d5a3fd26056dd5306f6819669a280ec40f", "fullPage": true } ], "sourcePath": "src/designs/31-bauhaus-workshop", "neighbours": [ "03", "32" ], "palette": { "page": "#eee9dc", "surface": "#ffffff", "ink": "#252622", "accent": "#b93627" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Give each shape, colour, and alignment a clear organising role. Useful for design schools, creative workshops, modular products, and educational programmes.\n\n**Visual grammar.** Strong rectilinear grids support circular markers, primary-colour planes, black rules, and compact grotesque typography. Asymmetry comes from purposeful spans rather than scattered objects. Red identifies workshops, blue identifies resources, and yellow identifies demonstrations, with matching text labels so colour is never the only distinction.\n\n**Specimen and flow.** *Form School* teaches fictional making workshops. Browse a geometric programme index, open a workshop syllabus, and select a session in a local registration demonstration. Supporting views include an instructor profile and a full-session state with alternative dates. A simple shape-building exercise illustrates the school’s practical approach.\n\n**Responsive behaviour.** Grid spans collapse into a coherent reading order. Decorative geometry moves around the content rather than forcing the content into tiny compartments; the exercise includes button-based controls.\n\n**Identity rules.** Preserve geometric discipline, clear categories, and deliberate alignment. Avoid decorative primary-colour confetti or borrowing the same loose arrangement as Pop Memphis. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Design", "Art", "Education" ], "visitorGoals": [ "Explore a workshop" ], "conversionActions": [ "Choose a workshop" ], "siteSize": "Small brochure", "interactionTypes": [ "Composition controls", "Workshop details" ], "keywords": [ "Education", "Events", "Shapes organise actual categories", "Deliberate asymmetry and grid spans", "Primary colours with text labels" ] }, "patterns": [ "Shapes organise actual categories", "Deliberate asymmetry and grid spans", "Primary colours with text labels" ], "downloadUrl": "/downloads/31-bauhaus-workshop.zip" }, { "schemaVersion": 2, "id": "32", "slug": "pop-memphis", "name": "Pop Memphis", "brand": "Odd Objects Club", "family": "Playful & material", "status": "ready", "thesis": "Make browsing feel exuberant and surprising while keeping decisions predictable.", "suitableFor": [ "Commerce", "Culture" ], "character": "Expressive", "traits": { "composition": "Playful kit composition with unequal arch, print and sculpture panels", "navigation": "Kit selection and an ordinary bundle builder", "typography": "Space Grotesk + DM Sans", "density": "Medium", "imagery": "Original CSS illustrations and graphic studies", "surface": "Soft material colours, independent geometric shapes and pattern-led transitions", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Deliberate pattern clashes", "Mismatched geometric frames", "Predictable controls in playful surfaces" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/32-pop-memphis/start", "states": [ { "key": "bundle", "label": "Customise a sample bundle", "route": "/preview/32-pop-memphis/bundle" }, { "key": "gallery", "label": "Member projects", "route": "/preview/32-pop-memphis/gallery" } ], "referenceImages": [ { "file": "/previews/32/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/32/c08418d0d078851e-desktop.jpg", "route": "/preview/32-pop-memphis/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b77cac416f23c60b8d479885e35ef18aed386c17e6c02bfb4339e6648358f781", "sha256": "c08418d0d078851efd3a0956a7a7040e724a9b63fadbab65f14fe693a2aeec00", "fullPage": false }, { "file": "/previews/32/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/32/4a175ede6901eda9-mobile.jpg", "route": "/preview/32-pop-memphis/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b77cac416f23c60b8d479885e35ef18aed386c17e6c02bfb4339e6648358f781", "sha256": "4a175ede6901eda92aabfc2e3fb828e2ce905e7a3eb7e52afba924700865fc73", "fullPage": false }, { "file": "/previews/32/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/32/f2dc272e01f5d6bc-detail.jpg", "route": "/preview/32-pop-memphis/bundle", "viewport": { "width": 1440, "height": 1000 }, "state": "bundle", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b77cac416f23c60b8d479885e35ef18aed386c17e6c02bfb4339e6648358f781", "sha256": "f2dc272e01f5d6bc24107eeaa9354d25a85ad2930f772439146338d5a33721ea", "fullPage": false }, { "file": "/previews/32/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/32/8c7cd328f0309e8d-full-page.jpg", "route": "/preview/32-pop-memphis/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b77cac416f23c60b8d479885e35ef18aed386c17e6c02bfb4339e6648358f781", "sha256": "8c7cd328f0309e8d6a77e1d6ae0c9d9084bcda9fec60ee10639f3ba6fe033ba0", "fullPage": true } ], "sourcePath": "src/designs/32-pop-memphis", "neighbours": [ "31", "33" ], "palette": { "page": "#fff0dd", "surface": "#ffffff", "ink": "#332a44", "accent": "#ab4167" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Make browsing feel exuberant and surprising while keeping decisions predictable. Fits playful lifestyle brands, creative clubs, youth-oriented events, and cheerful product launches.\n\n**Visual grammar.** Offset blocks, squiggles, stipple patterns, contrasting outlines, and deliberately mismatched geometric frames provide the visual language. Lavender, mint, melon, and black carry a bold rounded display face over plain body text. Navigation stays anchored in a solid strip; patterns occupy margins and section transitions.\n\n**Specimen and flow.** *Odd Objects Club* offers fictional monthly creative kits. Explore a themed collection, inspect kit contents, and customise a sample bundle. Supporting views include a member-project gallery and a bundle summary with an incompatible-item explanation. The interaction is ordinary selection, supported by lively visual responses.\n\n**Responsive behaviour.** Offset layouts become staggered but readable vertical sections. Pattern density decreases on small screens; reduced motion removes bouncing and rotation while preserving selected-state feedback.\n\n**Identity rules.** Preserve deliberate clashes of pattern and shape. Avoid repeating identical cards, using patterns beneath body copy, or letting random rotation impair controls. **Effort: medium.**\n\n**Distinctive composition.** The kit collection uses an oversized arch, a patterned print panel, and an asymmetric sculpture panel rather than three equal outlined cards. Geometric material play and patterned transitions distinguish it from Neo Brutalist Board’s regular hard-shadow grid.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Creative agency", "Design studio" ], "visitorGoals": [ "Discover a creative approach" ], "conversionActions": [ "Enquire about a project" ], "siteSize": "Portfolio & enquiry", "interactionTypes": [ "Project collection", "Contact form" ], "keywords": [ "Commerce", "Culture", "Deliberate pattern clashes", "Mismatched geometric frames", "Predictable controls in playful surfaces" ] }, "patterns": [ "Deliberate pattern clashes", "Mismatched geometric frames", "Predictable controls in playful surfaces" ], "downloadUrl": "/downloads/32-pop-memphis.zip" }, { "schemaVersion": 2, "id": "33", "slug": "playroom", "name": "Playroom", "brand": "Little Machine Lab", "family": "Playful & material", "status": "ready", "thesis": "Teach an interaction through visible, manipulable objects.", "suitableFor": [ "Education", "Interactive" ], "character": "Expressive", "traits": { "composition": "Tactile tabletop with visible parts, slots, and a deterministic result", "navigation": "Parts library, explicit placement, and saved construction", "typography": "Space Grotesk + DM Sans", "density": "Medium", "imagery": "Original CSS illustrations and graphic studies", "surface": "Warm toy-like workbench, inset slots and tangible parts", "motion": "Minimal" }, "effort": "High", "definingFeatures": [ "Objects express cause and effect", "Button alternatives for every placement", "A bounded machine with readable feedback" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/33-playroom/start", "states": [ { "key": "library", "label": "Parts library", "route": "/preview/33-playroom/library" }, { "key": "saved", "label": "Saved construction", "route": "/preview/33-playroom/saved" } ], "referenceImages": [ { "file": "/previews/33/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/33/0201f239d23e84b4-desktop.jpg", "route": "/preview/33-playroom/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8464a55ea62f8f441311607d85ab18f6f923f67370276891e775bf998f133dcf", "sha256": "0201f239d23e84b42a06bb9398f2bfb9f4a99bdc4b64543fc20b86c768cc6a56", "fullPage": false }, { "file": "/previews/33/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/33/5ba7dfb650148da0-mobile.jpg", "route": "/preview/33-playroom/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8464a55ea62f8f441311607d85ab18f6f923f67370276891e775bf998f133dcf", "sha256": "5ba7dfb650148da0dfe9b5054f7110308ab045e524006c5598cfaa15a3d32bb8", "fullPage": false }, { "file": "/previews/33/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/33/ab1d71a755245f8f-detail.jpg", "route": "/preview/33-playroom/library", "viewport": { "width": 1440, "height": 1000 }, "state": "library", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8464a55ea62f8f441311607d85ab18f6f923f67370276891e775bf998f133dcf", "sha256": "ab1d71a755245f8fb0c91e96eaec31730638a99b51d0eccd7225348d45b207ed", "fullPage": false }, { "file": "/previews/33/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/33/03907e4f5198d33a-full-page.jpg", "route": "/preview/33-playroom/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8464a55ea62f8f441311607d85ab18f6f923f67370276891e775bf998f133dcf", "sha256": "03907e4f5198d33ab3a0b13d212030879feae54fca70b8dc72a2208466f6636e", "fullPage": true } ], "sourcePath": "src/designs/33-playroom", "neighbours": [ "32", "49" ], "palette": { "page": "#f7ecd4", "surface": "#fff8e8", "ink": "#3b3e37", "accent": "#a83d2a" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Teach an interaction through visible, manipulable objects. Suitable for learning tools, creative configurators, simple games, and approachable planning experiences.\n\n**Visual grammar.** A bounded tabletop contains chunky objects, recessed slots, tactile buttons, and a compact tool shelf. Rounded type, warm cream, tomato red, sky blue, and soft material shadows make the interface approachable. A clear instruction line sits outside the play area, and object labels remain ordinary readable text.\n\n**Specimen and flow.** *Little Machine Lab* uses a small fixed set of parts and slots with deterministic responses, without a general physics engine. Select parts, place them in slots, and run the demonstration. Supporting views include a parts library and a saved-construction view with an incomplete-machine state. Keyboard selection and explicit move controls provide every action available through dragging.\n\n**Responsive behaviour.** The tabletop changes to a vertical sequence of slots rather than shrinking a desktop canvas. Optional spring motion becomes immediate state changes under reduced motion.\n\n**Identity rules.** Preserve understandable cause and effect and tangible controls. Avoid ornamental toy shapes around conventional forms, mandatory sound, or physics effects that make precise actions unreliable. **Effort: high.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Children education", "Interactive learning" ], "visitorGoals": [ "Learn by doing" ], "conversionActions": [ "Complete an activity" ], "siteSize": "Application", "interactionTypes": [ "Interactive activity", "Feedback states" ], "keywords": [ "Education", "Interactive", "Objects express cause and effect", "Button alternatives for every placement", "A bounded machine with readable feedback" ] }, "patterns": [ "Objects express cause and effect", "Button alternatives for every placement", "A bounded machine with readable feedback" ], "downloadUrl": "/downloads/33-playroom.zip" }, { "schemaVersion": 2, "id": "34", "slug": "hand-drawn-desk", "name": "Hand Drawn Desk", "brand": "Explain It Slowly", "family": "Playful & material", "status": "ready", "thesis": "Show thought developing through explanation, annotation, and revision.", "suitableFor": [ "Education", "Reading" ], "character": "Expressive", "traits": { "composition": "Numbered illustrated steps with attached callouts and a practice question", "navigation": "Step index, diagram labels, and answer feedback", "typography": "Space Grotesk + DM Sans + Caveat", "density": "Medium", "imagery": "Original SVG diagrams and illustrations", "surface": "Cream notebook paper, handwritten annotations and mechanical diagrams", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Diagram-led teaching", "Callouts attached to mechanics", "A prediction followed by explanation" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/34-hand-drawn-desk/start", "states": [ { "key": "practice", "label": "Predict the movement", "route": "/preview/34-hand-drawn-desk/practice" }, { "key": "index", "label": "Lesson index", "route": "/preview/34-hand-drawn-desk/index" } ], "referenceImages": [ { "file": "/previews/34/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/34/ddc9f36dc5c5c6b6-desktop.jpg", "route": "/preview/34-hand-drawn-desk/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a5dd3c2c51dda64772e9ecdde1560eec1a541284b0dd0059bff6624447f39903", "sha256": "ddc9f36dc5c5c6b6d2e742407ad5b6c8ebb73032c51e42136e7e125596371675", "fullPage": false }, { "file": "/previews/34/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/34/8005b9d1051a7161-mobile.jpg", "route": "/preview/34-hand-drawn-desk/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a5dd3c2c51dda64772e9ecdde1560eec1a541284b0dd0059bff6624447f39903", "sha256": "8005b9d1051a71614aa903b388f5ae2c0463e4e2b447941c66b577b31e3a55fa", "fullPage": false }, { "file": "/previews/34/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/34/a920173bb1db0e2e-detail.jpg", "route": "/preview/34-hand-drawn-desk/practice", "viewport": { "width": 1440, "height": 1000 }, "state": "practice", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a5dd3c2c51dda64772e9ecdde1560eec1a541284b0dd0059bff6624447f39903", "sha256": "a920173bb1db0e2e1f1f10204421fdf3973de208227565b07eda897812cbb8ce", "fullPage": false }, { "file": "/previews/34/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/34/2b73a52d018ee6c9-full-page.jpg", "route": "/preview/34-hand-drawn-desk/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a5dd3c2c51dda64772e9ecdde1560eec1a541284b0dd0059bff6624447f39903", "sha256": "2b73a52d018ee6c91c0246b39231c3fa459321191e5aeb03803e360ef12cf3bb", "fullPage": true } ], "sourcePath": "src/designs/34-hand-drawn-desk", "neighbours": [ "05", "35" ], "palette": { "page": "#f7f0de", "surface": "#ffffff", "ink": "#37414a", "accent": "#315b9a" }, "fonts": [ "Space Grotesk", "DM Sans", "Caveat" ], "brief": "**Philosophy and fit.** Show thought developing through explanation, annotation, and revision. Fits tutorials, workshop materials, personal teaching sites, and approachable technical writing.\n\n**Visual grammar.** Make numbered illustrated steps the main structure: a large diagram, a short explanation, and a practice prompt. Attach callouts to parts of the drawing rather than maintaining a prose annotation margin. Warm paper, graphite, blue ink, and a red correction accent support a readable sans body face. Handwriting appears only in short secondary notes; a compact step index supplies navigation.\n\n**Specimen and flow.** *Explain It Slowly* teaches an original simple mechanism. Inspect a diagram, reveal labelled forces or moving parts, and predict the next step. Supporting views include the illustrated lesson index and answer feedback that connects the prediction to the diagram. The reader can toggle annotations without losing their position.\n\n**Responsive behaviour.** Drawing callouts become a numbered explanation below each diagram. Diagrams include captions and text accounts; animation never replaces the written explanation of how a mechanism works.\n\n**Identity rules.** Preserve explanatory annotation and visible thinking. Avoid fake handwritten paragraphs, random scribbles with no meaning, and confusing a teaching notebook with an archival card cabinet. **Effort: medium.**\n\n**Distinctive composition.** Handwritten labels belong to the sketchbook, making its annotations distinct from the paper archive and playful geometric references.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Illustration", "Creative studio" ], "visitorGoals": [ "Explore a portfolio" ], "conversionActions": [ "Enquire about a project" ], "siteSize": "Portfolio & enquiry", "interactionTypes": [ "Sketchbook", "Project details" ], "keywords": [ "Education", "Reading", "Diagram-led teaching", "Callouts attached to mechanics", "A prediction followed by explanation" ] }, "patterns": [ "Diagram-led teaching", "Callouts attached to mechanics", "A prediction followed by explanation" ], "downloadUrl": "/downloads/34-hand-drawn-desk.zip" }, { "schemaVersion": 2, "id": "35", "slug": "paper-cabinet", "name": "Paper Cabinet", "brand": "The Commonplace Cabinet", "family": "Playful & material", "status": "ready", "thesis": "Make a collection feel organised, discoverable, and worth returning to.", "suitableFor": [ "Research", "Directories" ], "character": "Expressive", "traits": { "composition": "Tabbed category drawers, consistent index cards, and full record sheets", "navigation": "Drawer tabs, ingredient search, and accession links", "typography": "Libre Baskerville + IBM Plex Mono", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Indexed cream cards, olive dividers, accession numbers and paper layers", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Stable archival metadata", "Index-to-record relationship", "Private local annotations" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/35-paper-cabinet/start", "states": [ { "key": "record", "label": "Recipe record and private note", "route": "/preview/35-paper-cabinet/record" }, { "key": "saved", "label": "Saved selections", "route": "/preview/35-paper-cabinet/saved" } ], "referenceImages": [ { "file": "/previews/35/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/35/38b123d643a0c398-desktop.jpg", "route": "/preview/35-paper-cabinet/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:25f3f2b91c3b6118553512b77e706c793af0c024f27a71cbb3a21b0948cef5d8", "sha256": "38b123d643a0c39812a83687a05c9649d8f0e871a51e583691cdf659b43ce460", "fullPage": false }, { "file": "/previews/35/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/35/8e93d11df8fcaab6-mobile.jpg", "route": "/preview/35-paper-cabinet/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:25f3f2b91c3b6118553512b77e706c793af0c024f27a71cbb3a21b0948cef5d8", "sha256": "8e93d11df8fcaab6e0b29b3aa63c2be041869920b2a0065c70394c25b9cf8c85", "fullPage": false }, { "file": "/previews/35/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/35/18d134240e3072a0-detail.jpg", "route": "/preview/35-paper-cabinet/record", "viewport": { "width": 1440, "height": 1000 }, "state": "record", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:25f3f2b91c3b6118553512b77e706c793af0c024f27a71cbb3a21b0948cef5d8", "sha256": "18d134240e3072a0d9d6d5464806db38d0f5b56e0c9c9638e5b67e088b9dc39a", "fullPage": false }, { "file": "/previews/35/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/35/544519fb9fd155d1-full-page.jpg", "route": "/preview/35-paper-cabinet/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:25f3f2b91c3b6118553512b77e706c793af0c024f27a71cbb3a21b0948cef5d8", "sha256": "544519fb9fd155d1bf366a99ad3972605f50e61d9e881d176bc72dc49e5d654b", "fullPage": true } ], "sourcePath": "src/designs/35-paper-cabinet", "neighbours": [ "34", "18" ], "palette": { "page": "#e8dfc9", "surface": "#f7efdc", "ink": "#493f2f", "accent": "#6c6d46" }, "fonts": [ "Libre Baskerville", "IBM Plex Mono" ], "brief": "**Philosophy and fit.** Make a collection feel organised, discoverable, and worth returning to. Appropriate for archives, recipe libraries, reading collections, and curated research materials.\n\n**Visual grammar.** Tabbed drawers introduce categories; index cards present consistent metadata; a detail sheet holds the full record. Use buff paper, dark brown text, muted olive tabs, fine rules, and a modest serif paired with monospaced accession labels. Physical cues clarify organisation without requiring a simulated filing cabinet.\n\n**Specimen and flow.** *The Commonplace Cabinet* collects fictional historical recipes. Choose a drawer, filter cards by ingredient or period, and open a recipe record. Supporting views include saved selections and a record with missing provenance clearly marked. Users can add a private note stored locally and return to the same filtered list.\n\n**Responsive behaviour.** Drawer tabs become a labelled category selector. Cards stack in a single readable column; record sheets open as ordinary pages rather than floating paper windows.\n\n**Identity rules.** Preserve stable metadata, tactile hierarchy, and the index-to-record relationship. Avoid ornamental desk clutter, unreadable ageing effects, or hiding navigation inside decorative objects. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Archive", "Museum", "Collections" ], "visitorGoals": [ "Find an object" ], "conversionActions": [ "Inspect a record" ], "siteSize": "Searchable catalogue", "interactionTypes": [ "Collection filters", "Archival records" ], "keywords": [ "Research", "Directories", "Stable archival metadata", "Index-to-record relationship", "Private local annotations" ] }, "patterns": [ "Stable archival metadata", "Index-to-record relationship", "Private local annotations" ], "downloadUrl": "/downloads/35-paper-cabinet.zip" }, { "schemaVersion": 2, "id": "36", "slug": "punk-zine", "name": "Punk Zine", "brand": "Underpass", "family": "Playful & material", "status": "ready", "thesis": "Treat publishing as an authored, opinionated act.", "suitableFor": [ "Editorial", "Culture" ], "character": "Expressive", "traits": { "composition": "Uneven editorial collage with photocopied image, overprint and interrupted dividers", "navigation": "Issue contents and chronological archive", "typography": "Archivo Black + Libre Baskerville", "density": "Medium", "imagery": "Licensed illustrative photography", "surface": "Newsprint, heavy black type, lime markers, collage and uneven rules", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Cutout photography and material layering", "Unequal headline scales", "Readable long-form editorial text" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/36-punk-zine/start", "states": [ { "key": "article", "label": "After the last train", "route": "/preview/36-punk-zine/article" }, { "key": "archive", "label": "Issue archive", "route": "/preview/36-punk-zine/archive" } ], "referenceImages": [ { "file": "/previews/36/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/36/80276e43ac1d97dd-desktop.jpg", "route": "/preview/36-punk-zine/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f2bb439bec0182b391db8dcbdf23eba3c1bfab8b2d7c7767a132bef1d17063da", "sha256": "80276e43ac1d97dd5b951fdf1147befcac69ebd33555f4dfb90b1164de4c018b", "fullPage": false }, { "file": "/previews/36/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/36/3070cc9d4a2a2ee5-mobile.jpg", "route": "/preview/36-punk-zine/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f2bb439bec0182b391db8dcbdf23eba3c1bfab8b2d7c7767a132bef1d17063da", "sha256": "3070cc9d4a2a2ee58272bf09ac04180231218eca1bfc52da8f798279b34148c3", "fullPage": false }, { "file": "/previews/36/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/36/ac2b0ed50e2321d6-detail.jpg", "route": "/preview/36-punk-zine/article", "viewport": { "width": 1440, "height": 1000 }, "state": "article", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f2bb439bec0182b391db8dcbdf23eba3c1bfab8b2d7c7767a132bef1d17063da", "sha256": "ac2b0ed50e2321d6df78cd35da66e6e48a59bdeeb853fdd1aca2a349d35b7d94", "fullPage": false }, { "file": "/previews/36/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/36/2fcd4186b62369ca-full-page.jpg", "route": "/preview/36-punk-zine/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f2bb439bec0182b391db8dcbdf23eba3c1bfab8b2d7c7767a132bef1d17063da", "sha256": "2fcd4186b62369cacfba4e5d71a89c5b118c32464984639a7782b6a5e21723c0", "fullPage": true } ], "sourcePath": "src/designs/36-punk-zine", "neighbours": [ "09", "44" ], "palette": { "page": "#e9e7dc", "surface": "#ffffff", "ink": "#141714", "accent": "#c5f34f" }, "fonts": [ "Archivo Black", "Libre Baskerville" ], "brief": "**Philosophy and fit.** Treat publishing as an authored, opinionated act. Suitable for independent magazines, music collectives, criticism, activist archives, and underground event programmes.\n\n**Visual grammar.** A masthead anchors an irregular editorial spread: narrow text columns, cutout photography, rotated section labels, torn dividers, and deliberately mismatched headline scales. Use condensed grotesque headlines, readable serif body copy, ink black, dirty white, and one acidic spot colour. A plain contents strip provides dependable navigation beneath the collage.\n\n**Specimen and flow.** *Underpass* is a fictional independent music journal. Open an issue, select a feature from its annotated cover, and read the full article. Supporting views are a chronological issue archive and an article’s credits and related reading section. All decorative scraps accompany actual editorial content.\n\n**Mobile and motion.** Recompose the spread into a clear reading sequence; captions remain beside their images. Collage elements are static, with no background jitter or compulsory animation.\n\n**Identity and effort.** Preserve material layering and editorial tension; avoid illegible body text, arbitrary overlap, and a conventional card grid hidden beneath distress textures. **Effort: medium.**\n\n**Distinctive composition.** Unequal column starts, a photocopied image cutout, a large overprint, interrupted dividers, and varied headline scales give the issue an editorial collage. Contents links and article text remain straight and readable.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Music", "Arts", "Independent publishing" ], "visitorGoals": [ "Explore an issue" ], "conversionActions": [ "Read a story" ], "siteSize": "Digital publication", "interactionTypes": [ "Issue contents", "Article navigation" ], "keywords": [ "Editorial", "Culture", "Cutout photography and material layering", "Unequal headline scales", "Readable long-form editorial text" ] }, "patterns": [ "Cutout photography and material layering", "Unequal headline scales", "Readable long-form editorial text" ], "downloadUrl": "/downloads/36-punk-zine.zip" }, { "schemaVersion": 2, "id": "37", "slug": "comic-serial", "name": "Comic Serial", "brand": "Neighbourhood Mythologies", "family": "Playful & material", "status": "ready", "thesis": "Explain through sequence, juxtaposition, and a recognisable narrator.", "suitableFor": [ "Editorial", "Education" ], "character": "Expressive", "traits": { "composition": "Authored narrative panels with establishing shots, close beats, and live dialogue", "navigation": "Chapters, next episode, and a full text transcript", "typography": "Space Grotesk + DM Sans", "density": "Medium", "imagery": "Original SVG diagrams and illustrations", "surface": "Cream comic panels, original geometric scenes and speech bubbles", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Panel relationships create pacing", "Dialogue remains selectable text", "Complete descriptive transcript" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/37-comic-serial/start", "states": [ { "key": "transcript", "label": "Full text transcript", "route": "/preview/37-comic-serial/transcript" }, { "key": "chapters", "label": "Chapter index", "route": "/preview/37-comic-serial/chapters" } ], "referenceImages": [ { "file": "/previews/37/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/37/35d78f30837608f2-desktop.jpg", "route": "/preview/37-comic-serial/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:081ab674241728b15336613f67cd6f4cab41aff692448f87ae0dc7d86a542a05", "sha256": "35d78f30837608f2388aafd78706913c9692e0963d62928dc00821750f5eb4c5", "fullPage": false }, { "file": "/previews/37/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/37/25b984a50a12501e-mobile.jpg", "route": "/preview/37-comic-serial/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:081ab674241728b15336613f67cd6f4cab41aff692448f87ae0dc7d86a542a05", "sha256": "25b984a50a12501eae40ab4e31725dcb6576fa96e5aa2a05070aa64fa15a1ce4", "fullPage": false }, { "file": "/previews/37/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/37/f4313b7a8ca5bc53-detail.jpg", "route": "/preview/37-comic-serial/transcript", "viewport": { "width": 1440, "height": 1000 }, "state": "transcript", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:081ab674241728b15336613f67cd6f4cab41aff692448f87ae0dc7d86a542a05", "sha256": "f4313b7a8ca5bc53e7f97ec7368b344a993897ce474d67dbde2dd0131164108d", "fullPage": false }, { "file": "/previews/37/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/37/c57586aad481094a-full-page.jpg", "route": "/preview/37-comic-serial/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:081ab674241728b15336613f67cd6f4cab41aff692448f87ae0dc7d86a542a05", "sha256": "c57586aad481094a0af19e424a583c37ff44dfabd7ee41fe2bc0cc1d6a06603a", "fullPage": true } ], "sourcePath": "src/designs/37-comic-serial", "neighbours": [ "36", "34" ], "palette": { "page": "#f6e8cd", "surface": "#ffffff", "ink": "#293d3b", "accent": "#a74434" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Explain through sequence, juxtaposition, and a recognisable narrator. Suitable for illustrated journalism, educational stories, episodic fiction, and playful product explanations.\n\n**Visual grammar.** Arrange scenes as panels with purposeful changes in scale: an establishing image, close detail, and explanatory beat. Chapter navigation sits above the story; a persistent progress label identifies the current scene. Use rounded display lettering for short dialogue, a readable sans serif for explanation, heavy ink boundaries, and a restrained illustration palette. Speech balloons never contain essential text solely inside an image.\n\n**Specimen and flow.** *Neighbourhood Mythologies* presents fictional local history stories. Choose a chapter, move through its panels, then open the next episode. Supporting views are the illustrated chapter index and a complete text transcript with image descriptions.\n\n**Mobile and motion.** Stack panels in their authored reading order. Desktop spreads become vertical scenes without swipe dependence; optional panel transitions disappear under reduced motion.\n\n**Identity and effort.** Preserve narrative pacing and panel relationships; avoid rendering an ordinary landing page inside comic borders. **Effort: medium**, with a separate illustration workload.", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Comics", "Storytelling" ], "visitorGoals": [ "Read a serial" ], "conversionActions": [ "Continue a story" ], "siteSize": "Digital publication", "interactionTypes": [ "Episode navigation", "Reading mode" ], "keywords": [ "Editorial", "Education", "Panel relationships create pacing", "Dialogue remains selectable text", "Complete descriptive transcript" ] }, "patterns": [ "Panel relationships create pacing", "Dialogue remains selectable text", "Complete descriptive transcript" ], "downloadUrl": "/downloads/37-comic-serial.zip" }, { "schemaVersion": 2, "id": "38", "slug": "pixel-arcade", "name": "Pixel Arcade", "brand": "Quarter Club", "family": "Playful & material", "status": "ready", "thesis": "Make browsing feel like selecting a game from a cabinet.", "suitableFor": [ "Events", "Games" ], "character": "Expressive", "traits": { "composition": "Arcade selection list beside a framed preview window", "navigation": "Visible cartridge buttons and event details", "typography": "Press Start 2P + DM Sans", "density": "Medium", "imagery": "Original CSS illustrations and graphic studies", "surface": "Dark arcade panels, pixel scenery and bright selected states", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Discrete game-menu hierarchy", "Stepped borders and concise pixel titles", "Ordinary accessible reservation controls" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/38-pixel-arcade/start", "states": [ { "key": "event", "label": "Tournament detail", "route": "/preview/38-pixel-arcade/event" }, { "key": "reserved", "label": "Sample attendance reservation", "route": "/preview/38-pixel-arcade/reserved" } ], "referenceImages": [ { "file": "/previews/38/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/38/c0afd460798c8f41-desktop.jpg", "route": "/preview/38-pixel-arcade/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:2370261da22f84e3a34402a9b84cbecc29d74b0f514a7f78b6ec89f7fbc10ba6", "sha256": "c0afd460798c8f4127af754c004a5821d2b42513b45575ae6e68b1e0887f6806", "fullPage": false }, { "file": "/previews/38/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/38/034044c49a9cbe95-mobile.jpg", "route": "/preview/38-pixel-arcade/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:2370261da22f84e3a34402a9b84cbecc29d74b0f514a7f78b6ec89f7fbc10ba6", "sha256": "034044c49a9cbe951931fd88038974d50ba53afbab66ad9798f1ea0b2a8a3818", "fullPage": false }, { "file": "/previews/38/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/38/01b964c6b828f5b0-detail.jpg", "route": "/preview/38-pixel-arcade/event", "viewport": { "width": 1440, "height": 1000 }, "state": "event", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:2370261da22f84e3a34402a9b84cbecc29d74b0f514a7f78b6ec89f7fbc10ba6", "sha256": "01b964c6b828f5b0a6e1575c1adc4a67fec28a2bd97f0a7d026f2b24ce3643b9", "fullPage": false }, { "file": "/previews/38/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/38/759b8d5d0e6cdddf-full-page.jpg", "route": "/preview/38-pixel-arcade/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:2370261da22f84e3a34402a9b84cbecc29d74b0f514a7f78b6ec89f7fbc10ba6", "sha256": "759b8d5d0e6cdddf011eca9748b07e0f421be6011a673e875454ebf2b9603eb0", "fullPage": true } ], "sourcePath": "src/designs/38-pixel-arcade", "neighbours": [ "40", "42" ], "palette": { "page": "#171b30", "surface": "#28314b", "ink": "#e8e8d9", "accent": "#f1c568" }, "fonts": [ "Press Start 2P", "DM Sans" ], "brief": "**Philosophy and fit.** Make browsing feel like selecting a game from a cabinet. Suitable for game clubs, indie releases, playful events, and compact entertainment directories.\n\n**Visual grammar.** A framed screen contains a prominent selection list, a preview window, and a narrow status strip. Use pixel display lettering for short titles, ordinary readable type for descriptions, a dark background, sharply separated saturated colours, and deliberately stepped borders. Navigation uses visible buttons and links; directional keys can be an optional enhancement.\n\n**Specimen and flow.** *Quarter Club* is a fictional local games collective. Browse event cartridges, open a tournament’s details, and reserve a sample attendance slot locally. Supporting states are a filtered event selection and an explicit demo reservation confirmation. Rankings and attendance figures come from labelled fixtures.\n\n**Mobile and motion.** Replace the cabinet frame with a compact selector above the preview. Controls remain finger sized. Disable flashes and looping attract sequences; sound starts only through a deliberate user action.\n\n**Identity and effort.** Preserve discrete screen composition and game menu hierarchy; avoid neon decoration over standard SaaS cards. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Games", "Entertainment" ], "visitorGoals": [ "Play a game" ], "conversionActions": [ "Start a session" ], "siteSize": "Application", "interactionTypes": [ "Game controls", "Score feedback" ], "keywords": [ "Events", "Games", "Discrete game-menu hierarchy", "Stepped borders and concise pixel titles", "Ordinary accessible reservation controls" ] }, "patterns": [ "Discrete game-menu hierarchy", "Stepped borders and concise pixel titles", "Ordinary accessible reservation controls" ], "downloadUrl": "/downloads/38-pixel-arcade.zip" }, { "schemaVersion": 2, "id": "39", "slug": "personal-web-1999", "name": "Personal Web 1999", "brand": "Moth Observatory", "family": "Playful & material", "status": "ready", "thesis": "Express a person’s interests through a small, hand maintained web of pages.", "suitableFor": [ "Personal", "Editorial" ], "character": "Expressive", "traits": { "composition": "Compact personal homepage with a visible link directory, updates, and original badges", "navigation": "Direct links, adjacent journal entries, and a local guestbook", "typography": "Libre Baskerville + DM Sans", "density": "Medium", "imagery": "Original SVG diagrams and illustrations", "surface": "Patterned wallpaper, small personal panels, serif text and original moth art", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Personal miscellany", "Modest hand-maintained page width", "Underlined links and visible site map" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/39-personal-web-1999/start", "states": [ { "key": "journal", "label": "A journal entry", "route": "/preview/39-personal-web-1999/journal" }, { "key": "guestbook", "label": "Local guestbook", "route": "/preview/39-personal-web-1999/guestbook" } ], "referenceImages": [ { "file": "/previews/39/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/39/e5d453d6f848ecf9-desktop.jpg", "route": "/preview/39-personal-web-1999/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fe9b0d7e9eb4139f9aed41712576dd4c86860a983e0644abb3deb9b49bdc647a", "sha256": "e5d453d6f848ecf9d96c71227aaec6a3b223d51d7f7715965a90375520927384", "fullPage": false }, { "file": "/previews/39/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/39/8cf37e41f8047a1f-mobile.jpg", "route": "/preview/39-personal-web-1999/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fe9b0d7e9eb4139f9aed41712576dd4c86860a983e0644abb3deb9b49bdc647a", "sha256": "8cf37e41f8047a1f2817ac9eb19e6d056b9349c125972677236a63dadf94e07b", "fullPage": false }, { "file": "/previews/39/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/39/8d8c37c87ed3c153-detail.jpg", "route": "/preview/39-personal-web-1999/journal", "viewport": { "width": 1440, "height": 1000 }, "state": "journal", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fe9b0d7e9eb4139f9aed41712576dd4c86860a983e0644abb3deb9b49bdc647a", "sha256": "8d8c37c87ed3c1537768df9ccb9c1a3da210a7113f7aac311a862d140536b393", "fullPage": false }, { "file": "/previews/39/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/39/db3be0630837585c-full-page.jpg", "route": "/preview/39-personal-web-1999/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fe9b0d7e9eb4139f9aed41712576dd4c86860a983e0644abb3deb9b49bdc647a", "sha256": "db3be0630837585cf272734b777b6f57a7d4d0082ea30ac16ff2058af7290a06", "fullPage": true } ], "sourcePath": "src/designs/39-personal-web-1999", "neighbours": [ "40", "42" ], "palette": { "page": "#dfe2cf", "surface": "#fffceb", "ink": "#262b43", "accent": "#3e4e8a" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Express a person’s interests through a small, hand maintained web of pages. Suitable for personal sites, fan communities, hobby collections, and informal project journals.\n\n**Visual grammar.** Use a compact masthead, a visible link directory, short update entries, tiny original badges, and an intentionally modest content width. Default-like serif copy and blue underlined links coexist with simple coloured table-like panels built using modern layout CSS. A repeating background pattern can surround a solid, readable content surface.\n\n**Specimen and flow.** *Moth Observatory* is a fictional enthusiast’s website. Follow a homepage journal link, read an entry, then navigate to adjacent entries. Supporting pages are a curated links directory and a guestbook with clearly local-only sample submissions. A site map keeps every destination discoverable.\n\n**Mobile and motion.** Collapse the link rail above the content, wrap badges, and keep text comfortably readable. Any small animated decoration has a pause control or a static alternative.\n\n**Identity and effort.** Preserve personal miscellany, direct linking, and homemade composition; avoid copying obsolete browser failures or inserting fake broken links. **Effort: low.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Personal website", "Hobby" ], "visitorGoals": [ "Explore a personal collection" ], "conversionActions": [ "Sign a sample guestbook" ], "siteSize": "One page", "interactionTypes": [ "Guestbook", "Personal links" ], "keywords": [ "Personal", "Editorial", "Personal miscellany", "Modest hand-maintained page width", "Underlined links and visible site map" ] }, "patterns": [ "Personal miscellany", "Modest hand-maintained page width", "Underlined links and visible site map" ], "downloadUrl": "/downloads/39-personal-web-1999.zip" }, { "schemaVersion": 2, "id": "40", "slug": "desktop-1995", "name": "Desktop 1995", "brand": "Parcel OS", "family": "Playful & material", "status": "ready", "thesis": "Present a small collection as familiar, named tools and folders.", "suitableFor": [ "Portfolio", "Culture" ], "character": "Expressive", "traits": { "composition": "Desktop tools with bevelled windows and an explicit task strip", "navigation": "Named application launchers and window controls", "typography": "DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Teal desktop, bevelled grey windows, title bars and inset work areas", "motion": "Minimal" }, "effort": "High", "definingFeatures": [ "Three named tools with actual states", "Window focus follows activation", "A mobile application list" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/40-desktop-1995/start", "states": [ { "key": "contact", "label": "Contact application", "route": "/preview/40-desktop-1995/contact" }, { "key": "help", "label": "Help application", "route": "/preview/40-desktop-1995/help" } ], "referenceImages": [ { "file": "/previews/40/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/40/52b9d83d549e5bf4-desktop.jpg", "route": "/preview/40-desktop-1995/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:43441ff2811ad8ce6de5ee08fd95c812d9d4e3af23ae97a21832253d58f6d34c", "sha256": "52b9d83d549e5bf412b279575fdf51e5609701b5975f43a7e2350988b93bd979", "fullPage": false }, { "file": "/previews/40/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/40/e80767e1ae421684-mobile.jpg", "route": "/preview/40-desktop-1995/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:43441ff2811ad8ce6de5ee08fd95c812d9d4e3af23ae97a21832253d58f6d34c", "sha256": "e80767e1ae421684c72bcdf66b7e16d7cc68c25ceec4b49cf5597eb4835b6046", "fullPage": false }, { "file": "/previews/40/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/40/2d621783fa46aced-detail.jpg", "route": "/preview/40-desktop-1995/contact", "viewport": { "width": 1440, "height": 1000 }, "state": "contact", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:43441ff2811ad8ce6de5ee08fd95c812d9d4e3af23ae97a21832253d58f6d34c", "sha256": "2d621783fa46aced64b93fa403030a03037cde9b10ff8c5569a90f08e0052313", "fullPage": false }, { "file": "/previews/40/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/40/a6a33cc4d23e8742-full-page.jpg", "route": "/preview/40-desktop-1995/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:43441ff2811ad8ce6de5ee08fd95c812d9d4e3af23ae97a21832253d58f6d34c", "sha256": "a6a33cc4d23e874270cc23d98bca7b2c0fc0c576f5bc01e8800a2f2dcf53fa22", "fullPage": true } ], "sourcePath": "src/designs/40-desktop-1995", "neighbours": [ "38", "41" ], "palette": { "page": "#3e7573", "surface": "#e5e5df", "ink": "#19232a", "accent": "#253b80" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Present a small collection as familiar, named tools and folders. Suitable for portfolios, digital exhibitions, personal project collections, and compact creative utilities.\n\n**Visual grammar.** A desktop, icon labels, bevelled window frames, title bars, and a task strip organise content into discrete applications. Use a neutral grey interface, one selected-state colour, compact system-like typography, and restrained bitmap accents. Windows have explicit open, close, minimise, and maximise controls; their content uses semantic document structure.\n\n**Specimen and flow.** *Parcel OS* is a fictional designer’s portfolio with only Projects, Contact, and Help windows. Open Projects, select a case study, then open its contact form. Supporting states are an application switcher and a help view explaining the controls. Window positioning is optional; a general desktop framework is outside the specimen's scope.\n\n**Mobile and motion.** Show one full-width application at a time, with a clear back control and application list. Keyboard focus follows the active window and returns to its launcher when closed.\n\n**Identity and effort.** Preserve the desktop’s task model; avoid decorative windows that obscure navigation or pretend to access the visitor’s filesystem. **Effort: high.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Software", "Retro computing" ], "visitorGoals": [ "Explore a workspace" ], "conversionActions": [ "Open a document" ], "siteSize": "Application", "interactionTypes": [ "Window controls", "File navigation" ], "keywords": [ "Portfolio", "Culture", "Three named tools with actual states", "Window focus follows activation", "A mobile application list" ] }, "patterns": [ "Three named tools with actual states", "Window focus follows activation", "A mobile application list" ], "downloadUrl": "/downloads/40-desktop-1995.zip" }, { "schemaVersion": 2, "id": "41", "slug": "terminal-manual", "name": "Terminal Manual", "brand": "Relay CLI", "family": "Retro & experimental", "status": "ready", "thesis": "Make technical information feel immediate, inspectable, and economical.", "suitableFor": [ "Documentation", "Software" ], "character": "Expressive", "traits": { "composition": "Text-first command manual with a narrow index and full-width code examples", "navigation": "Searchable command links and ordinary section navigation", "typography": "IBM Plex Mono", "density": "High", "imagery": "Typography, rules, and interface structure", "surface": "Dark green manual, monospace text, numbered sections and code blocks", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Documentation hierarchy carries the identity", "Inspectable examples with clear options", "No typing required to navigate" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/41-terminal-manual/start", "states": [ { "key": "examples", "label": "Expanded examples", "route": "/preview/41-terminal-manual/examples" }, { "key": "search", "label": "Command search", "route": "/preview/41-terminal-manual/search" } ], "referenceImages": [ { "file": "/previews/41/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/41/a5daa7b5aad536b7-desktop.jpg", "route": "/preview/41-terminal-manual/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:26ddbeddf376ca3d7a82ac5f1bbed19279dae30c8dd1c86a489ab74363224861", "sha256": "a5daa7b5aad536b7be518fc2c6b3819ad2d2d3a2fbabcc0e9d083997e6ce5dbf", "fullPage": false }, { "file": "/previews/41/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/41/46ba0dea09b494ef-mobile.jpg", "route": "/preview/41-terminal-manual/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:26ddbeddf376ca3d7a82ac5f1bbed19279dae30c8dd1c86a489ab74363224861", "sha256": "46ba0dea09b494ef69a2589ba61ccb31d7d4432e45b7c1aec69637df0c02fd9f", "fullPage": false }, { "file": "/previews/41/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/41/a5daa7b5aad536b7-detail.jpg", "route": "/preview/41-terminal-manual/examples", "viewport": { "width": 1440, "height": 1000 }, "state": "examples", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:26ddbeddf376ca3d7a82ac5f1bbed19279dae30c8dd1c86a489ab74363224861", "sha256": "a5daa7b5aad536b7be518fc2c6b3819ad2d2d3a2fbabcc0e9d083997e6ce5dbf", "fullPage": false }, { "file": "/previews/41/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/41/feb09b273a139c3a-full-page.jpg", "route": "/preview/41-terminal-manual/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:26ddbeddf376ca3d7a82ac5f1bbed19279dae30c8dd1c86a489ab74363224861", "sha256": "feb09b273a139c3a838f84de474de1d66f730fb996a0d086fe3c48db3fb725b2", "fullPage": true } ], "sourcePath": "src/designs/41-terminal-manual", "neighbours": [ "42", "13" ], "palette": { "page": "#18201e", "surface": "#242e28", "ink": "#e2dfce", "accent": "#a9c39c" }, "fonts": [ "IBM Plex Mono" ], "brief": "**Philosophy and fit.** Make technical information feel immediate, inspectable, and economical. Suitable for developer documentation, command reference guides, release logs, and technical portfolios.\n\n**Visual grammar.** Build a text-first document with a narrow command index, full-width examples, prompt markers, and terse status labels. Use a monospace family with comfortable line spacing, near-black surfaces, warm pale text, and limited green or amber accents. Heading hierarchy and ordinary underlined links carry the structure; colour alone never identifies a command’s status.\n\n**Specimen and flow.** *Relay CLI* documents a fictional file synchronisation utility. Select a command, inspect its arguments, edit a harmless example’s options, and copy the resulting sample command. Supporting states are search with no matching command and an expanded examples section. Nothing executes in a shell.\n\n**Mobile and motion.** Move the index into an accessible disclosure and let long code blocks scroll within their own bounds. Text appears immediately; simulated typing is optional and off by default.\n\n**Identity and effort.** Preserve text density and documentation logic; avoid demanding typed commands to navigate or decorating every page with fake hacker output. **Effort: low.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Developer tools", "Documentation" ], "visitorGoals": [ "Complete a technical task" ], "conversionActions": [ "Read a command guide" ], "siteSize": "Documentation site", "interactionTypes": [ "Search", "Command examples" ], "keywords": [ "Documentation", "Software", "Documentation hierarchy carries the identity", "Inspectable examples with clear options", "No typing required to navigate" ] }, "patterns": [ "Documentation hierarchy carries the identity", "Inspectable examples with clear options", "No typing required to navigate" ], "downloadUrl": "/downloads/41-terminal-manual.zip" }, { "schemaVersion": 2, "id": "42", "slug": "teletext-bulletin", "name": "Teletext Bulletin", "brand": "TownText", "family": "Retro & experimental", "status": "ready", "thesis": "Deliver compact, regularly structured information through explicit sections and numbered pages.", "suitableFor": [ "News", "Events" ], "character": "Expressive", "traits": { "composition": "Numbered broadcast bulletin with colour bands and compact text rows", "navigation": "Page numbers supplemented by ordinary visible links", "typography": "IBM Plex Mono", "density": "High", "imagery": "Typography, rules, and interface structure", "surface": "Near-black screen, fixed-width text, coloured strips and numbered pages", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Edited information density", "Numbered page hierarchy", "Rectangular broadcast colour bands" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/42-teletext-bulletin/start", "states": [ { "key": "event", "label": "Numbered event page", "route": "/preview/42-teletext-bulletin/event" }, { "key": "saved", "label": "Saved pages", "route": "/preview/42-teletext-bulletin/saved" } ], "referenceImages": [ { "file": "/previews/42/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/42/9fa4a7ec3f1cd48a-desktop.jpg", "route": "/preview/42-teletext-bulletin/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8a5fdece058368c707fa5646e0472da1c2ddc64be54928df9f98fde7b51d4693", "sha256": "9fa4a7ec3f1cd48a56b6ac6cf571a80930408e0dde7aaec3cf1cc5cba0357d80", "fullPage": false }, { "file": "/previews/42/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/42/b2026c77481628ae-mobile.jpg", "route": "/preview/42-teletext-bulletin/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8a5fdece058368c707fa5646e0472da1c2ddc64be54928df9f98fde7b51d4693", "sha256": "b2026c77481628ae62e2f843a9a9e3d7b51c88d990defcbf336de05ef2c087cd", "fullPage": false }, { "file": "/previews/42/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/42/2037e94f25cac1a8-detail.jpg", "route": "/preview/42-teletext-bulletin/event", "viewport": { "width": 1440, "height": 1000 }, "state": "event", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8a5fdece058368c707fa5646e0472da1c2ddc64be54928df9f98fde7b51d4693", "sha256": "2037e94f25cac1a8134c0d77b3b4d73d28f1114795feb4b8de27247e251bc070", "fullPage": false }, { "file": "/previews/42/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/42/8220c1785a86378e-full-page.jpg", "route": "/preview/42-teletext-bulletin/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8a5fdece058368c707fa5646e0472da1c2ddc64be54928df9f98fde7b51d4693", "sha256": "8220c1785a86378ee3d9d85c65957f72828e8441974a100a4d76df033bfbb315", "fullPage": true } ], "sourcePath": "src/designs/42-teletext-bulletin", "neighbours": [ "41", "38" ], "palette": { "page": "#101514", "surface": "#1c302e", "ink": "#f1f0dc", "accent": "#f1d95e" }, "fonts": [ "IBM Plex Mono" ], "brief": "**Philosophy and fit.** Deliver compact, regularly structured information through explicit sections and numbered pages. Suitable for event bulletins, community updates, sports summaries, and small informational directories.\n\n**Visual grammar.** Use a broadcast-style title strip, visible page identifier, tightly organised text rows, block colour bands, and a footer of section links. Monospaced display text and rectangular graphics create the character. Keep a deliberately limited palette, while choosing text and background combinations that remain readable. Unlike a terminal, the page resembles an edited bulletin, without prompts or command history.\n\n**Specimen and flow.** *TownText* is a fictional community notice service. Choose What’s On, open a numbered event page, and follow its booking information. Supporting views are the subject index and a saved-pages list stored locally. Dates are labelled sample content.\n\n**Mobile and motion.** Preserve section order while allowing lines to wrap; do not shrink the entire broadcast frame into illegible miniature text. Page-number entry supplements visible links.\n\n**Identity and effort.** Preserve editorial compression and numbered navigation; avoid mandatory memorised codes, flashing text, and pixel-game decoration. **Effort: low.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "News", "Public information" ], "visitorGoals": [ "Find a bulletin" ], "conversionActions": [ "Navigate a page number" ], "siteSize": "Digital publication", "interactionTypes": [ "Page index", "Keyboard navigation" ], "keywords": [ "News", "Events", "Edited information density", "Numbered page hierarchy", "Rectangular broadcast colour bands" ] }, "patterns": [ "Edited information density", "Numbered page hierarchy", "Rectangular broadcast colour bands" ], "downloadUrl": "/downloads/42-teletext-bulletin.zip" }, { "schemaVersion": 2, "id": "43", "slug": "y2k-chrome", "name": "Y2K Chrome", "brand": "Signal Mesh", "family": "Retro & experimental", "status": "ready", "thesis": "Present culture as a luminous piece of digital equipment.", "suitableFor": [ "Music", "Culture" ], "character": "Expressive", "traits": { "composition": "Central metallic media equipment with an asymmetric release strip and inset controls", "navigation": "Release selection, track list, and artist credits", "typography": "Space Grotesk + DM Sans", "density": "Medium", "imagery": "Original CSS illustrations and graphic studies", "surface": "Silver gradients, rounded media panels and original chrome studies", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Equipment-like composition", "Chrome framing around calm text surfaces", "Explicit, opt-in playback controls" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/43-y2k-chrome/start", "states": [ { "key": "credits", "label": "Artist and production credits", "route": "/preview/43-y2k-chrome/credits" }, { "key": "player", "label": "Selected track / unavailable preview", "route": "/preview/43-y2k-chrome/player" } ], "referenceImages": [ { "file": "/previews/43/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/43/fdc6cc86926749f5-desktop.jpg", "route": "/preview/43-y2k-chrome/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c478c0cc65d40719e7b820f7b311f1448d2226eb4860b154cf0517de5b38b198", "sha256": "fdc6cc86926749f58b7f6d482566cf8df175d5f3fbdc6bc2ca94ba74abdfbeae", "fullPage": false }, { "file": "/previews/43/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/43/fd282b3a7f5c8270-mobile.jpg", "route": "/preview/43-y2k-chrome/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c478c0cc65d40719e7b820f7b311f1448d2226eb4860b154cf0517de5b38b198", "sha256": "fd282b3a7f5c827057ff8c98b22b553f9733ec62e88b945351bea0e429557a35", "fullPage": false }, { "file": "/previews/43/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/43/977292e1beaec05e-detail.jpg", "route": "/preview/43-y2k-chrome/credits", "viewport": { "width": 1440, "height": 1000 }, "state": "credits", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c478c0cc65d40719e7b820f7b311f1448d2226eb4860b154cf0517de5b38b198", "sha256": "977292e1beaec05ed21c9af61f17db88fbf5f3a9d352ab46b3b071da868267f9", "fullPage": false }, { "file": "/previews/43/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/43/e905251474654631-full-page.jpg", "route": "/preview/43-y2k-chrome/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c478c0cc65d40719e7b820f7b311f1448d2226eb4860b154cf0517de5b38b198", "sha256": "e90525147465463180dcd802ad7296b41a8346a9565fb6e1ef866d7c03c18bae", "fullPage": true } ], "sourcePath": "src/designs/43-y2k-chrome", "neighbours": [ "38", "17" ], "palette": { "page": "#ced5df", "surface": "#e7edf1", "ink": "#1d2943", "accent": "#20627a" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Present culture as a luminous piece of digital equipment. Suitable for electronic music labels, nightlife programmes, experimental fashion, and creative release collections.\n\n**Visual grammar.** Compose a central media module with asymmetric side controls, metallic dividers, translucent inset panels, pill-shaped switches, and compact release metadata. Use an extended display face, a straightforward sans serif for details, cool silver, deep navy, and electric cyan. Chrome belongs to framing and highlights; long text sits on a calm solid surface.\n\n**Specimen and flow.** *Signal Mesh* is a fictional electronic music label. Browse its release strip, open an album, and select a track for an explicitly initiated preview. Supporting views are artist credits and the player’s paused or unavailable-preview state. Local licensed audio is an optional specimen asset.\n\n**Mobile and motion.** Stack the release controls above a persistent compact player. Replace decorative moving reflections with static gradients under reduced motion; playback never starts automatically.\n\n**Identity and effort.** Preserve equipment-like composition and material contrast; avoid tiny controls, low-contrast metallic copy, and a generic gradient landing page. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Music", "Creative media" ], "visitorGoals": [ "Explore a release" ], "conversionActions": [ "Play a sample interface" ], "siteSize": "Small brochure", "interactionTypes": [ "Media controls", "Release list" ], "keywords": [ "Music", "Culture", "Equipment-like composition", "Chrome framing around calm text surfaces", "Explicit, opt-in playback controls" ] }, "patterns": [ "Equipment-like composition", "Chrome framing around calm text surfaces", "Explicit, opt-in playback controls" ], "downloadUrl": "/downloads/43-y2k-chrome.zip" }, { "schemaVersion": 2, "id": "44", "slug": "neo-brutalist-board", "name": "Neo Brutalist Board", "brand": "Open Bench", "family": "Retro & experimental", "status": "ready", "thesis": "Make participation and choice conspicuous through bold, tangible objects.", "suitableFor": [ "Events", "Commerce" ], "character": "Expressive", "traits": { "composition": "Bold outlined workshop notices in separated horizontal board zones", "navigation": "Discipline filters and full notice sheets", "typography": "Space Grotesk + DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Acid-yellow board, black rules, hard shadows and pastel workshop blocks", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Thick outlines and solid offset shadows", "Conspicuous actions", "Strong alignment beneath rough surfaces" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/44-neo-brutalist-board/start", "states": [ { "key": "workshop", "label": "Workshop notice", "route": "/preview/44-neo-brutalist-board/workshop" }, { "key": "full", "label": "No places available", "route": "/preview/44-neo-brutalist-board/full" } ], "referenceImages": [ { "file": "/previews/44/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/44/be41ae177b9b8dd3-desktop.jpg", "route": "/preview/44-neo-brutalist-board/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:68a798adf34ffee61b77b1ceff2bf04ad8b03729e293eb7df33c53e2b750e70a", "sha256": "be41ae177b9b8dd36ebcb31f3b462f1c1b5a85a4549b5f92fc54516d2a2fba83", "fullPage": false }, { "file": "/previews/44/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/44/eb585a768c9ba30e-mobile.jpg", "route": "/preview/44-neo-brutalist-board/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:68a798adf34ffee61b77b1ceff2bf04ad8b03729e293eb7df33c53e2b750e70a", "sha256": "eb585a768c9ba30e63a0517710bc6d30ba92990a1748f6350a38937bd2bb0dfc", "fullPage": false }, { "file": "/previews/44/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/44/c0386b337bb85b48-detail.jpg", "route": "/preview/44-neo-brutalist-board/workshop", "viewport": { "width": 1440, "height": 1000 }, "state": "workshop", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:68a798adf34ffee61b77b1ceff2bf04ad8b03729e293eb7df33c53e2b750e70a", "sha256": "c0386b337bb85b48f84422900aadef4fee21215aef9ec49fa5c520bdfe28b5ce", "fullPage": false }, { "file": "/previews/44/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/44/e829029c56d20e64-full-page.jpg", "route": "/preview/44-neo-brutalist-board/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:68a798adf34ffee61b77b1ceff2bf04ad8b03729e293eb7df33c53e2b750e70a", "sha256": "e829029c56d20e644ae403deeac1da571f9a6322e45502fd5fd16e4209404209", "fullPage": true } ], "sourcePath": "src/designs/44-neo-brutalist-board", "neighbours": [ "45", "32" ], "palette": { "page": "#f0efb1", "surface": "#fffde9", "ink": "#222921", "accent": "#c5e14e" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Make participation and choice conspicuous through bold, tangible objects. Suitable for maker communities, workshop listings, independent shops, and energetic small product sites.\n\n**Visual grammar.** Use thick dark outlines, solid offset shadows, large utilitarian type, and a small palette of flat, vivid colours. Organise the page as a board of labelled notices in clearly separated horizontal zones. Filters and actions have the same physical vocabulary as the notices. A strong alignment system prevents the apparent roughness from becoming arbitrary.\n\n**Specimen and flow.** *Open Bench* lists fictional maker workshops. Filter notices by discipline, open a workshop, and book a sample place locally. Supporting views are a full workshop detail sheet and the no-spaces-available state with alternative dates.\n\n**Mobile and motion.** Reflow notices into an ordered list and give filters their own wrapping row. A press response can shorten a button’s shadow without shifting its neighbours; reduced motion removes animated movement.\n\n**Identity and effort.** Preserve outlined objects and decisive hierarchy; avoid confusing this with raw HTML or covering every content fragment in a separate box. **Effort: low.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Community", "Events" ], "visitorGoals": [ "Find an announcement" ], "conversionActions": [ "Inspect a post" ], "siteSize": "Community site", "interactionTypes": [ "Noticeboard", "Post details" ], "keywords": [ "Events", "Commerce", "Thick outlines and solid offset shadows", "Conspicuous actions", "Strong alignment beneath rough surfaces" ] }, "patterns": [ "Thick outlines and solid offset shadows", "Conspicuous actions", "Strong alignment beneath rough surfaces" ], "downloadUrl": "/downloads/44-neo-brutalist-board.zip" }, { "schemaVersion": 2, "id": "45", "slug": "raw-manifesto", "name": "Raw Manifesto", "brand": "Common Room", "family": "Retro & experimental", "status": "ready", "thesis": "Let language and direct access carry the entire identity.", "suitableFor": [ "Culture", "Portfolio" ], "character": "Expressive", "traits": { "composition": "Forceful large text followed by direct document-like programme rows", "navigation": "Plain underlined destinations and chronological archive", "typography": "DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Bare white page, enormous black type, blue links and single rules", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Language carries the identity", "Source order is visual order", "Deliberate sparse hierarchy" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/45-raw-manifesto/start", "states": [ { "key": "programme", "label": "Current programme", "route": "/preview/45-raw-manifesto/programme" }, { "key": "contact", "label": "Plain contact form", "route": "/preview/45-raw-manifesto/contact" } ], "referenceImages": [ { "file": "/previews/45/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/45/8bd20c740250440f-desktop.jpg", "route": "/preview/45-raw-manifesto/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e4f3623c9bb50dd4d167886a60556ea9d94c88444e50404637b8e08c325ebb4f", "sha256": "8bd20c740250440f3d2392f7d60138dd4c064d6cfb5f717760550b9c39eda6dc", "fullPage": false }, { "file": "/previews/45/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/45/5072685dd219ccf4-mobile.jpg", "route": "/preview/45-raw-manifesto/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e4f3623c9bb50dd4d167886a60556ea9d94c88444e50404637b8e08c325ebb4f", "sha256": "5072685dd219ccf4e0e7a6fcfb383b9ef6a413a72a29d50a00afd4bea292fbbb", "fullPage": false }, { "file": "/previews/45/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/45/6b1df6d202834279-detail.jpg", "route": "/preview/45-raw-manifesto/programme", "viewport": { "width": 1440, "height": 1000 }, "state": "programme", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e4f3623c9bb50dd4d167886a60556ea9d94c88444e50404637b8e08c325ebb4f", "sha256": "6b1df6d20283427938127de930ae69310b661ad05cd9201b742d42ce595843f4", "fullPage": false }, { "file": "/previews/45/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/45/5b1dae68f241cf35-full-page.jpg", "route": "/preview/45-raw-manifesto/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e4f3623c9bb50dd4d167886a60556ea9d94c88444e50404637b8e08c325ebb4f", "sha256": "5b1dae68f241cf35b59be29918c184685c84d687b616a36ac39d97f45ccd40fb", "fullPage": true } ], "sourcePath": "src/designs/45-raw-manifesto", "neighbours": [ "44", "47" ], "palette": { "page": "#fff", "surface": "#fff", "ink": "#111", "accent": "#1643b8" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Let language and direct access carry the entire identity. Suitable for artist statements, small organisations, independent publishing, and intentionally austere portfolios.\n\n**Visual grammar.** Use a near-unadorned page, exceptionally large opening text, abrupt but deliberate changes in scale, visible underlined links, and full-width rules. A standard sans serif or serif family can do all the work. Keep the palette nearly monochrome, with a single functional link colour. Navigation is an explicit line of destinations, followed by a clear document sequence.\n\n**Specimen and flow.** *Common Room* is a fictional artist-run programme. Read its opening statement, follow the current programme link, and inspect one event’s practical details. Supporting pages are a chronological archive and a plain contact page with a functional demonstration form.\n\n**Mobile and motion.** Headline sizes adapt to the available width, while body text keeps a comfortable measure. Source order is visual order. The default experience contains no animation or overlay navigation.\n\n**Identity and effort.** Preserve textual force and deliberate sparseness; avoid turning minimal styling into broken layout or quietly restoring rounded cards and sales sections. **Effort: low.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Campaign", "Arts", "Publishing" ], "visitorGoals": [ "Read an argument" ], "conversionActions": [ "Explore supporting material" ], "siteSize": "One page", "interactionTypes": [ "Long-form reading", "Source links" ], "keywords": [ "Culture", "Portfolio", "Language carries the identity", "Source order is visual order", "Deliberate sparse hierarchy" ] }, "patterns": [ "Language carries the identity", "Source order is visual order", "Deliberate sparse hierarchy" ], "downloadUrl": "/downloads/45-raw-manifesto.zip" }, { "schemaVersion": 2, "id": "46", "slug": "kinetic-type", "name": "Kinetic Type", "brand": "Voice Assembly", "family": "Retro & experimental", "status": "ready", "thesis": "Let typography embody a subject’s rhythm while preserving a complete readable argument.", "suitableFor": [ "Events", "Culture" ], "character": "Expressive", "traits": { "composition": "Oversized typographic performance with a stable programme spine", "navigation": "Persistent motion toggle, schedule, and static reading mode", "typography": "Bebas Neue + DM Sans", "density": "Medium", "imagery": "Typography, rules, and interface structure", "surface": "Dark typographic stage, lime accents and a static reading fallback", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Type embodies rhythm", "Complete static equivalent", "Normal scrolling and stable controls" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/46-kinetic-type/start", "states": [ { "key": "schedule", "label": "Festival schedule", "route": "/preview/46-kinetic-type/schedule" }, { "key": "reading", "label": "Static reading mode", "route": "/preview/46-kinetic-type/reading" } ], "referenceImages": [ { "file": "/previews/46/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/46/e7d9fb3e512bf39e-desktop.jpg", "route": "/preview/46-kinetic-type/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed810a503b37a35f3c7ae3786fb804104900a79c549c4c8422d74281fc6156ce", "sha256": "e7d9fb3e512bf39e25695b09aa3e653185b14385539c777c7ca9a9d13225809c", "fullPage": false }, { "file": "/previews/46/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/46/f847240cfeac91eb-mobile.jpg", "route": "/preview/46-kinetic-type/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed810a503b37a35f3c7ae3786fb804104900a79c549c4c8422d74281fc6156ce", "sha256": "f847240cfeac91eb627c3a1e4d7a242398e164a506240dcea256f17f697e1cb7", "fullPage": false }, { "file": "/previews/46/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/46/e90e215c057927e6-detail.jpg", "route": "/preview/46-kinetic-type/schedule", "viewport": { "width": 1440, "height": 1000 }, "state": "schedule", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed810a503b37a35f3c7ae3786fb804104900a79c549c4c8422d74281fc6156ce", "sha256": "e90e215c057927e692ffdf4517f58c1ba872a1bbeac381de651530b49fd287d5", "fullPage": false }, { "file": "/previews/46/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/46/a09745c33ab41f40-full-page.jpg", "route": "/preview/46-kinetic-type/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed810a503b37a35f3c7ae3786fb804104900a79c549c4c8422d74281fc6156ce", "sha256": "a09745c33ab41f407740b7a728dbcbc87c15ea7939356b6b01873bf00e027bab", "fullPage": true } ], "sourcePath": "src/designs/46-kinetic-type", "neighbours": [ "30", "47" ], "palette": { "page": "#24232a", "surface": "#36353b", "ink": "#f1eee3", "accent": "#dce57b" }, "fonts": [ "Bebas Neue", "DM Sans" ], "brief": "**Philosophy and fit.** Let typography embody a subject’s rhythm while preserving a complete readable argument. Suitable for cultural festivals, creative studios, short campaigns, and expressive editorial introductions.\n\n**Visual grammar.** Use a small number of oversized text compositions, strong negative space, and a restrained palette. Letter spacing, position, weight, or cropping may change as an enhancement. A conventional contents control and a stable text column provide the structural spine. Motion reinforces section boundaries or emphasis; it does not manufacture the only route through the content.\n\n**Specimen and flow.** *Voice Assembly* is a fictional spoken-word festival. Read its animated introduction, browse the programme, and inspect a performer’s session. Supporting views are the schedule and an entirely static reading mode containing identical information.\n\n**Mobile and motion.** Design static mobile typography first. Honour reduced motion on first render, retain normal scrolling, and provide a persistent animation toggle. Never require waiting for text to settle before it becomes usable.\n\n**Identity and effort.** Preserve typographic performance and disciplined pacing; avoid scroll hijacking, endlessly moving navigation, or illegible letter tricks. **Effort: high.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Creative studio", "Typography" ], "visitorGoals": [ "Explore a visual idea" ], "conversionActions": [ "Inspect a project" ], "siteSize": "Portfolio & enquiry", "interactionTypes": [ "Motion controls", "Project details" ], "keywords": [ "Events", "Culture", "Type embodies rhythm", "Complete static equivalent", "Normal scrolling and stable controls" ] }, "patterns": [ "Type embodies rhythm", "Complete static equivalent", "Normal scrolling and stable controls" ], "downloadUrl": "/downloads/46-kinetic-type.zip" }, { "schemaVersion": 2, "id": "47", "slug": "colour-field", "name": "Colour Field", "brand": "Intervals", "family": "Retro & experimental", "status": "ready", "thesis": "Make a site’s chapters legible through large fields of colour and simple spatial relationships.", "suitableFor": [ "Culture", "Marketing" ], "character": "Expressive", "traits": { "composition": "Large flat colour planes with a consistent chapter rail", "navigation": "Explicit chapter anchors and aligned membership columns", "typography": "Space Grotesk + DM Sans", "density": "Low", "imagery": "Typography, rules, and interface structure", "surface": "Large muted colour fields, asymmetrical typography and minimal divisions", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Colour fields define chapters", "Sparse geometric markers", "Proportion and whitespace over decoration" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/47-colour-field/start", "states": [ { "key": "exhibition", "label": "Exhibition detail", "route": "/preview/47-colour-field/exhibition" }, { "key": "membership", "label": "Membership comparison", "route": "/preview/47-colour-field/membership" } ], "referenceImages": [ { "file": "/previews/47/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/47/4022fb9f7c0b68c2-desktop.jpg", "route": "/preview/47-colour-field/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0c7f9d80d7f4c3d61fa8b392a3dc0aec4a55dbbdd25c21f4bd03c2eeaa71bc80", "sha256": "4022fb9f7c0b68c2d5a1c8b97eba2b327950f99649af1c3f410b500e91ba65ec", "fullPage": false }, { "file": "/previews/47/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/47/806109bdd625752d-mobile.jpg", "route": "/preview/47-colour-field/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0c7f9d80d7f4c3d61fa8b392a3dc0aec4a55dbbdd25c21f4bd03c2eeaa71bc80", "sha256": "806109bdd625752d03b8749bedbfeeb3b0b2c8ca51d50df99f21f52c3eace330", "fullPage": false }, { "file": "/previews/47/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/47/2205256da02c586a-detail.jpg", "route": "/preview/47-colour-field/exhibition", "viewport": { "width": 1440, "height": 1000 }, "state": "exhibition", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0c7f9d80d7f4c3d61fa8b392a3dc0aec4a55dbbdd25c21f4bd03c2eeaa71bc80", "sha256": "2205256da02c586ae871b0b9c827bd1b7ddab4431ef2bb5e0019a20642d731d8", "fullPage": false }, { "file": "/previews/47/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/47/79f2d9225f984907-full-page.jpg", "route": "/preview/47-colour-field/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0c7f9d80d7f4c3d61fa8b392a3dc0aec4a55dbbdd25c21f4bd03c2eeaa71bc80", "sha256": "79f2d9225f984907b07ee78286f13c540d7f00ba6cc42d951e54fa71a063a615", "fullPage": true } ], "sourcePath": "src/designs/47-colour-field", "neighbours": [ "46", "45" ], "palette": { "page": "#eee6d7", "surface": "#ffffff", "ink": "#2c3031", "accent": "#4a60a2" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Make a site’s chapters legible through large fields of colour and simple spatial relationships. Suitable for cultural institutions, compact brand narratives, exhibitions, and design-led service portfolios.\n\n**Visual grammar.** Compose substantial flat-colour planes with sharp boundaries, sparse geometric markers, large headings, and deliberately limited image use. A chapter rail crosses these planes with a consistent navigation position. Typography stays restrained so the relationship between colour, proportion, and whitespace provides the identity. Each field includes a visible section label; colour never carries its meaning alone.\n\n**Specimen and flow.** *Intervals* is a fictional exhibition space. Move between programme, visiting information, and membership chapters, then open an exhibition’s details. Supporting views are the complete exhibition index and a membership comparison laid out as aligned text columns.\n\n**Mobile and motion.** Turn side-by-side planes into an orderly vertical sequence. Keep ordinary scrolling and explicit anchor links; any transition simply fades between static compositions and can be disabled.\n\n**Identity and effort.** Preserve large-scale colour composition; avoid shrinking the concept into many pastel cards or requiring full-screen snapping. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Art", "Design" ], "visitorGoals": [ "Explore colour" ], "conversionActions": [ "Choose a palette" ], "siteSize": "Application", "interactionTypes": [ "Colour controls", "Palette preview" ], "keywords": [ "Culture", "Marketing", "Colour fields define chapters", "Sparse geometric markers", "Proportion and whitespace over decoration" ] }, "patterns": [ "Colour fields define chapters", "Sparse geometric markers", "Proportion and whitespace over decoration" ], "downloadUrl": "/downloads/47-colour-field.zip" }, { "schemaVersion": 2, "id": "48", "slug": "spatial-gallery", "name": "Spatial Gallery", "brand": "Small Museum", "family": "Retro & experimental", "status": "ready", "thesis": "Let spatial arrangement communicate relationships between a deliberately small collection of objects.", "suitableFor": [ "Culture", "Portfolio" ], "character": "Expressive", "traits": { "composition": "Shallow architectural stage with a permanent destination list and ordinary object details", "navigation": "Equivalent exhibit buttons and a complete collection list", "typography": "Libre Baskerville + DM Sans", "density": "Low", "imagery": "Original SVG diagrams and illustrations", "surface": "Quiet neutral room, original SVG objects and museum-like captions", "motion": "Minimal" }, "effort": "High", "definingFeatures": [ "Spatial grouping has curatorial meaning", "All exhibits reachable from text", "Substantive text outside the scene" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/48-spatial-gallery/start", "states": [ { "key": "object", "label": "Object detail", "route": "/preview/48-spatial-gallery/object" }, { "key": "collection", "label": "Complete collection list", "route": "/preview/48-spatial-gallery/collection" } ], "referenceImages": [ { "file": "/previews/48/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/48/4026eec2192e19f2-desktop.jpg", "route": "/preview/48-spatial-gallery/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:198ca6f764512c15bd5b71a944488ed6c69a8cd70f30ba7111b82177d1d38973", "sha256": "4026eec2192e19f25e0eebb5fa8d81f1f34b47c9f07b1c2e45fce7475ebb0025", "fullPage": false }, { "file": "/previews/48/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/48/30ff4a0e23ad8c43-mobile.jpg", "route": "/preview/48-spatial-gallery/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:198ca6f764512c15bd5b71a944488ed6c69a8cd70f30ba7111b82177d1d38973", "sha256": "30ff4a0e23ad8c432ba042949a22926eaec8ead9dc4785e88161db8117523214", "fullPage": false }, { "file": "/previews/48/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/48/763a005aa660e767-detail.jpg", "route": "/preview/48-spatial-gallery/object", "viewport": { "width": 1440, "height": 1000 }, "state": "object", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:198ca6f764512c15bd5b71a944488ed6c69a8cd70f30ba7111b82177d1d38973", "sha256": "763a005aa660e7677a647c38fc0484692ab60e6b5c7ffd1c148896912029dc89", "fullPage": false }, { "file": "/previews/48/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/48/21c06f90622628c9-full-page.jpg", "route": "/preview/48-spatial-gallery/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:198ca6f764512c15bd5b71a944488ed6c69a8cd70f30ba7111b82177d1d38973", "sha256": "21c06f90622628c9e1bdf23fc16768647eb24a5c3a854fdb8383baf54ab0a1b6", "fullPage": true } ], "sourcePath": "src/designs/48-spatial-gallery", "neighbours": [ "27", "50" ], "palette": { "page": "#f0eee7", "surface": "#fffdf5", "ink": "#3c413e", "accent": "#697b68" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Let spatial arrangement communicate relationships between a deliberately small collection of objects. Suitable for digital exhibitions, architecture showcases, art collections, and immersive portfolios.\n\n**Visual grammar.** Present a shallow spatial stage in CSS or SVG, with clearly labelled exhibits and a permanent destination list. A three-dimensional renderer is optional only if it adds necessary spatial meaning. Use quiet architectural surfaces, neutral framing, restrained type, and object-specific imagery. Distance and grouping convey curatorial relationships. A standard detail panel holds all substantive text.\n\n**Specimen and flow.** *Small Museum* exhibits fictional design objects. Choose an exhibit from the scene or its equivalent list, inspect its description, and move to a related object. Supporting views are the complete collection list and an object detail page with a stable URL.\n\n**Mobile and motion.** Default to a two-dimensional arrangement or the list on constrained devices. Reduced motion removes camera travel. Keyboard users can visit every exhibit without steering through space; failed rendering leaves the list available.\n\n**Identity and effort.** Preserve meaningful spatial grouping; avoid mandatory free movement, heavy introductory sequences, or essential text embedded in a canvas. **Effort: high.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Gallery", "Museum", "Art" ], "visitorGoals": [ "Explore an exhibition" ], "conversionActions": [ "Inspect an object" ], "siteSize": "Digital publication", "interactionTypes": [ "Spatial navigation", "Artwork details" ], "keywords": [ "Culture", "Portfolio", "Spatial grouping has curatorial meaning", "All exhibits reachable from text", "Substantive text outside the scene" ] }, "patterns": [ "Spatial grouping has curatorial meaning", "All exhibits reachable from text", "Substantive text outside the scene" ], "downloadUrl": "/downloads/48-spatial-gallery.zip" }, { "schemaVersion": 2, "id": "49", "slug": "parametric-studio", "name": "Parametric Studio", "brand": "Pattern Works", "family": "Retro & experimental", "status": "ready", "thesis": "Explain a design system by letting visitors change its rules and observe the result.", "suitableFor": [ "Interactive", "Portfolio" ], "character": "Expressive", "traits": { "composition": "Large SVG specimen stage beside labelled numeric controls and preset strip", "navigation": "Presets, direct parameter edits, and comparison", "typography": "Space Grotesk + IBM Plex Mono", "density": "Medium", "imagery": "Original SVG diagrams and illustrations", "surface": "Pale green technical canvas, procedural line work and a parameter rail", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Controls visibly change the geometry", "Numeric inputs accompany sliders", "Reproducible URL parameters" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/49-parametric-studio/start", "states": [ { "key": "compare", "label": "Preset comparison", "route": "/preview/49-parametric-studio/compare" }, { "key": "defaults", "label": "Restored default configuration", "route": "/preview/49-parametric-studio/defaults" } ], "referenceImages": [ { "file": "/previews/49/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/49/34d5c6b665de0bf5-desktop.jpg", "route": "/preview/49-parametric-studio/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f8610ba105c0f5ee69a0304da3bb955579b389bb30c6af195405d3f333e7483a", "sha256": "34d5c6b665de0bf59289229ef962870a574b9b17cbe011c744b9f3a84520c81e", "fullPage": false }, { "file": "/previews/49/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/49/617c471176891e74-mobile.jpg", "route": "/preview/49-parametric-studio/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f8610ba105c0f5ee69a0304da3bb955579b389bb30c6af195405d3f333e7483a", "sha256": "617c471176891e740a36a79bfb07dd529a2c053f8fc0c407e2d0f3790e84604c", "fullPage": false }, { "file": "/previews/49/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/49/d6d6bb914fdd234a-detail.jpg", "route": "/preview/49-parametric-studio/compare", "viewport": { "width": 1440, "height": 1000 }, "state": "compare", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f8610ba105c0f5ee69a0304da3bb955579b389bb30c6af195405d3f333e7483a", "sha256": "d6d6bb914fdd234a869a1212f5daa8eb12e171f14b55aba4aa99364623c0e60d", "fullPage": false }, { "file": "/previews/49/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/49/58ec584f3c16da00-full-page.jpg", "route": "/preview/49-parametric-studio/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f8610ba105c0f5ee69a0304da3bb955579b389bb30c6af195405d3f333e7483a", "sha256": "58ec584f3c16da0028a5d3c72f7927c3bab10b7f70047c3724587b71b829a384", "fullPage": true } ], "sourcePath": "src/designs/49-parametric-studio", "neighbours": [ "27", "17" ], "palette": { "page": "#ecece5", "surface": "#f7f8ef", "ink": "#293b39", "accent": "#3f756a" }, "fonts": [ "Space Grotesk", "IBM Plex Mono" ], "brief": "**Philosophy and fit.** Explain a design system by letting visitors change its rules and observe the result. Suitable for generative design portfolios, configurable products, educational tools, and typography or fabrication experiments.\n\n**Visual grammar.** Pair a large specimen stage with an explicitly labelled control column, a short explanation, and a compact preset strip. Use fine measurement rules, neutral surfaces, technical typography, and colour that identifies adjustable properties. Render suitable geometry with SVG or CSS so the demonstration remains crisp and inspectable.\n\n**Specimen and flow.** *Pattern Works* demonstrates a fictional modular screen system. Choose a preset, adjust spacing and angle, and inspect the resulting pattern and parameter summary. Supporting states are a side-by-side preset comparison and a restored-default configuration. Values can persist in the URL for direct sharing.\n\n**Mobile and motion.** Stack the specimen above controls and provide numeric inputs alongside sliders. Changes update directly, with no perpetual animation or pointer-only controls. A static preset remains available if an enhancement fails.\n\n**Identity and effort.** Preserve visible relationships between controls and outcomes; avoid random decorative generators without a meaningful design question. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Design tools", "Engineering" ], "visitorGoals": [ "Explore parameters" ], "conversionActions": [ "Configure a pattern" ], "siteSize": "Application", "interactionTypes": [ "Live parameters", "URL state" ], "keywords": [ "Interactive", "Portfolio", "Controls visibly change the geometry", "Numeric inputs accompany sliders", "Reproducible URL parameters" ] }, "patterns": [ "Controls visibly change the geometry", "Numeric inputs accompany sliders", "Reproducible URL parameters" ], "downloadUrl": "/downloads/49-parametric-studio.zip" }, { "schemaVersion": 2, "id": "50", "slug": "infinite-index", "name": "Infinite Index", "brand": "The Reference Room", "family": "Retro & experimental", "status": "ready", "thesis": "Make a finite collection feel explorable at several scales without surrendering orientation.", "suitableFor": [ "Directories", "Portfolio" ], "character": "Expressive", "traits": { "composition": "Dense finite visual index with discrete overview, medium, and detail densities", "navigation": "Anchored search, medium filters, pagination, and return-to-results", "typography": "DM Sans", "density": "High", "imagery": "Original CSS illustrations and graphic studies", "surface": "Neutral collection field, varied original studies and scale-dependent labels", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Density changes the amount of visible context", "Explicit finite pagination", "Text-list alternative with stable result restoration" ], "adaptableChoices": [ "Brand and content", "Accent colour with verified contrast", "Equivalent licensed typefaces" ], "entryRoute": "/preview/50-infinite-index/start", "states": [ { "key": "detail", "label": "Graphic study detail", "route": "/preview/50-infinite-index/detail" }, { "key": "list", "label": "Text list of results", "route": "/preview/50-infinite-index/list" } ], "referenceImages": [ { "file": "/previews/50/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/50/57d5ce18d4089465-desktop.jpg", "route": "/preview/50-infinite-index/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4b70820190de36456df67f2c60c0665bc7691391320e9925077c7d4a0e7cd0ee", "sha256": "57d5ce18d40894653c6d1399bdeeb32852dbe862b5812b5dc93f37d56998c33a", "fullPage": false }, { "file": "/previews/50/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/50/11fbc107566469b4-mobile.jpg", "route": "/preview/50-infinite-index/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4b70820190de36456df67f2c60c0665bc7691391320e9925077c7d4a0e7cd0ee", "sha256": "11fbc107566469b4d5d12d496f7cd93150d7306a0e852d5d437be68f7784922d", "fullPage": false }, { "file": "/previews/50/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/50/e68da803e79bf0ef-detail.jpg", "route": "/preview/50-infinite-index/detail", "viewport": { "width": 1440, "height": 1000 }, "state": "detail", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4b70820190de36456df67f2c60c0665bc7691391320e9925077c7d4a0e7cd0ee", "sha256": "e68da803e79bf0efd38e701353627e7e43961ef9c0011f78f4fd1bfc8d4f20f4", "fullPage": false }, { "file": "/previews/50/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/50/3fbbb467375f26b3-full-page.jpg", "route": "/preview/50-infinite-index/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4b70820190de36456df67f2c60c0665bc7691391320e9925077c7d4a0e7cd0ee", "sha256": "3fbbb467375f26b3b8c9835763c328ebc255f922237aef0a9ebb96fea0266a26", "fullPage": true } ], "sourcePath": "src/designs/50-infinite-index", "neighbours": [ "20", "48" ], "palette": { "page": "#eeeee8", "surface": "#ffffff", "ink": "#30382f", "accent": "#445f3d" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make a finite collection feel explorable at several scales without surrendering orientation. Suitable for visual archives, design references, photography collections, and substantial creative portfolios.\n\n**Visual grammar.** Use a dense, edge-to-edge index with an anchored search strip, visible result count, clear grouping labels, and selectable overview, medium, and detail densities. Thumbnails and short captions carry the page; typography and chrome recede. Density changes alter how much context is visible, rather than simply enlarging cards inside a conventional landing page.\n\n**Specimen and flow.** *The Reference Room* holds a finite set of fictional graphic studies. Filter by medium, change the overview density, open a specimen, and return to the same position. Supporting views are a text list of results and an explicit empty-result state. Pagination, deep links, and the current page remain visible.\n\n**Mobile and motion.** Use discrete density controls instead of mandatory pinch or wheel gestures. Keep captions legible and preserve focus when returning from details. Reduced motion switches views immediately.\n\n**Identity and effort.** Preserve overview-to-detail exploration; avoid an endless feed, hidden destinations, or costly unbounded rendering. **Effort: medium.**", "scope": "An expansive sample page with representative local interactions; no production business backend.", "discovery": { "industries": [ "Archive", "Directory", "Research" ], "visitorGoals": [ "Discover connections" ], "conversionActions": [ "Inspect an index entry" ], "siteSize": "Searchable catalogue", "interactionTypes": [ "Index filters", "Record navigation" ], "keywords": [ "Directories", "Portfolio", "Density changes the amount of visible context", "Explicit finite pagination", "Text-list alternative with stable result restoration" ] }, "patterns": [ "Density changes the amount of visible context", "Explicit finite pagination", "Text-list alternative with stable result restoration" ], "downloadUrl": "/downloads/50-infinite-index.zip" }, { "schemaVersion": 2, "id": "51", "slug": "one-page-business-card", "name": "One-Page Business Card", "brand": "Elias Reed / Piano care", "family": "Small business", "status": "ready", "thesis": "A whole business, clearly expressed on a single page.", "suitableFor": [ "Sole proprietor", "Piano tuning", "Independent services" ], "character": "Restrained", "traits": { "composition": "cream and oxblood typographic calling card", "navigation": "One page with an inline enquiry and review", "typography": "Libre Baskerville", "density": "Low", "imagery": "Small original piano-key mark; typography carries the page", "surface": "Cream paper, oxblood contact action and fine rules", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Service essentials", "Direct contact", "Short enquiry" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Sole proprietor", "Piano tuning", "Independent services" ], "visitorGoals": [ "Contact a specialist" ], "conversionActions": [ "Enquire" ], "siteSize": "One page", "interactionTypes": [ "Contact form", "Direct contact" ], "keywords": [ "Sole proprietor", "Piano tuning", "Independent services", "Enquire", "One page", "Service essentials", "Direct contact", "Short enquiry", "small business", "local business", "one page brochure", "single page", "sole proprietor" ] }, "patterns": [ "Service essentials", "Direct contact", "Short enquiry" ], "entryRoute": "/preview/51-one-page-business-card/start", "states": [ { "key": "enquire", "label": "Send an enquiry", "route": "/preview/51-one-page-business-card/enquire" }, { "key": "thanks", "label": "Enquiry summary", "route": "/preview/51-one-page-business-card/thanks" } ], "referenceImages": [ { "file": "/previews/51/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/51/b3b99a07420ca44f-desktop.jpg", "route": "/preview/51-one-page-business-card/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9d651511e2fe93009005c6bde1a70c22c94fcf1cfd03a1f6d055ae3fc8989151", "sha256": "b3b99a07420ca44fac5f9f38737b632f8ba830593fcfb92aeee5e92b51d47706", "fullPage": false }, { "file": "/previews/51/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/51/7aeeb1bb637953b3-mobile.jpg", "route": "/preview/51-one-page-business-card/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9d651511e2fe93009005c6bde1a70c22c94fcf1cfd03a1f6d055ae3fc8989151", "sha256": "7aeeb1bb637953b37accace9ef4b8f6e3a0d254787f974a764cfb2a2e48ea9b8", "fullPage": false }, { "file": "/previews/51/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/51/85acb174e0e90189-detail.jpg", "route": "/preview/51-one-page-business-card/enquire", "viewport": { "width": 1440, "height": 1000 }, "state": "enquire", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9d651511e2fe93009005c6bde1a70c22c94fcf1cfd03a1f6d055ae3fc8989151", "sha256": "85acb174e0e90189d3837692ea8143d400452895234b72dc0fec51e0c1ebd1a4", "fullPage": false }, { "file": "/previews/51/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/51/cdfb774516d5727d-full-page.jpg", "route": "/preview/51-one-page-business-card/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9d651511e2fe93009005c6bde1a70c22c94fcf1cfd03a1f6d055ae3fc8989151", "sha256": "cdfb774516d5727d70de3fda370e1e91b4170931c9264c02ca406aefc2bdb522", "fullPage": true } ], "sourcePath": "src/designs/51-one-page-business-card", "neighbours": [ "25", "04" ], "palette": { "page": "#f3eee4", "surface": "#ffffff", "ink": "#291e1b", "accent": "#773c34" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** A whole business, clearly expressed on a single page. Built for sole proprietor, piano tuning, independent services. The visitor’s next step is to enquire.\n\n**Visual grammar.** Use a cream and oxblood typographic calling card. Preserve the hierarchy of service essentials, direct contact, short enquiry; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Elias Reed / Piano care is a fictional demonstration. The entry page establishes a complete visual direction, with send an enquiry and enquiry summary as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve service essentials, direct contact, short enquiry. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Keep the whole business within a compact calling-card composition. Unlike Local Trades, this is one named specialist, a short service list and direct contact rather than a service catalogue.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/51-one-page-business-card.zip" }, { "schemaVersion": 2, "id": "52", "slug": "corner-shop", "name": "Corner Shop", "brand": "Good Neighbour", "family": "Small business", "status": "ready", "thesis": "Make a small shop feel like part of its neighbourhood.", "suitableFor": [ "Independent retail", "Gift shop", "Local shopping" ], "character": "Expressive", "traits": { "composition": "warm yellow shop window with stacked notices and a stock shelf", "navigation": "Shelf anchors and a local collection basket", "typography": "DM Sans", "density": "Medium", "imagery": "Shop-window photograph, illustrated stock and a pinned announcement", "surface": "Warm yellow paper, olive ink and a slightly angled photograph", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Opening hours", "Featured stock", "Local pickup" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Independent retail", "Gift shop", "Local shopping" ], "visitorGoals": [ "Shop locally" ], "conversionActions": [ "Reserve for collection" ], "siteSize": "Small brochure", "interactionTypes": [ "Product selection", "Collection order" ], "keywords": [ "Independent retail", "Gift shop", "Local shopping", "Reserve for collection", "Small brochure", "Opening hours", "Featured stock", "Local pickup", "small business", "local business" ] }, "patterns": [ "Opening hours", "Featured stock", "Local pickup" ], "entryRoute": "/preview/52-corner-shop/start", "states": [ { "key": "pickup", "label": "Collection basket", "route": "/preview/52-corner-shop/pickup" }, { "key": "order", "label": "Collection details", "route": "/preview/52-corner-shop/order" } ], "referenceImages": [ { "file": "/previews/52/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/52/7e442130f3dd897e-desktop.jpg", "route": "/preview/52-corner-shop/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:485202317f3d76e600c21e37f451366bf127301dbadacd09abf5e4e639d22943", "sha256": "7e442130f3dd897e018590784f9d7a62a2190ea0f991d6ef6ad2d9f1785408b6", "fullPage": false }, { "file": "/previews/52/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/52/45fc695a31f1ac9d-mobile.jpg", "route": "/preview/52-corner-shop/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:485202317f3d76e600c21e37f451366bf127301dbadacd09abf5e4e639d22943", "sha256": "45fc695a31f1ac9d3c0f400d63fefb220d69abfc26aeebb73ebe444622859b30", "fullPage": false }, { "file": "/previews/52/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/52/73984ed8eca49989-detail.jpg", "route": "/preview/52-corner-shop/pickup", "viewport": { "width": 1440, "height": 1000 }, "state": "pickup", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:485202317f3d76e600c21e37f451366bf127301dbadacd09abf5e4e639d22943", "sha256": "73984ed8eca49989eec5f10d900fac9df773196043072f5e42fb951652d4c731", "fullPage": false }, { "file": "/previews/52/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/52/357cea2f6e17cc00-full-page.jpg", "route": "/preview/52-corner-shop/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:485202317f3d76e600c21e37f451366bf127301dbadacd09abf5e4e639d22943", "sha256": "357cea2f6e17cc00e56c3ca4d1df52e1f95e9398b704197d5f1ca6c2aa6454ae", "fullPage": true } ], "sourcePath": "src/designs/52-corner-shop", "neighbours": [ "23", "67" ], "palette": { "page": "#fff9e8", "surface": "#ffffff", "ink": "#37372b", "accent": "#4e5427" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make a small shop feel like part of its neighbourhood. Built for independent retail, gift shop, local shopping. The visitor’s next step is to reserve for collection.\n\n**Visual grammar.** Use a warm yellow shop window with stacked notices and a stock shelf. Preserve the hierarchy of opening hours, featured stock, local pickup; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Good Neighbour is a fictional demonstration. The entry page establishes a complete visual direction, with collection basket and collection details as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve opening hours, featured stock, local pickup. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Organise the page like a neighbourhood shop window: an announcement, a small shelf and opening hours. The visitor reserves a few items for pickup rather than browsing a large ecommerce catalogue.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/52-corner-shop.zip" }, { "schemaVersion": 2, "id": "53", "slug": "appointment-studio", "name": "Appointment Studio", "brand": "COMMON / Barber studio", "family": "Small business", "status": "ready", "thesis": "Choose the person first; find the time that fits.", "suitableFor": [ "Barber", "Hair salon", "Beauty", "Tattoo studio" ], "character": "Expressive", "traits": { "composition": "black and peach editorial staff roster with a time-slot ledger", "navigation": "Staff roster followed by professional, service, day and time selection", "typography": "Space Grotesk", "density": "Medium", "imagery": "Working-barber photograph and clearly labelled fictional staff portraits", "surface": "Blush editorial panels with a dark service-menu band", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Staff profiles", "Service menu", "Staff-first calendar" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Barber", "Hair salon", "Beauty", "Tattoo studio" ], "visitorGoals": [ "Find an appointment" ], "conversionActions": [ "Book an appointment" ], "siteSize": "Service site", "interactionTypes": [ "Staff directory", "Booking calendar" ], "keywords": [ "Barber", "Hair salon", "Beauty", "Tattoo studio", "Book an appointment", "Service site", "Staff profiles", "Service menu", "Staff-first calendar", "small business", "local business", "appointment based", "booking", "calendar" ] }, "patterns": [ "Staff profiles", "Service menu", "Staff-first calendar" ], "entryRoute": "/preview/53-appointment-studio/start", "states": [ { "key": "book", "label": "Choose an appointment", "route": "/preview/53-appointment-studio/book" }, { "key": "confirmation", "label": "Booking summary", "route": "/preview/53-appointment-studio/confirmation" } ], "referenceImages": [ { "file": "/previews/53/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/53/056a938c3f9327cd-desktop.jpg", "route": "/preview/53-appointment-studio/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:aede09874daa733c7b0367ced65bfb66191a5e68dae04540c80ee0a760e831e0", "sha256": "056a938c3f9327cdac01acf9410c46ed0147dbc8ad2675e7e22a1305ec3862fa", "fullPage": false }, { "file": "/previews/53/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/53/0a3d0a05c4014584-mobile.jpg", "route": "/preview/53-appointment-studio/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:aede09874daa733c7b0367ced65bfb66191a5e68dae04540c80ee0a760e831e0", "sha256": "0a3d0a05c4014584c75dae0947379ad1626c8b27ad1ae4a5f2a78b4cd5386e34", "fullPage": false }, { "file": "/previews/53/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/53/ab383a4b58a2a4e0-detail.jpg", "route": "/preview/53-appointment-studio/book", "viewport": { "width": 1440, "height": 1000 }, "state": "book", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:aede09874daa733c7b0367ced65bfb66191a5e68dae04540c80ee0a760e831e0", "sha256": "ab383a4b58a2a4e08196cdd89db84c96e25903f81cac1e1bb270a8541d67dee4", "fullPage": false }, { "file": "/previews/53/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/53/eec7d4657715cc81-full-page.jpg", "route": "/preview/53-appointment-studio/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:aede09874daa733c7b0367ced65bfb66191a5e68dae04540c80ee0a760e831e0", "sha256": "eec7d4657715cc81d7acbe0570f875d0a7052c0a4649b10ac4ddacd3a81c86e5", "fullPage": true } ], "sourcePath": "src/designs/53-appointment-studio", "neighbours": [ "09", "62" ], "palette": { "page": "#f5e9df", "surface": "#ffffff", "ink": "#262221", "accent": "#713b31" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Choose the person first; find the time that fits. Built for barber, hair salon, beauty, tattoo studio. The visitor’s next step is to book an appointment.\n\n**Visual grammar.** Use a black and peach editorial staff roster with a time-slot ledger. Preserve the hierarchy of staff profiles, service menu, staff-first calendar; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** COMMON / Barber studio is a fictional demonstration. The entry page establishes a complete visual direction, with choose an appointment and booking summary as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve staff profiles, service menu, staff-first calendar. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** The staff roster is the central decision. Portraits lead to each professional’s availability, while a priced service menu sets expectations before booking.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/53-appointment-studio.zip" }, { "schemaVersion": 2, "id": "54", "slug": "clinical-practice", "name": "Clinical Practice", "brand": "Fern Dental", "family": "Small business", "status": "ready", "thesis": "Make a first appointment feel clear and manageable.", "suitableFor": [ "Dentist", "Physiotherapy", "Optometry", "Healthcare" ], "character": "Restrained", "traits": { "composition": "sage and ivory clinical index with generous reading space", "navigation": "Treatment disclosure, first-visit guidance and appointment request", "typography": "DM Sans", "density": "Medium", "imagery": "Daylit treatment room and labelled fictional practitioner portrait", "surface": "Pale sage, quiet dividers and softly rounded imagery", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Treatment directory", "Practitioner introduction", "What to expect" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Dentist", "Physiotherapy", "Optometry", "Healthcare" ], "visitorGoals": [ "Understand a first visit" ], "conversionActions": [ "Request an appointment" ], "siteSize": "Service site", "interactionTypes": [ "Treatment navigation", "Appointment request" ], "keywords": [ "Dentist", "Physiotherapy", "Optometry", "Healthcare", "Request an appointment", "Service site", "Treatment directory", "Practitioner introduction", "What to expect", "small business", "local business", "appointment based", "booking", "calendar" ] }, "patterns": [ "Treatment directory", "Practitioner introduction", "What to expect" ], "entryRoute": "/preview/54-clinical-practice/start", "states": [ { "key": "request", "label": "New-patient request", "route": "/preview/54-clinical-practice/request" }, { "key": "visit", "label": "Your first visit", "route": "/preview/54-clinical-practice/visit" } ], "referenceImages": [ { "file": "/previews/54/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/54/52e408bfc56c90ed-desktop.jpg", "route": "/preview/54-clinical-practice/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a125c428ff931f068d56f8df551aecff7b037e6a9376480a37848ce75fc80274", "sha256": "52e408bfc56c90ed220c356013f1e5b8434af3eb90a4847ff7869f1bf577fe40", "fullPage": false }, { "file": "/previews/54/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/54/4cd7e95540fb9d4f-mobile.jpg", "route": "/preview/54-clinical-practice/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a125c428ff931f068d56f8df551aecff7b037e6a9376480a37848ce75fc80274", "sha256": "4cd7e95540fb9d4f7819f805241cef92384b1ef63bd0cd8d371ae689c8262587", "fullPage": false }, { "file": "/previews/54/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/54/ce8fa956725f8470-detail.jpg", "route": "/preview/54-clinical-practice/request", "viewport": { "width": 1440, "height": 1000 }, "state": "request", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a125c428ff931f068d56f8df551aecff7b037e6a9376480a37848ce75fc80274", "sha256": "ce8fa956725f84706acd31e589b6e0ce5549768503ef04d6ad201a6d27df67fa", "fullPage": false }, { "file": "/previews/54/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/54/e0623048f3d5e1cc-full-page.jpg", "route": "/preview/54-clinical-practice/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a125c428ff931f068d56f8df551aecff7b037e6a9376480a37848ce75fc80274", "sha256": "e0623048f3d5e1cc9b7ba2fce346535bff9d3e610ffd75b8369e6853481884af", "fullPage": true } ], "sourcePath": "src/designs/54-clinical-practice", "neighbours": [ "01", "53" ], "palette": { "page": "#f5f8f2", "surface": "#ffffff", "ink": "#253f37", "accent": "#275f50" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make a first appointment feel clear and manageable. Built for dentist, physiotherapy, optometry, healthcare. The visitor’s next step is to request an appointment.\n\n**Visual grammar.** Use a sage and ivory clinical index with generous reading space. Preserve the hierarchy of treatment directory, practitioner introduction, what to expect; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Fern Dental is a fictional demonstration. The entry page establishes a complete visual direction, with new-patient request and your first visit as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve treatment directory, practitioner introduction, what to expect. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Use treatment explanations, the practitioner and first-visit expectations to build confidence. Keep the clinical page quieter and more explanatory than Appointment Studio’s staff-led calendar.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/54-clinical-practice.zip" }, { "schemaVersion": 2, "id": "55", "slug": "casebook-authority", "name": "Casebook Authority", "brand": "BELL & ROWE / Accountants", "family": "Small business", "status": "ready", "thesis": "Let organised evidence establish professional trust.", "suitableFor": [ "Accountant", "Law firm", "Consultancy", "B2B services" ], "character": "Restrained", "traits": { "composition": "document-like navy and parchment casebook with numbered margin notes", "navigation": "Practice areas, case notes and structured consultation intake", "typography": "Libre Baskerville", "density": "Medium", "imagery": "Document monogram and text-led case summaries", "surface": "Ivory paper, navy casebook band and restrained rules", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Qualifications", "Practice areas", "Case summaries" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Accountant", "Law firm", "Consultancy", "B2B services" ], "visitorGoals": [ "Evaluate expertise" ], "conversionActions": [ "Request a consultation" ], "siteSize": "Service site", "interactionTypes": [ "Case studies", "Structured intake" ], "keywords": [ "Accountant", "Law firm", "Consultancy", "B2B services", "Request a consultation", "Service site", "Qualifications", "Practice areas", "Case summaries", "Consultation intake", "small business", "local business", "enquiry driven", "inquiry", "quote" ] }, "patterns": [ "Qualifications", "Practice areas", "Case summaries", "Consultation intake" ], "entryRoute": "/preview/55-casebook-authority/start", "states": [ { "key": "consultation", "label": "Consultation intake", "route": "/preview/55-casebook-authority/consultation" }, { "key": "case", "label": "Client case summary", "route": "/preview/55-casebook-authority/case" } ], "referenceImages": [ { "file": "/previews/55/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/55/b12d321f0d23c9ab-desktop.jpg", "route": "/preview/55-casebook-authority/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:912380ff1d01c8a28fa4d25cf30f56df39922b151497e87e59f20eb70cca20fb", "sha256": "b12d321f0d23c9ab7c9f5a3fb237b4557bc4bc3bca39d7867171af28df86a095", "fullPage": false }, { "file": "/previews/55/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/55/2d8c65259af2f9dd-mobile.jpg", "route": "/preview/55-casebook-authority/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:912380ff1d01c8a28fa4d25cf30f56df39922b151497e87e59f20eb70cca20fb", "sha256": "2d8c65259af2f9dd5be33628b821afb08029eb5b558e62539a8088265da02441", "fullPage": false }, { "file": "/previews/55/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/55/7a05a66a5d66efba-detail.jpg", "route": "/preview/55-casebook-authority/consultation", "viewport": { "width": 1440, "height": 1000 }, "state": "consultation", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:912380ff1d01c8a28fa4d25cf30f56df39922b151497e87e59f20eb70cca20fb", "sha256": "7a05a66a5d66efbae50c4199950863da5f6d7ba82950294900790c468fd1fb38", "fullPage": false }, { "file": "/previews/55/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/55/dbc8c2efef756603-full-page.jpg", "route": "/preview/55-casebook-authority/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:912380ff1d01c8a28fa4d25cf30f56df39922b151497e87e59f20eb70cca20fb", "sha256": "dbc8c2efef7566031dc2e38f551dce0b3814d600c4f3e71a6eaab54d90bd2779", "fullPage": true } ], "sourcePath": "src/designs/55-casebook-authority", "neighbours": [ "05", "60" ], "palette": { "page": "#f2efe7", "surface": "#ffffff", "ink": "#24354a", "accent": "#364c69" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Let organised evidence establish professional trust. Built for accountant, law firm, consultancy, b2b services. The visitor’s next step is to request a consultation.\n\n**Visual grammar.** Use a document-like navy and parchment casebook with numbered margin notes. Preserve the hierarchy of qualifications, practice areas, case summaries, consultation intake; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** BELL & ROWE / Accountants is a fictional demonstration. The entry page establishes a complete visual direction, with consultation intake and client case summary as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve qualifications, practice areas, case summaries. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** A marginal practice note, substantial reading columns and case summaries convey expertise without relying on a hero photograph. Consultation intake collects context rather than selling a standard booking slot.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/55-casebook-authority.zip" }, { "schemaVersion": 2, "id": "56", "slug": "renovation-proof", "name": "Renovation Proof", "brand": "FOUND / Renovation", "family": "Small business", "status": "ready", "thesis": "Show the work, its constraints, and how it changed a place.", "suitableFor": [ "Renovation", "Contractor", "Landscaping", "Roofing" ], "character": "Expressive", "traits": { "composition": "ochre and charcoal construction journal with a large matched comparison", "navigation": "Project comparison, milestone specification and estimate intake", "typography": "Space Grotesk", "density": "Medium", "imagery": "Matched generated before/after pair with an explicit illustrative caption", "surface": "Workmanlike neutral paper and ochre project accents", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Before and after", "Project specifications", "Budget bands" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Renovation", "Contractor", "Landscaping", "Roofing" ], "visitorGoals": [ "Plan a renovation" ], "conversionActions": [ "Request an estimate" ], "siteSize": "Portfolio & enquiry", "interactionTypes": [ "Before and after", "Project timeline", "Quote estimator" ], "keywords": [ "Renovation", "Contractor", "Landscaping", "Roofing", "Request an estimate", "Portfolio & enquiry", "Before and after", "Project specifications", "Budget bands", "small business", "local business", "enquiry driven", "inquiry", "quote" ] }, "patterns": [ "Before and after", "Project specifications", "Budget bands" ], "entryRoute": "/preview/56-renovation-proof/start", "states": [ { "key": "estimate", "label": "Estimate request", "route": "/preview/56-renovation-proof/estimate" }, { "key": "project", "label": "Project dossier", "route": "/preview/56-renovation-proof/project" } ], "referenceImages": [ { "file": "/previews/56/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/56/e6045d04af201c93-desktop.jpg", "route": "/preview/56-renovation-proof/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e1551745f7ff093e3739e327af44e90ed53fdee75c31557093c7910a3ea14cd8", "sha256": "e6045d04af201c937923506aa450cc368474da4e7f9d5c27893ee5f7a9000831", "fullPage": false }, { "file": "/previews/56/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/56/f8a73aa4e6ae1cfb-mobile.jpg", "route": "/preview/56-renovation-proof/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e1551745f7ff093e3739e327af44e90ed53fdee75c31557093c7910a3ea14cd8", "sha256": "f8a73aa4e6ae1cfb8096f2d53cbc8804312b7a0c76a35d65312d8e2efacf449c", "fullPage": false }, { "file": "/previews/56/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/56/26ba6878ff9c3be4-detail.jpg", "route": "/preview/56-renovation-proof/estimate", "viewport": { "width": 1440, "height": 1000 }, "state": "estimate", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e1551745f7ff093e3739e327af44e90ed53fdee75c31557093c7910a3ea14cd8", "sha256": "26ba6878ff9c3be431c12a2536da9c4a333d39fcdc9a9de7443a8a26ee9058b0", "fullPage": false }, { "file": "/previews/56/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/56/850ae1539ee45da8-full-page.jpg", "route": "/preview/56-renovation-proof/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e1551745f7ff093e3739e327af44e90ed53fdee75c31557093c7910a3ea14cd8", "sha256": "850ae1539ee45da86ee35cf83cbe183ba1715415343fe55ba2768432d6abccdf", "fullPage": true } ], "sourcePath": "src/designs/56-renovation-proof", "neighbours": [ "27", "25" ], "palette": { "page": "#efeee7", "surface": "#ffffff", "ink": "#30352f", "accent": "#6a4d20" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Show the work, its constraints, and how it changed a place. Built for renovation, contractor, landscaping, roofing. The visitor’s next step is to request an estimate.\n\n**Visual grammar.** Use a ochre and charcoal construction journal with a large matched comparison. Preserve the hierarchy of before and after, project specifications, budget bands; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** FOUND / Renovation is a fictional demonstration. The entry page establishes a complete visual direction, with estimate request and project dossier as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve before and after, project specifications, budget bands. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** The before/after comparison is the lead evidence plate. Tie its caption and project facts to a sequence of milestones and a scoped estimate request; never present the generated example as completed client work.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/56-renovation-proof.zip" }, { "schemaVersion": 2, "id": "57", "slug": "property-listing", "name": "Property Listing", "brand": "NORTH / Residential", "family": "Small business", "status": "ready", "thesis": "Give a place room to speak, and its facts a place to stay.", "suitableFor": [ "Real estate", "Property management", "Lettings" ], "character": "Restrained", "traits": { "composition": "deep-green property folio with large photography and a persistent facts rail", "navigation": "Listing filters, property detail and viewing request", "typography": "DM Sans", "density": "Medium", "imagery": "Residential exterior and interior photographs with a labelled schematic floorplan", "surface": "White and forest-green property panels", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Listing filters", "Property facts", "Floorplans" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Real estate", "Property management", "Lettings" ], "visitorGoals": [ "Find a property" ], "conversionActions": [ "Request a viewing" ], "siteSize": "Searchable catalogue", "interactionTypes": [ "Listing search", "Floorplan", "Viewing request" ], "keywords": [ "Real estate", "Property management", "Lettings", "Request a viewing", "Searchable catalogue", "Listing filters", "Property facts", "Floorplans", "Neighbourhood guide", "small business", "local business" ] }, "patterns": [ "Listing filters", "Property facts", "Floorplans", "Neighbourhood guide" ], "entryRoute": "/preview/57-property-listing/start", "states": [ { "key": "property", "label": "Property details", "route": "/preview/57-property-listing/property" }, { "key": "viewing", "label": "Viewing request", "route": "/preview/57-property-listing/viewing" } ], "referenceImages": [ { "file": "/previews/57/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/57/f957dfb83ac80927-desktop.jpg", "route": "/preview/57-property-listing/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6bec85e54d2c9db870f27926f9bc581864911e67052fbce0638bc9dd9946e000", "sha256": "f957dfb83ac8092734daf402ddb7cfdda0b97ab792b571b693b308943e697b52", "fullPage": false }, { "file": "/previews/57/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/57/88dbc6e4c0fcd065-mobile.jpg", "route": "/preview/57-property-listing/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6bec85e54d2c9db870f27926f9bc581864911e67052fbce0638bc9dd9946e000", "sha256": "88dbc6e4c0fcd06508de962fd98a098afe3de9e3d2b4952a54441c1d61b544ff", "fullPage": false }, { "file": "/previews/57/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/57/3a88a8dd82770d8e-detail.jpg", "route": "/preview/57-property-listing/property", "viewport": { "width": 1440, "height": 1000 }, "state": "property", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6bec85e54d2c9db870f27926f9bc581864911e67052fbce0638bc9dd9946e000", "sha256": "3a88a8dd82770d8e5926804aea825f99c4b315288b74c32175f0ebbfef18e6ef", "fullPage": false }, { "file": "/previews/57/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/57/67751cfe9a6f4285-full-page.jpg", "route": "/preview/57-property-listing/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:6bec85e54d2c9db870f27926f9bc581864911e67052fbce0638bc9dd9946e000", "sha256": "67751cfe9a6f4285d937b3ec404c1c4f4fc0ad316a1589363b554b8c7c2fa441", "fullPage": true } ], "sourcePath": "src/designs/57-property-listing", "neighbours": [ "28", "20" ], "palette": { "page": "#f7f5ef", "surface": "#ffffff", "ink": "#253c35", "accent": "#31594c" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Give a place room to speak, and its facts a place to stay. Built for real estate, property management, lettings. The visitor’s next step is to request a viewing.\n\n**Visual grammar.** Use a deep-green property folio with large photography and a persistent facts rail. Preserve the hierarchy of listing filters, property facts, floorplans, neighbourhood guide; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** NORTH / Residential is a fictional demonstration. The entry page establishes a complete visual direction, with property details and viewing request as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve listing filters, property facts, floorplans. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Pair large photography with a persistent property-facts rail. Search and viewing requests carry the chosen listing forward; the floorplan explains spatial arrangement rather than acting as decoration.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/57-property-listing.zip" }, { "schemaVersion": 2, "id": "58", "slug": "service-bay", "name": "Service Bay", "brand": "BAY 04 / Auto workshop", "family": "Small business", "status": "ready", "thesis": "Turn an unfamiliar repair into an understandable job ticket.", "suitableFor": [ "Mechanic", "Tyre shop", "Auto detailing", "Equipment repair" ], "character": "Expressive", "traits": { "composition": "industrial orange job tickets, monospaced figures, and a workshop photograph", "navigation": "Vehicle selection, cost estimate and appointment job ticket", "typography": "Space Grotesk", "density": "Medium", "imagery": "A working mechanic beneath a raised vehicle", "surface": "Charcoal workshop header, orange ticket panel and ruled service rows", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Vehicle details", "Service prices", "Work authorisation" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Mechanic", "Tyre shop", "Auto detailing", "Equipment repair" ], "visitorGoals": [ "Understand a repair" ], "conversionActions": [ "Book a service" ], "siteSize": "Service site", "interactionTypes": [ "Vehicle selection", "Cost estimate", "Appointment intake" ], "keywords": [ "Mechanic", "Tyre shop", "Auto detailing", "Equipment repair", "Book a service", "Service site", "Vehicle details", "Service prices", "Work authorisation", "small business", "local business", "appointment based", "booking", "calendar" ] }, "patterns": [ "Vehicle details", "Service prices", "Work authorisation" ], "entryRoute": "/preview/58-service-bay/start", "states": [ { "key": "booking", "label": "Vehicle intake", "route": "/preview/58-service-bay/booking" }, { "key": "estimate", "label": "Service estimate", "route": "/preview/58-service-bay/estimate" } ], "referenceImages": [ { "file": "/previews/58/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/58/4ec67c9a594f563a-desktop.jpg", "route": "/preview/58-service-bay/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b5cc04f84f0f21661b144ba009730227f12fed8331143315f5f5fc35b2f6e82a", "sha256": "4ec67c9a594f563a4b99ed289712165f3c36289a2b6a9818b4a96605a5690490", "fullPage": false }, { "file": "/previews/58/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/58/78d25613f6df4528-mobile.jpg", "route": "/preview/58-service-bay/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b5cc04f84f0f21661b144ba009730227f12fed8331143315f5f5fc35b2f6e82a", "sha256": "78d25613f6df45285ca5fe62e89db20018d8a0f6ee3e8cb8b4714e0a2a22665d", "fullPage": false }, { "file": "/previews/58/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/58/da4642a0c7724bbf-detail.jpg", "route": "/preview/58-service-bay/booking", "viewport": { "width": 1440, "height": 1000 }, "state": "booking", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b5cc04f84f0f21661b144ba009730227f12fed8331143315f5f5fc35b2f6e82a", "sha256": "da4642a0c7724bbf4a0560b5c5080fdff4824ea2b49a965ff88d51efbd86f99b", "fullPage": false }, { "file": "/previews/58/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/58/878c23173d286fec-full-page.jpg", "route": "/preview/58-service-bay/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:b5cc04f84f0f21661b144ba009730227f12fed8331143315f5f5fc35b2f6e82a", "sha256": "878c23173d286fecf62105176d6f139db2260db662f4c17ff6501ad3354e0e40", "fullPage": true } ], "sourcePath": "src/designs/58-service-bay", "neighbours": [ "25", "60" ], "palette": { "page": "#efeee7", "surface": "#ffffff", "ink": "#262a29", "accent": "#943d16" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Turn an unfamiliar repair into an understandable job ticket. Built for mechanic, tyre shop, auto detailing, equipment repair. The visitor’s next step is to book a service.\n\n**Visual grammar.** Use a industrial orange job tickets, monospaced figures, and a workshop photograph. Preserve the hierarchy of vehicle details, service prices, work authorisation; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** BAY 04 / Auto workshop is a fictional demonstration. The entry page establishes a complete visual direction, with vehicle intake and service estimate as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve vehicle details, service prices, work authorisation. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** An industrial job-ticket composition leads with the vehicle and the work required. Show the price estimate beside the service choice, with approval expectations explicit.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/58-service-bay.zip" }, { "schemaVersion": 2, "id": "59", "slug": "unit-finder", "name": "Unit Finder", "brand": "STACK / Storage", "family": "Small business", "status": "ready", "thesis": "Help people picture the right amount of space.", "suitableFor": [ "Self storage", "Storage facility", "Equipment rental" ], "character": "Expressive", "traits": { "composition": "electric blue storage planner with schematic volumes and a comparison matrix", "navigation": "Size calculator, availability comparison and unit reservation", "typography": "Space Grotesk", "density": "Medium", "imagery": "Original schematic storage volumes and item-capacity illustrations", "surface": "Cool blue planning sheet with comparable unit columns", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Capacity calculator", "Size diagrams", "Availability" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Self storage", "Storage facility", "Equipment rental" ], "visitorGoals": [ "Choose the right capacity" ], "conversionActions": [ "Reserve a unit" ], "siteSize": "Searchable catalogue", "interactionTypes": [ "Capacity calculator", "Availability matrix", "Reservation" ], "keywords": [ "Self storage", "Storage facility", "Equipment rental", "Reserve a unit", "Searchable catalogue", "Capacity calculator", "Size diagrams", "Availability", "Monthly pricing", "small business", "local business" ] }, "patterns": [ "Capacity calculator", "Size diagrams", "Availability", "Monthly pricing" ], "entryRoute": "/preview/59-unit-finder/start", "states": [ { "key": "size", "label": "Find your size", "route": "/preview/59-unit-finder/size" }, { "key": "reserve", "label": "Reserve a unit", "route": "/preview/59-unit-finder/reserve" } ], "referenceImages": [ { "file": "/previews/59/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/59/46694cac93c42c3d-desktop.jpg", "route": "/preview/59-unit-finder/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7567fbcbc508d12f3f858cb8a69fd26096b5bbf061d03a2c8e2e45200738ce19", "sha256": "46694cac93c42c3dcf30a1c4491686665a0fb02ec79b3c807b36ad8a8a3c1c0c", "fullPage": false }, { "file": "/previews/59/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/59/9ba453a052adcd1c-mobile.jpg", "route": "/preview/59-unit-finder/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7567fbcbc508d12f3f858cb8a69fd26096b5bbf061d03a2c8e2e45200738ce19", "sha256": "9ba453a052adcd1cceacb015b2f1739201840914f468dd8acbdb896685895cb0", "fullPage": false }, { "file": "/previews/59/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/59/654bb7dcf080c66e-detail.jpg", "route": "/preview/59-unit-finder/size", "viewport": { "width": 1440, "height": 1000 }, "state": "size", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7567fbcbc508d12f3f858cb8a69fd26096b5bbf061d03a2c8e2e45200738ce19", "sha256": "654bb7dcf080c66e93f554fa182ae0675b13a0bbb7f959d674c0a0f8b036dee4", "fullPage": false }, { "file": "/previews/59/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/59/2f6cdd9a2ea69ead-full-page.jpg", "route": "/preview/59-unit-finder/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:7567fbcbc508d12f3f858cb8a69fd26096b5bbf061d03a2c8e2e45200738ce19", "sha256": "2f6cdd9a2ea69eadf8a1d0cc04a05f8008faa56cf9baba1cae743b0d11751ae2", "fullPage": true } ], "sourcePath": "src/designs/59-unit-finder", "neighbours": [ "25", "49" ], "palette": { "page": "#f2f4f8", "surface": "#ffffff", "ink": "#24304c", "accent": "#2145a3" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Help people picture the right amount of space. Built for self storage, storage facility, equipment rental. The visitor’s next step is to reserve a unit.\n\n**Visual grammar.** Use a electric blue storage planner with schematic volumes and a comparison matrix. Preserve the hierarchy of capacity calculator, size diagrams, availability, monthly pricing; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** STACK / Storage is a fictional demonstration. The entry page establishes a complete visual direction, with find your size and reserve a unit as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve capacity calculator, size diagrams, availability. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Use schematic volumes, dimensions and item counts to make capacity tangible. Unlike Local Trades, the next action depends on a calculated size and actual sample availability, including a full-unit alternative.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/59-unit-finder.zip" }, { "schemaVersion": 2, "id": "60", "slug": "industrial-capability", "name": "Industrial Capability", "brand": "AXIS / Precision Works", "family": "Small business", "status": "ready", "thesis": "Make technical fit more useful than marketing language.", "suitableFor": [ "Manufacturing", "Machine shop", "Fabrication", "B2B supplier" ], "character": "Expressive", "traits": { "composition": "dark technical catalogue with lime datum marks and specification grids", "navigation": "Capability tables, process sequence and RFQ builder", "typography": "IBM Plex Mono", "density": "High", "imagery": "Original dimensioned component drawing and process sequence", "surface": "Dark technical sheets, fine grids and lime specification accents", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Material capabilities", "Tolerance tables", "Process sequence" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Manufacturing", "Machine shop", "Fabrication", "B2B supplier" ], "visitorGoals": [ "Evaluate technical fit" ], "conversionActions": [ "Request a quote" ], "siteSize": "Technical catalogue", "interactionTypes": [ "Specification tables", "Process diagram", "RFQ builder" ], "keywords": [ "Manufacturing", "Machine shop", "Fabrication", "B2B supplier", "Request a quote", "Technical catalogue", "Material capabilities", "Tolerance tables", "Process sequence", "RFQ", "small business", "local business", "enquiry driven", "inquiry", "quote" ] }, "patterns": [ "Material capabilities", "Tolerance tables", "Process sequence", "RFQ" ], "entryRoute": "/preview/60-industrial-capability/start", "states": [ { "key": "rfq", "label": "Build an RFQ", "route": "/preview/60-industrial-capability/rfq" }, { "key": "process", "label": "Manufacturing process", "route": "/preview/60-industrial-capability/process" } ], "referenceImages": [ { "file": "/previews/60/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/60/125548d77ff46c15-desktop.jpg", "route": "/preview/60-industrial-capability/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:08af5d78bc4228f8f07663fa73a7d82006d54be8d766ca565454dd58086c7f50", "sha256": "125548d77ff46c151cc3acc8d1aa26ce48bec7983988ce56bddfee014be1d062", "fullPage": false }, { "file": "/previews/60/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/60/ef8829d48dc9b6e9-mobile.jpg", "route": "/preview/60-industrial-capability/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:08af5d78bc4228f8f07663fa73a7d82006d54be8d766ca565454dd58086c7f50", "sha256": "ef8829d48dc9b6e90b7a95747470e35ff0ba8c97d72ab882573c4a0f695ee687", "fullPage": false }, { "file": "/previews/60/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/60/0e1cceacfc735834-detail.jpg", "route": "/preview/60-industrial-capability/rfq", "viewport": { "width": 1440, "height": 1000 }, "state": "rfq", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:08af5d78bc4228f8f07663fa73a7d82006d54be8d766ca565454dd58086c7f50", "sha256": "0e1cceacfc7358341face7cf7cf54360ad46bf649f8dc36f56f7baa38a0ae077", "fullPage": false }, { "file": "/previews/60/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/60/51dbf89ef1852294-full-page.jpg", "route": "/preview/60-industrial-capability/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:08af5d78bc4228f8f07663fa73a7d82006d54be8d766ca565454dd58086c7f50", "sha256": "51dbf89ef18522944ac5204244e9825b17b02d5d35c6be5fa5f15b248a4d877f", "fullPage": true } ], "sourcePath": "src/designs/60-industrial-capability", "neighbours": [ "27", "55" ], "palette": { "page": "#202a2b", "surface": "#293637", "ink": "#eef3e8", "accent": "#cfec91" }, "fonts": [ "IBM Plex Mono", "DM Sans" ], "brief": "**Philosophy and fit.** Make technical fit more useful than marketing language. Built for manufacturing, machine shop, fabrication, b2b supplier. The visitor’s next step is to request a quote.\n\n**Visual grammar.** Use a dark technical catalogue with lime datum marks and specification grids. Preserve the hierarchy of material capabilities, tolerance tables, process sequence, rfq; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** AXIS / Precision Works is a fictional demonstration. The entry page establishes a complete visual direction, with build an rfq and manufacturing process as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve material capabilities, tolerance tables, process sequence. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Make technical fit visible before asking for a quote. Machine envelopes, quantities, tolerances and revision fields form an engineering catalogue, with an RFQ summary rather than a shopping cart.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/60-industrial-capability.zip" }, { "schemaVersion": 2, "id": "61", "slug": "early-years", "name": "Early Years", "brand": "Little Orchard", "family": "Small business", "status": "ready", "thesis": "Help a family imagine an ordinary, well-cared-for day.", "suitableFor": [ "Daycare", "Preschool", "Tutoring" ], "character": "Restrained", "traits": { "composition": "soft terracotta and oat with a hand-illustrated daily rhythm", "navigation": "Daily schedule, parent information, fees and tour request", "typography": "DM Sans", "density": "Medium", "imagery": "Labelled fictional classroom and educator illustrations, plus daily-rhythm icons", "surface": "Warm cream, orchard green and softly rounded headings", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Daily rhythm", "Staff introductions", "Fees" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Daycare", "Preschool", "Tutoring" ], "visitorGoals": [ "Choose childcare" ], "conversionActions": [ "Request a tour" ], "siteSize": "Service site", "interactionTypes": [ "Daily schedule", "Fee comparison", "Tour request" ], "keywords": [ "Daycare", "Preschool", "Tutoring", "Request a tour", "Service site", "Daily rhythm", "Staff introductions", "Fees", "Parent information", "small business", "local business" ] }, "patterns": [ "Daily rhythm", "Staff introductions", "Fees", "Parent information" ], "entryRoute": "/preview/61-early-years/start", "states": [ { "key": "tour", "label": "Visit the nursery", "route": "/preview/61-early-years/tour" }, { "key": "day", "label": "A day at Little Orchard", "route": "/preview/61-early-years/day" } ], "referenceImages": [ { "file": "/previews/61/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/61/1f09a1c9b989f886-desktop.jpg", "route": "/preview/61-early-years/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d2db03243c16bb88b14fb7935f4bd5b53f5d4753af6f25c2fa83f8082dc4c854", "sha256": "1f09a1c9b989f886847d2e30a37fc638ef8c34e488daec23e3a1beeb97b02a4a", "fullPage": false }, { "file": "/previews/61/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/61/666344a0ffb745d7-mobile.jpg", "route": "/preview/61-early-years/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d2db03243c16bb88b14fb7935f4bd5b53f5d4753af6f25c2fa83f8082dc4c854", "sha256": "666344a0ffb745d7718691d5c30c9479da0a9d094a8367e4fc59a4d4e86b01b9", "fullPage": false }, { "file": "/previews/61/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/61/9cd6ffc1167f40ad-detail.jpg", "route": "/preview/61-early-years/tour", "viewport": { "width": 1440, "height": 1000 }, "state": "tour", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d2db03243c16bb88b14fb7935f4bd5b53f5d4753af6f25c2fa83f8082dc4c854", "sha256": "9cd6ffc1167f40ad3a14c2121827574fbf90443412b8ce73ae8258ea41763c36", "fullPage": false }, { "file": "/previews/61/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/61/1bdc78a21659fed7-full-page.jpg", "route": "/preview/61-early-years/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d2db03243c16bb88b14fb7935f4bd5b53f5d4753af6f25c2fa83f8082dc4c854", "sha256": "1bdc78a21659fed703b1c9bd23d9de225c2384ede7c4e966df077510c707ba34", "fullPage": true } ], "sourcePath": "src/designs/61-early-years", "neighbours": [ "33", "71" ], "palette": { "page": "#fcf5e8", "surface": "#ffffff", "ink": "#4c3c32", "accent": "#854832" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Help a family imagine an ordinary, well-cared-for day. Built for daycare, preschool, tutoring. The visitor’s next step is to request a tour.\n\n**Visual grammar.** Use a soft terracotta and oat with a hand-illustrated daily rhythm. Preserve the hierarchy of daily rhythm, staff introductions, fees, parent information; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Little Orchard is a fictional demonstration. The entry page establishes a complete visual direction, with visit the nursery and a day at little orchard as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve daily rhythm, staff introductions, fees. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** The illustrated rhythm of the day and a familiar staff introduction establish warmth. Follow with clear practical information for parents, keeping the palette calm enough for an adult decision.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/61-early-years.zip" }, { "schemaVersion": 2, "id": "62", "slug": "training-floor", "name": "Training Floor", "brand": "FORM / Movement club", "family": "Small business", "status": "ready", "thesis": "Let people find a session before selling them a membership.", "suitableFor": [ "Gym", "Personal training", "Martial arts", "Yoga" ], "character": "Expressive", "traits": { "composition": "bold condensed type, cobalt schedule blocks, and gym-floor photography", "navigation": "Day-based class schedule, membership choice and session booking", "typography": "Bebas Neue", "density": "Medium", "imagery": "Trainer-and-member gym photograph alongside a real timetable structure", "surface": "Condensed black display type, pale green field and cobalt trainer band", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Class schedule", "Trainer profiles", "Membership plans" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Gym", "Personal training", "Martial arts", "Yoga" ], "visitorGoals": [ "Find a class" ], "conversionActions": [ "Book a session" ], "siteSize": "Service site", "interactionTypes": [ "Class timetable", "Membership comparison", "Session booking" ], "keywords": [ "Gym", "Personal training", "Martial arts", "Yoga", "Book a session", "Service site", "Class schedule", "Trainer profiles", "Membership plans", "small business", "local business", "appointment based", "booking", "calendar" ] }, "patterns": [ "Class schedule", "Trainer profiles", "Membership plans" ], "entryRoute": "/preview/62-training-floor/start", "states": [ { "key": "schedule", "label": "Book a class", "route": "/preview/62-training-floor/schedule" }, { "key": "join", "label": "Membership comparison", "route": "/preview/62-training-floor/join" } ], "referenceImages": [ { "file": "/previews/62/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/62/0803915e3f358ca0-desktop.jpg", "route": "/preview/62-training-floor/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed0e577bd323a14174871bdb88585ff8d7ac4260b9bc26a8c559f40b63b6bb92", "sha256": "0803915e3f358ca00445d6520142df93445cc3c187179bab0c7d4a03f3184172", "fullPage": false }, { "file": "/previews/62/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/62/87acf1ccce30d631-mobile.jpg", "route": "/preview/62-training-floor/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed0e577bd323a14174871bdb88585ff8d7ac4260b9bc26a8c559f40b63b6bb92", "sha256": "87acf1ccce30d631ac88810a4c76dc2b1a2911fa6efdc983c789590e9d2e16f8", "fullPage": false }, { "file": "/previews/62/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/62/71e63f57354146c3-detail.jpg", "route": "/preview/62-training-floor/schedule", "viewport": { "width": 1440, "height": 1000 }, "state": "schedule", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed0e577bd323a14174871bdb88585ff8d7ac4260b9bc26a8c559f40b63b6bb92", "sha256": "71e63f57354146c3972435ec034f29e7195a844b71357a28afbadf40293e72bc", "fullPage": false }, { "file": "/previews/62/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/62/4a474460953d7a5e-full-page.jpg", "route": "/preview/62-training-floor/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed0e577bd323a14174871bdb88585ff8d7ac4260b9bc26a8c559f40b63b6bb92", "sha256": "4a474460953d7a5e89924aec85c5a1366d06290d727f02858592a4bbadbcbf1c", "fullPage": true } ], "sourcePath": "src/designs/62-training-floor", "neighbours": [ "30", "53" ], "palette": { "page": "#e9eddf", "surface": "#ffffff", "ink": "#222c35", "accent": "#254ec7" }, "fonts": [ "Bebas Neue", "DM Sans" ], "brief": "**Philosophy and fit.** Let people find a session before selling them a membership. Built for gym, personal training, martial arts, yoga. The visitor’s next step is to book a session.\n\n**Visual grammar.** Use a bold condensed type, cobalt schedule blocks, and gym-floor photography. Preserve the hierarchy of class schedule, trainer profiles, membership plans; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** FORM / Movement club is a fictional demonstration. The entry page establishes a complete visual direction, with book a class and membership comparison as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve class schedule, trainer profiles, membership plans. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** The class timetable is the organising structure. Use energetic condensed typography and explicit capacity states, then explain trainers and membership terms without turning the page into a motivational poster.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/62-training-floor.zip" }, { "schemaVersion": 2, "id": "63", "slug": "venue-floorplan", "name": "Venue Floorplan", "brand": "The Assembly Rooms", "family": "Small business", "status": "ready", "thesis": "Start with how people will use the space.", "suitableFor": [ "Wedding venue", "Conference venue", "Event space" ], "character": "Restrained", "traits": { "composition": "plum and cream architectural plan with selectable seating configurations", "navigation": "Selectable floorplan, capacity check and event enquiry", "typography": "Libre Baskerville", "density": "Medium", "imagery": "Event-hall photograph and selectable schematic room arrangements", "surface": "Quiet cream and plum editorial panels", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Floorplans", "Room configurations", "Event packages" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Wedding venue", "Conference venue", "Event space" ], "visitorGoals": [ "Plan an event" ], "conversionActions": [ "Enquire about an event" ], "siteSize": "Portfolio & enquiry", "interactionTypes": [ "Room configuration", "Capacity selector", "Event enquiry" ], "keywords": [ "Wedding venue", "Conference venue", "Event space", "Enquire about an event", "Portfolio & enquiry", "Floorplans", "Room configurations", "Event packages", "small business", "local business", "enquiry driven", "inquiry", "quote" ] }, "patterns": [ "Floorplans", "Room configurations", "Event packages" ], "entryRoute": "/preview/63-venue-floorplan/start", "states": [ { "key": "plan", "label": "Configure the room", "route": "/preview/63-venue-floorplan/plan" }, { "key": "enquiry", "label": "Event enquiry", "route": "/preview/63-venue-floorplan/enquiry" } ], "referenceImages": [ { "file": "/previews/63/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/63/dc8d1c2a129764a7-desktop.jpg", "route": "/preview/63-venue-floorplan/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:216c2155a4eb85c28a61b3b29ffe8528a8ae9dd6a2eb91402b8da66305aea506", "sha256": "dc8d1c2a129764a7764218611f9d78c54665f3b258dca0f5b08842d75f4f0b47", "fullPage": false }, { "file": "/previews/63/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/63/f7d51689a2d9e1ee-mobile.jpg", "route": "/preview/63-venue-floorplan/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:216c2155a4eb85c28a61b3b29ffe8528a8ae9dd6a2eb91402b8da66305aea506", "sha256": "f7d51689a2d9e1ee69b9cd21134609ba36e088f21c2cf4ab4eae3e94b3bd1c7e", "fullPage": false }, { "file": "/previews/63/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/63/3106f6d744e835d0-detail.jpg", "route": "/preview/63-venue-floorplan/plan", "viewport": { "width": 1440, "height": 1000 }, "state": "plan", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:216c2155a4eb85c28a61b3b29ffe8528a8ae9dd6a2eb91402b8da66305aea506", "sha256": "3106f6d744e835d0d6ca61f6cb27bc242a8a05a1abb6a6c2dae5e4bc9d200ae3", "fullPage": false }, { "file": "/previews/63/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/63/ed922244ba34e3ee-full-page.jpg", "route": "/preview/63-venue-floorplan/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:216c2155a4eb85c28a61b3b29ffe8528a8ae9dd6a2eb91402b8da66305aea506", "sha256": "ed922244ba34e3ee57311a283eed888df02d364f5415f4e633e0f4e5cd150f01", "fullPage": true } ], "sourcePath": "src/designs/63-venue-floorplan", "neighbours": [ "27", "28" ], "palette": { "page": "#f4efe8", "surface": "#ffffff", "ink": "#463442", "accent": "#764259" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Start with how people will use the space. Built for wedding venue, conference venue, event space. The visitor’s next step is to enquire about an event.\n\n**Visual grammar.** Use a plum and cream architectural plan with selectable seating configurations. Preserve the hierarchy of floorplans, room configurations, event packages; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** The Assembly Rooms is a fictional demonstration. The entry page establishes a complete visual direction, with configure the room and event enquiry as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve floorplans, room configurations, event packages. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** The event decision is spatial: switch between banquet, theatre and workshop arrangements, then compare the guest count with the selected capacity before reviewing the enquiry.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/63-venue-floorplan.zip" }, { "schemaVersion": 2, "id": "64", "slug": "service-plans", "name": "Service Plans", "brand": "Tidy / Home care", "family": "Small business", "status": "ready", "thesis": "Make the price, frequency, and coverage easy to compare.", "suitableFor": [ "Cleaning", "Lawn care", "Property maintenance" ], "character": "Restrained", "traits": { "composition": "fresh teal subscription table with explicit frequency and inclusion rows", "navigation": "Frequency and home-size comparison, coverage check and recurring booking", "typography": "DM Sans", "density": "Medium", "imagery": "Small decorative care symbol; the pricing and coverage information lead", "surface": "Soft mint and rounded pricing columns", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Service plans", "Coverage checks", "Frequency selector" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Cleaning", "Lawn care", "Property maintenance" ], "visitorGoals": [ "Compare recurring services" ], "conversionActions": [ "Schedule recurring service" ], "siteSize": "Service site", "interactionTypes": [ "Pricing comparison", "Coverage check", "Recurring booking" ], "keywords": [ "Cleaning", "Lawn care", "Property maintenance", "Schedule recurring service", "Service site", "Service plans", "Coverage checks", "Frequency selector", "small business", "local business" ] }, "patterns": [ "Service plans", "Coverage checks", "Frequency selector" ], "entryRoute": "/preview/64-service-plans/start", "states": [ { "key": "plan", "label": "Choose your plan", "route": "/preview/64-service-plans/plan" }, { "key": "booking", "label": "Recurring booking", "route": "/preview/64-service-plans/booking" } ], "referenceImages": [ { "file": "/previews/64/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/64/02a683c6a9015787-desktop.jpg", "route": "/preview/64-service-plans/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f5e99bde393846d9a35506e66f151525b15a978b73b290228ba336422e335525", "sha256": "02a683c6a9015787a87032a10c8348a044458f60f622484934df052d73740653", "fullPage": false }, { "file": "/previews/64/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/64/7714a3c4653b6029-mobile.jpg", "route": "/preview/64-service-plans/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f5e99bde393846d9a35506e66f151525b15a978b73b290228ba336422e335525", "sha256": "7714a3c4653b60292df5f8290037e9fd01032167fde24ec705f63de6eb636838", "fullPage": false }, { "file": "/previews/64/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/64/09c3e9cfd1b1f0e0-detail.jpg", "route": "/preview/64-service-plans/plan", "viewport": { "width": 1440, "height": 1000 }, "state": "plan", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f5e99bde393846d9a35506e66f151525b15a978b73b290228ba336422e335525", "sha256": "09c3e9cfd1b1f0e0f2f27bb24a3f8e9762f649a8940ce93347ee1570d3f68606", "fullPage": false }, { "file": "/previews/64/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/64/670e6b579bb7dc6a-full-page.jpg", "route": "/preview/64-service-plans/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f5e99bde393846d9a35506e66f151525b15a978b73b290228ba336422e335525", "sha256": "670e6b579bb7dc6a6f52947343a0b193bdee5891fe707d528e2de8a231ce6ea8", "fullPage": true } ], "sourcePath": "src/designs/64-service-plans", "neighbours": [ "02", "25" ], "palette": { "page": "#f3f8f4", "surface": "#ffffff", "ink": "#24433b", "accent": "#1f6555" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make the price, frequency, and coverage easy to compare. Built for cleaning, lawn care, property maintenance. The visitor’s next step is to schedule recurring service.\n\n**Visual grammar.** Use a fresh teal subscription table with explicit frequency and inclusion rows. Preserve the hierarchy of service plans, coverage checks, frequency selector; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Tidy / Home care is a fictional demonstration. The entry page establishes a complete visual direction, with choose your plan and recurring booking as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve service plans, coverage checks, frequency selector. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Price, frequency and service coverage lead the page. Comparable plans are appropriate here because visitors are choosing an ongoing routine; keep exclusions and per-visit pricing close to that choice.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/64-service-plans.zip" }, { "schemaVersion": 2, "id": "65", "slug": "branch-network", "name": "Branch Network", "brand": "LOCAL / Cycle care", "family": "Small business", "status": "ready", "thesis": "Find the branch that does the work you need.", "suitableFor": [ "Small chain", "Multi-location services", "Bike repair" ], "character": "Expressive", "traits": { "composition": "map-led mint and ink branch network with location-specific ledgers", "navigation": "Service-filtered branch list, map selection and branch-specific booking", "typography": "Space Grotesk", "density": "Medium", "imagery": "Original neighbourhood map with numbered selectable branches", "surface": "Green map surface, numbered location rail and open whitespace", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Location finder", "Branch hours", "Service availability" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Small chain", "Multi-location services", "Bike repair" ], "visitorGoals": [ "Find a nearby branch" ], "conversionActions": [ "Book at a branch" ], "siteSize": "Multi-location site", "interactionTypes": [ "Branch finder", "Location map", "Availability" ], "keywords": [ "Small chain", "Multi-location services", "Bike repair", "Book at a branch", "Multi-location site", "Location finder", "Branch hours", "Service availability", "small business", "local business", "appointment based", "booking", "calendar" ] }, "patterns": [ "Location finder", "Branch hours", "Service availability" ], "entryRoute": "/preview/65-branch-network/start", "states": [ { "key": "location", "label": "Branch details", "route": "/preview/65-branch-network/location" }, { "key": "booking", "label": "Book at this branch", "route": "/preview/65-branch-network/booking" } ], "referenceImages": [ { "file": "/previews/65/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/65/aeeda4b2f14457a3-desktop.jpg", "route": "/preview/65-branch-network/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:33fee568623018d162b50bec36978ddd126727baad968e57770cefb4f8c7ab10", "sha256": "aeeda4b2f14457a31ac4f15c2e38b91530d3a7c487321abd01a159cd228ebd68", "fullPage": false }, { "file": "/previews/65/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/65/52d5ca4d888c2111-mobile.jpg", "route": "/preview/65-branch-network/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:33fee568623018d162b50bec36978ddd126727baad968e57770cefb4f8c7ab10", "sha256": "52d5ca4d888c211130cecebf0d2c361f6246747ff4a854804b594c0685f06e26", "fullPage": false }, { "file": "/previews/65/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/65/5b98adfbaf7f70d0-detail.jpg", "route": "/preview/65-branch-network/location", "viewport": { "width": 1440, "height": 1000 }, "state": "location", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:33fee568623018d162b50bec36978ddd126727baad968e57770cefb4f8c7ab10", "sha256": "5b98adfbaf7f70d00d74fb220f7704ff954e4caa708c1c0aa616e7cf1e39b84a", "fullPage": false }, { "file": "/previews/65/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/65/acd13fe61d28cd34-full-page.jpg", "route": "/preview/65-branch-network/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:33fee568623018d162b50bec36978ddd126727baad968e57770cefb4f8c7ab10", "sha256": "acd13fe61d28cd34aeb30500c0978891c1de5ecc79e7694a400545e1a72dba01", "fullPage": true } ], "sourcePath": "src/designs/65-branch-network", "neighbours": [ "16", "58" ], "palette": { "page": "#f0f5ed", "surface": "#ffffff", "ink": "#273e3c", "accent": "#35645b" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Find the branch that does the work you need. Built for small chain, multi-location services, bike repair. The visitor’s next step is to book at a branch.\n\n**Visual grammar.** Use a map-led mint and ink branch network with location-specific ledgers. Preserve the hierarchy of location finder, branch hours, service availability; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** LOCAL / Cycle care is a fictional demonstration. The entry page establishes a complete visual direction, with branch details and book at this branch as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve location finder, branch hours, service availability. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Treat locations as distinct service choices, with their own hours, equipment and availability. The list and map are equivalent ways to choose a branch, and booking retains its address and supported service.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/65-branch-network.zip" }, { "schemaVersion": 2, "id": "66", "slug": "commission-studio", "name": "Commission Studio", "brand": "Still / Furniture workshop", "family": "Small business", "status": "ready", "thesis": "Begin with materials and a conversation about how you live.", "suitableFor": [ "Bespoke furniture", "Jewellery", "Tailoring", "Custom fabrication" ], "character": "Restrained", "traits": { "composition": "warm ash material library and a quiet horizontal making process", "navigation": "Materials, dimensions, finish and commission enquiry", "typography": "Libre Baskerville", "density": "Medium", "imagery": "Workshop photograph, illustrated material samples and a configurable table drawing", "surface": "Oatmeal paper, dark wood tones and quiet serif captions", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Material samples", "Commission process", "Configuration-led enquiry" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Bespoke furniture", "Jewellery", "Tailoring", "Custom fabrication" ], "visitorGoals": [ "Plan a custom piece" ], "conversionActions": [ "Enquire about a commission" ], "siteSize": "Portfolio & enquiry", "interactionTypes": [ "Material selector", "Configuration", "Commission enquiry" ], "keywords": [ "Bespoke furniture", "Jewellery", "Tailoring", "Custom fabrication", "Enquire about a commission", "Portfolio & enquiry", "Material samples", "Commission process", "Configuration-led enquiry", "small business", "local business", "enquiry driven", "inquiry", "quote" ] }, "patterns": [ "Material samples", "Commission process", "Configuration-led enquiry" ], "entryRoute": "/preview/66-commission-studio/start", "states": [ { "key": "configure", "label": "Configure a commission", "route": "/preview/66-commission-studio/configure" }, { "key": "enquiry", "label": "Commission brief", "route": "/preview/66-commission-studio/enquiry" } ], "referenceImages": [ { "file": "/previews/66/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/66/b079650163730add-desktop.jpg", "route": "/preview/66-commission-studio/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:694c6dd128d08f9d9832d7ef8b5411dcb1528188ea0058295ee884f34319b352", "sha256": "b079650163730add310aa8fcfb8f6bd9b5deba9dd4bc691c51751c70e0aaf876", "fullPage": false }, { "file": "/previews/66/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/66/532a1aa386423b9e-mobile.jpg", "route": "/preview/66-commission-studio/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:694c6dd128d08f9d9832d7ef8b5411dcb1528188ea0058295ee884f34319b352", "sha256": "532a1aa386423b9eab899fc3eae86709dfb41058c13493227f21840d5d4ddf01", "fullPage": false }, { "file": "/previews/66/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/66/eb33339aca9a170b-detail.jpg", "route": "/preview/66-commission-studio/configure", "viewport": { "width": 1440, "height": 1000 }, "state": "configure", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:694c6dd128d08f9d9832d7ef8b5411dcb1528188ea0058295ee884f34319b352", "sha256": "eb33339aca9a170bb0f5648ffcde6718ec83eb11a59a7dd434348071fefa8830", "fullPage": false }, { "file": "/previews/66/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/66/cfbcb8cd5c152fed-full-page.jpg", "route": "/preview/66-commission-studio/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:694c6dd128d08f9d9832d7ef8b5411dcb1528188ea0058295ee884f34319b352", "sha256": "cfbcb8cd5c152fedde58c5abb9a5b5ffeeaa14ce39f2f2724d62002d97b485fe", "fullPage": true } ], "sourcePath": "src/designs/66-commission-studio", "neighbours": [ "04", "22" ], "palette": { "page": "#eee8dd", "surface": "#ffffff", "ink": "#443a2f", "accent": "#795636" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Begin with materials and a conversation about how you live. Built for bespoke furniture, jewellery, tailoring, custom fabrication. The visitor’s next step is to enquire about a commission.\n\n**Visual grammar.** Use a warm ash material library and a quiet horizontal making process. Preserve the hierarchy of material samples, commission process, configuration-led enquiry; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Still / Furniture workshop is a fictional demonstration. The entry page establishes a complete visual direction, with configure a commission and commission brief as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve material samples, commission process, configuration-led enquiry. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Lead with material and workmanship, then build a brief from timber, length and finish. This is a conversation about a bespoke object, with an indicative price rather than an ordinary checkout.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/66-commission-studio.zip" }, { "schemaVersion": 2, "id": "67", "slug": "everyday-eatery", "name": "Everyday Eatery", "brand": "SIDE STREET / Pizza & plates", "family": "Small business", "status": "ready", "thesis": "Get from hungry to a clear collection order.", "suitableFor": [ "Cafe", "Diner", "Pizzeria", "Takeaway" ], "character": "Expressive", "traits": { "composition": "red and butter-yellow menu board with large food photography", "navigation": "Scannable menu, quantity basket and collection order", "typography": "Archivo Black", "density": "Medium", "imagery": "Close food photograph with a small oven-stamp treatment", "surface": "Butter-yellow menu, red counter strip and bold sign-painter proportions", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Scannable menu", "Visible prices", "Collection ordering" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Cafe", "Diner", "Pizzeria", "Takeaway" ], "visitorGoals": [ "Order a meal" ], "conversionActions": [ "Order for collection" ], "siteSize": "Small brochure", "interactionTypes": [ "Menu filters", "Order basket", "Collection time" ], "keywords": [ "Cafe", "Diner", "Pizzeria", "Takeaway", "Order for collection", "Small brochure", "Scannable menu", "Visible prices", "Collection ordering", "small business", "local business" ] }, "patterns": [ "Scannable menu", "Visible prices", "Collection ordering" ], "entryRoute": "/preview/67-everyday-eatery/start", "states": [ { "key": "menu", "label": "Build your order", "route": "/preview/67-everyday-eatery/menu" }, { "key": "order", "label": "Choose collection", "route": "/preview/67-everyday-eatery/order" } ], "referenceImages": [ { "file": "/previews/67/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/67/316206de44b8d101-desktop.jpg", "route": "/preview/67-everyday-eatery/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a88465c13c00663c48436d5fb4b88a7c90f69f8087337f642cff2a50b3f42d70", "sha256": "316206de44b8d10170eee488e01e35e36be1de310658fe8e4cb8d798c40c85fd", "fullPage": false }, { "file": "/previews/67/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/67/ca11ee7ba69cbf62-mobile.jpg", "route": "/preview/67-everyday-eatery/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a88465c13c00663c48436d5fb4b88a7c90f69f8087337f642cff2a50b3f42d70", "sha256": "ca11ee7ba69cbf62c1b86998c3be5349a83ab94f289f634c494a5693f3d83b12", "fullPage": false }, { "file": "/previews/67/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/67/34df0b2ef4b26fce-detail.jpg", "route": "/preview/67-everyday-eatery/menu", "viewport": { "width": 1440, "height": 1000 }, "state": "menu", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a88465c13c00663c48436d5fb4b88a7c90f69f8087337f642cff2a50b3f42d70", "sha256": "34df0b2ef4b26fce62d34b27eb308b62aa390fd34092b0bf2b87b50986ee9bab", "fullPage": false }, { "file": "/previews/67/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/67/fbc3446ca7385ce7-full-page.jpg", "route": "/preview/67-everyday-eatery/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a88465c13c00663c48436d5fb4b88a7c90f69f8087337f642cff2a50b3f42d70", "sha256": "fbc3446ca7385ce7b31de7321290c0b76f68e605f8b1abb2bae4da63877a3647", "fullPage": true } ], "sourcePath": "src/designs/67-everyday-eatery", "neighbours": [ "24", "52" ], "palette": { "page": "#fff4d7", "surface": "#ffffff", "ink": "#4d2723", "accent": "#9c3029" }, "fonts": [ "Archivo Black", "DM Sans" ], "brief": "**Philosophy and fit.** Get from hungry to a clear collection order. Built for cafe, diner, pizzeria, takeaway. The visitor’s next step is to order for collection.\n\n**Visual grammar.** Use a red and butter-yellow menu board with large food photography. Preserve the hierarchy of scannable menu, visible prices, collection ordering; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** SIDE STREET / Pizza & plates is a fictional demonstration. The entry page establishes a complete visual direction, with build your order and choose collection as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve scannable menu, visible prices, collection ordering. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Use a fast, price-forward menu and a visible collection basket. The bright counter-service character and straightforward hours deliberately differ from Fine Dining’s slower seasonal narrative.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/67-everyday-eatery.zip" }, { "schemaVersion": 2, "id": "68", "slug": "rapid-response", "name": "Rapid Response", "brand": "NOW / Home repairs", "family": "Small business", "status": "ready", "thesis": "Put the next practical step within a thumb’s reach.", "suitableFor": [ "Locksmith", "Emergency plumbing", "Restoration", "Urgent repair" ], "character": "Expressive", "traits": { "composition": "mobile-first navy and amber dispatch card with an immediate decision", "navigation": "Urgent-versus-routine choice, coverage check and callback request", "typography": "DM Sans", "density": "Low", "imagery": "No hero photograph; contact and urgency choices lead", "surface": "Navy decision board, yellow urgent action and clear service facts", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Urgent or routine", "Service coverage", "Immediate contact" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Locksmith", "Emergency plumbing", "Restoration", "Urgent repair" ], "visitorGoals": [ "Find urgent help" ], "conversionActions": [ "Request urgent help" ], "siteSize": "One page", "interactionTypes": [ "Urgency triage", "Coverage check", "Direct contact" ], "keywords": [ "Locksmith", "Emergency plumbing", "Restoration", "Urgent repair", "Request urgent help", "One page", "Urgent or routine", "Service coverage", "Immediate contact", "small business", "local business", "one page brochure", "single page", "sole proprietor" ] }, "patterns": [ "Urgent or routine", "Service coverage", "Immediate contact" ], "entryRoute": "/preview/68-rapid-response/start", "states": [ { "key": "help", "label": "Check coverage", "route": "/preview/68-rapid-response/help" }, { "key": "request", "label": "Request assistance", "route": "/preview/68-rapid-response/request" } ], "referenceImages": [ { "file": "/previews/68/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/68/d24b388ce32b8dc9-desktop.jpg", "route": "/preview/68-rapid-response/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9f20447c5236aca36cb73ff14ad7461dbafff8ef3490df2ee6ce38db7b0ac12f", "sha256": "d24b388ce32b8dc92cd47644d5751f6a6f8bcbd2db53653e6aa420eadd48466e", "fullPage": false }, { "file": "/previews/68/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/68/261325b3128eae56-mobile.jpg", "route": "/preview/68-rapid-response/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9f20447c5236aca36cb73ff14ad7461dbafff8ef3490df2ee6ce38db7b0ac12f", "sha256": "261325b3128eae56bc5ab85933cadbe857e92cbc6c554f055cbfcb8e204a4118", "fullPage": false }, { "file": "/previews/68/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/68/1e52071c1eab5437-detail.jpg", "route": "/preview/68-rapid-response/help", "viewport": { "width": 1440, "height": 1000 }, "state": "help", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9f20447c5236aca36cb73ff14ad7461dbafff8ef3490df2ee6ce38db7b0ac12f", "sha256": "1e52071c1eab54375935277734a4345fdbb6f7769d9bde8f2c7f6f713916708b", "fullPage": false }, { "file": "/previews/68/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/68/3025c5b760703e03-full-page.jpg", "route": "/preview/68-rapid-response/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9f20447c5236aca36cb73ff14ad7461dbafff8ef3490df2ee6ce38db7b0ac12f", "sha256": "3025c5b760703e03ab2295f41f85b181a3ba3ab0d4f9b41a0b9ca8b8ec69a1ad", "fullPage": true } ], "sourcePath": "src/designs/68-rapid-response", "neighbours": [ "25", "01" ], "palette": { "page": "#f5f4ec", "surface": "#ffffff", "ink": "#233448", "accent": "#ffcf58" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Put the next practical step within a thumb’s reach. Built for locksmith, emergency plumbing, restoration, urgent repair. The visitor’s next step is to request urgent help.\n\n**Visual grammar.** Use a mobile-first navy and amber dispatch card with an immediate decision. Preserve the hierarchy of urgent or routine, service coverage, immediate contact; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** NOW / Home repairs is a fictional demonstration. The entry page establishes a complete visual direction, with check coverage and request assistance as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve urgent or routine, service coverage, immediate contact. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Put the phone number and urgent-versus-routine decision within immediate reach. Avoid large images or promotional blocks before those actions; coverage and contact details belong directly in the request flow.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/68-rapid-response.zip" }, { "schemaVersion": 2, "id": "69", "slug": "impact-nonprofit", "name": "Impact Nonprofit", "brand": "Common Ground / River trust", "family": "Community & institutions", "status": "ready", "thesis": "Connect a contribution to a specific, accountable project.", "suitableFor": [ "Nonprofit", "Charity", "Environment" ], "character": "Expressive", "traits": { "composition": "earthy campaign publication with project-led contribution allocation", "navigation": "Project detail, contribution allocation and volunteering", "typography": "Space Grotesk", "density": "Medium", "imagery": "Original river-project map, outcome figures and contribution-allocation bars", "surface": "Pale green mission panels with darker project markers", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Project outcomes", "Use of funds", "Contribution choices" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Nonprofit", "Charity", "Environment" ], "visitorGoals": [ "Understand impact" ], "conversionActions": [ "Choose a contribution" ], "siteSize": "Publication & action", "interactionTypes": [ "Impact breakdown", "Contribution allocation", "Volunteering" ], "keywords": [ "Nonprofit", "Charity", "Environment", "Choose a contribution", "Publication & action", "Project outcomes", "Use of funds", "Contribution choices" ] }, "patterns": [ "Project outcomes", "Use of funds", "Contribution choices" ], "entryRoute": "/preview/69-impact-nonprofit/start", "states": [ { "key": "contribute", "label": "Choose your contribution", "route": "/preview/69-impact-nonprofit/contribute" }, { "key": "impact", "label": "Project outcomes", "route": "/preview/69-impact-nonprofit/impact" } ], "referenceImages": [ { "file": "/previews/69/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/69/7f87edcc4f83a2c0-desktop.jpg", "route": "/preview/69-impact-nonprofit/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:228739a23775eb36a317f020e36a37ea6a223a5a8140d07fdf372b7b08486f18", "sha256": "7f87edcc4f83a2c0c5b967a658031e20fac4f91fe4dfa03492154bf8fd65b16f", "fullPage": false }, { "file": "/previews/69/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/69/9ff3edfa7cccda62-mobile.jpg", "route": "/preview/69-impact-nonprofit/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:228739a23775eb36a317f020e36a37ea6a223a5a8140d07fdf372b7b08486f18", "sha256": "9ff3edfa7cccda62434fcf4b62e03d1b16d4565024bea3c121300143d23db29a", "fullPage": false }, { "file": "/previews/69/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/69/77e299790fa14dd5-detail.jpg", "route": "/preview/69-impact-nonprofit/contribute", "viewport": { "width": 1440, "height": 1000 }, "state": "contribute", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:228739a23775eb36a317f020e36a37ea6a223a5a8140d07fdf372b7b08486f18", "sha256": "77e299790fa14dd5e80615fbaca94ecd3af346ae189bf950eeccf7cab1862607", "fullPage": false }, { "file": "/previews/69/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/69/9bd4a9592775ff21-full-page.jpg", "route": "/preview/69-impact-nonprofit/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:228739a23775eb36a317f020e36a37ea6a223a5a8140d07fdf372b7b08486f18", "sha256": "9bd4a9592775ff211e6f8396ad1e8430fcce80be9abdeef637104c5977267f9b", "fullPage": true } ], "sourcePath": "src/designs/69-impact-nonprofit", "neighbours": [ "08", "75" ], "palette": { "page": "#f0f0dc", "surface": "#ffffff", "ink": "#2b4336", "accent": "#3b6a40" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Connect a contribution to a specific, accountable project. Built for nonprofit, charity, environment. The visitor’s next step is to choose a contribution.\n\n**Visual grammar.** Use a earthy campaign publication with project-led contribution allocation. Preserve the hierarchy of project outcomes, use of funds, contribution choices; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Common Ground / River trust is a fictional demonstration. The entry page establishes a complete visual direction, with choose your contribution and project outcomes as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve project outcomes, use of funds, contribution choices. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Connect the mission to named projects and transparent outcomes. The contribution flow explains how support is allocated; volunteering remains an equally clear route into the organisation.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/69-impact-nonprofit.zip" }, { "schemaVersion": 2, "id": "70", "slug": "community-commons", "name": "Community Commons", "brand": "Maple Street / Commons", "family": "Community & institutions", "status": "ready", "thesis": "Put the useful things a community shares in one welcoming place.", "suitableFor": [ "Club", "Association", "Neighbourhood group" ], "character": "Expressive", "traits": { "composition": "welcoming coloured noticeboard with dated notices and plain joining steps", "navigation": "Neighbourhood bulletin, event list, meeting notes and joining form", "typography": "DM Sans", "density": "Low", "imagery": "Original sun mark, pinned notices and calendar-like event cards", "surface": "Pastel noticeboard papers on warm cream", "motion": "Minimal" }, "effort": "Low", "definingFeatures": [ "Events", "Meeting notes", "Resources" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Club", "Association", "Neighbourhood group" ], "visitorGoals": [ "Participate locally" ], "conversionActions": [ "Join a community" ], "siteSize": "Community site", "interactionTypes": [ "Events board", "Meeting notes", "Membership" ], "keywords": [ "Club", "Association", "Neighbourhood group", "Join a community", "Community site", "Events", "Meeting notes", "Resources", "Membership" ] }, "patterns": [ "Events", "Meeting notes", "Resources", "Membership" ], "entryRoute": "/preview/70-community-commons/start", "states": [ { "key": "events", "label": "Community calendar", "route": "/preview/70-community-commons/events" }, { "key": "join", "label": "Join the commons", "route": "/preview/70-community-commons/join" } ], "referenceImages": [ { "file": "/previews/70/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/70/8399bda17ef3ce19-desktop.jpg", "route": "/preview/70-community-commons/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:db6dfbef2855ee3e09d3698b4b77114de868aaff7590500e219ce02ce8493389", "sha256": "8399bda17ef3ce19bd903fbebf218cbcef55be8151a7e287fac362bfcf7b5c75", "fullPage": false }, { "file": "/previews/70/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/70/ccf299b8f03aca40-mobile.jpg", "route": "/preview/70-community-commons/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:db6dfbef2855ee3e09d3698b4b77114de868aaff7590500e219ce02ce8493389", "sha256": "ccf299b8f03aca403492b362d3aecd51fbcddc499a72b170a621b55bd3dc3699", "fullPage": false }, { "file": "/previews/70/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/70/b43bc01363e44dff-detail.jpg", "route": "/preview/70-community-commons/events", "viewport": { "width": 1440, "height": 1000 }, "state": "events", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:db6dfbef2855ee3e09d3698b4b77114de868aaff7590500e219ce02ce8493389", "sha256": "b43bc01363e44dffacacb9572461e5eea9d38f4baef819bd2efdd7d0a637fb48", "fullPage": false }, { "file": "/previews/70/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/70/04df2ceea60c5aa9-full-page.jpg", "route": "/preview/70-community-commons/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:db6dfbef2855ee3e09d3698b4b77114de868aaff7590500e219ce02ce8493389", "sha256": "04df2ceea60c5aa969c1d063bf2d5e1d2e773137b4c09b4524cb3a3fe6f33f69", "fullPage": true } ], "sourcePath": "src/designs/70-community-commons", "neighbours": [ "35", "73" ], "palette": { "page": "#f6f0df", "surface": "#ffffff", "ink": "#3c4135", "accent": "#4b6348" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Put the useful things a community shares in one welcoming place. Built for club, association, neighbourhood group. The visitor’s next step is to join a community.\n\n**Visual grammar.** Use a welcoming coloured noticeboard with dated notices and plain joining steps. Preserve the hierarchy of events, meeting notes, resources, membership; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Maple Street / Commons is a fictional demonstration. The entry page establishes a complete visual direction, with community calendar and join the commons as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve events, meeting notes, resources. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Use a welcoming bulletin board with different notice sizes for joining, dates and shared resources. Keep meeting notes discoverable so the organisation feels participatory rather than promotional.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/70-community-commons.zip" }, { "schemaVersion": 2, "id": "71", "slug": "learning-prospectus", "name": "Learning Prospectus", "brand": "Northbank / Continuing studies", "family": "Community & institutions", "status": "ready", "thesis": "Help learners compare the commitment before they enrol.", "suitableFor": [ "College", "Academy", "Course provider" ], "character": "Restrained", "traits": { "composition": "indigo prospectus with a disciplined comparison grid and course index", "navigation": "Programme filters, comparison, sample lesson and enrolment", "typography": "DM Sans", "density": "Medium", "imagery": "Typographic prospectus spine and programme comparison tables", "surface": "Paper prospectus with indigo tabs and ruled comparisons", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Prerequisites", "Fees and schedules", "Sample lessons" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "College", "Academy", "Course provider" ], "visitorGoals": [ "Compare programmes" ], "conversionActions": [ "Enrol in a programme" ], "siteSize": "Searchable catalogue", "interactionTypes": [ "Programme comparison", "Sample lesson", "Enrolment" ], "keywords": [ "College", "Academy", "Course provider", "Enrol in a programme", "Searchable catalogue", "Prerequisites", "Fees and schedules", "Sample lessons" ] }, "patterns": [ "Prerequisites", "Fees and schedules", "Sample lessons" ], "entryRoute": "/preview/71-learning-prospectus/start", "states": [ { "key": "programme", "label": "Programme details", "route": "/preview/71-learning-prospectus/programme" }, { "key": "enrol", "label": "Enrolment request", "route": "/preview/71-learning-prospectus/enrol" } ], "referenceImages": [ { "file": "/previews/71/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/71/6e5ee5f1c5c120e9-desktop.jpg", "route": "/preview/71-learning-prospectus/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d026dc92f4e68f7aeaa0cf813bf44c7b729be8f52ba3b3b67d755b5596cd7f93", "sha256": "6e5ee5f1c5c120e929e4330f17993f8ed17627d9c59e3f2a59e2030e578566d7", "fullPage": false }, { "file": "/previews/71/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/71/4d64c3e6e80ddd50-mobile.jpg", "route": "/preview/71-learning-prospectus/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d026dc92f4e68f7aeaa0cf813bf44c7b729be8f52ba3b3b67d755b5596cd7f93", "sha256": "4d64c3e6e80ddd5076a9843092b2d1beb0c9eba76c6a1565fe3e329e059a1440", "fullPage": false }, { "file": "/previews/71/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/71/54075711ba41561b-detail.jpg", "route": "/preview/71-learning-prospectus/programme", "viewport": { "width": 1440, "height": 1000 }, "state": "programme", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d026dc92f4e68f7aeaa0cf813bf44c7b729be8f52ba3b3b67d755b5596cd7f93", "sha256": "54075711ba41561be7d8f8c373705faae3170f3106975ae052d3a67185fc66a8", "fullPage": false }, { "file": "/previews/71/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/71/e4dc1abf0d3a003b-full-page.jpg", "route": "/preview/71-learning-prospectus/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d026dc92f4e68f7aeaa0cf813bf44c7b729be8f52ba3b3b67d755b5596cd7f93", "sha256": "e4dc1abf0d3a003bde6dc89433e2a956eeac7a3fb2b9f1e25ead9833e050b3ea", "fullPage": true } ], "sourcePath": "src/designs/71-learning-prospectus", "neighbours": [ "05", "14" ], "palette": { "page": "#f4f2ed", "surface": "#ffffff", "ink": "#30364a", "accent": "#454e92" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Help learners compare the commitment before they enrol. Built for college, academy, course provider. The visitor’s next step is to enrol in a programme.\n\n**Visual grammar.** Use a indigo prospectus with a disciplined comparison grid and course index. Preserve the hierarchy of prerequisites, fees and schedules, sample lessons; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Northbank / Continuing studies is a fictional demonstration. The entry page establishes a complete visual direction, with programme details and enrolment request as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve prerequisites, fees and schedules, sample lessons. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Build the page around a considered course choice: prerequisites, fees, workload and learning format are comparable before the sample lesson or enrolment form.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/71-learning-prospectus.zip" }, { "schemaVersion": 2, "id": "72", "slug": "careers-recruitment", "name": "Careers & Recruitment", "brand": "FIELDWORK / Careers", "family": "Community & institutions", "status": "ready", "thesis": "Show the actual work, the people, and the terms of the job.", "suitableFor": [ "Employer", "Recruitment", "Careers" ], "character": "Expressive", "traits": { "composition": "energetic coral careers journal with transparent job rows", "navigation": "Vacancy filters, complete role detail and sample application", "typography": "Space Grotesk", "density": "Medium", "imagery": "Typographic staff story, role-count note and salary-labelled vacancy rows", "surface": "Warm editorial paper with coral application-process band", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Staff stories", "Salary ranges", "Requirements" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Employer", "Recruitment", "Careers" ], "visitorGoals": [ "Find a job" ], "conversionActions": [ "Apply for a role" ], "siteSize": "Searchable catalogue", "interactionTypes": [ "Vacancy search", "Role details", "Application" ], "keywords": [ "Employer", "Recruitment", "Careers", "Apply for a role", "Searchable catalogue", "Staff stories", "Salary ranges", "Requirements", "Applications" ] }, "patterns": [ "Staff stories", "Salary ranges", "Requirements", "Applications" ], "entryRoute": "/preview/72-careers-recruitment/start", "states": [ { "key": "role", "label": "Role details", "route": "/preview/72-careers-recruitment/role" }, { "key": "apply", "label": "Sample application", "route": "/preview/72-careers-recruitment/apply" } ], "referenceImages": [ { "file": "/previews/72/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/72/58e058a5840e0496-desktop.jpg", "route": "/preview/72-careers-recruitment/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:10d7ee655ab47e880bc7e714db2715940d74a3bd8dc4ef15b936a06fb051b043", "sha256": "58e058a5840e0496e4096c3c6f1f14ca62d604771058fc9843c82382c3fa17d1", "fullPage": false }, { "file": "/previews/72/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/72/15841544b8a2fd0d-mobile.jpg", "route": "/preview/72-careers-recruitment/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:10d7ee655ab47e880bc7e714db2715940d74a3bd8dc4ef15b936a06fb051b043", "sha256": "15841544b8a2fd0dea01981ea4ec15c48ffb3de0fe49d31a9d93511dc1fe1bf1", "fullPage": false }, { "file": "/previews/72/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/72/b67ac2bf5a9fd387-detail.jpg", "route": "/preview/72-careers-recruitment/role", "viewport": { "width": 1440, "height": 1000 }, "state": "role", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:10d7ee655ab47e880bc7e714db2715940d74a3bd8dc4ef15b936a06fb051b043", "sha256": "b67ac2bf5a9fd387df93cc14bc46353ae29633e9ea539d9602c215cfae82d7a6", "fullPage": false }, { "file": "/previews/72/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/72/b52d11bf6d5c0bb3-full-page.jpg", "route": "/preview/72-careers-recruitment/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:10d7ee655ab47e880bc7e714db2715940d74a3bd8dc4ef15b936a06fb051b043", "sha256": "b52d11bf6d5c0bb3edc0dcb81ff3130aa7c9e34e0b3b07bf6027f788867566ae", "fullPage": true } ], "sourcePath": "src/designs/72-careers-recruitment", "neighbours": [ "20", "55" ], "palette": { "page": "#f8eee6", "surface": "#ffffff", "ink": "#3d3031", "accent": "#9c3b34" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Philosophy and fit.** Show the actual work, the people, and the terms of the job. Built for employer, recruitment, careers. The visitor’s next step is to apply for a role.\n\n**Visual grammar.** Use a energetic coral careers journal with transparent job rows. Preserve the hierarchy of staff stories, salary ranges, requirements, applications; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** FIELDWORK / Careers is a fictional demonstration. The entry page establishes a complete visual direction, with role details and sample application as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve staff stories, salary ranges, requirements. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Employer identity comes from staff experience and clear job details. Put salary, location and requirements in the vacancy journey, then demonstrate a bounded application review.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/72-careers-recruitment.zip" }, { "schemaVersion": 2, "id": "73", "slug": "community-forum", "name": "Community Forum", "brand": "The Workbench / Community", "family": "Community & institutions", "status": "ready", "thesis": "Make a conversation worth finding again.", "suitableFor": [ "Community", "Member organisation", "Discussion forum" ], "character": "Restrained", "traits": { "composition": "modern blue-grey discussion architecture with nested replies and category rails", "navigation": "Categories, searchable threads, replies, moderation and member profiles", "typography": "DM Sans", "density": "High", "imagery": "Member initials, category markers and visible reply hierarchy", "surface": "Compact blue-grey discussion interface with separate topic rails", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Categories", "Thread hierarchy", "Replies" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Community", "Member organisation", "Discussion forum" ], "visitorGoals": [ "Follow a discussion" ], "conversionActions": [ "Join a discussion" ], "siteSize": "Community site", "interactionTypes": [ "Threaded discussion", "Moderation states", "Member profiles" ], "keywords": [ "Community", "Member organisation", "Discussion forum", "Join a discussion", "Community site", "Categories", "Thread hierarchy", "Replies", "Moderation" ] }, "patterns": [ "Categories", "Thread hierarchy", "Replies", "Moderation" ], "entryRoute": "/preview/73-community-forum/start", "states": [ { "key": "thread", "label": "Discussion thread", "route": "/preview/73-community-forum/thread" }, { "key": "profile", "label": "Member profile", "route": "/preview/73-community-forum/profile" } ], "referenceImages": [ { "file": "/previews/73/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/73/9dad7ae91fac6b1c-desktop.jpg", "route": "/preview/73-community-forum/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3b218f31dcb7f0dc86f2321a9b64a2a58897b5bd237460042b22c8c417ee004f", "sha256": "9dad7ae91fac6b1c955beeec92ede951f69c85d5b8657cf9860f99c5e910d6de", "fullPage": false }, { "file": "/previews/73/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/73/1c2e6d976f945ef2-mobile.jpg", "route": "/preview/73-community-forum/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3b218f31dcb7f0dc86f2321a9b64a2a58897b5bd237460042b22c8c417ee004f", "sha256": "1c2e6d976f945ef252d5fbca3dbd8543b314099c2f8222fd9bf533b7141c1f13", "fullPage": false }, { "file": "/previews/73/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/73/8e485deac76acde2-detail.jpg", "route": "/preview/73-community-forum/thread", "viewport": { "width": 1440, "height": 1000 }, "state": "thread", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3b218f31dcb7f0dc86f2321a9b64a2a58897b5bd237460042b22c8c417ee004f", "sha256": "8e485deac76acde2e1ed283bfce64009a0a6e0972f8aa8f1819c7df674cbbeac", "fullPage": false }, { "file": "/previews/73/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/73/915a63c7c7fe42f8-full-page.jpg", "route": "/preview/73-community-forum/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3b218f31dcb7f0dc86f2321a9b64a2a58897b5bd237460042b22c8c417ee004f", "sha256": "915a63c7c7fe42f8db8c68abf4cbe85a53cbd2e6137053e4921af5e48cc096d2", "fullPage": true } ], "sourcePath": "src/designs/73-community-forum", "neighbours": [ "19", "70" ], "palette": { "page": "#f0f3f8", "surface": "#ffffff", "ink": "#2f3b4e", "accent": "#385da0" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make a conversation worth finding again. Built for community, member organisation, discussion forum. The visitor’s next step is to join a discussion.\n\n**Visual grammar.** Use a modern blue-grey discussion architecture with nested replies and category rails. Preserve the hierarchy of categories, thread hierarchy, replies, moderation; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** The Workbench / Community is a fictional demonstration. The entry page establishes a complete visual direction, with discussion thread and member profile as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve categories, thread hierarchy, replies. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Keep the multi-person thread as the core object. Category context, reply nesting, closed states and member information distinguish this from the scripted Conversation Desk or a personal Knowledge Garden.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/73-community-forum.zip" }, { "schemaVersion": 2, "id": "74", "slug": "modern-docs-portal", "name": "Modern Docs Portal", "brand": "Vector / Developer docs", "family": "Community & institutions", "status": "ready", "thesis": "Make the next implementation step easy to locate and verify.", "suitableFor": [ "Developer tools", "Software", "API documentation" ], "character": "Restrained", "traits": { "composition": "light technical documentation with a three-column reading architecture", "navigation": "Persistent sidebar, version selector, in-page contents and quickstart", "typography": "DM Sans", "density": "High", "imagery": "Versioned code examples and local response objects", "surface": "White documentation canvas, lilac selection and dark code panels", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Versioning", "Sidebar navigation", "Code examples" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Developer tools", "Software", "API documentation" ], "visitorGoals": [ "Implement an integration" ], "conversionActions": [ "Complete a quickstart" ], "siteSize": "Documentation site", "interactionTypes": [ "Version switcher", "Code examples", "In-page navigation" ], "keywords": [ "Developer tools", "Software", "API documentation", "Complete a quickstart", "Documentation site", "Versioning", "Sidebar navigation", "Code examples", "Quickstarts" ] }, "patterns": [ "Versioning", "Sidebar navigation", "Code examples", "Quickstarts" ], "entryRoute": "/preview/74-modern-docs-portal/start", "states": [ { "key": "quickstart", "label": "Quickstart guide", "route": "/preview/74-modern-docs-portal/quickstart" }, { "key": "reference", "label": "API reference", "route": "/preview/74-modern-docs-portal/reference" } ], "referenceImages": [ { "file": "/previews/74/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/74/a0fd13ebe76ecadc-desktop.jpg", "route": "/preview/74-modern-docs-portal/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ceb6ff326fef3de4e6b61b39d57b480d239941ded721007d62de2834e8dd9c10", "sha256": "a0fd13ebe76ecadc131167a161f24893b51f7e782b710e723eb6c2575ed54c0e", "fullPage": false }, { "file": "/previews/74/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/74/cf909bccc22ed4f3-mobile.jpg", "route": "/preview/74-modern-docs-portal/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ceb6ff326fef3de4e6b61b39d57b480d239941ded721007d62de2834e8dd9c10", "sha256": "cf909bccc22ed4f3e80f32a666fd1285e8ef0ec6ff470ba6c803139bc331c034", "fullPage": false }, { "file": "/previews/74/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/74/0492f16fafe5a322-detail.jpg", "route": "/preview/74-modern-docs-portal/quickstart", "viewport": { "width": 1440, "height": 1000 }, "state": "quickstart", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ceb6ff326fef3de4e6b61b39d57b480d239941ded721007d62de2834e8dd9c10", "sha256": "0492f16fafe5a322535a51fb167c2fdd8908e723b8f47272af7fba46688a1dff", "fullPage": false }, { "file": "/previews/74/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/74/b370ef3a0018b365-full-page.jpg", "route": "/preview/74-modern-docs-portal/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ceb6ff326fef3de4e6b61b39d57b480d239941ded721007d62de2834e8dd9c10", "sha256": "b370ef3a0018b365583471bb6f04b9e49f68fad2ed53152c89b4e56b373751f7", "fullPage": true } ], "sourcePath": "src/designs/74-modern-docs-portal", "neighbours": [ "41", "18" ], "palette": { "page": "#fafbfd", "surface": "#ffffff", "ink": "#2c3545", "accent": "#444f9d" }, "fonts": [ "DM Sans" ], "brief": "**Philosophy and fit.** Make the next implementation step easy to locate and verify. Built for developer tools, software, api documentation. The visitor’s next step is to complete a quickstart.\n\n**Visual grammar.** Use a light technical documentation with a three-column reading architecture. Preserve the hierarchy of versioning, sidebar navigation, code examples, quickstarts; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Vector / Developer docs is a fictional demonstration. The entry page establishes a complete visual direction, with quickstart guide and api reference as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve versioning, sidebar navigation, code examples. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** Use the familiar documentation hierarchy: versions, page navigation, a reading column and in-page contents. Code and response examples follow the selected version; this is a conventional counterpart to Terminal Manual.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/74-modern-docs-portal.zip" }, { "schemaVersion": 2, "id": "75", "slug": "annual-report", "name": "Annual Report", "brand": "Northbank / Public library", "family": "Community & institutions", "status": "ready", "thesis": "Tell the year’s story and show the evidence behind it.", "suitableFor": [ "Public organisation", "Nonprofit", "Annual reporting" ], "character": "Expressive", "traits": { "composition": "burgundy editorial report with oversized year numerals and clearly labelled financial tables", "navigation": "Report chapters, financial tables and source methodology", "typography": "Libre Baskerville", "density": "Medium", "imagery": "Large year numerals, narrative outcome figures and financial bars", "surface": "Cream publication pages with burgundy type and muted rose chapters", "motion": "Minimal" }, "effort": "Medium", "definingFeatures": [ "Achievements", "Financial data", "Project outcomes" ], "adaptableChoices": [ "Verified business content", "Brand and subject", "Equivalent licensed typefaces" ], "discovery": { "industries": [ "Public organisation", "Nonprofit", "Annual reporting" ], "visitorGoals": [ "Understand annual results" ], "conversionActions": [ "Explore the report" ], "siteSize": "Digital publication", "interactionTypes": [ "Narrative chapters", "Financial tables", "Source notes" ], "keywords": [ "Public organisation", "Nonprofit", "Annual reporting", "Explore the report", "Digital publication", "Achievements", "Financial data", "Project outcomes", "Sources" ] }, "patterns": [ "Achievements", "Financial data", "Project outcomes", "Sources" ], "entryRoute": "/preview/75-annual-report/start", "states": [ { "key": "results", "label": "Year in review", "route": "/preview/75-annual-report/results" }, { "key": "finances", "label": "Financial statements", "route": "/preview/75-annual-report/finances" } ], "referenceImages": [ { "file": "/previews/75/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/75/f7ac3cb7af3751f3-desktop.jpg", "route": "/preview/75-annual-report/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e6949e8fe4e9c110604dded8a0b982d8905f18fb8fd4fc11c0080afa47067e88", "sha256": "f7ac3cb7af3751f39050a8ce49c428a91c7d90bb697b41c0b1195a38abf4b1b5", "fullPage": false }, { "file": "/previews/75/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/75/2b3116a12f8bc896-mobile.jpg", "route": "/preview/75-annual-report/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e6949e8fe4e9c110604dded8a0b982d8905f18fb8fd4fc11c0080afa47067e88", "sha256": "2b3116a12f8bc896ab75fb5bb961dd4415acc3f6c871645296a317e34af0e5f1", "fullPage": false }, { "file": "/previews/75/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/75/908000834c908377-detail.jpg", "route": "/preview/75-annual-report/results", "viewport": { "width": 1440, "height": 1000 }, "state": "results", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e6949e8fe4e9c110604dded8a0b982d8905f18fb8fd4fc11c0080afa47067e88", "sha256": "908000834c90837770af6b27ebc842f89da5685b267c6512eef6b7b372213431", "fullPage": false }, { "file": "/previews/75/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/75/462ef90a6abc3770-full-page.jpg", "route": "/preview/75-annual-report/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:e6949e8fe4e9c110604dded8a0b982d8905f18fb8fd4fc11c0080afa47067e88", "sha256": "462ef90a6abc3770d3964dfed74ef5f136850116fd58aadb30ac24a27f9f5269", "fullPage": true } ], "sourcePath": "src/designs/75-annual-report", "neighbours": [ "06", "10" ], "palette": { "page": "#f3ede3", "surface": "#ffffff", "ink": "#462d36", "accent": "#79364e" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Philosophy and fit.** Tell the year’s story and show the evidence behind it. Built for public organisation, nonprofit, annual reporting. The visitor’s next step is to explore the report.\n\n**Visual grammar.** Use a burgundy editorial report with oversized year numerals and clearly labelled financial tables. Preserve the hierarchy of achievements, financial data, project outcomes, sources; these patterns solve this business’s actual decision, rather than supplying interchangeable decoration.\n\n**Sample and interaction.** Northbank / Public library is a fictional demonstration. The entry page establishes a complete visual direction, with year in review and financial statements as supporting states. Inputs use local deterministic fixtures; no request, order, application or payment is sent.\n\n**Responsive behaviour.** On a phone, keep the primary decision first, stack facts with explicit labels, preserve the order of the workflow, and provide comfortably sized controls. Wide diagrams scale; tabular facts retain their labels.\n\n**Adaptation.** Replace the fictional brand, prices, availability, qualifications and claims with verified client information. Preserve achievements, financial data, project outcomes. Use imagery to explain the place, people, work or product, with deliberate crops and honest captions. Do not turn this into a generic hero-and-card layout.\n\n**Identity and adaptation.** An oversized year opens a paced digital publication. Narrative chapters explain achievements before financial tables and source notes; the sequence is a report to read, rather than a live dashboard to monitor.", "scope": "Complete visual reference with local sample interactions; no production business backend.", "downloadUrl": "/downloads/75-annual-report.zip" }, { "schemaVersion": 2, "id": "76", "slug": "folded-matter", "name": "Folded Matter", "brand": "UNFOLD / Small press assembly", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Reading order emerges from the folds of one continuous sheet.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "An acid-yellow six-panel sheet fills the page; black slab-like headlines, hairline creases and triangular paper folds connect its parts.", "navigation": "Unfold panels, enter a contributor spread, assemble an itinerary", "typography": "Archivo Black / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Fold navigation", "Connected sheet", "Reading itinerary" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Fold navigation", "Connected sheet", "Reading itinerary" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Fold navigation", "Connected sheet", "Reading itinerary" ] }, "patterns": [ "Fold navigation", "Connected sheet", "Reading itinerary" ], "entryRoute": "/preview/76-folded-matter/start", "states": [ { "key": "spread", "label": "Contributor spread", "route": "/preview/76-folded-matter/spread" }, { "key": "itinerary", "label": "Reading itinerary", "route": "/preview/76-folded-matter/itinerary" } ], "referenceImages": [ { "file": "/previews/76/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/76/115e190f752d9482-desktop.jpg", "route": "/preview/76-folded-matter/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a5b39556cc0366d98f391762c6d8d1a1837089aa2054dbad5fa62e6446d5a56a", "sha256": "115e190f752d948251b34729fc8bc58d44eb2c50ca7706f8c2809163f7405b0e", "fullPage": false }, { "file": "/previews/76/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/76/5fe2325679529ea3-mobile.jpg", "route": "/preview/76-folded-matter/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a5b39556cc0366d98f391762c6d8d1a1837089aa2054dbad5fa62e6446d5a56a", "sha256": "5fe2325679529ea390977975be194b72439640575d306d52bedf211e3e38ed5f", "fullPage": false }, { "file": "/previews/76/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/76/310d428d1c343f41-detail.jpg", "route": "/preview/76-folded-matter/spread", "viewport": { "width": 1440, "height": 1000 }, "state": "spread", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a5b39556cc0366d98f391762c6d8d1a1837089aa2054dbad5fa62e6446d5a56a", "sha256": "310d428d1c343f41aa5ca302c97a9fabfeaf2e2e32aa70149548bd4b3fbc2ee6", "fullPage": false }, { "file": "/previews/76/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/76/fc026f6601dbfd17-full-page.jpg", "route": "/preview/76-folded-matter/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:a5b39556cc0366d98f391762c6d8d1a1837089aa2054dbad5fa62e6446d5a56a", "sha256": "fc026f6601dbfd1720f65309f4f03599043a289f6b1d01ed48d4538783d353a0", "fullPage": true } ], "sourcePath": "src/designs/76-folded-matter", "neighbours": [ "35", "45" ], "researchSources": [ { "title": "Moniker — Conditional Design Workbook", "url": "https://studiomoniker.com/projects/conditional-design-workbook" }, { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" } ], "palette": { "page": "#e7f44b", "ink": "#171810", "accent": "#e7f44b", "surface": "#e7f44b" }, "fonts": [ "Archivo Black", "DM Sans" ], "brief": "**Idea.** Reading order emerges from the folds of one continuous sheet.\n\n**Composition.** An acid-yellow six-panel sheet fills the page; black slab-like headlines, hairline creases and triangular paper folds connect its parts.\n\n**Navigation and complete example.** Unfold six contributions to a small-press assembly, read a contributor’s substantial spread, and add selected readings to a printable itinerary.\n\n**Responsive and inclusive behaviour.** The connected sheet becomes a single accordion, preserving numbered creases and panel order. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Preserve the single-sheet continuity and variable panel scale; let folds reveal useful content rather than hiding essential navigation. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Moniker — Conditional Design Workbook](https://studiomoniker.com/projects/conditional-design-workbook); [Conditional Design manifesto](https://conditionaldesign.org/manifesto/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/76-folded-matter.zip" }, { "schemaVersion": 2, "id": "77", "slug": "palimpsest-city", "name": "Palimpsest City", "brand": "SILT / An atlas of overwritten places", "family": "Avant-garde & experimental", "status": "ready", "thesis": "A place is several histories occupying the same coordinates.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Translucent blue, rust and charcoal plans overlap on parchment. Street names, contour marks and marginal testimony form a full-page atlas.", "navigation": "Peel historical layers, select an address, compare accounts", "typography": "Libre Baskerville / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Layer visibility", "Spatial evidence", "Address comparison" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Layer visibility", "Spatial evidence", "Address comparison" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Layer visibility", "Spatial evidence", "Address comparison" ] }, "patterns": [ "Layer visibility", "Spatial evidence", "Address comparison" ], "entryRoute": "/preview/77-palimpsest-city/start", "states": [ { "key": "address", "label": "One address across time", "route": "/preview/77-palimpsest-city/address" }, { "key": "accounts", "label": "Resident accounts", "route": "/preview/77-palimpsest-city/accounts" } ], "referenceImages": [ { "file": "/previews/77/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/77/485bdc63a257d312-desktop.jpg", "route": "/preview/77-palimpsest-city/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:10b90ec9c9605505c9721f604d3b3bee6fe304d9c52e46b22702add47487ab36", "sha256": "485bdc63a257d3122274bad6bc98a9ccdfdda269a073f9d8d0289899cfd0db75", "fullPage": false }, { "file": "/previews/77/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/77/d6dc5474c444a138-mobile.jpg", "route": "/preview/77-palimpsest-city/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:10b90ec9c9605505c9721f604d3b3bee6fe304d9c52e46b22702add47487ab36", "sha256": "d6dc5474c444a138579263ce95844a03db152e4ee31b548570a6511a772607ea", "fullPage": false }, { "file": "/previews/77/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/77/8e026fdbe484561b-detail.jpg", "route": "/preview/77-palimpsest-city/address", "viewport": { "width": 1440, "height": 1000 }, "state": "address", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:10b90ec9c9605505c9721f604d3b3bee6fe304d9c52e46b22702add47487ab36", "sha256": "8e026fdbe484561b57bffb0bcdf8ceafd5a1795152dc43175f72731a6b21beb8", "fullPage": false }, { "file": "/previews/77/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/77/9fdacba7a1d4acbb-full-page.jpg", "route": "/preview/77-palimpsest-city/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:10b90ec9c9605505c9721f604d3b3bee6fe304d9c52e46b22702add47487ab36", "sha256": "9fdacba7a1d4acbb48a075582fe1555c85f369c8743ab333ea92cf96305f7bff", "fullPage": true } ], "sourcePath": "src/designs/77-palimpsest-city", "neighbours": [ "16", "56" ], "researchSources": [ { "title": "Rafaël Rozendaal — Internet works", "url": "https://www.newrafael.com/internet?filter=website" }, { "title": "Aaron Koblin — The Wilderness Downtown", "url": "https://www.aaronkoblin.com/project/the-wilderness-downtown/" } ], "palette": { "page": "#e9e2cf", "ink": "#282a29", "accent": "#904b32", "surface": "#e9e2cf" }, "fonts": [ "Libre Baskerville", "IBM Plex Mono" ], "brief": "**Idea.** A place is several histories occupying the same coordinates.\n\n**Composition.** Translucent blue, rust and charcoal plans overlap on parchment. Street names, contour marks and marginal testimony form a full-page atlas.\n\n**Navigation and complete example.** Explore four fictional periods of the Silt railway district, select one of six addresses, compare its uses and read the resident accounts associated with it.\n\n**Responsive and inclusive behaviour.** The plan retains a square aspect ratio, with large numbered location controls and a text key underneath. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Use independently legible evidence layers and honest source labels; preserve spatial relationships when simplifying the map. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Rafaël Rozendaal — Internet works](https://www.newrafael.com/internet?filter=website); [Aaron Koblin — The Wilderness Downtown](https://www.aaronkoblin.com/project/the-wilderness-downtown/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/77-palimpsest-city.zip" }, { "schemaVersion": 2, "id": "78", "slug": "aperture-archive", "name": "Aperture Archive", "brand": "AFTER / Studies of the unlit city", "family": "Avant-garde & experimental", "status": "ready", "thesis": "A small opening gives a large collection a deliberate pace.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "A nearly black urban drawing is revealed through a circular aperture; lime coordinates and perimeter typography locate six exposures.", "navigation": "Step an aperture through exposures, open a contact sheet, read field notes", "typography": "Space Grotesk / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Aperture discovery", "Contact strip", "Exposure notes" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Aperture discovery", "Contact strip", "Exposure notes" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Aperture discovery", "Contact strip", "Exposure notes" ] }, "patterns": [ "Aperture discovery", "Contact strip", "Exposure notes" ], "entryRoute": "/preview/78-aperture-archive/start", "states": [ { "key": "exposure", "label": "Exposure and field note", "route": "/preview/78-aperture-archive/exposure" }, { "key": "collection", "label": "Complete contact sheet", "route": "/preview/78-aperture-archive/collection" } ], "referenceImages": [ { "file": "/previews/78/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/78/4582ac366b2d9c0b-desktop.jpg", "route": "/preview/78-aperture-archive/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f75d7dc2bdbefc34d8cb38bfa2beed0e61abb7d3274a6a17b6ac1ef4550e9c07", "sha256": "4582ac366b2d9c0b955c8bf027c4f2cab3b62976c270b24a399e7e14e6396242", "fullPage": false }, { "file": "/previews/78/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/78/fa6f164b7749db68-mobile.jpg", "route": "/preview/78-aperture-archive/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f75d7dc2bdbefc34d8cb38bfa2beed0e61abb7d3274a6a17b6ac1ef4550e9c07", "sha256": "fa6f164b7749db68b53a5d9c4ac909fd2f75bd1383b727565a2a6a6d5c132638", "fullPage": false }, { "file": "/previews/78/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/78/816e30bca0a4be0f-detail.jpg", "route": "/preview/78-aperture-archive/exposure", "viewport": { "width": 1440, "height": 1000 }, "state": "exposure", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f75d7dc2bdbefc34d8cb38bfa2beed0e61abb7d3274a6a17b6ac1ef4550e9c07", "sha256": "816e30bca0a4be0fcc06054f00e04d8f72394f7a45b9786f89de7cd6d2f8f442", "fullPage": false }, { "file": "/previews/78/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/78/8fedbdbfab1e98b6-full-page.jpg", "route": "/preview/78-aperture-archive/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f75d7dc2bdbefc34d8cb38bfa2beed0e61abb7d3274a6a17b6ac1ef4550e9c07", "sha256": "8fedbdbfab1e98b60df55383ebdf31c293648e4f686a346ee7321688938192dc", "fullPage": true } ], "sourcePath": "src/designs/78-aperture-archive", "neighbours": [ "22", "47" ], "researchSources": [ { "title": "Rafaël Rozendaal — Internet works", "url": "https://www.newrafael.com/internet?filter=website" }, { "title": "Aaron Koblin — The Wilderness Downtown", "url": "https://www.aaronkoblin.com/project/the-wilderness-downtown/" } ], "palette": { "page": "#0b1118", "ink": "#f3eee2", "accent": "#dded83", "surface": "#0b1118" }, "fonts": [ "Space Grotesk", "IBM Plex Mono" ], "brief": "**Idea.** A small opening gives a large collection a deliberate pace.\n\n**Composition.** A nearly black urban drawing is revealed through a circular aperture; lime coordinates and perimeter typography locate six exposures.\n\n**Navigation and complete example.** Inspect six original night-city vector exposures, move the aperture with native controls, read a field note and mark a favourite exposure.\n\n**Responsive and inclusive behaviour.** The aperture scene uses a compact landscape crop, while labelled previous/next controls and the full contact list remain visible. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Keep selective visibility as a discovery device, with a complete text index. Use purposeful crops and credited photographs when adapting the original vector study. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Rafaël Rozendaal — Internet works](https://www.newrafael.com/internet?filter=website); [Aaron Koblin — The Wilderness Downtown](https://www.aaronkoblin.com/project/the-wilderness-downtown/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/78-aperture-archive.zip" }, { "schemaVersion": 2, "id": "79", "slug": "frequency-house", "name": "Frequency House", "brand": "FREQUENCY HOUSE / After-hours transmission", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Tune a publication instead of moving through a menu.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "An enormous amber instrument dial occupies the page, with radial station labels, fine calibration ticks and the programme title nested at its centre.", "navigation": "Frequency dial, programme transcript and listening sequence", "typography": "Space Grotesk / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Frequency tuning", "Radial programme index", "Listening sequence" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Frequency tuning", "Radial programme index", "Listening sequence" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Frequency tuning", "Radial programme index", "Listening sequence" ] }, "patterns": [ "Frequency tuning", "Radial programme index", "Listening sequence" ], "entryRoute": "/preview/79-frequency-house/start", "states": [ { "key": "programme", "label": "Programme transcript", "route": "/preview/79-frequency-house/programme" }, { "key": "sequence", "label": "Listening sequence", "route": "/preview/79-frequency-house/sequence" } ], "referenceImages": [ { "file": "/previews/79/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/79/08aff7ddabd02b17-desktop.jpg", "route": "/preview/79-frequency-house/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c4945b8789daf0e1260ff4e99ee2858e29d7a3f3326abe467159d1b723a194c0", "sha256": "08aff7ddabd02b17348aaa71f9e67f29a9b6c051ad78536acdaa639e16de60e8", "fullPage": false }, { "file": "/previews/79/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/79/f0769f533d73e9e9-mobile.jpg", "route": "/preview/79-frequency-house/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c4945b8789daf0e1260ff4e99ee2858e29d7a3f3326abe467159d1b723a194c0", "sha256": "f0769f533d73e9e93e713b64997b8575133bfb7480da53c1a62c67b64de1550a", "fullPage": false }, { "file": "/previews/79/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/79/df0915ff36413eae-detail.jpg", "route": "/preview/79-frequency-house/programme", "viewport": { "width": 1440, "height": 1000 }, "state": "programme", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c4945b8789daf0e1260ff4e99ee2858e29d7a3f3326abe467159d1b723a194c0", "sha256": "df0915ff36413eaeacb292b4e583e059a09da4c9a1fab9798a24d13b4d354374", "fullPage": false }, { "file": "/previews/79/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/79/d89f3c535d5798ec-full-page.jpg", "route": "/preview/79-frequency-house/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:c4945b8789daf0e1260ff4e99ee2858e29d7a3f3326abe467159d1b723a194c0", "sha256": "d89f3c535d5798ecd29333029d023e6ea932b7f025e70b109cfcde554a018016", "fullPage": true } ], "sourcePath": "src/designs/79-frequency-house", "neighbours": [ "17", "40" ], "researchSources": [ { "title": "Radio Garden — About", "url": "https://radio.garden/settings/radio-garden" }, { "title": "Typatone", "url": "https://typatone.com/" } ], "palette": { "page": "#202322", "ink": "#f2e5cb", "accent": "#f3a75b", "surface": "#202322" }, "fonts": [ "Space Grotesk", "IBM Plex Mono" ], "brief": "**Idea.** Tune a publication instead of moving through a menu.\n\n**Composition.** An enormous amber instrument dial occupies the page, with radial station labels, fine calibration ticks and the programme title nested at its centre.\n\n**Navigation and complete example.** Tune six fictional late-night programmes, read their transcripts and liner notes, and save an ordered listening sequence. This silent specimen demonstrates tuning without a live radio dependency.\n\n**Responsive and inclusive behaviour.** The dial scales to the phone width. A labelled range and next/previous controls provide precise selection independent of spatial pointing. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Use meaningful frequency stops and programme content inside the instrument. Keep listening optional and offer complete transcripts. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Radio Garden — About](https://radio.garden/settings/radio-garden); [Typatone](https://typatone.com/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/79-frequency-house.zip" }, { "schemaVersion": 2, "id": "80", "slug": "braided-voices", "name": "Braided Voices", "brand": "COMMON HOUR / Four lives, one street", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Follow a life through the points where it crosses another.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Four coloured text strands travel down a warm page, crossing at shared moments. Quotes, times and connecting curves become the navigation.", "navigation": "Choose a narrator, switch at a crossing, compare recollections", "typography": "Libre Baskerville / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Braided narration", "Shared moments", "Parallel transcripts" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Braided narration", "Shared moments", "Parallel transcripts" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Braided narration", "Shared moments", "Parallel transcripts" ] }, "patterns": [ "Braided narration", "Shared moments", "Parallel transcripts" ], "entryRoute": "/preview/80-braided-voices/start", "states": [ { "key": "crossing", "label": "A shared moment", "route": "/preview/80-braided-voices/crossing" }, { "key": "transcript", "label": "Complete transcript", "route": "/preview/80-braided-voices/transcript" } ], "referenceImages": [ { "file": "/previews/80/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/80/f5ba6b9d21946242-desktop.jpg", "route": "/preview/80-braided-voices/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8081bb1ec25452d874a222d0b8ad4cb6be379ba967f85e72dc9c583cb0202fd3", "sha256": "f5ba6b9d219462421c640ee5776d2e64a4e5d63b548030a4bc096ec47cb7d558", "fullPage": false }, { "file": "/previews/80/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/80/8d1af8b400407515-mobile.jpg", "route": "/preview/80-braided-voices/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8081bb1ec25452d874a222d0b8ad4cb6be379ba967f85e72dc9c583cb0202fd3", "sha256": "8d1af8b4004075157f66b6204174ce4367011878a645214d9dfb63ea4be016ee", "fullPage": false }, { "file": "/previews/80/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/80/016bd64a93e10d8a-detail.jpg", "route": "/preview/80-braided-voices/crossing", "viewport": { "width": 1440, "height": 1000 }, "state": "crossing", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8081bb1ec25452d874a222d0b8ad4cb6be379ba967f85e72dc9c583cb0202fd3", "sha256": "016bd64a93e10d8ad15a258693905f8fd83b9ffd36e6b13e5a18b5bc2e37bb68", "fullPage": false }, { "file": "/previews/80/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/80/4404c04a94130824-full-page.jpg", "route": "/preview/80-braided-voices/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:8081bb1ec25452d874a222d0b8ad4cb6be379ba967f85e72dc9c583cb0202fd3", "sha256": "4404c04a94130824ffbef888d02b9011e39113f61e0a1ae68355e09b68bb3002", "fullPage": true } ], "sourcePath": "src/designs/80-braided-voices", "neighbours": [ "19", "73" ], "researchSources": [ { "title": "Aaron Koblin — The Wilderness Downtown", "url": "https://www.aaronkoblin.com/project/the-wilderness-downtown/" }, { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" } ], "palette": { "page": "#f5eee5", "ink": "#292724", "accent": "#714347", "surface": "#f5eee5" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Idea.** Follow a life through the points where it crosses another.\n\n**Composition.** Four coloured text strands travel down a warm page, crossing at shared moments. Quotes, times and connecting curves become the navigation.\n\n**Navigation and complete example.** Follow four neighbours through six moments in one day, switch voices at a crossing and compare their accounts in a complete transcript.\n\n**Responsive and inclusive behaviour.** Narrator controls remain explicit; each chronological crossing becomes a compact two-column weave, then a readable stacked transcript on very narrow screens. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Maintain different voices with common coordinates. Give readers a way to see who is speaking without relying on strand colour. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Aaron Koblin — The Wilderness Downtown](https://www.aaronkoblin.com/project/the-wilderness-downtown/); [Conditional Design manifesto](https://conditionaldesign.org/manifesto/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/80-braided-voices.zip" }, { "schemaVersion": 2, "id": "81", "slug": "counterpoint", "name": "Counterpoint", "brand": "COUNTERPOINT / A commission in two voices", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Two accounts deserve equal space without pretending to agree.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Opposing coral and aubergine columns run edge to edge. One shared seam controls the space between monumental serif headlines and paired passages.", "navigation": "Adjust the seam, synchronise passages, inspect common sources", "typography": "Libre Baskerville / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Split reading surface", "Adjustable seam", "Paired argument" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Split reading surface", "Adjustable seam", "Paired argument" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Split reading surface", "Adjustable seam", "Paired argument" ] }, "patterns": [ "Split reading surface", "Adjustable seam", "Paired argument" ], "entryRoute": "/preview/81-counterpoint/start", "states": [ { "key": "passage", "label": "A paired passage", "route": "/preview/81-counterpoint/passage" }, { "key": "sources", "label": "Shared source material", "route": "/preview/81-counterpoint/sources" } ], "referenceImages": [ { "file": "/previews/81/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/81/41c394f501c5587d-desktop.jpg", "route": "/preview/81-counterpoint/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d54b61795125482b3a66d724e52295c6236b82d974922a88dc6b35b152448fb0", "sha256": "41c394f501c5587db9a2ca84c93e145ac1b80e76f76fa068894e8f1843bcd46f", "fullPage": false }, { "file": "/previews/81/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/81/6940abcf03e08bc8-mobile.jpg", "route": "/preview/81-counterpoint/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d54b61795125482b3a66d724e52295c6236b82d974922a88dc6b35b152448fb0", "sha256": "6940abcf03e08bc893c565fb420cba869cf5e5ebc76aedfc694c0e174459c2b6", "fullPage": false }, { "file": "/previews/81/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/81/8f82af00befdef9b-detail.jpg", "route": "/preview/81-counterpoint/passage", "viewport": { "width": 1440, "height": 1000 }, "state": "passage", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d54b61795125482b3a66d724e52295c6236b82d974922a88dc6b35b152448fb0", "sha256": "8f82af00befdef9b8c9d7c10813143b335fff3a900e57cde1d325930c35cd996", "fullPage": false }, { "file": "/previews/81/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/81/5d3ea64d3f222cb4-full-page.jpg", "route": "/preview/81-counterpoint/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d54b61795125482b3a66d724e52295c6236b82d974922a88dc6b35b152448fb0", "sha256": "5d3ea64d3f222cb4ec6eb53b99dc581a5cdef7a5d41a7261e657eed52acb37b0", "fullPage": true } ], "sourcePath": "src/designs/81-counterpoint", "neighbours": [ "05", "80" ], "researchSources": [ { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" }, { "title": "Rafaël Rozendaal — Internet works", "url": "https://www.newrafael.com/internet?filter=website" } ], "palette": { "page": "#ed623f", "ink": "#241d2b", "accent": "#35265a", "surface": "#ed623f" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Idea.** Two accounts deserve equal space without pretending to agree.\n\n**Composition.** Opposing coral and aubergine columns run edge to edge. One shared seam controls the space between monumental serif headlines and paired passages.\n\n**Navigation and complete example.** Read six paired accounts of one fictional public-art commission, adjust the balance, isolate a pair and examine the common source notes.\n\n**Responsive and inclusive behaviour.** The two accounts stack in reading order with clear speaker names. The balance control becomes three labelled focus choices; no text is squeezed into unusable columns. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Preserve the tension between two independently voiced accounts. Changing the seam must never erase the less favoured side. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Conditional Design manifesto](https://conditionaldesign.org/manifesto/); [Rafaël Rozendaal — Internet works](https://www.newrafael.com/internet?filter=website). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/81-counterpoint.zip" }, { "schemaVersion": 2, "id": "82", "slug": "strata-descent", "name": "Strata Descent", "brand": "BELOW / A section through remembered ground", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Depth is both the navigation and the argument of the archive.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "A continuous geological section descends from chalk through ochre and rust to blue-black. Depth markers and embedded artefacts replace a conventional page grid.", "navigation": "Depth anchors, embedded artefacts and collected cross-section", "typography": "Archivo Black / Libre Baskerville", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Depth navigation", "Embedded artefacts", "Cross-section collection" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Depth navigation", "Embedded artefacts", "Cross-section collection" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Depth navigation", "Embedded artefacts", "Cross-section collection" ] }, "patterns": [ "Depth navigation", "Embedded artefacts", "Cross-section collection" ], "entryRoute": "/preview/82-strata-descent/start", "states": [ { "key": "artefact", "label": "An excavated artefact", "route": "/preview/82-strata-descent/artefact" }, { "key": "section", "label": "Collected cross-section", "route": "/preview/82-strata-descent/section" } ], "referenceImages": [ { "file": "/previews/82/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/82/79eab04df9d95d77-desktop.jpg", "route": "/preview/82-strata-descent/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:30c03e52e633e054128c2b8ce78a9ba5ff12b9a7caaf80626040fc408ef140a9", "sha256": "79eab04df9d95d77ab307a825eba4482a548e537a3be10dcedd2c946b51a65bd", "fullPage": false }, { "file": "/previews/82/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/82/cfe327b0a6fd696f-mobile.jpg", "route": "/preview/82-strata-descent/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:30c03e52e633e054128c2b8ce78a9ba5ff12b9a7caaf80626040fc408ef140a9", "sha256": "cfe327b0a6fd696fcbb73412aa2e5241c8f877d6f15fb3913f9d35653b6bfdc7", "fullPage": false }, { "file": "/previews/82/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/82/2d898be53ce61e27-detail.jpg", "route": "/preview/82-strata-descent/artefact", "viewport": { "width": 1440, "height": 1000 }, "state": "artefact", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:30c03e52e633e054128c2b8ce78a9ba5ff12b9a7caaf80626040fc408ef140a9", "sha256": "2d898be53ce61e2777ac4c4acc8744fc6bee81df085a6f58dc4c540958da3896", "fullPage": false }, { "file": "/previews/82/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/82/0b6db40342be72cb-full-page.jpg", "route": "/preview/82-strata-descent/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:30c03e52e633e054128c2b8ce78a9ba5ff12b9a7caaf80626040fc408ef140a9", "sha256": "0b6db40342be72cb4d7c3d25faa998b05e561de2fb84a4adbf662726f36fe4be", "fullPage": true } ], "sourcePath": "src/designs/82-strata-descent", "neighbours": [ "08", "16" ], "researchSources": [ { "title": "Neal Agarwal — The Deep Sea", "url": "https://neal.fun/deep-sea/" } ], "palette": { "page": "#eee0bf", "ink": "#34251f", "accent": "#8e3f2b", "surface": "#eee0bf" }, "fonts": [ "Archivo Black", "Libre Baskerville" ], "brief": "**Idea.** Depth is both the navigation and the argument of the archive.\n\n**Composition.** A continuous geological section descends from chalk through ochre and rust to blue-black. Depth markers and embedded artefacts replace a conventional page grid.\n\n**Navigation and complete example.** Descend through six invented layers of a former railway site, examine a found object in each and collect a cross-section of findings.\n\n**Responsive and inclusive behaviour.** Depth markers stay in a narrow rail; content occupies the remaining width. All strata have labelled anchor links, so scrolling distance is optional. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Use depth for meaningful chronology or scale, not merely a long scroll. Clearly distinguish fictional findings from research evidence. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Neal Agarwal — The Deep Sea](https://neal.fun/deep-sea/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/82-strata-descent.zip" }, { "schemaVersion": 2, "id": "83", "slug": "forking-edition", "name": "Forking Edition", "brand": "The room that remembers / A branching novella", "family": "Avant-garde & experimental", "status": "ready", "thesis": "The sentence itself can be a doorway into another reading.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "A nearly bare cream page carries large literary prose. Underlined branching phrases, indentation and a small path trace do the work of a navigation system.", "navigation": "Choose phrases, revisit a fork, reach an ending and inspect the reading path", "typography": "Libre Baskerville / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Inline branching prose", "Reversible reading path", "Three endings" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Inline branching prose", "Reversible reading path", "Three endings" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Inline branching prose", "Reversible reading path", "Three endings" ] }, "patterns": [ "Inline branching prose", "Reversible reading path", "Three endings" ], "entryRoute": "/preview/83-forking-edition/start", "states": [ { "key": "passage", "label": "An opened passage", "route": "/preview/83-forking-edition/passage" }, { "key": "path", "label": "Your reading path", "route": "/preview/83-forking-edition/path" } ], "referenceImages": [ { "file": "/previews/83/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/83/d067839a1f671e1f-desktop.jpg", "route": "/preview/83-forking-edition/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4377137e9292c9787b1fc4c503cca3632fdaab2da7cb30103f5e839a3a9336a0", "sha256": "d067839a1f671e1fbd31039300cfeb74eeb60d4377228787579d4eba121611e6", "fullPage": false }, { "file": "/previews/83/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/83/9bd5ad1f80731b2d-mobile.jpg", "route": "/preview/83-forking-edition/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4377137e9292c9787b1fc4c503cca3632fdaab2da7cb30103f5e839a3a9336a0", "sha256": "9bd5ad1f80731b2d1e3c81e67438dd9173c5cbc027554429e54661dc295d2746", "fullPage": false }, { "file": "/previews/83/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/83/92ff2e2a0a933459-detail.jpg", "route": "/preview/83-forking-edition/passage", "viewport": { "width": 1440, "height": 1000 }, "state": "passage", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4377137e9292c9787b1fc4c503cca3632fdaab2da7cb30103f5e839a3a9336a0", "sha256": "92ff2e2a0a933459b466bbdf917439226a35364a45cac1c0a470688944a161d2", "fullPage": false }, { "file": "/previews/83/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/83/f29c475e8ceec915-full-page.jpg", "route": "/preview/83-forking-edition/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:4377137e9292c9787b1fc4c503cca3632fdaab2da7cb30103f5e839a3a9336a0", "sha256": "f29c475e8ceec9153b5819e0f3fc486a112108b7b3b708e68c09a69342a6b466", "fullPage": true } ], "sourcePath": "src/designs/83-forking-edition", "neighbours": [ "07", "14" ], "researchSources": [ { "title": "Typatone", "url": "https://typatone.com/" }, { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" } ], "palette": { "page": "#f7f4ec", "ink": "#232b28", "accent": "#446c56", "surface": "#f7f4ec" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Idea.** The sentence itself can be a doorway into another reading.\n\n**Composition.** A nearly bare cream page carries large literary prose. Underlined branching phrases, indentation and a small path trace do the work of a navigation system.\n\n**Navigation and complete example.** Read a complete miniature branching novella: three opening choices lead through six passages to three distinct endings. Undo a choice or review the route without losing your place.\n\n**Responsive and inclusive behaviour.** Prose keeps a comfortable line length and inline choices wrap naturally. A visible back action complements the embedded links. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Write choices as part of the voice, and make every branch pay off in content. Avoid turning the story into a survey or a card-based wizard. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Typatone](https://typatone.com/); [Conditional Design manifesto](https://conditionaldesign.org/manifesto/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/83-forking-edition.zip" }, { "schemaVersion": 2, "id": "84", "slug": "causal-theatre", "name": "Causal Theatre", "brand": "A parcel’s progress / A small systems theatre", "family": "Avant-garde & experimental", "status": "ready", "thesis": "A visitor should be able to change the argument and see why it changes.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Oversized cut-out machines form a pastel theatre. A sorting tower, conveyor, warehouse and delivery cart span the page; explanations sit inside the system.", "navigation": "Change parcel conditions, inspect consequences, compare two runs", "typography": "Space Grotesk / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Causal controls", "Narrative simulation", "Outcome comparison" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Causal controls", "Narrative simulation", "Outcome comparison" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Causal controls", "Narrative simulation", "Outcome comparison" ] }, "patterns": [ "Causal controls", "Narrative simulation", "Outcome comparison" ], "entryRoute": "/preview/84-causal-theatre/start", "states": [ { "key": "explanation", "label": "Why the queue changed", "route": "/preview/84-causal-theatre/explanation" }, { "key": "compare", "label": "Compare two runs", "route": "/preview/84-causal-theatre/compare" } ], "referenceImages": [ { "file": "/previews/84/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/84/0b8b79f768a84a7e-desktop.jpg", "route": "/preview/84-causal-theatre/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:14a3ad8bb165c8ae147862a3d9c29c8d752c92c5c8e6d572dbb8dd129e74e98a", "sha256": "0b8b79f768a84a7ebcdb4e045e7b3c9cd58a414953fc3de2acbc05465007bf10", "fullPage": false }, { "file": "/previews/84/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/84/c195fd68843841a5-mobile.jpg", "route": "/preview/84-causal-theatre/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:14a3ad8bb165c8ae147862a3d9c29c8d752c92c5c8e6d572dbb8dd129e74e98a", "sha256": "c195fd68843841a538e79631301b95135b6db7abd396a20a5d06bfb09d0e92b5", "fullPage": false }, { "file": "/previews/84/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/84/171d1d9f3868d21d-detail.jpg", "route": "/preview/84-causal-theatre/explanation", "viewport": { "width": 1440, "height": 1000 }, "state": "explanation", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:14a3ad8bb165c8ae147862a3d9c29c8d752c92c5c8e6d572dbb8dd129e74e98a", "sha256": "171d1d9f3868d21d3eab55c245df35673cf2d9120b717bd53913cc535fc5cd0c", "fullPage": false }, { "file": "/previews/84/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/84/9687f953ae21b6b7-full-page.jpg", "route": "/preview/84-causal-theatre/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:14a3ad8bb165c8ae147862a3d9c29c8d752c92c5c8e6d572dbb8dd129e74e98a", "sha256": "9687f953ae21b6b7a5541bd100f74853b0311f754eb86788bc753b85f70a723d", "fullPage": true } ], "sourcePath": "src/designs/84-causal-theatre", "neighbours": [ "33", "49" ], "researchSources": [ { "title": "Nicky Case — The Wisdom and/or Madness of Crowds", "url": "https://ncase.me/crowds/" }, { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" } ], "palette": { "page": "#eadfcc", "ink": "#292c34", "accent": "#b94737", "surface": "#eadfcc" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Idea.** A visitor should be able to change the argument and see why it changes.\n\n**Composition.** Oversized cut-out machines form a pastel theatre. A sorting tower, conveyor, warehouse and delivery cart span the page; explanations sit inside the system.\n\n**Navigation and complete example.** Change incoming parcels, sorting capacity and route frequency in a deterministic parcel-system model. Inspect the bottleneck and save two outcomes for comparison.\n\n**Responsive and inclusive behaviour.** The stage becomes a vertical process diagram with visible connecting arrows. Native number inputs and labelled presets replace any need to drag machinery. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Expose the model’s assumptions and connect each control to a visible consequence. Do not present a toy model as a real operational forecast. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Nicky Case — The Wisdom and/or Madness of Crowds](https://ncase.me/crowds/); [Conditional Design manifesto](https://conditionaldesign.org/manifesto/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/84-causal-theatre.zip" }, { "schemaVersion": 2, "id": "85", "slug": "redaction-office", "name": "Redaction Office", "brand": "REDACTION OFFICE / Dossier 014", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Revealing a line should change the meaning of what surrounds it.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Huge black redaction bands cut across pale lavender paper. Numbered evidence margins and stark oversized headings turn disclosure into the page architecture.", "navigation": "Reveal passages, compare annotations, reconstruct the dossier timeline", "typography": "IBM Plex Mono / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Progressive disclosure", "Conflicting annotations", "Evidence timeline" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Progressive disclosure", "Conflicting annotations", "Evidence timeline" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Progressive disclosure", "Conflicting annotations", "Evidence timeline" ] }, "patterns": [ "Progressive disclosure", "Conflicting annotations", "Evidence timeline" ], "entryRoute": "/preview/85-redaction-office/start", "states": [ { "key": "annotation", "label": "A contested annotation", "route": "/preview/85-redaction-office/annotation" }, { "key": "timeline", "label": "Reconstructed timeline", "route": "/preview/85-redaction-office/timeline" } ], "referenceImages": [ { "file": "/previews/85/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/85/cd457beb3090b7ff-desktop.jpg", "route": "/preview/85-redaction-office/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:976f769c869dd6a0944e2310f03dc45dfc203e463d2c3423f0418912ba240e22", "sha256": "cd457beb3090b7ff327e453eb6ca69baee85e5ae4146a33e538d0d810a837540", "fullPage": false }, { "file": "/previews/85/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/85/1d0ab16937fc282c-mobile.jpg", "route": "/preview/85-redaction-office/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:976f769c869dd6a0944e2310f03dc45dfc203e463d2c3423f0418912ba240e22", "sha256": "1d0ab16937fc282c51eee73e959c37b0eaff638b5ce4051b87c2da5d635d230d", "fullPage": false }, { "file": "/previews/85/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/85/8c8a8428f92c2ac6-detail.jpg", "route": "/preview/85-redaction-office/annotation", "viewport": { "width": 1440, "height": 1000 }, "state": "annotation", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:976f769c869dd6a0944e2310f03dc45dfc203e463d2c3423f0418912ba240e22", "sha256": "8c8a8428f92c2ac6e09c05ed4d8a21da10f486cc2ead821a340d3d8da373e098", "fullPage": false }, { "file": "/previews/85/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/85/e941b6033e100d6b-full-page.jpg", "route": "/preview/85-redaction-office/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:976f769c869dd6a0944e2310f03dc45dfc203e463d2c3423f0418912ba240e22", "sha256": "e941b6033e100d6bcfab89882d4aae30c74a48ef3d464d3e9ba7275317cfeeb4", "fullPage": true } ], "sourcePath": "src/designs/85-redaction-office", "neighbours": [ "10", "45" ], "researchSources": [ { "title": "Moniker — Click Click Click", "url": "https://studiomoniker.com/projects/click-click-click" }, { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" } ], "palette": { "page": "#e8e0f1", "ink": "#19171c", "accent": "#633d7c", "surface": "#e8e0f1" }, "fonts": [ "IBM Plex Mono", "DM Sans" ], "brief": "**Idea.** Revealing a line should change the meaning of what surrounds it.\n\n**Composition.** Huge black redaction bands cut across pale lavender paper. Numbered evidence margins and stark oversized headings turn disclosure into the page architecture.\n\n**Navigation and complete example.** Reveal six passages in a fictional correspondence about a closed public garden, inspect two conflicting annotations and arrange the documented events chronologically.\n\n**Responsive and inclusive behaviour.** Redaction controls wrap as full-width bands, with reveal labels always visible and the evidence margin moved above each passage. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Keep hidden text fictional or authorised for disclosure. Reveals should add context, and a full-dossier action must offer the same information without a puzzle. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Moniker — Click Click Click](https://studiomoniker.com/projects/click-click-click); [Conditional Design manifesto](https://conditionaldesign.org/manifesto/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/85-redaction-office.zip" }, { "schemaVersion": 2, "id": "86", "slug": "registration-press", "name": "Registration Press", "brand": "OFF REGISTER / An exhibition in two inks", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Alignment is an editorial act: the layers only make sense together.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Cyan and magenta print plates cross the whole viewport. Crop marks, overprinted letterforms and a large registration target make the browser feel like a sheet on a press.", "navigation": "Toggle ink plates, snap registration, reveal an essay and issue a print sheet", "typography": "Archivo Black / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Ink plate controls", "Registration alignment", "Local print edition" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Ink plate controls", "Registration alignment", "Local print edition" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Ink plate controls", "Registration alignment", "Local print edition" ] }, "patterns": [ "Ink plate controls", "Registration alignment", "Local print edition" ], "entryRoute": "/preview/86-registration-press/start", "states": [ { "key": "essay", "label": "The registration essay", "route": "/preview/86-registration-press/essay" }, { "key": "edition", "label": "Print edition", "route": "/preview/86-registration-press/edition" } ], "referenceImages": [ { "file": "/previews/86/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/86/0da3dff4a75e0dba-desktop.jpg", "route": "/preview/86-registration-press/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:272d064b367458ded614fefec9e7d78bdb0ff78b1721ce7b3ae2bc74442aef87", "sha256": "0da3dff4a75e0dbac3493a282ca10e9a4b50957d754986e740957ed636c70a07", "fullPage": false }, { "file": "/previews/86/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/86/537c521851df4eb3-mobile.jpg", "route": "/preview/86-registration-press/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:272d064b367458ded614fefec9e7d78bdb0ff78b1721ce7b3ae2bc74442aef87", "sha256": "537c521851df4eb348720339ef90ccd08b0b18ec620b2e8c0f0ee5d9d216eaa0", "fullPage": false }, { "file": "/previews/86/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/86/2a0f724d583699b2-detail.jpg", "route": "/preview/86-registration-press/essay", "viewport": { "width": 1440, "height": 1000 }, "state": "essay", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:272d064b367458ded614fefec9e7d78bdb0ff78b1721ce7b3ae2bc74442aef87", "sha256": "2a0f724d583699b23d49592fdf0fceb3aaa9563aef36c273804f927af7a3b466", "fullPage": false }, { "file": "/previews/86/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/86/6b4991d5bd098fdd-full-page.jpg", "route": "/preview/86-registration-press/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:272d064b367458ded614fefec9e7d78bdb0ff78b1721ce7b3ae2bc74442aef87", "sha256": "6b4991d5bd098fdd22301d81f0730ac5d36f1a3831be02d3430aaadeaf17b77d", "fullPage": true } ], "sourcePath": "src/designs/86-registration-press", "neighbours": [ "32", "45" ], "researchSources": [ { "title": "Moniker — Conditional Design Workbook", "url": "https://studiomoniker.com/projects/conditional-design-workbook" }, { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" } ], "palette": { "page": "#f7f1df", "ink": "#182d33", "accent": "#be175a", "surface": "#f7f1df" }, "fonts": [ "Archivo Black", "IBM Plex Mono" ], "brief": "**Idea.** Alignment is an editorial act: the layers only make sense together.\n\n**Composition.** Cyan and magenta print plates cross the whole viewport. Crop marks, overprinted letterforms and a large registration target make the browser feel like a sheet on a press.\n\n**Navigation and complete example.** Align two ink plates for a fictional print exhibition, inspect six workshop notes and prepare a local print sheet containing the selected registration state.\n\n**Responsive and inclusive behaviour.** The print surface scales within the page; labelled numeric offset and snap buttons offer precise control without dragging. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Use overprinting for large display layers while keeping reading text single-colour. The registration state should expose a meaningful compositional relationship. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Moniker — Conditional Design Workbook](https://studiomoniker.com/projects/conditional-design-workbook); [Conditional Design manifesto](https://conditionaldesign.org/manifesto/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/86-registration-press.zip" }, { "schemaVersion": 2, "id": "87", "slug": "inside-the-object", "name": "Inside the Object", "brand": "OBJECT / Issue 07: the mechanical camera", "family": "Avant-garde & experimental", "status": "ready", "thesis": "The parts of an object can be the architecture of its story.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "An enormous exploded camera floats on a pale technical field. Thin leaders connect labelled parts; selecting a component opens its account in the space the object occupied.", "navigation": "Assemble and separate the camera, choose a component, follow a repair sequence", "typography": "Space Grotesk / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Object as navigation", "Exploded view", "Repair sequence" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Object as navigation", "Exploded view", "Repair sequence" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Object as navigation", "Exploded view", "Repair sequence" ] }, "patterns": [ "Object as navigation", "Exploded view", "Repair sequence" ], "entryRoute": "/preview/87-inside-the-object/start", "states": [ { "key": "component", "label": "Component history", "route": "/preview/87-inside-the-object/component" }, { "key": "repair", "label": "Repair sequence", "route": "/preview/87-inside-the-object/repair" } ], "referenceImages": [ { "file": "/previews/87/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/87/0045d92e105c4006-desktop.jpg", "route": "/preview/87-inside-the-object/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d06add645da38d3f07ddcf7a2c1020cb1fbdfc45d7aa1d084486031c98953fdb", "sha256": "0045d92e105c4006359cf8d9447592006fc8915055449671db356f98e5c61963", "fullPage": false }, { "file": "/previews/87/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/87/ce7fdedda6c1cc64-mobile.jpg", "route": "/preview/87-inside-the-object/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d06add645da38d3f07ddcf7a2c1020cb1fbdfc45d7aa1d084486031c98953fdb", "sha256": "ce7fdedda6c1cc645a9162f3201331046fd63eccb20e8faa4c204c26e8f39bcf", "fullPage": false }, { "file": "/previews/87/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/87/b398554da1ed4521-detail.jpg", "route": "/preview/87-inside-the-object/component", "viewport": { "width": 1440, "height": 1000 }, "state": "component", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d06add645da38d3f07ddcf7a2c1020cb1fbdfc45d7aa1d084486031c98953fdb", "sha256": "b398554da1ed452106bd3fa04ed196d84654dc7d914f9e118a39b6590d3af992", "fullPage": false }, { "file": "/previews/87/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/87/5907c3c2135a4f4b-full-page.jpg", "route": "/preview/87-inside-the-object/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:d06add645da38d3f07ddcf7a2c1020cb1fbdfc45d7aa1d084486031c98953fdb", "sha256": "5907c3c2135a4f4b432e1f080dfda416a130156c08738bde5b5a81b59b107bc8", "fullPage": true } ], "sourcePath": "src/designs/87-inside-the-object", "neighbours": [ "27", "60" ], "researchSources": [ { "title": "Rafaël Rozendaal — Internet works", "url": "https://www.newrafael.com/internet?filter=website" }, { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" } ], "palette": { "page": "#f2f3ee", "ink": "#263732", "accent": "#466d61", "surface": "#f2f3ee" }, "fonts": [ "Space Grotesk", "IBM Plex Mono" ], "brief": "**Idea.** The parts of an object can be the architecture of its story.\n\n**Composition.** An enormous exploded camera floats on a pale technical field. Thin leaders connect labelled parts; selecting a component opens its account in the space the object occupied.\n\n**Navigation and complete example.** Separate a simplified camera into six components, read their roles and histories, then work through a six-step fictional inspection sequence.\n\n**Responsive and inclusive behaviour.** The exploded drawing remains contained and scales; a numbered component list supplies large touch targets and complete text navigation. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Use a simplified, clearly labelled object model. Keep repair guidance demonstrative unless verified for a real device. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Rafaël Rozendaal — Internet works](https://www.newrafael.com/internet?filter=website); [Conditional Design manifesto](https://conditionaldesign.org/manifesto/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/87-inside-the-object.zip" }, { "schemaVersion": 2, "id": "88", "slug": "recursive-commons", "name": "Recursive Commons", "brand": "ROOM WITHIN / A museum of ordinary things", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Enter a collection by changing the composition of the entire page.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Unequal nested rectangles cover the browser with ochre, teal, rose and cream. Each region is both a surface and a doorway into a smaller collection.", "navigation": "Enter regions, descend into object groups, collapse through ancestry", "typography": "Space Grotesk / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Recursive navigation", "Planar containment", "Persistent ancestry" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Recursive navigation", "Planar containment", "Persistent ancestry" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Recursive navigation", "Planar containment", "Persistent ancestry" ] }, "patterns": [ "Recursive navigation", "Planar containment", "Persistent ancestry" ], "entryRoute": "/preview/88-recursive-commons/start", "states": [ { "key": "object", "label": "Object record", "route": "/preview/88-recursive-commons/object" }, { "key": "collection", "label": "Saved cabinet", "route": "/preview/88-recursive-commons/collection" } ], "referenceImages": [ { "file": "/previews/88/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/88/e3b2ef87888612c4-desktop.jpg", "route": "/preview/88-recursive-commons/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f5cd2c5b4bf9598e687cbcd80e87806d4492c2ae689e1cea70ff8632cc6acab2", "sha256": "e3b2ef87888612c41cb7c9dcf82a00fd06b68f5245ec00ac661681f7e01c4b0f", "fullPage": false }, { "file": "/previews/88/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/88/f39ac555f4a9d629-mobile.jpg", "route": "/preview/88-recursive-commons/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f5cd2c5b4bf9598e687cbcd80e87806d4492c2ae689e1cea70ff8632cc6acab2", "sha256": "f39ac555f4a9d629122b4f83d60ce1b97532c0ba23885f570b0716da9a6f5ccd", "fullPage": false }, { "file": "/previews/88/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/88/0c161caa8c4fc00b-detail.jpg", "route": "/preview/88-recursive-commons/object", "viewport": { "width": 1440, "height": 1000 }, "state": "object", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f5cd2c5b4bf9598e687cbcd80e87806d4492c2ae689e1cea70ff8632cc6acab2", "sha256": "0c161caa8c4fc00b8f2f521effedfe287813feb6fd2ef5820aecec4c82d48490", "fullPage": false }, { "file": "/previews/88/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/88/5d33f02be30f05ae-full-page.jpg", "route": "/preview/88-recursive-commons/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f5cd2c5b4bf9598e687cbcd80e87806d4492c2ae689e1cea70ff8632cc6acab2", "sha256": "5d33f02be30f05aef596e7603617f3d8c2b1a26b6c851767eab8d00ef838d29d", "fullPage": true } ], "sourcePath": "src/designs/88-recursive-commons", "neighbours": [ "48", "50" ], "researchSources": [ { "title": "Rafaël Rozendaal — Internet works", "url": "https://www.newrafael.com/internet?filter=website" }, { "title": "Bruno Simon — HTML version", "url": "https://bruno-simon.com/html/" } ], "palette": { "page": "#edb935", "ink": "#233a39", "accent": "#315c71", "surface": "#edb935" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Idea.** Enter a collection by changing the composition of the entire page.\n\n**Composition.** Unequal nested rectangles cover the browser with ochre, teal, rose and cream. Each region is both a surface and a doorway into a smaller collection.\n\n**Navigation and complete example.** Enter three wings of a fictional museum, subdivide their rooms, read six object records and keep a personal cabinet. An ancestry trail and full index provide direct access.\n\n**Responsive and inclusive behaviour.** The planar composition becomes a vertically nested set of large regions; ancestry and sibling navigation remain explicit. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Make each level change the whole composition while retaining a clear parent path. Avoid an endless zoom with no readable destination. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Rafaël Rozendaal — Internet works](https://www.newrafael.com/internet?filter=website); [Bruno Simon — HTML version](https://bruno-simon.com/html/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/88-recursive-commons.zip" }, { "schemaVersion": 2, "id": "89", "slug": "hollow-gallery", "name": "Hollow Gallery", "brand": "HOLLOW / An exhibition of what is missing", "family": "Avant-garde & experimental", "status": "ready", "thesis": "The empty part of an image can carry the invitation.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Monumental dark silhouettes contain pale cut-outs. Titles and entrances inhabit the negative spaces, with burnt-orange margins and almost no conventional container furniture.", "navigation": "Enter negative spaces, reverse figure and ground, assemble a three-work show", "typography": "Archivo Black / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Negative-space navigation", "Figure-ground reversal", "Exhibition assembly" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Negative-space navigation", "Figure-ground reversal", "Exhibition assembly" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Negative-space navigation", "Figure-ground reversal", "Exhibition assembly" ] }, "patterns": [ "Negative-space navigation", "Figure-ground reversal", "Exhibition assembly" ], "entryRoute": "/preview/89-hollow-gallery/start", "states": [ { "key": "work", "label": "Work and process", "route": "/preview/89-hollow-gallery/work" }, { "key": "show", "label": "Your three-work exhibition", "route": "/preview/89-hollow-gallery/show" } ], "referenceImages": [ { "file": "/previews/89/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/89/4af94d7e5ed4975c-desktop.jpg", "route": "/preview/89-hollow-gallery/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fafa833ffc78d35d59e41b03a5e44ae50a139157f7cf51fe77199bc449266c27", "sha256": "4af94d7e5ed4975c0ec46605b577cdffdaa609bf9d06b66de9a037f0825c1040", "fullPage": false }, { "file": "/previews/89/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/89/78a103e0638dc516-mobile.jpg", "route": "/preview/89-hollow-gallery/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fafa833ffc78d35d59e41b03a5e44ae50a139157f7cf51fe77199bc449266c27", "sha256": "78a103e0638dc516c7b9c6615b2680e8920dd7dcfa6c1c1f7512b025c8df1464", "fullPage": false }, { "file": "/previews/89/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/89/c281f0156991bdd6-detail.jpg", "route": "/preview/89-hollow-gallery/work", "viewport": { "width": 1440, "height": 1000 }, "state": "work", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fafa833ffc78d35d59e41b03a5e44ae50a139157f7cf51fe77199bc449266c27", "sha256": "c281f0156991bdd6d9c1a00931aa14ae85df7e4870031f5ef317ad730168b73f", "fullPage": false }, { "file": "/previews/89/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/89/81f2814307f9a95f-full-page.jpg", "route": "/preview/89-hollow-gallery/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:fafa833ffc78d35d59e41b03a5e44ae50a139157f7cf51fe77199bc449266c27", "sha256": "81f2814307f9a95f350583aa4bf05604140bcfb4038b6f3697a253301b53f541", "fullPage": true } ], "sourcePath": "src/designs/89-hollow-gallery", "neighbours": [ "47", "48" ], "researchSources": [ { "title": "Rafaël Rozendaal — Internet works", "url": "https://www.newrafael.com/internet?filter=website" } ], "palette": { "page": "#e7e6df", "ink": "#161b18", "accent": "#cb5c44", "surface": "#e7e6df" }, "fonts": [ "Archivo Black", "DM Sans" ], "brief": "**Idea.** The empty part of an image can carry the invitation.\n\n**Composition.** Monumental dark silhouettes contain pale cut-outs. Titles and entrances inhabit the negative spaces, with burnt-orange margins and almost no conventional container furniture.\n\n**Navigation and complete example.** Enter six original silhouette studies through their cut-outs, inspect the process behind a work, reverse its figure-ground relation and assemble up to three works in a local exhibition.\n\n**Responsive and inclusive behaviour.** Each cut-out fills the available width and contains a large labelled button. The complete work index remains visible in reading order. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Make the empty area a real, legible entrance. Preserve labels and focus outlines when silhouettes become complex. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Rafaël Rozendaal — Internet works](https://www.newrafael.com/internet?filter=website). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/89-hollow-gallery.zip" }, { "schemaVersion": 2, "id": "90", "slug": "mobius-journal", "name": "Mobius Journal", "brand": "BOTH SIDES / A walking edition", "family": "Avant-garde & experimental", "status": "ready", "thesis": "A finished account and its discarded drafts belong to the same surface.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "A cobalt ribbon folds across a cream field, with numbered seams, reversed faces and long horizontal passages. Flipping exposes process writing on the back.", "navigation": "Follow six seams, flip finished writing to field notes, inspect the finite index", "typography": "Libre Baskerville / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Two-sided reading", "Ribbon navigation", "Draft comparison" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Two-sided reading", "Ribbon navigation", "Draft comparison" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Two-sided reading", "Ribbon navigation", "Draft comparison" ] }, "patterns": [ "Two-sided reading", "Ribbon navigation", "Draft comparison" ], "entryRoute": "/preview/90-mobius-journal/start", "states": [ { "key": "station", "label": "A station in two versions", "route": "/preview/90-mobius-journal/station" }, { "key": "index", "label": "All six seams", "route": "/preview/90-mobius-journal/index" } ], "referenceImages": [ { "file": "/previews/90/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/90/370d38f6aa258fa9-desktop.jpg", "route": "/preview/90-mobius-journal/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9dffbdf2355092d026db93e6cf37161a72c323443f53a3234182c9e2a0a70613", "sha256": "370d38f6aa258fa9db3c4307565abfd3c9c771067f34c84b30b9d51527dca649", "fullPage": false }, { "file": "/previews/90/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/90/24535860ef2f31c4-mobile.jpg", "route": "/preview/90-mobius-journal/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9dffbdf2355092d026db93e6cf37161a72c323443f53a3234182c9e2a0a70613", "sha256": "24535860ef2f31c45ea250059eb78d38ef9f74c85ecc4f6937ddcbdb97e477a1", "fullPage": false }, { "file": "/previews/90/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/90/128ce7686f8ff069-detail.jpg", "route": "/preview/90-mobius-journal/station", "viewport": { "width": 1440, "height": 1000 }, "state": "station", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9dffbdf2355092d026db93e6cf37161a72c323443f53a3234182c9e2a0a70613", "sha256": "128ce7686f8ff069289bfe97661920e1abcf462a30632f5dd06b549eb31034f9", "fullPage": false }, { "file": "/previews/90/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/90/fcaca8ca50b119c2-full-page.jpg", "route": "/preview/90-mobius-journal/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:9dffbdf2355092d026db93e6cf37161a72c323443f53a3234182c9e2a0a70613", "sha256": "fcaca8ca50b119c28cd84f4ab9dd4a1dcd67877783c5f48c189fa376a510dd23", "fullPage": true } ], "sourcePath": "src/designs/90-mobius-journal", "neighbours": [ "26", "08" ], "researchSources": [ { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" }, { "title": "Aaron Koblin — The Wilderness Downtown", "url": "https://www.aaronkoblin.com/project/the-wilderness-downtown/" } ], "palette": { "page": "#e8e6da", "ink": "#1b3c89", "accent": "#1b3c89", "surface": "#e8e6da" }, "fonts": [ "Libre Baskerville", "IBM Plex Mono" ], "brief": "**Idea.** A finished account and its discarded drafts belong to the same surface.\n\n**Composition.** A cobalt ribbon folds across a cream field, with numbered seams, reversed faces and long horizontal passages. Flipping exposes process writing on the back.\n\n**Navigation and complete example.** Follow six stations of an imagined river walk, flip between polished prose and field notes and read a station’s two versions together.\n\n**Responsive and inclusive behaviour.** The ribbon becomes a vertically folded strip with discrete seam controls. Flipping is a button action, never a motion or orientation requirement. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Use the two faces for a meaningful editorial relation such as account/evidence or finished/draft. Keep a finite index and stable location labels. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Conditional Design manifesto](https://conditionaldesign.org/manifesto/); [Aaron Koblin — The Wilderness Downtown](https://www.aaronkoblin.com/project/the-wilderness-downtown/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/90-mobius-journal.zip" }, { "schemaVersion": 2, "id": "91", "slug": "patchbay-editions", "name": "Patchbay Editions", "brand": "CROSSWIRE / A journal of useful connections", "family": "Avant-garde & experimental", "status": "ready", "thesis": "A publication can emerge from connecting a subject to a method.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "A dark patch panel spans the page, with labelled sockets at opposing edges and amber cables crossing a central editorial space. The selected essay is the circuit.", "navigation": "Connect subject and method, inspect the resulting essay, save a patch", "typography": "IBM Plex Mono / Space Grotesk", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Connection grammar", "Patch cables", "Pairing rationale" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Connection grammar", "Patch cables", "Pairing rationale" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Connection grammar", "Patch cables", "Pairing rationale" ] }, "patterns": [ "Connection grammar", "Patch cables", "Pairing rationale" ], "entryRoute": "/preview/91-patchbay-editions/start", "states": [ { "key": "essay", "label": "Connected essay", "route": "/preview/91-patchbay-editions/essay" }, { "key": "patches", "label": "Saved patch sheet", "route": "/preview/91-patchbay-editions/patches" } ], "referenceImages": [ { "file": "/previews/91/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/91/3a1a87a8b74d67ec-desktop.jpg", "route": "/preview/91-patchbay-editions/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be1f5fa5231442e12cea6b7d161b8c8e6f6db620bcb6ff21cffcd99b7a18353b", "sha256": "3a1a87a8b74d67ec549d4d5b3d18a035dc2f92e489456521436c41932fa11f72", "fullPage": false }, { "file": "/previews/91/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/91/bd01a6758c949356-mobile.jpg", "route": "/preview/91-patchbay-editions/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be1f5fa5231442e12cea6b7d161b8c8e6f6db620bcb6ff21cffcd99b7a18353b", "sha256": "bd01a6758c9493560af00ecd3f99476762d7846ccc77c833d037c611c9e5efe3", "fullPage": false }, { "file": "/previews/91/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/91/1dbed58552d6b769-detail.jpg", "route": "/preview/91-patchbay-editions/essay", "viewport": { "width": 1440, "height": 1000 }, "state": "essay", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be1f5fa5231442e12cea6b7d161b8c8e6f6db620bcb6ff21cffcd99b7a18353b", "sha256": "1dbed58552d6b7693a6ec8093099e81425c2bb69e8cf71a2b298f13393b90d3d", "fullPage": false }, { "file": "/previews/91/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/91/3a1a87a8b74d67ec-full-page.jpg", "route": "/preview/91-patchbay-editions/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:be1f5fa5231442e12cea6b7d161b8c8e6f6db620bcb6ff21cffcd99b7a18353b", "sha256": "3a1a87a8b74d67ec549d4d5b3d18a035dc2f92e489456521436c41932fa11f72", "fullPage": true } ], "sourcePath": "src/designs/91-patchbay-editions", "neighbours": [ "12", "60" ], "researchSources": [ { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" }, { "title": "Moniker — Conditional Design Workbook", "url": "https://studiomoniker.com/projects/conditional-design-workbook" } ], "palette": { "page": "#26332f", "ink": "#f2eddb", "accent": "#edbd64", "surface": "#26332f" }, "fonts": [ "IBM Plex Mono", "Space Grotesk" ], "brief": "**Idea.** A publication can emerge from connecting a subject to a method.\n\n**Composition.** A dark patch panel spans the page, with labelled sockets at opposing edges and amber cables crossing a central editorial space. The selected essay is the circuit.\n\n**Navigation and complete example.** Connect one of three subjects to one of three methods, discover nine original micro-essays, read the pairing rationale and save a local patch sheet.\n\n**Responsive and inclusive behaviour.** Two socket banks become compact rows above and below the essay. Buttons provide every connection; dragging cables is unnecessary. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Keep the grammar small enough to understand and ensure every allowed connection yields deliberate content. Do not simulate arbitrary generation. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Conditional Design manifesto](https://conditionaldesign.org/manifesto/); [Moniker — Conditional Design Workbook](https://studiomoniker.com/projects/conditional-design-workbook). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/91-patchbay-editions.zip" }, { "schemaVersion": 2, "id": "92", "slug": "interface-witness", "name": "Interface Witness", "brand": "WITNESS / A local performance", "family": "Avant-garde & experimental", "status": "ready", "thesis": "The interface can make your actions the material of a short performance.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "One enormous violet circular button occupies a mostly empty page. Numbered observations accumulate around it, gradually turning the whitespace into a visible transcript.", "navigation": "Act, repeat, undo, read an observation and reset the local trace", "typography": "Space Grotesk / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Action-driven narrative", "Visible local transcript", "Reversible performance" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Action-driven narrative", "Visible local transcript", "Reversible performance" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Action-driven narrative", "Visible local transcript", "Reversible performance" ] }, "patterns": [ "Action-driven narrative", "Visible local transcript", "Reversible performance" ], "entryRoute": "/preview/92-interface-witness/start", "states": [ { "key": "observation", "label": "An observation", "route": "/preview/92-interface-witness/observation" }, { "key": "transcript", "label": "Complete local transcript", "route": "/preview/92-interface-witness/transcript" } ], "referenceImages": [ { "file": "/previews/92/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/92/374987588463c7af-desktop.jpg", "route": "/preview/92-interface-witness/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3d4a64f2ce4e72219e9ecb906ad7debe117908e705b804d919705f6fd189a159", "sha256": "374987588463c7afeaa3d3c548e86d6cf0a203ffc2d0cf243e730aa81bde51bf", "fullPage": false }, { "file": "/previews/92/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/92/3b7a92d028b89f48-mobile.jpg", "route": "/preview/92-interface-witness/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3d4a64f2ce4e72219e9ecb906ad7debe117908e705b804d919705f6fd189a159", "sha256": "3b7a92d028b89f48437b48f68f245d258351a969f303f4f1acbf1d3b9367d852", "fullPage": false }, { "file": "/previews/92/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/92/403d4b04f3f1d3fe-detail.jpg", "route": "/preview/92-interface-witness/observation", "viewport": { "width": 1440, "height": 1000 }, "state": "observation", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3d4a64f2ce4e72219e9ecb906ad7debe117908e705b804d919705f6fd189a159", "sha256": "403d4b04f3f1d3fe9ddcf79d379a7f67ff7e0b6bf61db91c4b4fcd2acbe8dcb0", "fullPage": false }, { "file": "/previews/92/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/92/26f016e2c4dcc7e3-full-page.jpg", "route": "/preview/92-interface-witness/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3d4a64f2ce4e72219e9ecb906ad7debe117908e705b804d919705f6fd189a159", "sha256": "26f016e2c4dcc7e37efb52f3eb408adf58b6b011126b6e98551e165cd0dbec84", "fullPage": true } ], "sourcePath": "src/designs/92-interface-witness", "neighbours": [ "41", "45" ], "researchSources": [ { "title": "Moniker — Click Click Click", "url": "https://studiomoniker.com/projects/click-click-click" } ], "palette": { "page": "#faf9f4", "ink": "#21232b", "accent": "#433dab", "surface": "#faf9f4" }, "fonts": [ "Space Grotesk", "IBM Plex Mono" ], "brief": "**Idea.** The interface can make your actions the material of a short performance.\n\n**Composition.** One enormous violet circular button occupies a mostly empty page. Numbered observations accumulate around it, gradually turning the whitespace into a visible transcript.\n\n**Navigation and complete example.** Perform six explicit actions, see deterministic observations appear, open the essay behind an observation and revisit or clear the session transcript. No passive behavioural profiling occurs.\n\n**Responsive and inclusive behaviour.** The main action scales to the screen; observations appear in a readable list below it instead of overlapping. All actions remain labelled native buttons. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Observe only intentional actions, state the local scope and avoid inferred personal traits. The performance should reveal its rules rather than manipulate the visitor. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Moniker — Click Click Click](https://studiomoniker.com/projects/click-click-click). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/92-interface-witness.zip" }, { "schemaVersion": 2, "id": "93", "slug": "gesture-index", "name": "Gesture Index", "brand": "LINEAGE / A form-finding archive", "family": "Avant-garde & experimental", "status": "ready", "thesis": "A drawn shape can be a precise invitation to an existing collection.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "A large pale drawing field holds charcoal strokes, small numbered specimen marks and a handwritten-seeming retrieval trail. Shape buttons provide an equally visible alternative to drawing.", "navigation": "Draw or choose a form, inspect matched objects and keep a constellation", "typography": "Libre Baskerville / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Gesture retrieval", "Shape alternatives", "Visual constellation" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Gesture retrieval", "Shape alternatives", "Visual constellation" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Gesture retrieval", "Shape alternatives", "Visual constellation" ] }, "patterns": [ "Gesture retrieval", "Shape alternatives", "Visual constellation" ], "entryRoute": "/preview/93-gesture-index/start", "states": [ { "key": "object", "label": "Object provenance", "route": "/preview/93-gesture-index/object" }, { "key": "constellation", "label": "Saved constellation", "route": "/preview/93-gesture-index/constellation" } ], "referenceImages": [ { "file": "/previews/93/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/93/d83c9b644cb82332-desktop.jpg", "route": "/preview/93-gesture-index/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:5a5295cfe6a7e23cb4ba282f40eb5c8b5b5fd8cf93b16d786ddee77d164f690c", "sha256": "d83c9b644cb82332933850b35060c3a45d42d89a86a7ff9eccfb3578b4679700", "fullPage": false }, { "file": "/previews/93/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/93/b54a9077399a3f68-mobile.jpg", "route": "/preview/93-gesture-index/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:5a5295cfe6a7e23cb4ba282f40eb5c8b5b5fd8cf93b16d786ddee77d164f690c", "sha256": "b54a9077399a3f68353cd9df4ee1a9a670fc8ae9c9acba91adcb87fdb1ec3796", "fullPage": false }, { "file": "/previews/93/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/93/5a98186b424fe43d-detail.jpg", "route": "/preview/93-gesture-index/object", "viewport": { "width": 1440, "height": 1000 }, "state": "object", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:5a5295cfe6a7e23cb4ba282f40eb5c8b5b5fd8cf93b16d786ddee77d164f690c", "sha256": "5a98186b424fe43d986c3fe6e56fa43c3e221afb86a1f3af66aad33f91b136a9", "fullPage": false }, { "file": "/previews/93/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/93/2b7f054c58b6ebef-full-page.jpg", "route": "/preview/93-gesture-index/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:5a5295cfe6a7e23cb4ba282f40eb5c8b5b5fd8cf93b16d786ddee77d164f690c", "sha256": "2b7f054c58b6ebef0703e4c99e1832a37e3e349eabdee5560f32c1765a6c4eda", "fullPage": true } ], "sourcePath": "src/designs/93-gesture-index", "neighbours": [ "49", "22" ], "researchSources": [ { "title": "Zach Lieberman / Data Arts Team — Land Lines", "url": "https://experiments.withgoogle.com/land-lines" } ], "palette": { "page": "#efeee8", "ink": "#343632", "accent": "#6b4c35", "surface": "#efeee8" }, "fonts": [ "Libre Baskerville", "IBM Plex Mono" ], "brief": "**Idea.** A drawn shape can be a precise invitation to an existing collection.\n\n**Composition.** A large pale drawing field holds charcoal strokes, small numbered specimen marks and a handwritten-seeming retrieval trail. Shape buttons provide an equally visible alternative to drawing.\n\n**Navigation and complete example.** Draw a line on the canvas or choose arch, zigzag, loop or branch. A small deterministic classifier retrieves original objects from a labelled fixture set; inspect records and save a constellation.\n\n**Responsive and inclusive behaviour.** The SVG drawing pad uses pointer capture and a bounded drawing surface. All retrievals are also available through native shape buttons, with no drawing requirement. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Keep the relationship between query shape and retrieved content legible. Explain the classifier’s limits instead of implying a general visual search engine. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Zach Lieberman / Data Arts Team — Land Lines](https://experiments.withgoogle.com/land-lines). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/93-gesture-index.zip" }, { "schemaVersion": 2, "id": "94", "slug": "score-reader", "name": "Score Reader", "brand": "INTERVAL / A publication in measures", "family": "Avant-garde & experimental", "status": "ready", "thesis": "A reading can be arranged across time and simultaneous voices.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Oversized measure numbers and four staves span a cream score. Coloured note blocks contain phrases; a playhead and voice controls make the score a working table of contents.", "navigation": "Select measures and voices, perform a reading sequence, arrange a short score", "typography": "Libre Baskerville / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Score navigation", "Simultaneous voices", "Reading arrangement" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Score navigation", "Simultaneous voices", "Reading arrangement" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Score navigation", "Simultaneous voices", "Reading arrangement" ] }, "patterns": [ "Score navigation", "Simultaneous voices", "Reading arrangement" ], "entryRoute": "/preview/94-score-reader/start", "states": [ { "key": "movement", "label": "Movement transcript", "route": "/preview/94-score-reader/movement" }, { "key": "arrangement", "label": "Your reading score", "route": "/preview/94-score-reader/arrangement" } ], "referenceImages": [ { "file": "/previews/94/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/94/a605b49893993268-desktop.jpg", "route": "/preview/94-score-reader/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed9b7f79d60ece54b636862adb730b6cb6c04e2af0ee0af71a26f3132d2d08a1", "sha256": "a605b498939932689ee0ec09dc240044e866e5242be3832d753b726d34037dbc", "fullPage": false }, { "file": "/previews/94/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/94/5b8c8d94482e4dcb-mobile.jpg", "route": "/preview/94-score-reader/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed9b7f79d60ece54b636862adb730b6cb6c04e2af0ee0af71a26f3132d2d08a1", "sha256": "5b8c8d94482e4dcbfe7154c94dc75244bdc35352f00216a858ae574b28ef6190", "fullPage": false }, { "file": "/previews/94/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/94/1a965a5f85b73cca-detail.jpg", "route": "/preview/94-score-reader/movement", "viewport": { "width": 1440, "height": 1000 }, "state": "movement", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed9b7f79d60ece54b636862adb730b6cb6c04e2af0ee0af71a26f3132d2d08a1", "sha256": "1a965a5f85b73cca401c8aaaf1aead2c151aed8b2b8848ac6e2565fedd859573", "fullPage": false }, { "file": "/previews/94/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/94/c995f08839b2136a-full-page.jpg", "route": "/preview/94-score-reader/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:ed9b7f79d60ece54b636862adb730b6cb6c04e2af0ee0af71a26f3132d2d08a1", "sha256": "c995f08839b2136aac90f73142102e5d40f0351e25147f57953ba6220c52a80e", "fullPage": true } ], "sourcePath": "src/designs/94-score-reader", "neighbours": [ "46", "79" ], "researchSources": [ { "title": "Typatone", "url": "https://typatone.com/" }, { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" } ], "palette": { "page": "#f2eddf", "ink": "#28223c", "accent": "#6c418b", "surface": "#f2eddf" }, "fonts": [ "Libre Baskerville", "IBM Plex Mono" ], "brief": "**Idea.** A reading can be arranged across time and simultaneous voices.\n\n**Composition.** Oversized measure numbers and four staves span a cream score. Coloured note blocks contain phrases; a playhead and voice controls make the score a working table of contents.\n\n**Navigation and complete example.** Explore six measures across four authored voices, optionally advance the score at a calm pace, read each movement and arrange a local reading order. Optional tones are triggered only by an explicit sound control.\n\n**Responsive and inclusive behaviour.** The score scrolls within a labelled bounded region, with measure buttons and a full transcript as alternatives. No content requires timed interaction. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Use timing and polyphony to organise the writing. Keep sound optional, volume modest and every spoken or musical idea available as text. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Typatone](https://typatone.com/); [Conditional Design manifesto](https://conditionaldesign.org/manifesto/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/94-score-reader.zip" }, { "schemaVersion": 2, "id": "95", "slug": "frame-by-frame", "name": "Frame by Frame", "brand": "NIGHT WINDOW / A film in 72 frames", "family": "Avant-garde & experimental", "status": "ready", "thesis": "A film’s timeline can become the publication’s reading surface.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Black film stock, sprocket holes and an unbroken horizontal contact strip carry original night-window illustrations. Huge frame numbers locate annotations precisely in time.", "navigation": "Jog frames, compare storyboard and final drawing, inspect production notes", "typography": "Space Grotesk / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Frame scrubbing", "Temporal annotations", "Storyboard comparison" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Frame scrubbing", "Temporal annotations", "Storyboard comparison" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Frame scrubbing", "Temporal annotations", "Storyboard comparison" ] }, "patterns": [ "Frame scrubbing", "Temporal annotations", "Storyboard comparison" ], "entryRoute": "/preview/95-frame-by-frame/start", "states": [ { "key": "annotation", "label": "Frame annotation", "route": "/preview/95-frame-by-frame/annotation" }, { "key": "production", "label": "Production notebook", "route": "/preview/95-frame-by-frame/production" } ], "referenceImages": [ { "file": "/previews/95/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/95/c6cd9f67e5692dec-desktop.jpg", "route": "/preview/95-frame-by-frame/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0db7b2054e0b1cf0042ef74655f173e68680e8b3743274431fb9e629fbeecf0f", "sha256": "c6cd9f67e5692decfcffe3fd7b9df1aaf60b978c220851c3b06b5c2407945c63", "fullPage": false }, { "file": "/previews/95/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/95/a7582741f9bd6f2a-mobile.jpg", "route": "/preview/95-frame-by-frame/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0db7b2054e0b1cf0042ef74655f173e68680e8b3743274431fb9e629fbeecf0f", "sha256": "a7582741f9bd6f2a994c06ca4583f9fbd054f01053bb4d82de8e5d9ddcdcd909", "fullPage": false }, { "file": "/previews/95/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/95/5741d23cbd8ddbdd-detail.jpg", "route": "/preview/95-frame-by-frame/annotation", "viewport": { "width": 1440, "height": 1000 }, "state": "annotation", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0db7b2054e0b1cf0042ef74655f173e68680e8b3743274431fb9e629fbeecf0f", "sha256": "5741d23cbd8ddbddf5162310dda29a1da20edcdace694ac7a897d7b8e84ebabb", "fullPage": false }, { "file": "/previews/95/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/95/4a8af3730cdde257-full-page.jpg", "route": "/preview/95-frame-by-frame/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:0db7b2054e0b1cf0042ef74655f173e68680e8b3743274431fb9e629fbeecf0f", "sha256": "4a8af3730cdde257b6a11a01162854605ffc9e9cbf2ecfdd8a4072471877c48f", "fullPage": true } ], "sourcePath": "src/designs/95-frame-by-frame", "neighbours": [ "37", "08" ], "researchSources": [ { "title": "Aaron Koblin — The Wilderness Downtown", "url": "https://www.aaronkoblin.com/project/the-wilderness-downtown/" } ], "palette": { "page": "#121619", "ink": "#eee6d3", "accent": "#d5bd72", "surface": "#121619" }, "fonts": [ "Space Grotesk", "IBM Plex Mono" ], "brief": "**Idea.** A film’s timeline can become the publication’s reading surface.\n\n**Composition.** Black film stock, sprocket holes and an unbroken horizontal contact strip carry original night-window illustrations. Huge frame numbers locate annotations precisely in time.\n\n**Navigation and complete example.** Scrub an original 72-frame vector vignette, select one of six annotated moments, compare the storyboard with the finished scene and read its production notes.\n\n**Responsive and inclusive behaviour.** The film strip is a contained horizontal scroller. A labelled range, previous/next frame buttons and six chapter links provide complete navigation. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Attach information to meaningful temporal moments. Use a finite timeline and make motion pausable; do not require playback to access annotations. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Aaron Koblin — The Wilderness Downtown](https://www.aaronkoblin.com/project/the-wilderness-downtown/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/95-frame-by-frame.zip" }, { "schemaVersion": 2, "id": "96", "slug": "rulewalk", "name": "Rulewalk", "brand": "RULEWALK / An exhibition in permitted moves", "family": "Avant-garde & experimental", "status": "ready", "thesis": "A simple movement rule can become a curatorial point of view.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "A saturated field of large numbered stepping stones fills the page. Arrows, a single rule and a visible route make the exhibition read like a graphic board rather than a gallery wall.", "navigation": "Traverse permitted neighbours, change the rule, inspect works and route", "typography": "Archivo Black / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Rule-based traversal", "Visible route", "Curatorial constraints" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Rule-based traversal", "Visible route", "Curatorial constraints" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Rule-based traversal", "Visible route", "Curatorial constraints" ] }, "patterns": [ "Rule-based traversal", "Visible route", "Curatorial constraints" ], "entryRoute": "/preview/96-rulewalk/start", "states": [ { "key": "work", "label": "Work encountered", "route": "/preview/96-rulewalk/work" }, { "key": "route", "label": "Your exhibition route", "route": "/preview/96-rulewalk/route" } ], "referenceImages": [ { "file": "/previews/96/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/96/f7f31353c6c83082-desktop.jpg", "route": "/preview/96-rulewalk/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:016089c8a39d399080639c61bf5326982fb8335780c46ab677ec6ef70f02d3cb", "sha256": "f7f31353c6c83082841379e539aeb09782ac8a9bbb6589c778b39f1df6d7cc22", "fullPage": false }, { "file": "/previews/96/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/96/0bbeba7cb99f1ce9-mobile.jpg", "route": "/preview/96-rulewalk/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:016089c8a39d399080639c61bf5326982fb8335780c46ab677ec6ef70f02d3cb", "sha256": "0bbeba7cb99f1ce918844b7c0dbd03ff50d5c6b82382d900efda3aeaf71ba706", "fullPage": false }, { "file": "/previews/96/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/96/afbe14bd991b9a04-detail.jpg", "route": "/preview/96-rulewalk/work", "viewport": { "width": 1440, "height": 1000 }, "state": "work", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:016089c8a39d399080639c61bf5326982fb8335780c46ab677ec6ef70f02d3cb", "sha256": "afbe14bd991b9a04ac2373cb0da1511170f58b19ddc03ea4008aaa0f86b2fbb5", "fullPage": false }, { "file": "/previews/96/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/96/df5151dddb777085-full-page.jpg", "route": "/preview/96-rulewalk/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:016089c8a39d399080639c61bf5326982fb8335780c46ab677ec6ef70f02d3cb", "sha256": "df5151dddb7770851a19eba65d66c2b36f20cb19f6411b2a8bbd5102e6de1193", "fullPage": true } ], "sourcePath": "src/designs/96-rulewalk", "neighbours": [ "38", "14" ], "researchSources": [ { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" }, { "title": "Nicky Case — The Wisdom and/or Madness of Crowds", "url": "https://ncase.me/crowds/" } ], "palette": { "page": "#e9ec59", "ink": "#24273d", "accent": "#5844a3", "surface": "#e9ec59" }, "fonts": [ "Archivo Black", "DM Sans" ], "brief": "**Idea.** A simple movement rule can become a curatorial point of view.\n\n**Composition.** A saturated field of large numbered stepping stones fills the page. Arrows, a single rule and a visible route make the exhibition read like a graphic board rather than a gallery wall.\n\n**Navigation and complete example.** Traverse nine original exhibition studies using adjacent or diagonal moves, inspect the work reached and review a route that exposes what the chosen rule omitted.\n\n**Responsive and inclusive behaviour.** The board remains three columns with large numbered buttons; full work names and the current rule are repeated below it. A direct index reaches every work. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Keep the movement rule explicit and use it to change the order of a real collection. Avoid scores, streaks or penalties that distract from reading. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Conditional Design manifesto](https://conditionaldesign.org/manifesto/); [Nicky Case — The Wisdom and/or Madness of Crowds](https://ncase.me/crowds/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/96-rulewalk.zip" }, { "schemaVersion": 2, "id": "97", "slug": "curtain-bureau", "name": "Curtain Bureau", "brand": "THE SMALL THEATRE / A performance for the browser", "family": "Avant-garde & experimental", "status": "ready", "thesis": "A website can be read through entrances, acts and the space behind a performance.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "A vermilion proscenium fills the browser. Folded curtains, deep black wings, a small illuminated stage and original paper performers create a theatrical reading space.", "navigation": "Open the curtain, choose an act, move backstage and reserve a sample programme", "typography": "Libre Baskerville / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Stage navigation", "Frontstage and backstage", "Programme reservation" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Stage navigation", "Frontstage and backstage", "Programme reservation" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Stage navigation", "Frontstage and backstage", "Programme reservation" ] }, "patterns": [ "Stage navigation", "Frontstage and backstage", "Programme reservation" ], "entryRoute": "/preview/97-curtain-bureau/start", "states": [ { "key": "performance", "label": "Curtain open / first act", "route": "/preview/97-curtain-bureau/performance" }, { "key": "backstage", "label": "Backstage notes", "route": "/preview/97-curtain-bureau/backstage" }, { "key": "programme", "label": "Performance programme", "route": "/preview/97-curtain-bureau/programme" } ], "referenceImages": [ { "file": "/previews/97/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/97/811dc651576adbde-desktop.jpg", "route": "/preview/97-curtain-bureau/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:159f28b6ad207cf67d1701dd1d5224dbfe1db40e7da772ba88cce91e36ea3af0", "sha256": "811dc651576adbde44935f636d995c62d7448ee02619e07d99e0e1354e65d3f2", "fullPage": false }, { "file": "/previews/97/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/97/dd5eea520fc27890-mobile.jpg", "route": "/preview/97-curtain-bureau/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:159f28b6ad207cf67d1701dd1d5224dbfe1db40e7da772ba88cce91e36ea3af0", "sha256": "dd5eea520fc27890f47ab745c224d948042d26bc9c691760424c6522212abca7", "fullPage": false }, { "file": "/previews/97/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/97/5f9c6301b5816eda-detail.jpg", "route": "/preview/97-curtain-bureau/performance", "viewport": { "width": 1440, "height": 1000 }, "state": "performance", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:159f28b6ad207cf67d1701dd1d5224dbfe1db40e7da772ba88cce91e36ea3af0", "sha256": "5f9c6301b5816edafdbb140aa8a1130e8ad158f1aa88309eed852208a2c5cece", "fullPage": false }, { "file": "/previews/97/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/97/6ab8dc4c4799c1e5-full-page.jpg", "route": "/preview/97-curtain-bureau/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:159f28b6ad207cf67d1701dd1d5224dbfe1db40e7da772ba88cce91e36ea3af0", "sha256": "6ab8dc4c4799c1e5cf2d8251d83f3927ffebdf50d0b5bdf8f67535e4527479ae", "fullPage": true } ], "sourcePath": "src/designs/97-curtain-bureau", "neighbours": [ "30", "37" ], "researchSources": [ { "title": "Aaron Koblin — The Wilderness Downtown", "url": "https://www.aaronkoblin.com/project/the-wilderness-downtown/" }, { "title": "Rafaël Rozendaal — Internet works", "url": "https://www.newrafael.com/internet?filter=website" } ], "palette": { "page": "#bf3327", "ink": "#fff0d2", "accent": "#e9bd65", "surface": "#bf3327" }, "fonts": [ "Libre Baskerville", "DM Sans" ], "brief": "**Idea.** A website can be read through entrances, acts and the space behind a performance.\n\n**Composition.** A vermilion proscenium fills the browser. Folded curtains, deep black wings, a small illuminated stage and original paper performers create a theatrical reading space.\n\n**Navigation and complete example.** Open a fictional theatre, move through three short acts, read the three corresponding backstage notes, then reserve a sample programme locally.\n\n**Responsive and inclusive behaviour.** The stage remains a contained composition. Native act selectors, curtain control and backstage links sit outside moving scenery. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Let theatrical depth organise the story, with controls always available. Avoid gating essential content behind animation or timed entrances. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Aaron Koblin — The Wilderness Downtown](https://www.aaronkoblin.com/project/the-wilderness-downtown/); [Rafaël Rozendaal — Internet works](https://www.newrafael.com/internet?filter=website). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/97-curtain-bureau.zip" }, { "schemaVersion": 2, "id": "98", "slug": "shadow-archive", "name": "Shadow Archive", "brand": "CAST / Objects understood by their shadows", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Changing the light can change which part of an object becomes readable.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Small original geometric objects cast enormous lavender silhouettes across an ochre field. Directional light controls transform the composition and the captions attached to it.", "navigation": "Choose light direction, enter a labelled shadow, compare projections", "typography": "Space Grotesk / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Light-direction navigation", "Projected silhouettes", "Alternate readings" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Light-direction navigation", "Projected silhouettes", "Alternate readings" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Light-direction navigation", "Projected silhouettes", "Alternate readings" ] }, "patterns": [ "Light-direction navigation", "Projected silhouettes", "Alternate readings" ], "entryRoute": "/preview/98-shadow-archive/start", "states": [ { "key": "object", "label": "Object and projection", "route": "/preview/98-shadow-archive/object" }, { "key": "index", "label": "Complete shadow index", "route": "/preview/98-shadow-archive/index" } ], "referenceImages": [ { "file": "/previews/98/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/98/9f7869303b62e244-desktop.jpg", "route": "/preview/98-shadow-archive/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f2e4ca2ba9f67b43c960206c95e16e9b57fea3cb274ec425fcf520546a2bc638", "sha256": "9f7869303b62e244d402a513fd020eaa3b827cb73676cf805ba681385bf05577", "fullPage": false }, { "file": "/previews/98/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/98/56b1a5dc51622aee-mobile.jpg", "route": "/preview/98-shadow-archive/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f2e4ca2ba9f67b43c960206c95e16e9b57fea3cb274ec425fcf520546a2bc638", "sha256": "56b1a5dc51622aee00c82ec5acc38095b576dc36cd2046ee7c9931f0334fd2f9", "fullPage": false }, { "file": "/previews/98/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/98/86d07a340d67b947-detail.jpg", "route": "/preview/98-shadow-archive/object", "viewport": { "width": 1440, "height": 1000 }, "state": "object", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f2e4ca2ba9f67b43c960206c95e16e9b57fea3cb274ec425fcf520546a2bc638", "sha256": "86d07a340d67b9470232cdaad5e0c87eca8e7c59f66849d2f8d2197f623239bb", "fullPage": false }, { "file": "/previews/98/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/98/1a6cf389d1d7131c-full-page.jpg", "route": "/preview/98-shadow-archive/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:f2e4ca2ba9f67b43c960206c95e16e9b57fea3cb274ec425fcf520546a2bc638", "sha256": "1a6cf389d1d7131ced8ef464cce4ad6dda9d1ddf5c30fce9e2dfc84d11445323", "fullPage": true } ], "sourcePath": "src/designs/98-shadow-archive", "neighbours": [ "47", "48" ], "researchSources": [ { "title": "Rafaël Rozendaal — Internet works", "url": "https://www.newrafael.com/internet?filter=website" } ], "palette": { "page": "#f0d48b", "ink": "#2d3035", "accent": "#51466c", "surface": "#f0d48b" }, "fonts": [ "Space Grotesk", "IBM Plex Mono" ], "brief": "**Idea.** Changing the light can change which part of an object becomes readable.\n\n**Composition.** Small original geometric objects cast enormous lavender silhouettes across an ochre field. Directional light controls transform the composition and the captions attached to it.\n\n**Navigation and complete example.** Choose one of four light directions, inspect six object studies through their labelled shadows and compare how each projection supports a different reading.\n\n**Responsive and inclusive behaviour.** Each shadow is clipped within its own generous field, while labels remain untransformed and controls retain a fixed position. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Keep projected shapes secondary to clear labels and focus targets. Light should reveal an authored interpretation, not merely animate an ornamental shadow. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Rafaël Rozendaal — Internet works](https://www.newrafael.com/internet?filter=website). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/98-shadow-archive.zip" }, { "schemaVersion": 2, "id": "99", "slug": "exquisite-assembly", "name": "Exquisite Assembly", "brand": "THREE HORIZONS / A collaborative landscape", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Independent contributions can meet in a composition nobody authored alone.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "Three full-width illustrated bands form a strange continuous landscape. Separate sky, figure and ground selectors expose the seams and the credits behind each combination.", "navigation": "Slide three bands independently, read contributor notes, keep an edition", "typography": "Space Grotesk / DM Sans", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Independent collage bands", "Combinatorial authorship", "Edition credits" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Independent collage bands", "Combinatorial authorship", "Edition credits" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Independent collage bands", "Combinatorial authorship", "Edition credits" ] }, "patterns": [ "Independent collage bands", "Combinatorial authorship", "Edition credits" ], "entryRoute": "/preview/99-exquisite-assembly/start", "states": [ { "key": "contributor", "label": "Contributor story", "route": "/preview/99-exquisite-assembly/contributor" }, { "key": "edition", "label": "Assembled edition", "route": "/preview/99-exquisite-assembly/edition" } ], "referenceImages": [ { "file": "/previews/99/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/99/e582c6b85ced36a1-desktop.jpg", "route": "/preview/99-exquisite-assembly/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:cfc9565d401fb02341f174feffe821658dac13df8503f39e40bab88e4c73bae1", "sha256": "e582c6b85ced36a17c32a9d25795f133ecf752f234abd5e72166aba7cce550ba", "fullPage": false }, { "file": "/previews/99/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/99/dd4c460e3073016f-mobile.jpg", "route": "/preview/99-exquisite-assembly/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:cfc9565d401fb02341f174feffe821658dac13df8503f39e40bab88e4c73bae1", "sha256": "dd4c460e3073016ff9f956d43f3b016e1ebe6f7d2a1ab44bb45adb59c899c6f7", "fullPage": false }, { "file": "/previews/99/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/99/461148dddbdbfd2d-detail.jpg", "route": "/preview/99-exquisite-assembly/contributor", "viewport": { "width": 1440, "height": 1000 }, "state": "contributor", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:cfc9565d401fb02341f174feffe821658dac13df8503f39e40bab88e4c73bae1", "sha256": "461148dddbdbfd2dc18b62e5bcae17fb64978c7023c896bf5ae419f96fec6b5e", "fullPage": false }, { "file": "/previews/99/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/99/b0c800177bd01939-full-page.jpg", "route": "/preview/99-exquisite-assembly/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:cfc9565d401fb02341f174feffe821658dac13df8503f39e40bab88e4c73bae1", "sha256": "b0c800177bd0193923765e4664046eeae8ef9eaee7af02b249cdc3ab7acbd92b", "fullPage": true } ], "sourcePath": "src/designs/99-exquisite-assembly", "neighbours": [ "49", "66" ], "researchSources": [ { "title": "Moniker — Neuhaus", "url": "https://studiomoniker.com/projects/neuhaus" }, { "title": "Conditional Design manifesto", "url": "https://conditionaldesign.org/manifesto/" } ], "palette": { "page": "#e8e0cd", "ink": "#34332f", "accent": "#6c5b8a", "surface": "#e8e0cd" }, "fonts": [ "Space Grotesk", "DM Sans" ], "brief": "**Idea.** Independent contributions can meet in a composition nobody authored alone.\n\n**Composition.** Three full-width illustrated bands form a strange continuous landscape. Separate sky, figure and ground selectors expose the seams and the credits behind each combination.\n\n**Navigation and complete example.** Combine three skies, three figures and three grounds from original SVG artwork, read the three contributors’ notes and save a numbered local edition with explicit credits.\n\n**Responsive and inclusive behaviour.** Each band keeps a wide illustration crop with controls below it. Previous and next buttons replace any reliance on swiping. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Make the seams and authorship visible. Every combination should remain intentionally composed, and assets must be original or correctly licensed. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Moniker — Neuhaus](https://studiomoniker.com/projects/neuhaus); [Conditional Design manifesto](https://conditionaldesign.org/manifesto/). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/99-exquisite-assembly.zip" }, { "schemaVersion": 2, "id": "100", "slug": "powers-of-scale", "name": "Powers of Scale", "brand": "ONE THREAD / Five scales of a shared material", "family": "Avant-garde & experimental", "status": "ready", "thesis": "Changing scale should change the question, not only the magnification.", "suitableFor": [ "Experimental publishing", "Art exhibition", "Cultural storytelling" ], "character": "Experimental", "traits": { "composition": "The opening screen is an extreme close-up of a woven thread. Discrete semantic zooms replace it with cloth, garment, workshop and town, with scale rulers embedded in each full-page illustration.", "navigation": "Zoom through five scales, read a scale’s story, follow the complete material journey", "typography": "Space Grotesk / IBM Plex Mono", "density": "Medium", "imagery": "Original SVG and CSS compositions", "surface": "A continuous browser-sized composition", "motion": "Optional" }, "effort": "High", "definingFeatures": [ "Semantic zoom", "Scale-dependent stories", "Material journey" ], "adaptableChoices": [ "Subject and original writing", "Palette and equivalent licensed typography", "Scale and number of content units" ], "discovery": { "industries": [ "Arts", "Culture", "Experimental publishing" ], "visitorGoals": [ "Explore a non-linear story" ], "conversionActions": [ "Assemble a reading collection" ], "siteSize": "Interactive publication", "interactionTypes": [ "Semantic zoom", "Scale-dependent stories", "Material journey" ], "keywords": [ "avant garde", "experimental", "unconventional navigation", "Semantic zoom", "Scale-dependent stories", "Material journey" ] }, "patterns": [ "Semantic zoom", "Scale-dependent stories", "Material journey" ], "entryRoute": "/preview/100-powers-of-scale/start", "states": [ { "key": "story", "label": "Story at this scale", "route": "/preview/100-powers-of-scale/story" }, { "key": "journey", "label": "The complete material journey", "route": "/preview/100-powers-of-scale/journey" } ], "referenceImages": [ { "file": "/previews/100/desktop.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/100/bba96c4e7f12b3c8-desktop.jpg", "route": "/preview/100-powers-of-scale/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3c9bd84b2cb676b56fe579668cc27d0386f2e7d84838e6dc761dbc6c986fc9e6", "sha256": "bba96c4e7f12b3c8be762ee0df266b74afa3046f8bff09c3570e31f199d4d1c3", "fullPage": false }, { "file": "/previews/100/mobile.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/100/a95fe527e91c98aa-mobile.jpg", "route": "/preview/100-powers-of-scale/start", "viewport": { "width": 390, "height": 844 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3c9bd84b2cb676b56fe579668cc27d0386f2e7d84838e6dc761dbc6c986fc9e6", "sha256": "a95fe527e91c98aa89bffa65c53e1d7b227afe9c80abf0b14555843481cbbc4d", "fullPage": false }, { "file": "/previews/100/detail.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/100/c4b3ca3a3856a864-detail.jpg", "route": "/preview/100-powers-of-scale/story", "viewport": { "width": 1440, "height": 1000 }, "state": "story", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3c9bd84b2cb676b56fe579668cc27d0386f2e7d84838e6dc761dbc6c986fc9e6", "sha256": "c4b3ca3a3856a8648fec5448abb0011e4461d782c62d7cbca79ff87b243bdfc5", "fullPage": false }, { "file": "/previews/100/full-page.jpg", "url": "https://drew-site-design-library.t3.tigrisfiles.io/references/100/a90f09e662370c70-full-page.jpg", "route": "/preview/100-powers-of-scale/start", "viewport": { "width": 1440, "height": 1000 }, "state": "start", "fixture": "deterministic-2026-11-v1", "sourceRevision": "sha256:3c9bd84b2cb676b56fe579668cc27d0386f2e7d84838e6dc761dbc6c986fc9e6", "sha256": "a90f09e662370c70bdef48599fa0307fcfe6ff89af6bb526cba5a4b5976a339a", "fullPage": true } ], "sourcePath": "src/designs/100-powers-of-scale", "neighbours": [ "16", "48" ], "researchSources": [ { "title": "Neal Agarwal — The Deep Sea", "url": "https://neal.fun/deep-sea/" }, { "title": "Rafaël Rozendaal — Internet works", "url": "https://www.newrafael.com/internet?filter=website" } ], "palette": { "page": "#e4d9c0", "ink": "#354a42", "accent": "#945b43", "surface": "#e4d9c0" }, "fonts": [ "Space Grotesk", "IBM Plex Mono" ], "brief": "**Idea.** Changing scale should change the question, not only the magnification.\n\n**Composition.** The opening screen is an extreme close-up of a woven thread. Discrete semantic zooms replace it with cloth, garment, workshop and town, with scale rulers embedded in each full-page illustration.\n\n**Navigation and complete example.** Move through fibre, cloth, garment, workshop and town in an original illustrated material journey. Each zoom changes the content and units, and the complete account links all five scales.\n\n**Responsive and inclusive behaviour.** The scene uses responsive vector art with a persistent scale selector. Zoom is discrete and button-controlled, so pinch gestures, motion and precise pointing are unnecessary. All controls are native buttons or labelled inputs. Movement is discretionary, no sound starts automatically, reduced-motion preferences remove transitions, and a direct index exposes the same content.\n\n**Adaptation.** Give each scale a different level of explanation. Preserve a stable material identity across transitions and provide a complete linear account. Retain the relationship between navigation and content. Do not reduce the reference to a generic hero followed by interchangeable cards.\n\n**Research.** [Neal Agarwal — The Deep Sea](https://neal.fun/deep-sea/); [Rafaël Rozendaal — Internet works](https://www.newrafael.com/internet?filter=website). These are conceptual precedents, not copied artwork, source code, branding or text. All diagrams and sample writing in this specimen are original, fictional material.", "scope": "Complete visual reference with deterministic local interactions and fictional content; no production backend.", "downloadUrl": "/downloads/100-powers-of-scale.zip" } ]