# v0 BUILD BRIEF — FRACTAL by Dischler Intelligence ## The landing hero for dischler.ai/fractal > Paste this entire document into v0 as a single prompt. Do not summarize it. Every constraint below is deliberate. Where a value is given, use that exact value — do not substitute, "improve," or round. This is a specification, not a suggestion. --- ## 0. THE ONE THING TO UNDERSTAND FIRST You are building the public face of an intelligence platform for people who run sovereign wealth, family offices, and macro funds. The audience has seen every premium product on Earth. They own the Patek. They stay at Aman. They fly private. **Nothing on this page may look like a SaaS template.** No purple gradients. No rounded cards floating on white. No stock-photo abstraction. No emoji. No icon library. No drop shadows. No "Get Started Free" energy. The aesthetic reference is precise: **a Patek Philippe dial photographed at night, a Rolls-Royce Phantom dashboard panel, the calm of an Aman lobby at altitude, the restraint of an Apple Vision Pro product page.** Wealth that does not announce itself. Confidence that does not explain itself. If you know, you know. The single unforgettable thing — the one element a viewer will remember and describe to someone else — is **THE RESOLUTION EFFECT** in the hero (Section 4 below). Build everything else to deserve sitting next to it. --- ## 1. TECH & OUTPUT CONSTRAINTS - **Single self-contained React page.** One default-exported component. No router, no multi-file architecture, no backend calls. - **Tailwind core utilities only** (this runs in a no-compiler environment — only base stylesheet classes work). - Allowed imports: React hooks (`useState`, `useEffect`, `useRef`), `motion` (Motion/Framer) if available, and `three` (r128) ONLY for the hero canvas. If `three` is unavailable, fall back to a hand-written `<canvas>` 2D particle implementation — do NOT skip the effect. - **No browser storage APIs** (localStorage/sessionStorage). State lives in React only. - Fully responsive. The hero effect must degrade gracefully on mobile (reduce particle count, keep the blur→sharp arc). - Respect `prefers-reduced-motion`: if set, skip the particle chaos and present the resolved causal web directly, statically. --- ## 2. COLOR — locked, do not deviate This is a **dark** page. The product's inner pages are warm/light; the landing hero is the dramatic threshold before that calm interior. Dark is correct here. It is the dial-at-night. ``` --void: #0A0A0F /* Chaos Black — the page ground */ --void-warm: #0E0E14 /* faint elevation, panels barely lifted off void */ --fog: #4A4A52 /* unresolved data — the gray chaotic particles */ --gold: #C9A961 /* Gold 750° — resolved structure, the Patek dial gold. THE accent. */ --gold-dim: #8B7D3C /* secondary gold — rules, hairlines, quiet labels */ --gold-whisper:#5A5230 /* tertiary — barely-there gold for fine print */ --rose-gold: #E8B4B8 /* CRITICAL / system-stress states ONLY. Use almost never. */ --text: #ECEAE3 /* bone-white primary text on void */ --text-dim: #9A968C /* secondary text */ --text-faint: #5E5A52 /* tertiary / metadata */ ``` **Discipline:** Gold is rare and earned. Most of the page is void-black and bone-white text. Gold appears only on: the resolved causal web, the brand rule under FRACTAL, the single hero accent, and active states. If gold is everywhere, it is worth nothing. Rose-gold appears at most once (a single CRITICAL reading). No other colors exist. No blue, no green, no gradient meshes. --- ## 3. TYPOGRAPHY — locked Load from Google Fonts. - **Display / hero title:** `Cormorant Garamond`, weight 300 (Light). Fluid size clamp(48px → 96px). This is the voice of the brand — serif, intellectual, old-money restraint. Generous, never crowded. - **Wordmark "FRACTAL":** `Inter`, weight 300, letter-spacing 0.42em, uppercase, ~20px. (Inter is permitted ONLY for the wordmark and nav — its neutrality is correct for the mark. Never for display.) - **Body:** `Inter`, weight 400, 15px, line-height 1.7, color --text-dim. - **Eyebrows / section labels / metadata:** `JetBrains Mono`, weight 500, uppercase, letter-spacing 0.2em, 11px, color --gold-dim. - **Numbers, hashes, timestamps, the SSI score, forecast IDs:** `JetBrains Mono`, tabular, weight 300. Section markers are **Roman numerals** (I, II, III, IV) in JetBrains Mono, --text-faint. No icons anywhere — Roman numerals and hairlines do all structural work. --- ## 4. THE HERO — THE RESOLUTION EFFECT (the signature; build this with the most care) Full-viewport (100vh) hero on --void. A `three.js` or canvas particle system occupies the center. The choreography, in exact order: **Phase 1 — CHAOS (0.0s–1.2s on load):** A field of ~600 small particles in --fog gray, scattered in apparent randomness, drifting with slow Brownian motion. Slightly blurred (CSS filter blur 3px on the canvas, or rendered soft). This is "the world as noise." No structure visible. The hero text is NOT yet shown. **Phase 2 — THE LENS (1.2s–2.4s):** A circular lens forms at center — a thin --gold ring (1px, --gold-dim), like the edge of a Mandelbrot set or the knurled bezel of a Leica lens. As it expands outward from center, particles *inside* the lens radius sharpen (blur removed) and shift from --fog gray toward --gold. Particles outside stay gray and blurred. The lens is the act of resolving. **Phase 3 — RESOLUTION (2.4s–3.8s):** The lens reaches full size. Inside it, the sharpened gold particles **snap into a causal web** — nodes connected by thin gold lines (--gold-dim, 1px), forming a directed graph. Label a few nodes in JetBrains Mono micro-caps. Use a real, sober causal chain (NOT cartoonish): `ENERGY SHOCK → INFLATION → MONETARY TIGHTENING → CREDIT STRESS → SOVEREIGN RISK` arranged as a self-similar branching structure (fractal — the same branch shape repeats at smaller scale on at least one node, hinting zoomability). Lines draw in with a staggered stroke animation. **Phase 4 — LOCK (3.8s–4.6s):** The causal web settles and dims slightly to become the *background texture* of the hero (opacity ~0.35), and the hero typography resolves in over it — a sharpen/fade, NOT a slide: ``` FRACTAL ──────────────── ← thin gold rule, --gold-dim, draws L→R Resolving the system. ← Cormorant Garamond 300, italic, --text ``` Below, smaller, --text-faint, JetBrains Mono uppercase: `DISCHLER INTELLIGENCE · EST. 1992` The whole sequence is ONE orchestrated load — about 4.6 seconds total, unskippable but never sluggish, eased with a slow cubic-bezier (think the easing of a heavy, perfectly-balanced door). After lock, the causal-web background continues a near-imperceptible slow drift so the page feels alive, not frozen. **If reduced-motion:** show Phase 4 immediately, static, with the causal web already at 0.35 opacity behind the locked type. There is NO "scroll" cue, NO button in the hero, NO nav clutter. Only a single, tiny, slowly-pulsing gold dot at the very bottom center (--gold-dim) that says, without words, *there is more below.* --- ## 5. PAGE STRUCTURE BELOW THE HERO (scroll reveals, in this exact order) Use IntersectionObserver staggered reveals (fade + 12px rise, 0.05 threshold). Generous section padding (min 120px vertical). Max content width 1180px, centered. Every section separated by a single full-width hairline (--gold-whisper, 1px) — never a box, never a card with a border on all four sides. Hairlines and whitespace only. **§ I — THE PROPOSITION** Eyebrow: `— I · THE PROPOSITION` A single large Cormorant line, 300 weight, --text: > "The world is not a list of data points. It is a system." Below, one restrained paragraph (--text-dim, max 60ch): the world's most consequential risks are connected — energy moves inflation, inflation moves politics, politics moves conflict — yet they are watched in isolation. FRACTAL resolves the connections. State it calmly. No hype words ("revolutionary," "AI-powered," "game-changing" are BANNED). **§ II — THE THREE-MODE INSTRUMENT (the fractal UX, shown as a static triptych)** Eyebrow: `— II · ONE PATTERN, THREE RESOLUTIONS` Three columns, separated by vertical hairlines (not boxed): | GLANCE | BRIEF | SYSTEM | | `5 SEC` | `90 SEC` | `5 MIN` | | Macro pattern | Causal narrative | Full resolution | Under each, one line of what it shows. The conceptual payload: *each zoom reveals the same structural pattern at higher resolution — that is the fractal experience.* Show one tiny SSI reading in GLANCE — e.g. a large JetBrains Mono number `34 / 100` with the label `SYSTEMIC STABILITY INDEX` and a single rose-gold word `CRITICAL`. This is the only rose-gold on the page. **§ III — THE DISCIPLINE (honesty as luxury — this is the moat, give it weight)** Eyebrow: `— III · WHY IT CAN BE TRUSTED` Three pillars, numbered `— 01 / — 02 / — 03`, each a heading + one tight paragraph. No boxes. Just numbered text blocks with generous space. - **01 · Provenance.** Every input traceable to source. Nothing asserted without a chain to where it came from. - **02 · Triangulation.** No single model rules. Disagreement between methods surfaces as research, not hidden. - **03 · Pre-registration.** Every forecast is hash-committed to a public repository before any subscriber sees it. Misses are published with the same prominence as hits. Then ONE line, set apart, Cormorant italic, --text: > "A platform that promises a perfect record is selling a fiction. We begin with one honest forecast." **§ IV — THE TIERS (revealed, never pushed)** Eyebrow: `— IV · ACCESS` Four tiers as a clean horizontal ledger (rows separated by hairlines, NOT four pricing cards): ``` PULSE Free The daily signal. KERN €199 / mo The distilled core. Full causal narrative. DIRECTIVE €2,000 / mo Bespoke domains. Direct line. MANDATE €25,000+ / yr Sovereign engagement. By invitation. ``` Tier names in JetBrains Mono uppercase --gold-dim; prices in tabular mono --text; descriptions in Cormorant --text-dim. The most expensive tier should feel the *quietest*, not the loudest — "By invitation" is more powerful than a glowing button. A single understated text link, not a fat button: `Request access →` in --gold-dim. **§ FOOTER** Brand mark FRACTAL (Inter 300, 0.42em) + thin gold rule + "Dischler Intelligence" in mono micro-caps. Tagline line, Cormorant italic --gold-dim: *"Structure within chaos."* Four quiet link columns (Platform / Archive / Dischler / Contact) in --text-faint mono. Coda row: `© 2026 DISCHLER INTELLIGENCE · TIRUVANNAMALAI · TAMIL NADU` and `ARCHITECTURE V2.0`. --- ## 6. ABSOLUTE BANS (violating any of these fails the brief) - ❌ No purple/blue/violet gradients. No gradient backgrounds of any kind beyond, at most, a single near-black radial vignette on the void. - ❌ No rounded "pricing cards" with borders on all sides. No card-on-white SaaS layout. - ❌ No emoji. No icon set (Lucide, Heroicons, FontAwesome — none). - ❌ No drop shadows on text or boxes. Depth comes from value, not shadow. - ❌ No stock illustration, no 3D blobs, no mesh gradients. - ❌ No hype vocabulary: "revolutionary," "powerful," "AI-powered," "unlock," "supercharge," "seamless," "cutting-edge," "Get Started." BANNED. - ❌ No competitor names. Ever. - ❌ No Inter or system fonts for display/headings (Cormorant only for display). - ❌ Nothing that blinks, bounces, or demands attention. The page is calm. The only motion is the hero resolution and the slow web drift. --- ## 7. THE BAR Before you output, judge your own result against three gates. If it fails any one, rebuild — do not ship it: 1. **Is this the best you can possibly build?** Not "good for an AI." The best. If a senior brand designer at a luxury house would call it merely competent, it fails. 2. **Is it revolutionary?** Does the Resolution Effect make someone stop and rewind it? Has anyone in fintech/intelligence shipped a hero like this? If it looks like something that already exists, it fails. 3. **Is it stunning?** Would it sit comfortably as the product page of a €25,000/year sovereign instrument, next to the Patek dial and the Aman lobby? If a billionaire would not feel *this was made for me*, it fails. Build to that bar. Restraint is the difficulty here — the luxury is in what you leave out, the whitespace, the precision of one gold line in a field of black. Do not fill space. Do not decorate. Resolve the system.