# Utility gallery studies: evidence and design plan This note records why the Mintlify and Supabase variants are structural studies rather than palette swaps. The implementations are in `tools/gallery_utility.py`; no shared gallery registry or generator is changed here. ## Sources checked ### Mintlify - First-party design-system snapshot: `reference/design-md-official/mintlify/DESIGN.md` (published source: ) - Third-party extracted analysis (useful but not authoritative): `reference/design-md/design-md/mintlify/DESIGN.md` - Current official documentation surface, fetched 2026-10-13: - Current official marketing page, fetched 2026-10-13: Current docs HTML corroborates grouped left-sidebar navigation, a persistent search entry, dense content, and reference/guide sections. The official design file specifies a 24-column desktop grid collapsing to 12 and 4 columns, 1088px content bounds, hairline rails, short motion, visible focus, and a theme-aware green token. **Uncertainty:** the third-party analysis describes an older cinematic marketing hero. The current live documentation surface is stronger primary evidence for a useful service directory, so this study intentionally models the docs product, not that marketing hero. It does not claim to reproduce Mintlify's proprietary product or assets. ### Supabase - Third-party extracted analysis: `reference/design-md/design-md/supabase/DESIGN.md` - Current official homepage, fetched 2026-10-13: The current homepage exposes the title “The Postgres Development Platform,” a split hero (“Build in a weekend / Scale to millions”), and named product panels for Database, Authentication, Edge Functions, Realtime, and Storage. Its server-rendered markup also shows an asymmetric multi-column product grid and product-interface imagery. This corroborates the analysis file's core claim that product UI, not decorative photography, is the design argument. **Uncertainty:** the local analysis emphasizes a white marketing canvas, while the live site supports light and dark themes. This study selects the live dark developer surface as one valid current state and does not present theme color as the structural evidence. No real operational metrics, status, or copied product screenshots are used. ## Design plans ### Mintlify — documentation reader - **Color tokens:** paper `#ffffff`, ink `#171717`, soft panel `#f7f8f8`, hairline `#e7e9e8`, active green `#0c8c5e`. - **Type:** system Inter-like sans for reading; system monospace only for document labels. - **Layout:** sticky top search over a desktop three-column docs shell. ```text [ brand ][ global search ][ gallery ] [ category rail ][ prose + service entries ][ on this page ] ``` - **Signature:** services read as documented capabilities in a stable reading column; category and search controls refine that same document in place. - **Self-critique:** a generic marketing hero would conflate the older extracted page with today's product. The docs shell is both better evidenced and functionally useful. ### Supabase — developer product index - **Color tokens:** near-black `#0d0d0d`, raised surface `#151515`, hairline `#2a2a2a`, text `#f1f1f1`, emerald `#3ecf8e`. - **Type:** restrained system sans for UI; monospace for the single command example. - **Layout:** split statement hero, one bounded console sample, then asymmetric product panels that collapse to compact rows on mobile. ```text [ Build… / Scale… ][ product explanation + action ] [ bounded command surface ] [ wide product ][ product ][ product ] [ product ][ wide product ][ product ] ``` - **Signature:** the service catalog behaves like a platform's product architecture; uneven panel spans encode product breadth without inventing dashboard data. - **Self-critique:** glowing gradients, charts, and fake uptime would be easy developer- SaaS decoration but are unsupported. They are excluded; product hierarchy carries the identity. ## Shared behavior and constraints - Every supplied service is emitted exactly once as `a[data-service]` with its complete title, description, URL, ID, and category. - Search and category navigation are functional and update an announced result count. - Service content and attribute values are HTML-escaped. - Both studies support 320px and wider layouts, visible keyboard focus, 44px controls, and `prefers-reduced-motion` through the shared structural base. - All colors are declared as CSS custom-property tokens. No external fonts, images, or runtime dependencies are introduced. ## Focused verification - Python compilation and renderer-contract checks passed for both selectors. - The current 22-service source set appears exactly once per renderer as `a[data-service]`; title, full description, URL, ID, and category were retained. - A hostile fixture containing angle brackets, quotes, and ampersands remained escaped in text and attribute contexts. - Headless Chromium checks passed at 1440, 768, 390, and 320 CSS pixels with no horizontal document overflow, page errors, or missing service links. - Search reduced “Lucky Drop” to one result in both studies; selecting the first real category reduced each list to the expected seven source services. These checks verify content preservation, responsive containment, and interaction. They do not claim pixel-level reproduction of either brand's proprietary site.