How this site was drawn.

The concept — "The Drafting Table"

This is one of three CYSTEMS websites, each a bet on which tier of the business should lead the brand. This one leads with the entry product: Blueprints. The organising metaphor is an architect's drafting table — the future of implementation drawn before implementation.

The core idea: a business is a system, and a good system can be drawn like a building. Automation maps, AI-agent diagrams, workflow plans, SOPs and operating manuals are the "drawings". Selling the drawings — as owned, documented products — is the lowest-friction way into the CYSTEMS methodology, and it validates demand before anything heavier is built.

Every design decision serves that metaphor: warm blueprint paper instead of cold cyan, hierro-ink linework, gold annotations, coordinate rulers, sheet numbers, title blocks, registration marks, and diagrams that draw themselves as you scroll — as if an architect were inking them in front of you.

The business model it supports

CYSTEMS is a three-tier ecosystem where each tier feeds the next and each is more scalable than the last:

• Entry — Blueprints. Digital documentation products (maps, SOPs, diagrams). Near-zero marginal cost, sell infinitely, buy today. This site's hero.
• Ascension — CYSTEMS OS. The proprietary operating-system methodology and living intelligence layer. The IP and the recurring-revenue future.
• Flagship — Custom Builds. High-ticket, application-only, done-for-you systems. The cash and credibility engine.

The loop is the moat: a founder buys a Blueprint → adopts the OS way of operating → the ambitious apply for a Custom Build → every Build produces new Blueprints and hardens the OS. Knowledge captured in one engagement becomes a product sold to the next. Revenue decouples from headcount.

The strategic point of difference: most "AI automation agencies" sell labour (hours, retainers, one-off builds) which doesn't compound and doesn't defend. CYSTEMS productizes the documentation and sells an operating system, so intelligence compounds on the client's side as owned IP.

Product strategy — the catalog

The catalog is the heart of the site. Seven Blueprint categories, drawn as a set of numbered sheets (A-01 … A-09):

• Automation Maps — repeating work as trigger → action → hand-off.
• AI Agent Diagrams — owned-agent architecture; support-desk decision trees.
• Workflow Blueprints — repeatable content and ops workflows.
• Implementation Plans — phased, dated 90-day rollout.
• SOPs — documentation clear enough to become the product.
• Operating Manuals — the whole company in one living binder.
• Funnel / CRM / Content maps — lead-to-client and pipeline systems.

Each card carries a status that doubles as the funnel mechanic: Available (Get the Blueprint), Presale (Join the Presale), In Draft (Request Access). Scarcity and sequence are built into the catalog itself — you're not just browsing, you're reserving a place in a line.

Funnel & presale logic

The journey is education-first, sell-second: Discover → Learn → Self-qualify → Enter → Ascend. Free education (this Guide) earns trust and qualifies intent; the catalog captures demand; the OS and Custom Builds ascend the serious.

Presale does three jobs at once:

1. Validates demand before the full catalog is built — the interest-select field tells us which sheets to draw next.
2. Builds the list — a low-risk email capture that seeds the entire ecosystem's audience.
3. Creates sequence & scarcity — "first in line as sheets ship" gives a reason to act now without a discount.

No public pricing anywhere. The terminal action is Join the Blueprint Presale / Get the Blueprint / Request Access — never "Buy". Custom Builds stay application-only ("See If Your Business Is Ready"). Every scroll ends at one of these three doors.

Design direction

Brand DNA is CYSTEMS v2 — "an Andalusian finca infected with AI": warm materiality (earth, stone, clay, ownership) fused with cold machine precision (nodes, meshes, motion). Not a generic dark-mode SaaS site.

This concept's specific art direction is the architect's blueprint reinterpreted in brand warmth:

The signature move is treating every surface as a drafting sheet: corner registration marks, a title block (DWG · SCALE · REV), coordinate rulers as section eyebrows, and sheet numbers (A-01 … C-00) as a navigational grammar.

Visual techniques

• Grid paper — two stacked CSS linear-gradients (26px minor, 130px major) in warm ink at very low opacity; fixed behind everything.
• Film grain + vignette — an inline SVG feTurbulence data-URI at mix-blend-mode: multiply, so the paper never reads as flat digital cream.
• Alternating bands — sections alternate between base paper and a slightly warmer band (--ground-2) with hairline rules, giving rhythm without color noise.
• Drafting frames — .sheet gives any block a bordered frame with gold corner ticks and an optional title block.
• Callouts — mono labels with a leader dot, echoing the way an architect annotates a drawing.
• Status badges — Available / Presale / Draft encoded in finca-green / gold / steel-blue, doubling as the funnel state.

