1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8" /> 6 <title>optio | Design Automate</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 8 <meta name="description" 9 content="optio Design Automate turns a site and a unit program into a real, buildable BIM model automatically. See how it works, then try the live generator." /> 10 <link rel="preconnect" href="https://fonts.googleapis.com"> 11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 12 <link 13 href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" 14 rel="stylesheet"> 15 <style> 16 @import url('cobot_style.css'); 17 </style> 18
18<script type="importmap"> 19 { 20 "imports": { 21 "three": "https://unpkg.com/[email protected]/build/three.module.js", 22 "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/", 23 "three/examples/jsm/utils/BufferGeometryUtils": "https://unpkg.com/[email protected]/examples/jsm/utils/BufferGeometryUtils.js", 24 "three-mesh-bvh": "https://cdn.jsdelivr.net/npm/[email protected]/build/index.module.js", 25 "web-ifc": "https://cdn.jsdelivr.net/npm/[email protected]/web-ifc-api.js", 26 "web-ifc-three": "https://cdn.jsdelivr.net/npm/[email protected]/IFCLoader.js" 27 } 28 } 29 </script>
29 30</head> 31 32<body> 33 34 <header class="site-header"> 35 <div class="site-header-inner"> 36 <a class="brand" href="#top"> 37 <svg id="logo" viewBox="0 0 240 80" role="img" aria-label="Optio logo" style="width: 240px; height: 80px;"> 38 <text x="2" y="50" class="logo-word">optio</text> 39 </svg> 40 </a> 41 <nav class="site-nav"> 42 <a href="#how-it-works">How it works</a> 43 <a href="#audience">For architects & manufacturers</a> 44 <a href="#demo" class="btn-primary btn-nav">Try the demo</a> 45 </nav> 46 </div> 47 </header> 48 49 <main> 50 <section class="hero" id="top"> 51 <div class="hero-copy"> 52 <p class="eyebrow">optio Design Automate</p> 53 <h1>From site constraints to a buildable BIM model, automatically.</h1> 54 <p class="hero-sub"> 55 optio matches architect-designed residential units to your site, height limit, and unit mix, 56 then hands you back a real 3D model. Try the generator below. 57 </p> 58 <div class="hero-actions"> 59 <a href="#demo" class="btn-primary">Try the live demo</a> 60 <a href="#how-it-works" class="btn-ghost">See how it works</a> 61 </div> 62 </div> 63 <div class="hero-media"> 64 <img src="landing/assets/home-image.png" 65 alt="Massing render of a residential building generated by optio"> 66 </div> 67 </section> 68 69 <section class="hiw" id="how-it-works"> 70 <div class="section-head"> 71 <p class="eyebrow">How it works</p> 72 <h2>Empty lot to delivery package in five steps</h2> 73 </div> 74 75 <div class="hiw-step"> 76 <div class="step-media"><img src="landing/assets/map-image.png" alt="Site plot selected on a map"></div> 77 <div class="step-copy"> 78 <span class="step-num">1</span> 79 <h3>Define your site</h3> 80 <p>Add your plot and its zoning limits: height, TAKS, and FAR. optio uses these as constraints 81 for everything that follows.</p> 82 </div> 83 </div> 84 85 <div class="hiw-step reverse"> 86 <div class="step-media step-media-trio"> 87 <img src="landing/assets/apus.png" alt="Apus residential design system card"> 88 <img src="landing/assets/caelum.png" alt="Caelum residential design system card"> 89 <img src="landing/assets/circinus.png" alt="Circinus residential design system card"> 90 </div> 91 <div class="step-copy"> 92 <span class="step-num">2</span> 93 <h3>Choose a design system</h3> 94 <p>Pick a residential unit system from a partner architect: a parametrized kit of floor plans 95 that adapts to your site.</p> 96 </div> 97 </div> 98 99 <div class="hiw-step"> 100 <div class="step-media step-media-pair"> 101 <img src="landing/assets/content-detail-w-inputs.png" alt="Program input form"> 102 <div class="step-media-stack"> 103 <img src="landing/assets/info-program.png" alt="Unit mix breakdown by flat type"> 104 <img src="landing/assets/info-cost.png" alt="Cost summary panel"> 105 </div> 106 </div> 107 <div class="step-copy"> 108 <span class="step-num">3</span> 109 <h3>Define the program</h3> 110 <p>Set your target unit mix, from studios to 5-bedroom flats, plus commercial and other 111 allocations.</p> 112 </div> 113 </div> 114 115 <div class="hiw-step reverse"> 116 <div class="step-media"><img src="landing/assets/4-cards.png" alt="Generated plans and 3D model views"> 117 </div> 118 <div class="step-copy">
119 <span class="step-num">4</span> 120 <h3>Review the model</h3> 121 <p>optio stacks compatible units within your height and FAR limits, then generates a 3D model 122 and 2D drawings to review immediately.</p> 123 </div> 124 </div> 125 126 <div class="hiw-step"> 127 <div class="step-media"><img src="landing/assets/documents.png" 128 alt="Downloadable CAD, BIM, and quantity files"></div> 129 <div class="step-copy"> 130 <span class="step-num">5</span> 131 <h3>Download the deliverables</h3> 132 <p>Export the BIM model, CAD drawings, and quantity take-off for your team or contractor.</p> 133 </div> 134 </div> 135 136 <div class="callout-banner"> 137 <p>Try it yourself: steps 1, 3, and 4 are live below, running on a real residential dataset.</p> 138 <a href="#demo" class="btn-primary">Jump to the demo</a> 139 </div> 140 </section> 141 142 <section class="demo-frame" id="demo"> 143 <div id="formContainer"> 144 <div id="imageContainer"> 145 <svg id="logo" viewBox="0 0 240 88" role="img" aria-label="Optio logo"> 146 <text x="2" y="50" class="logo-word">optio</text> 147 <text x="3" y="74" class="logo-tag">design automate</text> 148 </svg> 149 </div> 150 <div id="areaContainer"> 151 <label>Site X (m): <input id="siteX" type="number" value="20" /></label> 152 <label>Site Y (m): <input id="siteY" type="number" value="25" /></label> 153 <label>Max Height (m): <input id="hMax" type="number" value="22" /></label> 154 <label>TAKS (m²): <input id="taks" type="number" value="650" /></label> 155 <label>FAR (m²): <input id="far" type="number" value="1100" /></label> 156 <label>Basement Levels: <input id="basement" type="number" value="0" /></label> 157 </div> 158 <div id="flatContainer"> 159 <label>1+0 Ratio: <input id="flatRatio1" type="number" value="0" /></label> 160 <label>1+1 Ratio: <input id="flatRatio2" type="number" value="0" /></label> 161 <label>2+1 Ratio: <input id="flatRatio3" type="number" value="0" /></label> 162 <label>3+1 Ratio: <input id="flatRatio4" type="number" value="0" /></label> 163 <label>4+1 Ratio: <input id="flatRatio5" type="number" value="0" /></label> 164 <label>5+1 Ratio: <input id="flatRatio6" type="number" value="0" /></label> 165 </div> 166 <button id="generateBtn" class="btn-primary"> 167 <svg class="btn-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" 168 xmlns="http://www.w3.org/2000/svg"> 169 <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2" 170 stroke-linejoin="round" /> 171 <path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" 172 stroke-linejoin="round" /> 173 </svg> 174 <svg class="btn-spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" 175 xmlns="http://www.w3.org/2000/svg"> 176 <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" 177 stroke-dasharray="42" stroke-dashoffset="14" /> 178 </svg> 179 <span class="btn-label">Generate Building</span> 180 </button> 181 </div> 182 <div id="threeContainer"></div> 183 184 <button id="helpBtn" type="button" aria-label="How optio works" title="How optio works">?</button> 185 186 <div id="introModal" class="modal-overlay hidden"> 187 <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="introModalTitle"> 188 <div class="modal-header">
189 <span class="modal-logo">optio</span> 190 <h2 id="introModalTitle">How Design Automate works</h2> 191 </div> 192 <ol class="modal-steps"> 193 <li> 194 <span class="step-num">1</span> 195 <div><strong>Set your site constraints.</strong> Site dimensions, max height, TAKS, FAR, and 196 basement levels.</div> 197 </li> 198 <li> 199 <span class="step-num">2</span> 200 <div><strong>Choose a flat mix.</strong> Set the target ratio of studio (1+0) through 5+1 201 units. 202 </div> 203 </li> 204 <li> 205 <span class="step-num">3</span> 206 <div><strong>Generate.</strong> optio searches its BIM model library and stacks compatible 207 units 208 to hit your FAR target without exceeding the height limit.</div> 209 </li> 210 <li> 211 <span class="step-num">4</span> 212 <div><strong>Explore the result.</strong> Orbit, pan, and zoom the 3D model. Totals appear 213 bottom-right.</div> 214 </li> 215 </ol> 216 <button id="closeModalBtn" class="btn-primary">Got it</button> 217 </div> 218 </div> 219 </section> 220 221 <section class="audience" id="audience"> 222 <div class="audience-card"> 223 <h3>For architects</h3> 224 <p class="audience-tagline">You design, we parametrize.</p> 225 <p>Contribute your own residential unit designs to the optio ecosystem. We take your design, 226 encode it against the platform's rule set, and optimize it for each user's criteria, so you 227 design for a platform instead of a single client, and share in the revenue it generates.</p> 228 <a class="btn-ghost" href="mailto:[email protected]">Get in touch</a> 229 </div> 230 <div class="audience-card"> 231 <h3>For manufacturers</h3> 232 <p class="audience-tagline">Get your products into every design optio builds.</p> 233 <p>Make your building products available inside optio-optimized designs. Users see your product 234 where it fits the technical requirements of the model, with full spec information attached.</p> 235 <a class="btn-ghost" href="mailto:[email protected]">Get in touch</a> 236 </div> 237 </section> 238 </main> 239 240 <footer class="site-footer"> 241 <div class="footer-inner"> 242 <span class="footer-brand">optio</span> 243 <div class="footer-links"> 244 <a href="mailto:[email protected]">[email protected]</a> 245 <a href="https://tr.linkedin.com/company/optio-design-technologies" target="_blank" 246 rel="noopener">LinkedIn</a> 247 <a href="landing/pages/partners.html">Become a partner</a> 248 <a href="landing/pages/kullanici-sozlesmesi.html">Terms of Service (TR)</a> 249 <a href="landing/pages/gizlilik-politikası-i-ve-kisisel-veriler.html">Privacy Policy (TR)</a> 250 </div> 251 <p class="footer-copy">© 2026 optio Design Technologies</p> 252 </div> 253 </footer> 254 255
255<script> 256 (() => { 257 const modal = document.getElementById('introModal'); 258 const closeBtn = document.getElementById('closeModalBtn'); 259 const helpBtn = document.getElementById('helpBtn'); 260 261 const openModal = () => modal.classList.remove('hidden'); 262 const closeModal = () => modal.classList.add('hidden'); 263 264 closeBtn.addEventListener('click', closeModal); 265 helpBtn.addEventListener('click', openModal); 266 modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); }); 267 document.addEventListener('keydown', (e) => { 268 if (e.key === 'Escape' && !modal.classList.contains('hidden')) closeModal(); 269 }); 270 })(); 271 </script>
271 272 273
273<script> 274 (() => { 275 const header = document.querySelector('.site-header'); 276 const SCROLL_GAP = 32; 277 278 document.querySelectorAll('a[href^="#"]').forEach((link) => { 279 link.addEventListener('click', (e) => { 280 const id = link.getAttribute('href').slice(1); 281 const target = document.getElementById(id); 282 if (!target) return; 283 e.preventDefault(); 284 const offset = target.getBoundingClientRect().top + window.scrollY - header.offsetHeight - SCROLL_GAP; 285 window.scrollTo({ top: offset, behavior: 'smooth' }); 286 history.pushState(null, '', `#${id}`); 287 }); 288 }); 289 })(); 290 </script>
290 291 292
292<script type="module"> 293 import './cobot_script.js'; 294 </script>
294 295</body> 296 297</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.