{ "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" }