Design System and Multi-Page Platform for an Engineering Studio

Context

The market for digital studios and AI integrators is saturated with identical promises. Agency sites fall into two camps: templated service catalogs with icons from free packs, and hype-loaded pages where, behind the talk of transformation, not a single built system is visible. A professional buyer — one who benchmarks a vendor against top global studios rather than freelancers — reads both extremes instantly and trusts neither.

For a studio that sells web development and AI adoption, its own site is not a marketing channel but the first exhibit of its expertise. It is the only project a prospective client can inspect before signing: open the source, measure the page weight, watch how the animations behave on a low-end device. Any gap between the declared standard and the actual execution erodes the negotiating position faster than an empty portfolio would.

That is exactly where the difficulty lies. An engineering studio's showcase has to carry a double load: perform as a selling product for a segment positioned above the low end of the Dubai and European markets, and simultaneously serve as technical proof — a sample of what the studio can build for a client. A compromise in either direction breaks the construction: a beautiful but heavy site refutes the performance claim; a fast but faceless one refutes the design claim. Scale adds a further dimension: one page can be held to a single standard by hand, eighteen can only be held there by a system.

Objective

Build a platform that is itself the portfolio. Not a services brochure, but proof of engineering culture: if a studio charges premium rates for interfaces and AI products, its own site must hold the same standard as the work it shows clients. Every element — from the typography to the way content is stored — has to withstand a professional's scrutiny.

The bar is set by the positioning: a strict, premium look with no clichés, no stock imagery, and no animation for animation's sake. Product interfaces in the case studies are shown as code rather than screenshots, so the page itself demonstrates the level of execution the studio sells.

Taste constraints were locked in before work began, as formal design-system rules: a clean, restrained, professional look with a single accent. No childish animated gradients, no gradient text in headings, no endless floating motion without an explicit reason. Everything that lives on screen must carry meaning — that requirement became the acceptance criterion for every section.

Approach

The build ran as a fan-out: roughly 39 agents worked in parallel — about 30 in the content engine and 9 in design review. The content side generated and refined copy, structure, and mockups; the review loop checked the output against the locked-in rules and stripped anything drifting toward template or hype. Separating production from control kept a single tone across the full page count without manually proofreading every screen.

The brand voice was set by one directive: engineering systems, not impressions. A number instead of an adjective, a fact instead of a promise. The lexicon bans "revolutionary," "turnkey," "innovative," and exclamation marks — rhetoric that devalues a premium product faster than any layout bug. Every case study in the work section is written to that standard: what was built, out of what, with which measurable characteristics.

The technology choice — vanilla, no build step — was deliberate. For a platform of this class, a framework means extra weight, an extra point of failure, and a dependency on someone else's release cycle. The front-end core is three files: index.html, assets/app.css, assets/app.js, totaling about 100 KB. That is not asceticism but an argument: in a performance conversation with a client, the studio cites its own site as a measurable precedent.

Design system

The palette is built on the contrast between depth and a single cold accent: an obsidian #050609 background, platinum ink for text, and electric #5B8CFF as the only active color. The indigo→teal iridescent gradient is used sparingly, never as a full-screen fill. Bronze #C8A46A comes in as a luxe detail — a thin line of premium, not decoration. The system directly encodes the owner's taste rules: restraint reads as confidence; premium does not shout.

The typography is set in three typefaces with divided roles: Unbounded for display headings, Onest for body text, JetBrains Mono for meta and technical labels. All three were selected for proven Cyrillic support — for a platform carrying both Russian and Latin content this is not a detail but a baseline requirement: display fonts routinely break on Cyrillic headings, and such a defect on a studio's own showcase is unacceptable.

The design system operates as law, not guidance: the single accent, the strict grid, and the ban on gradient text in headings apply across all 18 pages — from the landing page to every case-study page and lab card. Consistency at scale is precisely what distinguishes a system from a single well-crafted page.

Architecture