Motion approach

Motion should feel like intelligence organising itself, not decoration. The stack is GSAP + ScrollTrigger + Lenis smooth scroll. Key mechanics:

• SVG stroke-draw — the signature. Every [data-draw] path measures its own length via getTotalLength(), sets stroke-dasharray/dashoffset to that length, then animates the offset to zero when it scrolls into view. Paths draw in DOM order with a stagger, so a diagram inks itself line by line; text labels fade in after the lines finish.
• Hero timeline — masked headline lines rise on load (yPercent 110 → 0, expo ease); lead and CTAs fade up after.
• Blueprint reveals — [data-reveal] elements fade and lift on enter; a clip-path wipe option for "unrolling" a drawing.
• Catalog interactions — filter chips re-stagger visible cards; cards lift with a gold border and a hover callout on the diagram.
• System map — hovering any node writes a live mono readout describing which Blueprint installs there.
• Micro — magnetic primary buttons, a left drafting-margin progress rail, number count-ups.

Discipline: everything respects prefers-reduced-motion (draws snap complete, reveals show instantly, grain hides). Smooth scroll is disabled for reduced-motion. Performance is treated as taste — transforms/opacity only, once: true triggers, and graceful fallback to IntersectionObserver if GSAP fails to load.

Inspiration — reinterpreted, not copied

• Architectural drafting — title blocks, sheet numbers, revision marks, dimension lines, coordinate rulers. Reinterpreted onto warm paper instead of literal blueprint cyan.
• MotionSites.ai — the technical/interaction ceiling (scroll-scrubbed, buttery, kinetic). Borrowed as a standard, not a look: our version is warm and diagrammatic, not glassy WebGL.
• The CYSTEMS reel — its emotional register (cinematic pacing, confident slowness, deliberate reveals). We translate that into weighted easing and self-drawing diagrams.
• Living Roots / hieroglyphic mark systems — the CYSTEMS glyph alphabet (Eco spiral, Lazo link, Pilar pillars) rendered here as fine-line blueprint icons.

The rule: reference intent, never clone execution. The result had to be unmistakably CYSTEMS — warm, systemic, precise.

Technical implementation

Fully static, no backend, Vercel-deployable. Structure:

concept-3-blueprints/
├── index.html          # single-page site, all sections + inline SVG diagrams
├── guide/index.html    # this page (the required /guide route)
├── css/style.css       # tokens, drafting-sheet system, components, responsive
├── js/main.js          # GSAP/ScrollTrigger/Lenis, stroke-draw, interactions
├── assets/favicon.svg  # drafted "C" mark
└── README.md           # what it is + how to run/deploy

Libraries load from CDN with defer: GSAP 3.12, ScrollTrigger, Lenis. Fonts via Google Fonts. Diagrams are hand-authored inline SVG (so JS can measure and draw each path). The presale form is client-only — validate, then show a confirmation; wire [data-form] to a real endpoint (Formspree / serverless / CRM) at deploy time.

Quality gates honoured: mobile-first responsive, prefers-reduced-motion, no console errors, fast LCP (text-first hero, deferred JS), real founder copy, no public pricing, no email addresses, no Pinterest, no fake testimonials.

What changed across the 3 iteration passes

The site was built and then improved in three deliberate passes, each targeting different axes from the shared design spec (business-model clarity, hierarchy, copy, premium feel, motion, mobile, performance, conversion).

Note: browser-based visual QA (real-device screenshots, Lighthouse, live 60fps check) is pending — browser MCPs were offline for this build session. The site is verified at code level; a live visual pass should be run before deploy.

How you could build something similar

1. Pick the tier that leads. Decide which offer the whole site argues for. Here it's the entry product; every section supports the presale.
2. Choose a real metaphor and commit. "Drafting table" drove color, type, motion and copy. A metaphor beats a mood board — it makes a hundred small decisions for you.
3. Write copy before pixels. Founder voice, no hype, no lorem, no pricing. If a claim can't be verified, cut it.
4. Define tokens first. Palette, type scale, spacing, motion easing as CSS variables — then never hand-pick a value again.
5. Make one signature interaction. Ours is self-drawing SVG. One memorable, on-brand mechanic beats ten generic ones.
6. Layer motion, don't lead with it. Reveals and stroke-draws on top of a page that already works statically. Respect reduced-motion from the start.
7. Bake the funnel into the UI. Statuses, scarcity and a single terminal action per page — not a bolted-on form.
8. Iterate in named passes. Structure → craft → polish. Improve on set axes each pass and write the deltas down (this section).

Join the Blueprint Presale