Architectural pipeline documentation

Our assets were extracted from raw high-resolution raster sheets using Python with OpenCV. The Component Library sheet contained light cream grid lines that had to be stripped away without affecting the buttons and icons. We achieved this by converting the image to grayscale and applying a binary threshold of 210. Since the background was white (245+) and the grids were around 230, this threshold cleanly mapped all background and grids to pure white (255) and icons to dark shapes, which were then inverted for contour discovery. For other sheets (logos, brand elements), a bilateral filter was applied followed by a Canny edge detector (thresholds of 30 and 100) and morphological dilation to bridge splintered curves.

Once slices were isolated, system icons, brand motifs, and logo variations were vectorized. We first created a 1-bit PBM mask by isolating the alpha channel and thresholding transparency values. A subprocess executed the Potrace command line tool (potrace.exe) to trace the masks into mathematically exact vector paths. To ensure the SVGs work seamlessly within React/TailwindCSS, the generated black fill paths (fill="#000000") were dynamically re-mapped to fill="currentColor". This enables them to inherit states from parent components, such as hover:text-gold.

The structural assets are mapped dynamically using Airtable as our headless CMS. The database schema includes: - Title: Short descriptive name (Text) - Category: 'Brutalist' | 'Concrete' | 'Avant-Garde' | 'Structural' (Select) - Geometry Description: Detailed material specification (Text) - MP4 Path / GIF Path: Links to cinematic loops and static fallbacks (URL) - Status: 'Published' | 'Draft' | 'Archived' In Next.js, we fetch records using the Airtable JS library, filter for published items, and fallback to local gallery JSON files if credentials are not configured.

Aectura uses TailwindCSS v4 with custom tokens mapping to the extracted palette: - Obsidian Black (#1A1A1A): Core background surface. - Charcoal Grey (#2A2A2A): Card panels and inputs. - Structural Slate (#333333): Spacing and dividing line borders. - Metallic Gold (#D4AF37): Primary highlight and focus indicator. For typography, Outfit provides clean readable geometric curves for body descriptions, while Space Grotesk delivers tech-brutalist letterforms for display titles.