The platform consists of two layers: a presentation core and a content engine. The core is the landing page, unfolding into 15+ sections as one narrative: hero, marketing marquee, showcase dashboard, manifesto, services, an AI bento grid with an agent graph, live systems, case studies, a five-stage process, metrics, the studio with testimonials, engagement models, FAQ, a CTA with a form, and a footer. On top of the core sits the multi-page layer: a work section with 13 full case-study pages, a lab with 13 experiment cards, about and contact pages, sitemap, robots, and a 404 page.

The multi-page layer is driven by a Python static-site generator: build.py reads structured content — site.json plus the JSON files for case studies and lab cards — and produces finished HTML pages with canonical URLs, OG markup, and asset versioning. Content is fully decoupled from presentation: a new case study is a single JSON file conforming to a fixed contract, not hand-built markup, and the generator is resilient to bad data — a malformed file is skipped with a diagnostic instead of failing the build for the remaining pages. Case studies are distributed across five categories, from products and platforms to AI production, and the navigation across them is built automatically.

The signature element of the presentation layer is a kinetic Cyrillic hero and a live AI core rendered on canvas: particles flow into an icosphere crystal and back, with the morphing driven by scroll energy. The core pauses correctly on visibilitychange when the tab is inactive: performance and respect for the battery are built into the system's behavior, not appended at the end. Product mockups — a dashboard, an agent graph, a chat copilot, a deploy terminal — are drawn as inline SVG instead of stock images: sharper, lighter, and more honest, with the studio showing the interfaces it can build right in the page's own code.

The motion layer is pure vanilla: reveal-on-scroll via IntersectionObserver, magnetic buttons, 3D-tilt windows, a reading progress bar, film grain over the frame, and counters. Every effect works without libraries and stays inside the overall weight budget. The deployment path is prepared: a Dockerfile and cloud-hosting configuration live in the repository, and publishing to a domain is a single-command operation.

Outcome

The result is an 18-page platform: the landing page, the work section, 13 full case-study pages, the lab, and the about and contact pages. The front-end core weighs about 100 KB and requires no build step; content lives in structured data and is regenerated into static pages with a single command. A local preview runs on a plain static server — python3 -m http.server on port 8793 — with zero dependencies.

The platform functions as a sales reference: in client meetings it demonstrates what a premium site for web development and AI adoption looks like and how it behaves — from the design system to the content-management approach. This changes the structure of negotiations: instead of an abstract discussion of quality, the studio shows a working precedent and states its measurable characteristics. The brand name is deliberately a placeholder: the architecture transfers to a specific client or a future rebrand without rework — only the data layer changes.

The measurement groundwork shipped with the platform: sitemap, canonical URLs, and OG markup are generated for all 18 pages, so connecting web analytics after publication on the production domain is a configuration step, not an engineering task. Until launch, the platform serves as the internal quality standard the studio's client projects are held to — a working reference for weight, structure, and content architecture.

What we built

• Static-site generator

  build.py in Python assembles 18 pages from structured content: site.json, JSON case studies, and lab cards become HTML with canonical URLs, OG markup, and asset versioning.

• Kinetic hero + AI core on canvas

  A Cyrillic display hero and a live particle core that morphs into an icosphere crystal driven by scroll energy, pausing on visibilitychange.

• Design system

  Obsidian #050609, platinum ink, a single #5B8CFF accent, a sparing indigo→teal gradient, and bronze #C8A46A; three Cyrillic-ready typefaces — Unbounded / Onest / JetBrains Mono.

• Content layer: work and lab

  13 full case-study pages across five categories and 13 lab cards; a new case study is one JSON file conforming to a contract — no hand-built markup.

• Inline SVG mockups

  The dashboard, agent graph, chat copilot, and deploy terminal are drawn directly in the markup instead of using stock images.

• Vanilla motion layer

  IntersectionObserver reveals, magnetic buttons, 3D-tilt windows, a progress bar, grain, and counters — without a single external library.

• Brand voice

  Engineering systems, not impressions: numbers instead of adjectives, no hype, clichés, or exclamation marks — the standard across all 18 pages.

• Three-file core, ~100 KB

  index.html, assets/app.css, assets/app.js with no build step; local preview on port 8793, Docker deployment path prepared.

Engineering challenges