The Guide · Concept "Liquid"
The strategy, the business model, the funnel, and the reel-derived design language behind the Blueprints direction — written so another founder or designer could rebuild it.
01
"Liquid" is the entry point to the CYSTEMS ecosystem. It leads with Blueprints — the documented systems behind a business that runs itself: automation maps, AI-agent diagrams, workflow blueprints, SOPs and operating manuals. The premise on the page is a founder's line — the blueprint comes before the build. You can own the plan for an intelligent operation before you commission the whole thing.
It is deliberately the most accessible of the three CYSTEMS futures. Where the flagship site sells a bespoke build and the OS site sells an operating layer, this one sells documentation as a product — the lowest-friction way to buy into the methodology.
02
CYSTEMS is an ecosystem, not an agency. Three tiers, each more scalable than the last:
Blueprints does two jobs: it builds the list and it qualifies intent. A founder who buys a Blueprint has told you exactly what they want built — the warmest possible lead for a Custom Build later. Knowledge captured in one engagement becomes a product sold to the next. That is the compounding moat.
03
The catalog is presented as an architect's set of drawings — a browsable set of blueprint "sheets" across the core categories (automation maps, agent diagrams, workflow blueprints, funnel & CRM maps, operating manuals). Each is a self-contained digital product designed to sell infinitely. Presale-first means demand is validated before the full catalog ships.
04
Education first, sell second. The page teaches what a Blueprint is and why owning the plan matters, then drives one terminal action: Join the Blueprint Presale / Get the Blueprint. No public pricing — the presale is the qualification and the commitment device. Buyers who want the whole thing built are handed up to the Custom Build application; everyone else joins the list.
05
This concept is the light, editorial member of the CYSTEMS family. The hero material is molten liquid gold — a glossy, flowing centerpiece over a warm near-white ground. The palette is strict: warm bone paper, near-black ink, and molten gold as the only accent. Type is a clean geometric sans (Hanken Grotesk) with a mono (Space Mono) for labels, section indices and coordinates. Uppercase headlines, wide tracking, enormous negative space, thin hairlines. No serif anywhere.
It shares the CYSTEMS brand family with its siblings — the light "Ember" flagship and the dark "Obsidian" OS site — but is its own visual world: brighter, more editorial, built around the liquid-gold object and glossy 3D gold geometry.
06
Lenis smooth scroll + GSAP ScrollTrigger. The hero is a real generated video of molten gold flowing, scroll-driven — it scales and parallaxes as you enter and drifts as you pass. Section transitions use weighted, expo-eased masks and reveals; a mono section-index counter advances as you move through the page; buttons are magnetic and gold hairlines draw on. Everything degrades under prefers-reduced-motion to a still poster frame and simple fades. The rule throughout: 60fps or cut the effect.
07
Two references set the bar: a motion-forward agency site for the level of interaction and polish, and a cinematic reel studied frame by frame for its emotional register — a photoreal rendered hero that ignites with molten gold, clean uppercase sans type, a monochrome-plus-gold palette, and glossy 3D gold objects. Neither was copied. The underlying principles — real generated hero media, cinematic pacing, restraint, gold as the single accent — were reinterpreted into something unmistakably CYSTEMS. Here that meant translating "ignition" into "flow": liquid gold instead of embers.
08
Static and deployable — hand-authored index.html, one stylesheet, one script, no backend. The hero uses a generated assets/hero.mp4 (with a hero-poster.jpg still for instant paint and reduced-motion) and glossy gold-glass icons rendered as assets/icon-*.png. Fonts load from Google Fonts. Security headers ship via vercel.json. The page is noindex — it's a concept preview and must not dilute the live brand.
09
10
Start from the strategy, not the pixels. Decide the tier the site leads (here, Blueprints) and its single terminal action. Lock a strict palette (bone / ink / one gold) and a clean sans + mono pairing before you touch layout. Generate a real hero material rather than faking it in canvas — a rendered liquid-gold clip with a poster still. Build the page as a scroll timeline with Lenis + GSAP, keep enormous negative space, and let one accent colour and one cinematic hero carry the whole thing. Then iterate at least three times, judging with your eyes each pass, and hold the line on 60fps and no buzzwords.