How this site was built, and why.

Lead with the flagship.

CYSTEMS runs a three-tier ecosystem: Blueprints (entry, documentation products), CYSTEMS OS (the IP / methodology), and Custom Builds (the flagship, done-for-you AI systems). Three websites were commissioned, each a bet on which tier should lead the brand. This is Concept 1: the bet that the flagship leads.

The reasoning is commercial. Custom Builds are application-only and need no product infrastructure — no catalog, no subscription billing, no platform to ship. A site plus an application form is the entire funnel, so cash can flow first. High-ticket builds are also the highest-trust, highest-margin tier; they fund and lend credibility to everything below. And critically, the site itself is the proof: a cinematic, exquisitely-built page is the sales argument for “we build exceptional systems.” Concept 1 lets craft do the selling.

Sell the system, not the hours.

Most consultants sell ideas; agencies sell hours. Neither compounds and neither defends. CYSTEMS productizes the operating layer of a company — the intelligence that runs sales, ops, content and support — and turns every engagement into two durable assets: owned documentation (a methodology and blueprint catalog) and a recurring intelligence layer. Revenue decouples from headcount.

The compounding loop: a founder buys a Blueprint, adopts the CYSTEMS OS way of operating, and the ambitious ones apply for a Build. Every Build produces new Blueprints and hardens the OS. Knowledge captured in one engagement becomes the product sold to the next. That is the moat.

• Cash & credibility engine — Custom Builds (application-only, premium, done-for-you).
• Recurring future — CYSTEMS OS, eventually a subscription to the living methodology.
• Digital, near-zero-marginal-cost — Blueprints, sold infinitely.
• Scales without linear labour — Blueprints + OS + a certified-installer program.

Flagship front, tiers as proof.

On this site, Custom Builds is the hero — the largest, darkest, most cinematic section, and the destination of every call-to-action. CYSTEMS OS appears as supporting proof (the methodology that makes builds credible) and Blueprints as the connected entry offer. The three are presented as one ladder so a visitor understands the ecosystem while being pulled toward a single action.

Deliberate constraints, straight from strategy: no public pricing, no “book now,” no fake testimonials, and no email addresses. Custom Builds are gated behind an application — scarcity plus fit signals premium. The one authentic piece of IP surfaced is the operational triplet every CYSTEMS system must guarantee: Eco (it runs continuously), Lazo (it’s integrated into your world), Pilar (it stands on disciplined foundations). Missing one, and it’s a demo, not a system.

Educate first, sell second.

The journey is Discover → Learn → Self-qualify → Enter → Ascend. Education earns trust and qualifies intent before any ask. The page is sequenced to walk a visitor down that path and land them on the terminal action.

• Discover — the hero states the thesis in one line: we build the system your company runs on.
• Learn — “What CYSTEMS Does” and the ecosystem ladder teach the model.
• Self-qualify — the “Is your business ready?” section lets a visitor rule themselves in or out, and offers a lighter ask (Request a Systems Audit) for those not yet ready to apply.
• Enter / Ascend — the Apply section is the terminal action; OS waitlist and Blueprint presale capture the overflow who aren’t ready for a Build.

The primary CTA — Apply for a CYSTEMS Build — is repeated at the hero, after the flagship, after the readiness check, in contact, and pinned in the nav. Every scroll ends at Apply. Secondary CTAs are drawn only from the approved list: Request a Systems Audit, Book a Systems Strategy Call, See If Your Business Is Ready, Join the OS Waitlist, Join the Blueprint Presale.

The Atelier: expensive restraint.

The brand world is a single image: an old Andalusian finca, every stone and beam intact, quietly infected with AI. Warm materiality crossed with cold precision. This concept translates that into an editorial-luxury register — a couture house that happens to build AI.

