Why this site looks and works the way it does.

001The strategy behind CYSTEMS

Most consultants sell ideas. Agencies sell hours. CYSTEMS sells the system — designed, documented, installed, and kept intelligent. The strategic mistake every AI automation agency makes is selling labour: retainers, hours, one-off builds. Labour doesn’t compound and it doesn’t defend a market position.

CYSTEMS wins by turning every engagement into two things a competitor can’t easily copy: owned intellectual property (a documentation product line) and a recurring intelligence layer. Revenue decouples from headcount. Knowledge captured in one engagement becomes a product sold to the next. That is the compounding moat.

The three-tier ecosystem

Each tier feeds the next and each is more scalable than the last:

• CYSTEMS Blueprints — documentation and system maps. The low-friction entry. Buy today, adopt the way of operating.
• CYSTEMS OS — the named operating-system methodology, the IP, the eventual recurring layer. The reason a CYSTEMS company runs differently.
• Custom CYSTEMS Builds — done-for-you AI systems, application-only. Highest margin, highest trust, and the engine that generates the next Blueprint.

The loop: a founder buys a Blueprint, adopts the OS way of operating, and the ambitious ones apply for a Build. Every Build produces new Blueprints and hardens the OS.

002The business model

This concept bets that the platform / IP tier leads the brand. The site is a product surface for CYSTEMS OS — an installable business-intelligence layer of modules, agents and system maps — rather than a services brochure.

Flagship

Custom Builds — high-ticket, application-only, done-for-you. The cash and credibility engine.

Entry

Blueprints — documentation and system-map products, presale and digital. Lowest friction into the methodology.

The IP / moat

CYSTEMS OS — the proprietary operating-system methodology installed across sales, ops, content, support, analytics, leadership, and the decisions between.

Free

The Guide (this document’s public cousin) plus a systems-readiness teaser — education first, earns trust, qualifies intent.

Recurring future

CYSTEMS OS access — the living methodology, updated agent libraries, an operator community, and eventually a real software layer.

No public pricing

Application and waitlist gates signal premium and scarcity. Serious operators apply.

A note on sequencing: across the CYSTEMS family, the flagship public site ships first (fastest to cash), Blueprints second (list-building), and the OS commercial front — this concept — is the biggest build and the recurring-revenue prize. os.cystems.io already exists as an internal OS surface; this is its eventual commercial face.

003The funnel & terminal action

The journey is education-first, sell-second:

DISCOVER  →  LEARN  →  SELF-QUALIFY  →  ENTER  →  ASCEND
  site/       the Guide    "See if your     OS         Custom
  social      + teaser     business is      waitlist   Build
                           ready"           / access   application

Every section on this concept moves toward one terminal action: the CYSTEMS OS waitlist (“Join the CYSTEMS OS Waitlist” / “Request Access”). Access opens in waves; the waitlist is the qualification gate. The approved secondary CTA — “See if your business is ready” — catches visitors who aren’t ready to commit and routes them back into the education layer instead of losing them.

Deliberately absent, per brand rules: no public pricing, no email addresses, no “book now” begging, no fabricated testimonials or logos. The stats on the page (8 modules, 3 tiers, 1 terminal action) are structural facts, not invented metrics.

004The reel-derived design direction

The whole family is derived from a frame-by-frame study of a reference reel — a light, airy, ultra-premium agency site whose hero is a photoreal particle/filament cloud igniting from within with molten-gold embers. OBSIDIAN takes that visual language and inverts it into a dark world: near-black obsidian grounds, off-white text, and molten gold glowing out of the darkness. A nocturne. Luxury, heavy, cinematic.

Palette

Monochrome-dark plus a single accent family. Gold is the only colour that isn’t a shade of black or white — so every gold mark reads as intent: a headline word, a hairline tick, a live dot, an ember underglow.

Type

Clean geometric grotesque — Hanken Grotesk for display and body, Space Mono for labels, the section index, and technical tags. These are the declared free substitutes for Geist named in the token doc; no serif, no Inter/Roboto/system-font slop. Headlines are uppercase with tight tracking; labels are uppercase with wide tracking. The contrast between the two is the whole typographic system.

Layout language

• Tiny, wide-tracked mono navigation. A section index (001 / 006) and a scroll cue in the hero chrome.
• Enormous negative space; content floats. Thin hairlines, and a short gold tick at the top of every section for rhythm.
• Grids (tiers, modules, services, cases) sit as lifted panels against alternating grounds so the page reads as distinct cinematic chapters, not one flat sheet.
• Three glossy 3D gold-glass geometric icons (ring, triangle, diamond) mark the three install moves.

