Page 1 of 16
System Requirements Document for ai-native-business
1. Introduction
ai-native-business is the website of an AI-native consultancy. The product intent is stated directly by the user: it is like a consultancy, but where a conventional consultancy gives business wisdom on how to use AI, this firm provides the business's entire AI ecosystem for their company. The site must therefore present two inseparable things as one offering: the firm's business wisdom on how to use AI, and the delivery of a company's complete AI ecosystem — models, data plumbing, agents, governance, and people — as a single continuous structure rather than a menu of services.
The site is built around AI from the ground up rather than adding AI later. Its audience is the senior decision-maker — COO, CIO, head of transformation — who has heard every AI pitch and is tired of slide decks, and who needs to understand the offering and take a clear next step toward getting that ecosystem in place.
Page 2 of 16
2. System Overview
The current delivery is a public, anonymously reachable marketing and engagement website with four pages: Landing, Insights, AI Ecosystem, and Contact. All four are application-owned custom pages with no access requirement — no account, sign-in, or identity establishment is part of the accepted scope.
The accepted behavior is:
- An anonymous first impression that introduces the AI-native consultancy, who it serves, and how it helps businesses use AI and establish an AI ecosystem.
- Presentation of the consultancy's business wisdom and guidance on how companies can use AI.
- Explanation of the full AI ecosystem the consultancy provides for a company's needs.
- A focused way for a prospective business client to engage the consultancy about company-specific AI needs.
Two accepted human personas act on the site: the Prospective Business Client, who evaluates and engages, and the Consultancy Advisor, whose expertise and offering the site presents and who stands behind the full AI ecosystem offering.
Narrow exclusions: no account creation, sign-in, client portal, dashboard, or authenticated workspace is in scope; no e-commerce, billing, or self-service purchase flow is in scope; no AI chatbot, model playground, or in-site AI tool is in scope. The site is a public presentation and engagement surface, not a client application.
Page 3 of 16
2a. Product Interpretation and Delivery Boundary
The distinction the user drew is the organizing principle of the whole site. A consultancy sells advice about AI; ai-native-business installs the ecosystem. The site must never read as a services menu or a workshop catalogue. It must read as one continuous structure — the same way the offering is one continuous structure for the client's company.
Delivery is entirely first-party and public. Every page is reachable without identity, and no page establishes, requires, or resumes an account. The engagement outcome is a prospective client contacting the consultancy about their own company's AI needs; the consultancy's response to that contact happens outside the site and is not a product surface.
Current horizon: the four public pages and the engagement path described above. Future horizon: anything beyond a public presentation-and-engagement site — client-facing ecosystem tooling, authenticated workspaces, or in-product AI — is explicitly not part of the current delivery and is not represented in any current page, requirement, or flow.
2b. Source Content Inventory
Not applicable. No reference directive in this project declares content_source; no verified external factual collection, field set, contact record, or media reference was supplied to preserve.
2c. Page Content and Component Coverage
Page 4 of 16
Landing
- Information and state. Anonymous public entry. Establishes in one screen that this is an AI-native firm that builds a company's entire AI ecosystem, not an advisory practice. Carries the headline "Your entire AI ecosystem, built as one structure", the firm's positioning, who it serves, and how it helps businesses use AI and establish an AI ecosystem.
- Primary action. Map my ecosystem — the single gold capsule CTA, which carries the visitor into the engagement path on Contact.
- Supporting actions. Navigate to Insights and AI Ecosystem; reach Contact from the persistent navigation.
- Domain entities. The firm's offering (business wisdom on using AI; the full AI ecosystem delivered for a company); the audience (senior business decision-makers); the ecosystem layers named on the site (Strategy, Data, Models, Agents, Governance, People).
- Component responsibilities.
- Hero stage — full-bleed dark ground with one enormous pearl parametric form sweeping lower-left to upper-right and bleeding off both edges; headline set left in columns 1–7, overlapping the form, with the words "one structure" in gold; the capsule CTA sits on the curve; a small uppercase index
01 / LANDING sits top-right.
- Curved section boundaries — full-width SVG arcs separating every major section, parallax-shifting against the content.
- Positioning band — the consultancy distinction: business wisdom on how to use AI, plus the entire AI ecosystem for the company, stated as one offering.
- Who-it-serves band — the senior decision-maker audience and the problem of AI pitches that never become structure.
- Ecosystem preview — a nested parametric curve diagram of the six layers, with a single gold sweep tracing the curves once on entry.
- Path band — the two onward destinations, Insights and AI Ecosystem, each as an asymmetric-radius panel.
- Closing engagement band — restates the next step and repeats the capsule CTA to Contact.
- States. Loading: hero form and headline render first; imagery and the ecosystem diagram fade in without layout shift. Empty: not applicable — all content is authored and static. Success: the visitor understands the offering and takes the CTA or a navigation path. Error/recovery: if hero imagery fails, the dark ground, headline, and CTA remain fully legible and the section boundaries still render; if the ecosystem diagram fails, the six layer names render as a labelled list so no information is lost.
Page 5 of 16
Insights
- Information and state. Anonymous public page presenting the consultancy's business wisdom and guidance on how companies can use AI. Content is authored by the Consultancy Advisor and stands as the firm's point of view.
- Primary action. Read an insight in full.
- Supporting actions. Move from an insight to AI Ecosystem to see how the guidance becomes an installed ecosystem; move to Contact to engage.
- Domain entities. Insight entries (title, section index, body, topic); the guidance themes on how companies can use AI; the authoring advisor.
- Component responsibilities.
- Section header — oversized half-cropped numeral index behind the headline, with the uppercase architectural label.
- Insight list — asymmetric-radius panels (
96px 24px 96px 24px), each carrying title, topic label, and a short standfirst; never a uniform card grid.
- Insight reading view — full body of the selected insight, set in the body face at the lead/body scale, with curved boundaries between passages.
- Cross-link band — a single gold-accented link from the guidance into AI Ecosystem.
- States. Loading: list renders immediately; panel imagery fades in. Empty: if no insights are published, the page shows the section header and a plain statement that guidance is being prepared, with the path to Contact still available. Success: the visitor reads guidance and understands the firm's point of view on using AI. Error/recovery: if a panel image fails, the panel keeps its asymmetric shape, title, and standfirst; if the reading view fails to load, the list remains and the visitor can retry the selection.
Page 6 of 16
AI Ecosystem
- Information and state. Anonymous public page explaining the full AI ecosystem the consultancy provides for a company's needs. It is one long continuous scroll of six stacked curved bands — Strategy, Data, Models, Agents, Governance, People — each a full-width band whose top edge is an arc, so scrolling feels like descending through one structure.
- Primary action. Move through the six layers and understand what the consultancy installs for the company.
- Supporting actions. Jump to a layer from the fixed left rail; move to Contact to engage about the visitor's own company.
- Domain entities. The six ecosystem layers and their order; each layer's description of what it covers for the company; the fixed left rail index
01–06.
- Component responsibilities.
- Fixed left rail — section index numbering the six layers
01–06, with a vertical hairline and a gold hairline connecting them; the currently selected layer is the single gold accent in view.
- Layer bands — six full-width curved bands, each with an arc top edge, a layer name, and its description; asymmetric-radius panels inside where detail is grouped.
- Gold sweep — on scrolling into the ecosystem diagram, a single gold stroke traces along the curves once, then rests.
- Layer jump control — selecting a rail index moves to that band and marks it as the active layer.
- Closing engagement band — the capsule CTA to Contact, framed as mapping the visitor's own ecosystem.
- States. Loading: the first band and the rail render immediately; subsequent bands and their imagery load as the visitor descends. Empty: not applicable — the six layers are authored content. Success: the visitor can name all six layers and understands the ecosystem as one structure. Error/recovery: if a band's imagery fails, the band keeps its arc edge, name, and description; if the rail jump target is unavailable, the visitor can continue scrolling and the rail still reflects position.
Page 7 of 16
Contact
- Information and state. Anonymous public page providing the prospective business client with a focused way to engage the consultancy about company-specific AI needs. It is the destination of the Map my ecosystem CTA.
- Primary action. Submit an engagement enquiry describing the visitor's company and its AI needs.
- Supporting actions. Return to AI Ecosystem to re-check a layer before describing needs; return to Insights for guidance context.
- Domain entities. Enquiry submission (the visitor's company and its AI needs as described by the visitor); the consultancy as recipient.
- Component responsibilities.
- Engagement framing — a short statement of what happens next: the consultancy responds to the visitor's company-specific AI needs.
- Enquiry form — the visitor's description of their company and its AI needs, with the capsule submit control as the single gold accent in view.
- Confirmation state — an observable acknowledgement that the enquiry has been received, with the next step stated.
- Recovery affordance — if submission fails, the visitor's entered description is preserved and the submit control can be retried.
- States. Loading: framing and form render immediately; submit shows an in-progress state while the enquiry is sent. Empty: the form starts empty with its fields unpopulated. Success: a confirmation is shown stating the enquiry was received and what happens next. Error/recovery: on failure, an error message is shown, the visitor's input is retained, and submission can be retried without re-entering the description.
Page 8 of 16
3. Functional Requirements
FR-1 — AI-native positioning on entry (explicit)
As a Prospective Business Client, I should immediately understand that this firm is AI-native and builds a company's entire AI ecosystem, so that I know within one screen that this is not an advisory practice.
- Trigger/input: the visitor opens Landing.
- Observable result: the hero headline "Your entire AI ecosystem, built as one structure" is fully readable, with "one structure" in gold, and the AI-native positioning is stated above the fold.
- Access state: anonymous; no identity required.
- Failure/recovery: if hero imagery fails, the headline and CTA remain fully legible on the dark ground.
- Continuation: the visitor proceeds to the positioning band or takes the CTA.
FR-2 — Business wisdom on how to use AI (explicit)
As a Consultancy Advisor, I should present the firm's business wisdom and guidance on how companies can use AI, so that prospective clients can evaluate the firm's thinking before engaging.
- Trigger/input: the advisor's authored guidance is published to Insights.
- Observable result: Insights presents the guidance, and a Prospective Business Client can read an insight in full.
- Access state: anonymous; no identity required.
- Failure/recovery: if an insight's imagery fails, its title and standfirst remain readable; if the reading view fails, the list remains and selection can be retried.
- Continuation: the reader moves from guidance to AI Ecosystem or Contact.
FR-3 — The entire AI ecosystem for the company (explicit)
As a Prospective Business Client, I should see the full AI ecosystem the consultancy provides for a company's needs, so that I understand the offering as one complete structure rather than a set of separate services.
- Trigger/input: the visitor opens AI Ecosystem.
- Observable result: six full-width curved bands — Strategy, Data, Models, Agents, Governance, People — stack into a single continuous structure, each naming what it covers for the company.
- Access state: anonymous; no identity required.
- Failure/recovery: if a band's imagery fails, the band keeps its arc edge, name, and description; the visitor can continue scrolling.
- Continuation: the visitor reaches the closing engagement band and the CTA to Contact.
FR-4 — Distinction from advice-only consultancies (explicit)
As a Prospective Business Client, I should be able to tell the difference between a consultancy that gives business wisdom on how to use AI and this firm, which provides the business's entire AI ecosystem for their company, so that I evaluate the right kind of provider.
- Trigger/input: the visitor reads the positioning content on Landing and the layer content on AI Ecosystem.
- Observable result: the site states both halves of the offering — guidance on using AI, and delivery of the company's entire AI ecosystem — as one offering, not as alternatives.
- Access state: anonymous; no identity required.
- Failure/recovery: the distinction is carried in text, so it survives any imagery or motion failure.
- Continuation: the visitor proceeds to AI Ecosystem or Contact.
FR-5 — Ecosystem layer navigation (required_inference)
As a Prospective Business Client, I should be able to move directly to any of the six ecosystem layers, so that I can examine the part of the ecosystem most relevant to my company.
- Trigger/input: the visitor selects an index
01–06 on the fixed left rail of AI Ecosystem.
- Observable result: the view moves to that layer's band and the selected layer is marked as the single gold accent in view.
- Access state: anonymous; no identity required.
- Failure/recovery: if a jump target is unavailable, the visitor can continue scrolling and the rail still reflects position.
- Continuation: the visitor continues through the remaining layers or moves to Contact.
FR-6 — Engagement about company-specific AI needs (explicit)
As a Prospective Business Client, I should have a focused way to engage the consultancy about my own company's AI needs, so that I can take a clear next step toward getting that ecosystem in place.
- Trigger/input: the visitor opens Contact, from the Map my ecosystem CTA or the navigation, and submits a description of their company and its AI needs.
- Observable result: the enquiry is submitted and a confirmation is shown stating that it was received and what happens next.
- Access state: anonymous; no identity required.
- Failure/recovery: on submission failure, an error is shown, the visitor's entered description is preserved, and submission can be retried.
- Continuation: the consultancy responds to the company-specific AI needs outside the site; the visitor may return to AI Ecosystem or Insights.
FR-7 — Advisor's offering stands behind the site (required_inference)
As a Consultancy Advisor, I should have the firm's expertise and full ecosystem offering presented accurately and consistently across the site, so that qualified client interest is generated through the site.
- Trigger/input: the advisor authors and maintains the positioning, guidance, and ecosystem layer content.
- Observable result: Landing, Insights, and AI Ecosystem present one consistent offering, and enquiries arrive at Contact.
- Access state: anonymous for visitors; the advisor's authoring is not a product surface in the current delivery.
- Failure/recovery: if a section's content is unavailable, the remaining sections still present the offering and the engagement path stays open.
- Continuation: the advisor receives and responds to enquiries.
Page 9 of 16
4. User Personas
Prospective Business Client
- Product context. A senior business decision-maker — COO, CIO, or head of transformation — at a company that has decided AI matters but has not yet built it into how the company runs. They have sat through AI pitches and slide decks and are sceptical of advice that never becomes structure. They arrive at the site anonymously, usually from a search or a referral, and evaluate quickly.
- Primary goal. Understand what this firm actually delivers, and take a clear next step toward getting their company's entire AI ecosystem in place.
- Distinct accepted responsibilities. Reading and judging the firm's business wisdom on how to use AI on Insights; examining the full ecosystem the firm provides on AI Ecosystem, layer by layer, to see whether it covers what their company needs; and initiating engagement about their own company's AI needs on Contact.
- Inputs and decisions. Their own company's situation and AI needs; the decision of whether this firm is a provider of an entire ecosystem rather than a source of advice; the decision to submit an enquiry.
- Interactions with other accepted participants. They are the recipient of the Consultancy Advisor's authored guidance and ecosystem presentation, and the initiator of the enquiry the advisor receives.
- Observable success. They can state the six ecosystem layers, can articulate the difference between advice-only consultancy and this firm's ecosystem delivery, and have submitted an enquiry with a confirmation shown.
Consultancy Advisor
- Product context. The consultancy's own practitioner, who delivers business wisdom on how to use AI and stands behind the full AI ecosystem offering. Their work is to make the firm's expertise legible to a sceptical senior audience and to convert qualified interest into engagement.
- Primary goal. Generate qualified client interest through the site by presenting the firm's expertise and its complete ecosystem offering accurately.
- Distinct accepted responsibilities. Authoring the guidance on how companies can use AI that appears on Insights; defining and describing the six ecosystem layers — Strategy, Data, Models, Agents, Governance, People — on AI Ecosystem; and receiving and responding to enquiries submitted through Contact.
- Inputs and decisions. The firm's point of view on AI adoption; what each ecosystem layer covers for a client company; which guidance is published; how enquiries are answered.
- Interactions with other accepted participants. They present to the Prospective Business Client throughout the site and are the recipient of that client's enquiry.
- Observable success. The site presents one consistent offering across all pages, and enquiries about company-specific AI needs arrive through Contact.
5. Core User Flows
Page 10 of 16
Flow A — Prospective Business Client evaluates the offering and engages
- Starting context. The visitor is anonymous, has arrived at Landing from a search or referral, and has no account.
- On Landing, the visitor reads the hero headline "Your entire AI ecosystem, built as one structure", with "one structure" in gold, and the capsule CTA Map my ecosystem sitting on the curve. The small index
01 / LANDING confirms the entry point.
- The visitor scrolls. Curved section boundaries parallax-shift against the type. In the positioning band they read the distinction: this firm gives business wisdom on how to use AI and provides the company's entire AI ecosystem — one offering, not two.
- In the who-it-serves band the visitor recognises their own situation: senior decision-maker, tired of pitches that never become structure.
- In the ecosystem preview the visitor sees the nested parametric curve diagram of the six layers; a single gold sweep traces the curves once on entry, then rests.
- Decision point. The visitor chooses to examine the ecosystem in depth and navigates to AI Ecosystem.
- On AI Ecosystem, the visitor descends through six full-width curved bands — Strategy, Data, Models, Agents, Governance, People — each with an arc top edge. The fixed left rail numbers them
01–06 with a gold hairline connecting them, and the currently selected layer is the single gold accent in view.
- Selection. The visitor selects a rail index for the layer most relevant to their company. The view moves to that band and the layer is marked active. They repeat for other layers.
- Observable result. The visitor can name all six layers and understands the ecosystem as one structure the firm installs, not a menu of services.
- Continuation. The visitor reaches the closing engagement band and takes the capsule CTA to Contact.
- On Contact, the visitor reads the engagement framing — what happens next — and submits a description of their company and its AI needs. The submit control is the single gold accent in view.
- Observable result. A confirmation is shown stating the enquiry was received and what happens next.
- Failure and recovery. If submission fails, an error is shown, the visitor's entered description is preserved, and they retry the submit control without re-entering anything.
- Next step. The consultancy responds to the company-specific AI needs outside the site. The visitor may return to AI Ecosystem or Insights while waiting.
Flow B — Prospective Business Client reads the firm's guidance first
- Starting context. The visitor is anonymous and arrives at Insights directly, wanting to judge the firm's thinking before looking at the offering.
- On Insights, the visitor sees the section header with its oversized half-cropped numeral index and the list of insight panels in asymmetric-radius shapes, each with a title, topic label, and standfirst.
- Selection. The visitor selects an insight and reads it in full in the reading view, with curved boundaries between passages.
- Observable result. The visitor understands the firm's business wisdom on how companies can use AI.
- Continuation. The visitor follows the single gold-accented cross-link from the guidance into AI Ecosystem.
- On AI Ecosystem, the visitor descends the six layers as in Flow A, steps 7–9.
- Continuation. The visitor moves to Contact and submits an enquiry as in Flow A, steps 11–13.
- Failure and recovery. If an insight's imagery fails, its title and standfirst remain readable; if the reading view fails to load, the list remains and the visitor retries the selection.
- Next step. The consultancy responds outside the site.
Page 11 of 16
Flow C — Prospective Business Client engages directly
- Starting context. The visitor is anonymous, already convinced, and arrives at Landing intending to make contact.
- The visitor takes the capsule CTA Map my ecosystem directly from the hero, without scrolling the full page.
- On Contact, the visitor reads the engagement framing and submits a description of their company and its AI needs.
- Observable result. A confirmation is shown stating the enquiry was received and what happens next.
- Failure and recovery. On failure, the error is shown, the description is preserved, and submission is retried.
- Next step. The consultancy responds outside the site.
Flow D — Consultancy Advisor presents the offering and receives interest
- Starting context. The advisor maintains the firm's positioning, guidance, and ecosystem content so that the site presents one consistent offering.
- The advisor authors the guidance on how companies can use AI that appears on Insights, and defines the six ecosystem layers and what each covers for a client company on AI Ecosystem.
- Observable result. Landing, Insights, and AI Ecosystem present the same offering — business wisdom on using AI plus the company's entire AI ecosystem — without contradiction between pages.
- Handoff. A Prospective Business Client submits an enquiry through Contact.
- Observable result. The advisor receives the enquiry describing the client's company and its AI needs.
- Failure and recovery. If a section's content is unavailable, the remaining sections still present the offering and the engagement path on Contact stays open, so interest is not lost.
- Next step. The advisor responds to the company-specific AI needs outside the site.
Page 12 of 16
6. Visuals, Colors and Theme
The creative direction is authoritative for this section. Muse: Zaha Hadid. Headline idea: fluid parametric authority for a company's whole AI ecosystem — one unbroken structure, not a menu of services.
Color tokens (dark mode).
| Role | Hex | Use |
|---|
| Background | #0B0C10 | Deep charcoal ground; dominant field |
| Surface | #16181F | Raised panel tone for solid, glass-free cards |
| Text | #F4F2ED | Body and readable text |
| Primary | #E8E4DA | Pearl "material": large curved surfaces, headline type, hairlines |
| Accent | #C9A227 | Gold — exactly one active element per screen: primary CTA, the currently selected ecosystem layer, gauge numerals |
| Muted | #8A8B94 | Metadata only, never body copy |
Ratio target: roughly 70% charcoal / 22% pearl / 5% gold / 3% muted. No #2563EB, #4F46E5, or #7C3AED anywhere. The generic indigo/blue-on-white SaaS template is forbidden for this project.
Typography.
- Headings: Josefin Sans, light 300, wide
0.02em tracking, lowercase sentence case for display lines — the geometric x-height and elongated forms echo the stretched curves.
- Numerals and section indices: Jost 500, uppercase,
0.18em tracking, as small architectural labels.
- Body: Jost.
- Scale, 1.333 modular: display
clamp(56px, 9vw, 128px) / h2 clamp(36px, 5vw, 72px) / h3 clamp(24px, 3vw, 40px) / lead 22px / body 17px / label 12px uppercase 0.18em.
- Forbidden for headings or body: Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, system-ui.
Shape language. Continuous curvature. No card has four equal corners: panels use asymmetric border-radius, e.g. 96px 24px 96px 24px, so every surface reads as a cut from one flowing body. Section boundaries are not straight rules but wide SVG arcs sweeping the full viewport width. Buttons are elongated capsules. The ecosystem diagram is drawn as nested parametric curves, never a grid of boxes. Uniform 12px-radius card grids with hover-lift shadows are forbidden.
Layout. Asymmetric 12-column grid with a persistent left rail (section index plus vertical hairline) and a right 8-column content field. Sections alternate full-bleed curved imagery with pearl surfaces. AI Ecosystem is one long continuous scroll of stacked curved layers — Strategy, Data, Models, Agents, Governance, People — each a full-width band whose top edge is an arc, so scrolling feels like descending through one structure.
Imagery. Architectural: sweeping white parametric forms photographed against deep shadow, macro shots of curved machined surfaces, long-exposure light trails following arcs. Business subject matter appears as abstract structure — layered translucent planes, flow diagrams rendered as flowing ribbons — never stock people at laptops. One gold-lit detail per image maximum. Gradient-blob heroes, glassmorphism panels, and flat isometric "tech" illustrations or generic AI brain/neural-net clip art are forbidden.
Readable-text rule. Headlines, wordmarks, labels, numbers, and cards' text and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut exactly as the direction asks, as long as they cover no readable text or control. Where the direction asks readable text or a control to be cropped, clipped, covered, or run off an edge, keep it whole and carry the gesture with imagery or decoration instead; for readable text and controls this rule takes precedence.
Page 13 of 16
7. Signature Design Concept
The single structure, entered from below.
The public entry is a full-bleed dark stage (#0B0C10). A single enormous pearl-white (#E8E4DA) parametric form sweeps from the lower-left corner across to the upper-right, bleeding off both edges — the visitor's first impression is of standing beneath one continuous structure, not looking at a page of sections.
The headline "Your entire AI ecosystem, built as one structure" is set left-aligned in Josefin Sans light at clamp(56px, 9vw, 128px), occupying columns 1–7 and overlapping the curved form, with the words "one structure" rendered in gold (#C9A227). Beneath the headline, a single elongated capsule CTA — Map my ecosystem — sits on the curve. Top-right, a small Jost uppercase index reads 01 / LANDING.
There is no centred stack, no subhead paragraph above the fold, no blue button, and no gradient blob. The composition is deliberately asymmetric: the curve carries the eye from the lower-left to the upper-right, and the headline sits across it rather than beside it. The only gold in the first frame is the phrase "one structure" and the capsule CTA — one accent element per viewport, never more.
As the visitor scrolls, the same curve family continues: every major section transition is a full-width SVG arc that parallax-shifts against the content, so the page reads as one continuous surface. The concept recomposes only accepted content — the positioning, the audience, the six ecosystem layers, and the engagement CTA — and introduces no new behavior, page, or destination.
Page 14 of 16
8. Interaction Model & Motion Direction
Interaction Model: Animated
Motion Tempo: cinematic
Hero Dimensionality: layered_2d
Landing Hero Motion Brief.
- Focal subject. The single enormous pearl-white parametric form sweeping from the lower-left to the upper-right and bleeding off both edges, with the headline overlapping it and the capsule CTA resting on the curve.
- Input → transformation → outcome thesis. As the visitor scrolls, the curved form and the section arcs shift at a different rate than the type, so the headline appears to hold still while the structure moves beneath and around it; the outcome is that the visitor experiences the offering as one continuous structure rather than a stack of sections.
- Motion vocabulary. Scroll-linked parallax on the curved section boundaries; slow camera-like horizontal drift on hero imagery; a single gold sweep that travels along the ecosystem diagram's curves on entry, then rests. Easing is long and architectural —
cubic-bezier(.2,.7,.1,1), 700–1200ms. No bounce, no spring, no particles, no confetti, nothing playful.
- Composed first frame. Dark
#0B0C10 ground; the pearl form entering from the lower-left and exiting upper-right; the headline in columns 1–7 with "one structure" in gold; the capsule CTA on the curve; 01 / LANDING top-right. One gold accent element in the viewport.
- Reduced-motion state. With
prefers-reduced-motion, parallax and drift stop and the hero renders as a single composed still frame: the form, the headline, and the CTA in their final positions, with all readable text and controls whole and uncovered. Any moving or scrollable content stops and shows whole items — wrapping into rows, or sitting in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling.
9. Non-Functional Requirements
- NFR-1 — Anonymous public access (explicit). All four pages — Landing, Insights, AI Ecosystem, Contact — are reachable without an account, sign-in, or identity establishment. No page establishes, requires, or resumes an account. Rationale: the accepted page contract sets
access_requirement: none for every surface.
- NFR-2 — Readable text and controls stay whole (explicit). Headlines, wordmarks, labels, numbers, and cards' text and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Rationale: stated directly in the creative direction; takes precedence over any cropping gesture.
- NFR-3 — Reduced-motion compliance (explicit). With
prefers-reduced-motion, motion stops and moving or scrollable content shows whole items, wrapping into rows or sitting in a horizontally scrollable row. Rationale: stated directly in the creative direction.
- NFR-4 — Palette and type fidelity (explicit). The specified hex values, font families, and type scale are used as given; the forbidden colors and forbidden font families do not appear. Rationale: user design constraints are higher priority than catalogue defaults.
- NFR-5 — One gold accent per viewport (explicit). At most one gold (
#C9A227) accent element is visible per viewport. Rationale: stated directly in the creative direction.
- NFR-6 — Enquiry input preservation on failure (required_inference). If an enquiry submission fails, the visitor's entered description is preserved and submission can be retried without re-entry. Rationale: the accepted engagement outcome requires that a failed submission not destroy the visitor's company-specific description.
- NFR-7 — Content legibility without imagery or motion (required_inference). Every accepted piece of information — positioning, guidance, the six ecosystem layers, and the engagement path — remains readable if imagery or motion fails to load. Rationale: the offering must be evaluable regardless of asset delivery.
Page 15 of 16
10. Tech Stack
- Frontend: React, with the site built as a public multi-page experience across Landing, Insights, AI Ecosystem, and Contact.
- Styling and motion: CSS with
clamp() type scaling, SVG arcs for curved section boundaries, asymmetric border-radius panels, and scroll-linked parallax with cubic-bezier(.2,.7,.1,1) easing at 700–1200ms; prefers-reduced-motion handling for all motion.
- Fonts: Josefin Sans (headings, light 300) and Jost (body, and 500 uppercase for numerals and section indices), loaded as web fonts.
- Backend: Python with FastAPI, serving the site's content and receiving engagement enquiries submitted from Contact.
- Storage: a persistent store for authored content (positioning, insights, ecosystem layers) and for received enquiries.
- Packaging and deployment: Docker with docker-compose for local and single-host deployment. Kubernetes is not required by any accepted requirement and is not included.
11. Assumptions and Constraints
- A-1 (assumption). The site is a public presentation and engagement surface. No account, sign-in, client portal, dashboard, or authenticated workspace is in scope, consistent with the accepted page contract's
access_requirement: none on every surface.
- A-2 (assumption). The consultancy's response to a submitted enquiry happens outside the site and is not a product surface.
- A-3 (assumption). Content on Insights and AI Ecosystem is authored by the Consultancy Advisor; authoring is not itself a product surface in the current delivery.
- A-4 (assumption). The six ecosystem layers — Strategy, Data, Models, Agents, Governance, People — are the named layers of the offering, as given in the creative direction's layout and signature moves.
- C-1 (constraint). The generic indigo/blue-on-white SaaS template is forbidden.
#2563EB, #4F46E5, and #7C3AED must not appear anywhere.
- C-2 (constraint). Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui must not be used for headings or body.
- C-3 (constraint). No uniform 12px-radius card grids with hover-lift shadows; no gradient-blob heroes; no glassmorphism panels; no centred headline + subtext + blue button SaaS hero; no flat isometric "tech" illustrations or generic AI brain/neural-net clip art.
- C-4 (constraint). No bouncy or springy easing, and nothing playful in the motion.
- C-5 (constraint). At most one gold accent element per viewport.
- C-6 (constraint). Readable text and controls stay whole at 375px, 768px, and 1280px; this rule takes precedence over any cropping gesture.
- C-7 (constraint). The site must present the firm as providing a company's entire AI ecosystem, distinct from a consultancy that only gives business wisdom on how to use AI — while still presenting that business wisdom as part of the offering.
Page 16 of 16
12. Glossary
- AI-native — Built around AI from the ground up rather than adding AI to an existing product or practice later.
- AI ecosystem — The complete set of AI capabilities installed for a company: models, data plumbing, agents, governance, and people, delivered as one structure.
- Business wisdom on how to use AI — The guidance and point of view a consultancy provides about how a company should adopt and use AI; the advice-only offering this firm is distinguished from.
- Ecosystem layer — One of the six named bands of the offering: Strategy, Data, Models, Agents, Governance, People.
- Prospective Business Client — The senior business decision-maker evaluating the firm and engaging it about their company's AI needs.
- Consultancy Advisor — The firm's own practitioner who delivers the business wisdom and stands behind the full AI ecosystem offering.
- Enquiry — The engagement submission made on Contact, describing the visitor's company and its AI needs.
- Parametric form — The continuous curved surface language used throughout the site, drawn from the Zaha Hadid muse.
- Gold sweep — The single gold stroke that traces once along the ecosystem diagram's curves on entry, then rests.
No comments yet. Be the first!