• Cream grounds, ink type, one gold line. Hueso (#F4ECDF) and hierro ink dominate; a single disciplined gold is the only accent. Restraint reads as expensive.
• Negative space is the luxury signal. Generous margins, slow rhythm, one idea per view.
• Alternating grounds. Cream editorial sections alternate with deep hierro and finca-green drama — the flagship and the apply moments go dark and cinematic.
• The tech is felt, not shown. No dashboards or robots. The only “AI” imagery is an abstract system quietly assembling itself in the hero.

Serif wall, mono lock.

The type pairing is the signature: a high-contrast display serif against monospace microcopy. Fraunces carries the display voice (standing in for the brand’s licensed GT Sectra); Inter handles body; Space Mono is the technical lock — labels, coordinates, eyebrows, button text — used like a locksmith’s key on a short leash, never as decoration.

Arcilla (clay-terracotta) is held in reserve for the smallest emphasis — a hover on a use-case heading — so it never loses its charge. White is deliberately absent: pure white is reserved, by brand rule, for OS product surfaces, not marketing.

The page is a timeline, not a stack.

Motion is treated as taste, not decoration. Everything is slow, weighted, and inevitable — expo-out easing (cubic-bezier(.16,1,.3,1)), nothing snaps. The intent is cinematic pacing and confident slowness, a feeling of craft.

• Smooth scroll via Lenis, so the whole page moves with weight.
• Scroll-scrubbed storytelling via GSAP ScrollTrigger — reveals, a parallaxed hero, and a gold hairline that draws down the Process rail as you read it.
• Kinetic type — headlines split into lines that rise from a mask; sections wipe in with clip-path.
• Systemic hero — a canvas node-graph where nodes fade in, gold hairlines draw between them, and pulses travel the edges: intelligence organising itself, not a gimmick.
• Micro-interactions — magnetic buttons, gold underline draw-ons, hover depth.
• Performance is part of taste — the canvas caps DPR at 2, keeps node counts light, and pauses when off-screen; 60fps or the effect is cut.

Two references, neither copied.

MotionSites.ai set the technical ceiling — WebGL, scroll-scrubbed scenes, buttery smoothness, kinetic type, spatial depth. It defined how good the interaction should feel, not what it should look like. An Instagram reel set the emotional register — cinematic pacing, atmospheric rhythm, deliberate reveals, a feeling of inevitability.

Both were reinterpreted into something unmistakably CYSTEMS: warm instead of neon, systemic instead of showy, restrained instead of maximal. The node-graph hero borrows the “spatial depth” idea but renders it in finca-green and brass on cream, so it reads as an old house’s intelligence rather than a sci-fi HUD. Editorial luxury (think a couture maison’s site) supplies the negative space and the big serif; the finca brand supplies the warmth and the invisible-technology philosophy.

Static, hand-authored, deployable.

No framework and no backend. Hand-written index.html and guide/index.html, one CSS design-system file, and one JS motion module. It deploys to Vercel static as-is.

• Design tokens as CSS custom properties; fluid type via clamp(); layout in CSS grid.
• Libraries loaded from CDN, deferred: GSAP 3.12 + ScrollTrigger, Lenis 1.0. Vanilla JS otherwise.
• Progressive enhancement — the page ships with a no-js class swapped to js; without JS, everything is visible and readable.
• The form is client-side only — it shows a confirmation state on submit; no email address, no backend. Wiring a real endpoint is a one-line change at deploy.
• Accessibility — semantic landmarks, labelled form fields, visible focus, reduced-motion path, live-region confirmation.

What changed, pass by pass.

The build was refined in three deliberate passes, each evaluating business-model clarity, offer architecture, funnel logic, hierarchy, copy, premium feel, originality, type, colour, layout, spacing, motion, interaction, mobile, performance, and conversion.

Note: a live visual QA pass (real-browser screenshots at desktop and mobile) is still pending — browser automation was offline during this build, so verification was done at the code level.

The method, transferable.

The approach is repeatable for any premium, application-led service brand:

• Start from strategy, not pixels. Decide which offer leads and let every section serve one terminal action.
• Author a token contract first. Colour, type scale, spacing, and motion easing as variables — then every value routes through it.
• Write all copy before you build. Real, voiced copy from brand truths; if you’re inventing words inside the layout, stop and write the brief.
• Pick a signature and commit. Here it’s serif-against-mono on cream with one gold line and a self-assembling system. One strong idea beats five weak ones.
• Motion as timeline. Smooth scroll + scroll-scrubbed reveals, slow weighted easing, and a single hero moment that means something.
• Degrade everything. Reduced-motion and no-JS paths are not optional; build them as you go.
• Iterate in named passes. Structure, then craft, then hardening — improving against a fixed checklist each time.