The token contract

Every visual value routes through a CSS custom property in :root. A mechanical audit confirms no raw solid-colour hex lives outside the token definitions. If the built page and the spec ever disagree, the deliverable is wrong, not the spec — fix the page to obey the tokens.

005Motion & the hero

The hero is the non-negotiable “wow”: a real generated video of an ember/particle cloud on a black ground, gold glowing in the dark, scroll-animated — never a CSS or canvas doodle.

<video autoplay muted loop playsinline poster="assets/hero-poster.jpg">
  <source src="assets/hero.mp4" type="video/mp4">
</video>

The video is full-bleed with object-fit: cover, so a 16:9 loop drops in and fills any viewport. A layered scrim buries the edges, behind-nav and behind-text areas in near-black — so the nocturne reads deep even before the real dark clip replaces the placeholder poster. An ember underglow bleeds up from below the fold.

Scroll-drive

• Lenis smooth scroll + GSAP ScrollTrigger.
• On scroll the hero media scales and parallaxes, the underglow ignites, and the headline block drifts up and fades — the page “enters” the darkness.
• Staggered line reveal on the headline; batched reveals on every section below; a magnetic pull on buttons; a live gold dot on the primary CTA; count-ups on the stats.
• The section index advances as you pass each chapter.

Robustness

Everything degrades gracefully. The site renders fully if the CDN scripts never load (reveals fall back to an IntersectionObserver, then to plain visibility). prefers-reduced-motion disables the scrub and the intro, shows the poster still, and turns reveals into instant visibility. A ?cap=1 capture mode disables only the live scroll-scrub so screenshots show the deterministic at-rest hero.

006The iteration passes

Built design-system-first, then iterated one visual dimension at a time, each verified with full-page screenshots at 1440px and 390px — reading the images, never self-grading blind.

Pass 1 — Baseline & honest verification

Assembled the whole page from the token contract and shot both viewports. The first capture exposed a verification trap: scroll-reveal content is invisible to a static full-page screenshot because the reveals never fire off-screen. Built a scroll-through capture harness that drives the page like a real user so every reveal fires before the shot — so the screenshots tell the truth.

Pass 2 — Section contrast & structure

The dark page read a touch monotone — chapters blurred together. Widened the value steps between alternating grounds and added a short gold hairline tick at the top of every section. The page now reads as distinct cinematic chapters with editorial rhythm.

Pass 3 — Hero nocturne depth

The hero scrim wasn’t dark enough to sell the dark world over a bright placeholder poster. Deepened the layered scrim so edges, behind-nav and behind-text go near-black while the centre stays a readable window for the ember glow — the nocturne now holds regardless of what clip drops in.

Pass 4 — Index consistency & token audit

Measured the layout in a real browser, which surfaced the section-index counter reading the wrong total (it counted sub-sections). Fixed it to report the highest chapter number (001 / 006). Ran the mechanical token audit and routed the two remaining solid-colour literals through new tokens — the contract is clean.

007How to rebuild it

Structure

concept-5-obsidian/
  index.html          single-page site (all sections)
  guide/index.html    this document
  css/styles.css      tokens + all styling
  js/main.js          Lenis + GSAP, hero scrub, reveals, index, form
  scripts/shot.mjs    scroll-through screenshot harness
  assets/             marks, hero poster/video, gold-glass icons
  vercel.json         static headers

Run locally

cd concept-5-obsidian
python3 -m http.server 8235
# open http://127.0.0.1:8235/  and  /guide/

Drop-in assets

• assets/hero.mp4 + assets/hero-poster.jpg — a 16:9 ember/particle-cloud clip on a black ground (gold glowing in the dark), ~6–8s seamless loop. Cover-filled, so aspect is forgiving. The <video> shows the poster until the clip is present.
• assets/icon-ring.png / icon-triangle.png / icon-diamond.png — glossy 3D gold-glass renders, ~512px, transparent. Each <img> loads the PNG and falls back to the shipped SVG placeholder, so drop-in is zero-touch.
• Provided logos and marks are copied verbatim into assets/ and referenced by path — never redrawn.

Screenshots

PW_MODULE=<path-to-playwright> \
  node scripts/shot.mjs "http://127.0.0.1:8235/?cap=1" out.png 1440 900

Deploy

Static, no build step, Vercel-deployable with index.html at the root. noindex, nofollow is set. This concept is staged for review — it is not deployed from this build.

← Back to the site