System Requirements Document for altair-website

1. Introduction

altair-website is the public website and back-of-house curation tool for a creative agency. It serves two purposes at once, as explicitly requested: it is the agency's own site, where prospective clients can learn who the agency is, review its work, and contact the agency to hire it; and it is a showcase-style portfolio site, where visitors can browse the agency's creative output purely to see the work.

The site is therefore built for two overlapping audiences. Prospective clients arrive to evaluate the agency's capabilities and decide whether to reach out. Portfolio viewers arrive to look at the work itself. Both are served by the same public surfaces: a Landing entry, a Portfolio index of projects, an About spread describing the agency, and a Contact dispatch for inquiries.

Behind the public site sits Studio, a protected workspace where the agency owner curates the portfolio projects and agency presentation content that the public pages display. Because that curated content is durable and must remain bound to the correct owner across visits, the agency owner establishes identity through self-service Sign Up on first use and verifies returning identity through Login thereafter.

The design register is confident, self-aware, and culturally literate — a studio with a point of view rather than a neutral service provider. The public site reads as an editorial artefact index; Studio reads as a legible, fast back-of-house control panel wearing the same industrial uniform.

2. System Overview

altair-website is delivered as a first-party web application with a public-facing site and a protected curation workspace.

Current delivery. A custom web front end serves the public pages (Landing, Portfolio, About, Contact) and the identity surfaces (Sign Up, Login) plus the protected Studio workspace. A first-party backend persists portfolio projects, agency presentation content, and submitted contact inquiries, and provides the identity continuity that binds curated content to the agency owner. The public pages read the same durable content that Studio writes.

Actors. The accepted active human personas are the Agency Owner / Principal, the Prospective Client, and the Portfolio Visitor / Viewer. The backend and its persistence layer are non-persona system actors; there are no provider-owned or external destinations in the current scope.

Accepted behavior. Anonymous visitors reach Landing and move into Portfolio, About, and Contact. Prospective Clients submit a contact inquiry for hiring purposes and receive a numbered ticket confirming receipt. The Agency Owner / Principal enrolls through Sign Up, verifies returning identity through Login, and curates portfolio projects and agency presentation content in Studio so that the public Portfolio and About pages reflect that curation.

Ownership. All current surfaces are application-owned custom pages. Studio is the only destination requiring login; Landing, Portfolio, About, Contact, Login, and Sign Up are reachable without an established session.

Narrow exclusions. No stock photography, no decorative illustration, no gradient or glass surfaces, no blue/indigo/violet accent, and no rounded-card template treatment. No account-management capabilities beyond first-use enrollment and returning verification are in scope. No client-facing project management, billing, or messaging capability is in scope.

2a. Product Interpretation and Delivery Boundary

The product is a single first-party website with two faces. The public face is anonymous and open: anyone arriving at the root reaches Landing, and from there can browse the Portfolio index, read the About spread, and dispatch a Contact inquiry. Nothing on the public face requires an account, and no public page gates its content behind identity.

The working face is Studio, which is protected. The agency owner is the only accepted human actor who curates what the site shows, and that curation is durable: projects and agency presentation content persist between visits and must remain bound to the correct owner. Because the source establishes no invitation or provisioning boundary, first use is self-service enrollment through Sign Up, and returning use is verified through Login. Sign Up and Login are themselves anonymously reachable — they are the interactions that establish access, so they cannot sit behind the access they create. Studio is the only destination that requires an established session.

The current horizon covers the public site, the identity surfaces, and Studio curation of portfolio projects and agency presentation content. Nothing beyond that is committed: there is no client portal, no project management, no billing, no messaging, and no third-party provider surface in the accepted scope. Future ideas are not part of current pages or acceptance.

2b. Source Content Inventory

No reference directive in this project declares content_source authority, so no source content inventory is included. All portfolio projects, agency presentation content, and agency coordinates are authored by the Agency Owner / Principal through Studio rather than supplied as fixed source facts.

2c. Page Content and Component Coverage

Landing

• Information and state. The public entry surface. Presents the agency's identity and one-line proposition, the disciplines it works in, and the credits that establish its register. Anonymous; no session state is required or shown.
• Primary actions. Enter the Portfolio index; read the About spread; dispatch a Contact inquiry; reach Sign Up or Login for the working side.
• Supporting actions. Follow the discipline tags into the corresponding Portfolio filtering context; pause the credits ticker by hovering.
• Domain entities. Agency identity, agency proposition, discipline tags (BRAND, DIGITAL, FILM, SPATIAL), agency credits.
• Component responsibilities. Full-bleed display headline occupying columns 1–9 as a stacked three-line statement with the middle line indented one column and the final word set in safety orange inside literal quotation marks; a 1px-ruled row beneath carrying the one-line proposition and the hard-edged START A PROJECT control; a vertical tag rail in columns 10–12 of rotated 11px uppercase discipline tags separated by hairlines; an 8px hazard-stripe band along the bottom of the viewport; a credits ticker scrolling above that band; the 12-column grid rules drawn as 1px hairlines behind all content.
• States. Loading: the grid rules and hazard band render immediately while agency identity and credits resolve. Empty: if no credits are authored, the ticker region collapses to its rule and the hero composition holds. Success: headline, proposition, tag rail, and ticker all render with the grid visible behind them. Error: if agency identity fails to resolve, the headline falls back to the agency wordmark and the proposition row renders its rule without copy. Recovery: a retry re-requests agency identity and credits without leaving the page.

Portfolio

• Information and state. The ruled index of showcased creative work. Each project is a full-width row carrying a fixed left metadata column (year, discipline, client) and a right-hand art-directed image. Anonymous; reads the same durable project records that Studio writes.
• Primary actions. Scan the index; open a project's artefact; move from a project into Contact to start a project.
• Supporting actions. Hover a row to slide its image in from the right viewport edge; filter or narrow the index by discipline tag.
• Domain entities. Portfolio project (title, year, discipline, client, art-directed image, project description).
• Component responsibilities. Ruled full-width project rows with hairline separators; fixed left metadata column in 11px uppercase tracked labels; right-hand image framed by a 1px rule with a corner tag carrying client and year; exposed 12-column grid rules behind the index; 4px hazard-stripe section dividers.
• States. Loading: row rules and metadata columns render as skeletons while project records resolve. Empty: when no projects are published, the index shows its rules and a ruled notice that no work is published yet, with no fabricated rows. Success: every published project renders as a complete row with metadata and artefact. Error: if project records fail to resolve, the index retains its rules and offers a retry. Recovery: retry re-requests the project index in place; a project whose image fails to load renders its rule and corner tag without the image.

About

• Information and state. The two-column editorial spread describing the agency, its capabilities, and how it works. Anonymous; reads the same durable agency presentation content that Studio writes.
• Primary actions. Read the agency's capabilities and positioning; continue into Portfolio to see the work; continue into Contact to start a project.
• Supporting actions. Follow the sticky left label column as the spread scrolls.
• Domain entities. Agency presentation content (agency description, capabilities, disciplines, positioning).
• Component responsibilities. Sticky left label column in 11px uppercase quoted labels; right-hand editorial body column in 16/17px bone white with 1.6 leading; hairline dividers between ruled label/value rows; 4px hazard-stripe section dividers.
• States. Loading: the sticky label column renders while agency presentation content resolves. Empty: when no presentation content is authored, the spread shows its labels and a ruled notice that the agency description is not yet published. Success: the full editorial spread renders with labels and body copy. Error: if presentation content fails to resolve, the labels remain and a retry is offered. Recovery: retry re-requests presentation content without leaving the spread.

Contact

• Information and state. The dispatch slip. A ruled inquiry form on the left two-thirds and the agency's coordinates with a stamped RECEIVED block on the right. Anonymous; submitting creates a durable inquiry record.
• Primary actions. Complete the inquiry fields and dispatch the inquiry to the agency.
• Supporting actions. Read the agency coordinates; read the stamped receipt block after dispatch.
• Domain entities. Contact inquiry (sender name, sender email, project or engagement description, optional budget or timeline context, submission timestamp, ticket number).
• Component responsibilities. Ruled form fields with 2px radius and a safety-orange focus ring; a hard-edged dispatch control; the agency coordinates block in 11px uppercase; the stamped RECEIVED block; the numbered ticket printed on submission in place of a success toast.
• States. Loading: the form renders immediately; dispatch shows an in-place pending state on the control. Empty: the form renders with all fields blank and the receipt block unstamped. Success: the inquiry is persisted and the page prints a numbered ticket in the RECEIVED block. Error: if dispatch fails, the form retains every entered value and shows a ruled error line with a retry. Recovery: retry re-dispatches the same inquiry without re-entry; a validation failure marks the specific field and keeps all other values.

Login

• Information and state. Returning verification for the Agency Owner / Principal. Anonymous entry surface; establishes the session that Studio requires.
• Primary actions. Submit returning credentials to establish a session and continue into Studio.
• Supporting actions. Move to Sign Up when no identity has been established yet.
• Domain entities. Agency owner identity, session.
• Component responsibilities. Ruled credential fields with 2px radius and safety-orange focus ring; a hard-edged submit control; a ruled link to Sign Up; quoted panel header.
• States. Loading: the form renders while the session check resolves; submit shows an in-place pending state. Empty: fields render blank. Success: the session is established and the owner continues into Studio. Error: invalid credentials show a ruled error line and retain the entered identifier without revealing which factor failed. Recovery: the owner can correct and resubmit, or move to Sign Up.

Studio

• Information and state. The protected three-pane curation workspace: left nav rail, centre content table, right inspector, all on the same exposed grid. Shows the agency owner's durable portfolio projects and agency presentation content, and the state of each (published or draft).
• Primary actions. Create, edit, publish, unpublish, and remove portfolio projects; edit agency presentation content; review the current published state of the public site.
• Supporting actions. Select a row in the centre table to load it into the right inspector; reorder projects in the index; upload or replace a project's art-directed image.
• Domain entities. Portfolio project (title, year, discipline, client, art-directed image, description, published state, index position); agency presentation content (agency description, capabilities, disciplines, positioning); agency owner identity.
• Component responsibilities. Left nav rail with quoted panel headers; centre content table with the same 1px rules as the public grid; right inspector with ruled label/value rows and tabular numerals; 64px artefact thumbnails carrying their client/year tags; instant state-based feedback with no bounce, spring, or float.
• States. Loading: the three panes render their rules and headers while records resolve; the centre table shows ruled skeleton rows. Empty: with no projects yet, the centre table shows its rules and a ruled prompt to create the first project; the inspector shows an unselected state. Success: saved changes appear immediately in the table and inspector, and published changes become visible on the public Portfolio and About pages. Error: a failed save marks the affected row and inspector field, retains the edited values, and offers retry; a failed image upload keeps the previous artefact. Recovery: retry re-attempts the save or upload with the edited values intact; the owner can discard the edit to return to the last persisted state.

Sign Up

• Information and state. Self-service first-use enrollment for the Agency Owner / Principal. Anonymous entry surface; creates the identity that Studio requires.
• Primary actions. Establish the agency owner identity and continue into Studio.
• Supporting actions. Move to Login when an identity already exists.
• Domain entities. Agency owner identity, session.
• Component responsibilities. Ruled enrollment fields with 2px radius and safety-orange focus ring; a hard-edged submit control; a ruled link to Login; quoted panel header.
• States. Loading: the form renders while the session check resolves; submit shows an in-place pending state. Empty: fields render blank. Success: the identity is established, a session begins, and the owner continues into Studio. Error: an already-enrolled identifier or a validation failure shows a ruled error line and retains entered values. Recovery: the owner can correct and resubmit, or move to Login if the identity already exists.

3. Functional Requirements

FR-1 — Public agency site with dual purpose. As a visitor, I should reach a public site that both presents the agency for hiring and functions as a showcase-style portfolio, so that the agency's work and its availability for engagement are visible in one place. (explicit)

• Actor: any anonymous visitor. Trigger: arriving at the site root. Observable result: the Landing surface renders the agency identity, proposition, and disciplines. Access state: anonymous. Failure/recovery: if agency identity fails to resolve, the wordmark fallback renders and a retry is available. Continuation: the visitor moves into Portfolio, About, or Contact.

FR-2 — Browse showcased creative work. As a Portfolio Visitor / Viewer, I should browse the agency's showcased creative work as a ruled index of projects, so that I can see the agency's creative output clearly. (explicit)

• Actor: Portfolio Visitor / Viewer. Trigger: opening Portfolio. Observable result: each published project renders as a full-width row with its year, discipline, client, and art-directed image. Access state: anonymous. Failure/recovery: if the project index fails to resolve, the rules remain and a retry is offered; a project whose image fails renders its rule and corner tag. Continuation: the visitor opens a project or moves to About or Contact.

FR-3 — View a single project artefact. As a Portfolio Visitor / Viewer, I should open an individual project and see its artefact and description, so that I can understand the work rather than only its title. (required_inference)

• Actor: Portfolio Visitor / Viewer. Trigger: selecting a project row. Observable result: the project's art-directed image, title, year, discipline, client, and description render. Access state: anonymous. Failure/recovery: if the project record fails to resolve, the index is restored with a retry. Continuation: the visitor returns to the index or moves to Contact.

FR-4 — Read agency information. As a Prospective Client, I should read agency information sufficient to evaluate the agency and its capabilities, so that I can judge whether to engage it. (explicit)

• Actor: Prospective Client. Trigger: opening About. Observable result: the agency description, capabilities, disciplines, and positioning render as an editorial spread. Access state: anonymous. Failure/recovery: if presentation content fails to resolve, labels remain and a retry is offered. Continuation: the client moves into Portfolio or Contact.

FR-5 — Submit a contact inquiry to hire the agency. As a Prospective Client, I should submit a contact inquiry to the agency, so that I can begin hiring them. (explicit)

• Actor: Prospective Client. Trigger: completing and dispatching the Contact form. Observable result: the inquiry is persisted and the page prints a numbered ticket in the RECEIVED block. Access state: anonymous. Failure/recovery: a failed dispatch retains every entered value and offers retry; a validation failure marks the specific field and keeps other values. Continuation: the client retains the ticket number as the reference for the inquiry.

FR-6 — Receive and review submitted inquiries. As an Agency Owner / Principal, I should receive submitted client inquiries as durable records, so that I can follow up on prospective work. (required_inference)

• Actor: Agency Owner / Principal. Trigger: a Prospective Client dispatches an inquiry. Observable result: the inquiry appears as a durable record bound to the agency, carrying the sender's details, description, timestamp, and ticket number. Access state: authenticated. Failure/recovery: if the inquiry list fails to resolve, the workspace retains its rules and offers a retry. Continuation: the owner follows up outside the product using the recorded details.

FR-7 — Self-service first-use enrollment. As an Agency Owner / Principal, I should complete self-service enrollment before first accessing Studio, so that I can begin curating without an invitation or provisioning step. (required_inference)

• Actor: Agency Owner / Principal. Trigger: choosing Sign Up from Landing or Login. Observable result: the agency owner identity is established and a session begins. Access state: anonymous entry. Failure/recovery: an already-enrolled identifier or validation failure shows a ruled error and retains entered values. Continuation: the owner continues into Studio.

FR-8 — Returning identity verification. As an Agency Owner / Principal, I should verify my returning identity before accessing Studio, so that my durable curated content stays bound to me. (required_inference)

• Actor: Agency Owner / Principal. Trigger: choosing Login. Observable result: the session is established and Studio becomes reachable. Access state: anonymous entry. Failure/recovery: invalid credentials show a ruled error without revealing which factor failed, and the owner may correct and resubmit or move to Sign Up. Continuation: the owner continues into Studio.

FR-9 — Protected Studio access. As an Agency Owner / Principal, I should reach Studio only after identity is established, so that curation of the public site is not open to anonymous visitors. (required_inference)

• Actor: Agency Owner / Principal. Trigger: navigating to Studio. Observable result: with a session, Studio renders; without one, the owner is directed to Login. Access state: login required. Failure/recovery: an expired session returns the owner to Login with the destination preserved. Continuation: after verification the owner lands in Studio.

FR-10 — Curate portfolio projects. As an Agency Owner / Principal, I should create, edit, publish, unpublish, and remove portfolio projects in Studio, so that the public Portfolio reflects the work I choose to show. (required_inference)

• Actor: Agency Owner / Principal. Trigger: creating or editing a project in Studio. Observable result: the project record persists with its title, year, discipline, client, image, description, and published state, and published projects appear on the public Portfolio. Access state: authenticated. Failure/recovery: a failed save marks the affected row and inspector field, retains edited values, and offers retry; a failed image upload keeps the previous artefact. Continuation: the owner continues editing or returns to the index.

FR-11 — Curate agency presentation content. As an Agency Owner / Principal, I should edit the agency presentation content in Studio, so that the public About spread describes the agency as I intend. (required_inference)

• Actor: Agency Owner / Principal. Trigger: editing presentation content in Studio. Observable result: the agency description, capabilities, disciplines, and positioning persist and appear on the public About spread. Access state: authenticated. Failure/recovery: a failed save retains the edited values and offers retry. Continuation: the owner continues editing or reviews the public spread.

FR-12 — Review published state from Studio. As an Agency Owner / Principal, I should see the current published state of each project and of the presentation content in Studio, so that I know what the public site is showing. (required_inference)

• Actor: Agency Owner / Principal. Trigger: opening Studio. Observable result: each row and inspector field shows its published or draft state. Access state: authenticated. Failure/recovery: if state fails to resolve, the table retains its rules and offers a retry. Continuation: the owner publishes, unpublishes, or edits accordingly.

4. User Personas

Agency Owner / Principal

The principal runs the creative agency and is the only accepted human actor on the working side of the product. Their context is back-of-house: they are not browsing the site for pleasure, they are deciding what the site shows. Their primary goal is for the site to present the agency's work and brand credibly enough that prospective clients evaluate and hire the agency, with success measured by inbound client inquiries and new business.

Their distinct accepted responsibilities are curation and reception. On curation, they create, edit, publish, unpublish, and remove portfolio projects, and they edit the agency presentation content that the About spread displays. On reception, they receive the contact inquiries that Prospective Clients dispatch, as durable records carrying sender details, description, timestamp, and ticket number. They also carry the identity responsibility that makes curation durable: self-service enrollment on first use and returning verification thereafter, because the content they curate must remain bound to them across visits.

Their relevant inputs and decisions are what work to show, how each project is tagged by year, discipline, and client, which art-directed image represents each project, the order of the index, and whether each item is published or held as a draft. Their interactions with other accepted participants are indirect but real: the Prospective Client's inquiry arrives as a record the principal reads, and the Portfolio Visitor / Viewer's experience is entirely determined by what the principal publishes. Their observable success is a public Portfolio and About spread that match their curation, and a stream of inquiries they can follow up on.

What makes this role different from the other two is that it is the only role that writes. Prospective Clients and Portfolio Visitors read and act on the public site; the principal is the one who decides what exists there, and the only one whose work persists between sessions.

Prospective Client

The prospective client is evaluating the agency with hiring in mind. Their context is a decision: they have a project or a need, and they are judging whether this agency is the right one. Their primary goal is to understand the agency's capabilities well enough to decide whether to reach out, and then to reach out successfully.

Their distinct accepted responsibilities are evaluation and initiation. On evaluation, they read the agency's capabilities and positioning on the About spread and review showcased work on the Portfolio index, including opening individual projects to see the artefact and description rather than only a title. On initiation, they complete the Contact dispatch slip and submit an inquiry, receiving a numbered ticket as confirmation of receipt.

Their relevant inputs and decisions are which projects they open, whether the agency's disciplines match their need, and what they write in the inquiry — their name, email, and a description of the project or engagement, with optional budget or timeline context. Their interactions with other accepted participants are with the Agency Owner / Principal, who receives the inquiry as a durable record and follows up outside the product. Their observable success is a completed inquiry that leads to engagement, evidenced by the numbered ticket they receive.

What makes this role different from the Portfolio Visitor / Viewer is intent and endpoint. The prospective client is reading toward a decision and has a completion action — the inquiry — that the viewer does not. The viewer may never contact the agency at all.

Portfolio Visitor / Viewer

The portfolio viewer is there for the work. Their context is showcase-style browsing: they may be a peer, a fellow designer, a student, or simply someone interested in the agency's creative output, and they are not necessarily hiring. Their primary goal is to see the work clearly and understand the agency's creative output.

Their distinct accepted responsibilities are exploration and comprehension. They scan the ruled Portfolio index, hover rows to bring each project's artefact in from the right edge, open individual projects to see the image and description, and read the agency presentation content on the About spread to place the work in context.

Their relevant inputs and decisions are which projects they open and how long they dwell on each artefact. Their interactions with other accepted participants are limited: they consume what the Agency Owner / Principal publishes, and they are not expected to contact the agency. Their observable success is seeing the work clearly and coming away with an understanding of the agency's creative output.

What makes this role different from the Prospective Client is that it has no commitment step. The viewer's journey ends in comprehension, not in an inquiry, and the product must serve that ending without pushing them toward Contact.

5. Core User Flows

Flow 1 — Portfolio Visitor / Viewer browses the showcased work

1. The viewer arrives at the site root and lands on Landing. The full-viewport ink-black plane renders with the 12-column grid rules visible behind the content, the display headline occupying columns 1–9, the discipline tag rail in columns 10–12, the hazard-stripe band along the bottom, and the credits ticker scrolling above it.
2. The viewer reads the headline and the one-line proposition, and optionally hovers the ticker to pause it and read the credits.
3. The viewer selects "WORK" and moves to Portfolio. The page transition is a 240ms hazard-stripe wipe across the viewport.
4. On Portfolio, the viewer scans the ruled index. Each published project renders as a full-width row with a fixed left metadata column showing year, discipline, and client, and a right-hand art-directed image framed by a 1px rule with a corner tag.
5. The viewer hovers a row. The project's image slides in from the right viewport edge with a hard cut at the end, and the row's artefact takes a 2px offset tag shadow.
6. The viewer opens a project. The artefact, title, year, discipline, client, and description render.
7. If the project index fails to resolve, the index retains its rules and offers a retry; the viewer retries in place. If a single project's image fails to load, its rule and corner tag render without the image and the rest of the index is unaffected.
8. The viewer returns to the index and continues browsing, or moves to About to read the agency presentation content as a two-column editorial spread with the sticky left label column.
9. The viewer's journey ends in comprehension. They are not required or prompted to contact the agency.

Flow 2 — Prospective Client evaluates the agency and dispatches an inquiry

1. The client arrives at the site root and lands on Landing, reading the headline, the proposition, and the discipline tags in the right-hand rail.
2. The client selects "ABOUT" and moves to About. The page transition is a 240ms hazard-stripe wipe.
3. On About, the client reads the agency description, capabilities, disciplines, and positioning in the right-hand editorial column while the left label column stays sticky.
4. The client selects "WORK" and moves to Portfolio to verify the agency's capabilities against actual output.
5. The client scans the ruled index, hovers rows to bring artefacts in from the right edge, and opens one or more projects to read their descriptions.
6. Satisfied that the agency fits, the client selects "CONTACT" and moves to Contact. The dispatch-slip layout renders with the ruled form on the left two-thirds and the agency coordinates and unstamped RECEIVED block on the right.
7. The client completes the inquiry fields — name, email, and a description of the project or engagement, with optional budget or timeline context — and dispatches the inquiry using the hard-edged control.
8. The inquiry is persisted as a durable record bound to the agency, and the page prints a numbered ticket in the RECEIVED block in place of a success toast. The client retains the ticket number as their reference.
9. If dispatch fails, the form retains every entered value and shows a ruled error line with a retry; the client retries without re-entering anything. If a field fails validation, that specific field is marked and all other values are kept.
10. The client's journey ends with a completed inquiry that the Agency Owner / Principal will receive and follow up on outside the product.

Flow 3 — Agency Owner / Principal enrolls on first use and curates the site

1. The principal arrives at Landing and selects the path to the working side, reaching Sign Up.
2. On Sign Up, the principal completes the ruled enrollment fields and submits. The identity is established, a session begins, and the principal continues into Studio.
3. If the identifier is already enrolled or a field fails validation, a ruled error line appears and the entered values are retained; the principal corrects and resubmits, or moves to Login if the identity already exists.
4. Studio renders as a dense three-pane workspace on the same exposed grid as the public site: left nav rail with quoted panel headers, centre content table with 1px rules, right inspector with ruled label/value rows and tabular numerals.
5. With no projects yet, the centre table shows its rules and a ruled prompt to create the first project, and the inspector shows an unselected state.
6. The principal creates a portfolio project, entering its title, year, discipline, client, and description, and uploading the art-directed image that represents it. The 64px artefact thumbnail appears in the table carrying its client/year tag.
7. The principal sets the project's published state. On save, the row and inspector update immediately with instant state-based feedback — no bounce, spring, or float.
8. If the save fails, the affected row and inspector field are marked, the edited values are retained, and a retry is offered; the principal retries or discards the edit to return to the last persisted state. If the image upload fails, the previous artefact is kept.
9. The principal repeats this for further projects, reordering the index as needed, and edits the agency presentation content — description, capabilities, disciplines, positioning — in the same workspace.

10. The principal reviews the published state of each row and of the presentation content in Studio, confirming what the public site is showing.
11. The principal's published projects now appear on the public Portfolio index, and the published presentation content appears on the public About spread.
12. The principal's journey continues as recurring curation: each return visit begins at Login.

Flow 4 — Agency Owner / Principal verifies returning identity and reviews inquiries

1. The principal returns to the site and reaches Login.
2. On Login, the principal submits their returning credentials. The session is established and the principal continues into Studio.
3. If the credentials are invalid, a ruled error line appears without revealing which factor failed, and the entered identifier is retained; the principal corrects and resubmits, or moves to Sign Up.
4. If the principal navigates to Studio without a session, or a session has expired, they are directed to Login with the destination preserved, and land in Studio after verification.
5. In Studio, the principal reviews the durable contact inquiries that Prospective Clients have dispatched, each carrying the sender's details, the project or engagement description, the submission timestamp, and the ticket number.
6. If the inquiry list fails to resolve, the workspace retains its rules and offers a retry; the principal retries in place.
7. The principal continues curating projects and presentation content, and follows up on inquiries outside the product using the recorded details.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Virgil Abloh. Headline idea: remixed familiarity for a creative agency that quotes itself — the studio's own site treated as a tagged artefact, with the designer's language about design.

Mode. Dark mode is the primary and only specified mode.

Colour tokens by role.

Construction-tape motif. A single repeating graphic: a 45° stripe of #F4F1EA on #0B0B0B. It appears 8px tall at the base of the landing hero, 4px as a section divider, and as the page-transition wipe. It is the only pattern in the system.

Typography. Headings and body both use Archivo. Headings are set in 700–800, uppercase, with tracking 0.02em for labels and 0 for display. Display headlines are flush-left, ragged-right, with tight leading (0.92) and enormous size contrast against 11px uppercase labels in the same family at 500. Quotation marks are literal typographic marks around section labels — "WORK", "ABOUT" — and recur as a UI motif in nav, buttons, and Studio panel headers.

Type scale, 1.25 modular, mobile-first:

Numerals are tabular in Studio.

Shape language. Hard 0px corners everywhere except form inputs and buttons, which take a 2px radius — enough to read as a control, not enough to soften the frame. Elements are framed by 1px rules rather than fills: exposed grid lines, hairline dividers, ruled label/value rows. Depth comes from stacked flat planes and a single 2px offset tag shadow on hovered artefacts. No blobs, no soft shadows, no glass.

Layout. A 12-column exposed grid with 24px gutters at 375px, 32px at 768px, and 48px at 1280px, with column rules drawn as 1px #2A2A28 lines behind the content on Landing and Portfolio. Landing is asymmetric: full-bleed display headline in columns 1–9, vertical tag rail in columns 10–12. Portfolio is a ruled index of full-width rows with a fixed left metadata column and a right-hand image that bleeds to the viewport edge on hover. About is a two-column editorial spread with a sticky left label column. Contact is a dispatch-slip layout: fields on the left two-thirds, agency coordinates and a stamped RECEIVED block on the right. Studio is a dense three-pane tool — left nav rail, centre content table, right inspector — on the same grid, with no rounded cards.

Imagery. No stock photography and no illustration for its own sake. Each portfolio project is represented by one art-directed image treated as an artefact — a product on concrete, a poster on a wall, a screen photographed at an angle, a garment on a rail — always with visible material texture and a hard crop. Images are framed by a 1px rule and carry a small corner tag in 11px uppercase showing client and year. Studio uses no imagery at all; it uses 64px thumbnails of the same artefacts with their tags. Icons are 2px stroke pictograms in bone white.

Explicitly avoided. Rounded cards with soft drop shadows and hover-lift; gradient blobs, glassmorphism, or any blurred translucent surface; blue, indigo, or violet as an accent; centred headline-plus-subtext-plus-pill-button hero compositions; Inter, Roboto, Helvetica, Poppins, or system-ui as heading or body families; stock photography of smiling teams, handshakes, or generic office scenes; bouncy, springy, or floating motion; decorative illustration, mascots, or spot art. The generic indigo/blue-on-white SaaS template is forbidden.

Readable text and controls. Headlines, wordmarks, labels, numbers, 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. Imagery, decoration, and motion may be cropped, bled, rotated, overlapped, or cut as the direction asks, provided they cover no readable text or control. The credits ticker may cross the viewport edge by design; every credit becomes fully readable as it passes.

7. Signature Design Concept

The landing first screen is a quoted artefact of the studio itself.

The first screen is a full-viewport ink-black plane (#0B0B0B) with the 12-column grid rules visible behind everything as 1px #2A2A28 hairlines. There is no centred composition, no gradient, no floating card, and no image in the hero — the composition is type, grid, and one hot stripe.

A single display headline in Archivo 800 uppercase, set at clamp(3.5rem, 9vw, 8rem), occupies columns 1–9 and reads as a stacked three-line statement. The middle line is indented one column, breaking the left edge into a stepped profile. The last word is wrapped in literal typographic quotation marks set in safety orange #FF4A00 — the studio quoting itself, and the only hot colour in the frame.

Beneath the headline, pinned flush-left, sits a 1px-ruled row containing the agency's one-line proposition in 16px bone white #F4F1EA and a hard-edged orange button labelled START A PROJECT with a 2px radius. The button is the only control in the hero and the only other place orange appears.

Columns 10–12 hold a vertical rail of rotated 11px uppercase discipline tags — BRAND, DIGITAL, FILM, SPATIAL — stacked down the right edge, each separated by a hairline. The rail is the hero's only vertical structure and balances the stepped headline without centring anything.

A hazard-stripe band 8px tall runs along the very bottom of the viewport, and the credits ticker scrolls above it. The stripe is the studio's recurring graphic and the ticker is the studio's own credits — the site quoting its own provenance.

Every element in this composition is accepted content: the agency identity, its proposition, its disciplines, its credits, and the path into Contact. Nothing is added for decoration.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat

Landing Hero Motion Brief.

• Focal subject. The stacked three-line display headline in columns 1–9, with its final word quoted in safety orange, sitting on the exposed 12-column grid.
• Input → transformation → outcome thesis. As the page settles, the grid rules resolve first and hold; the headline's three lines step into place in sequence, the middle line offset one column; the quoted final word lands last in orange; the ruled proposition row and START A PROJECT control follow flush-left; the discipline tag rail fills down columns 10–12; the credits ticker begins its scroll above the hazard band. The outcome is a fully composed, still frame — the motion is the assembly of a printed artefact, not an entrance animation.
• Motion vocabulary. Mechanical and stepped. Nav labels flip to their quoted form on hover with a 120ms step (WORK → "WORK"). Page transitions are a 240ms hazard-stripe wipe across the viewport. Portfolio rows slide their image in from the right edge on hover with a hard cut at the end, not an ease-out. The credits ticker runs continuously and pauses on hover. Studio feedback is instant and state-based. No bounce, no spring, no float.
• Composed first frame. The ink-black plane with grid rules visible, the three-line headline fully set with the middle line indented and the final word quoted in orange, the ruled proposition row and orange START A PROJECT control flush-left beneath it, the rotated discipline tag rail down columns 10–12, the 8px hazard band along the bottom, and the credits ticker scrolling above it.
• Reduced-motion state. Under prefers-reduced-motion everything resolves to static: the ticker becomes a wrapped two-row list of credits, wipes become instant cuts, and hovers become simple underline reveals. The composed first frame is unchanged.

9. Non-Functional Requirements

NFR-1 — Durable curated state. Portfolio projects and agency presentation content persist durably and remain bound to the agency owner identity across sessions, so that curation survives between visits and the public site reflects the last published state. (required_inference; rationale: the accepted curation responsibility is recurring and its results are what the public site displays.)

NFR-2 — Public pages are anonymously reachable. Landing, Portfolio, About, Contact, Login, and Sign Up render without an established session. Studio is the only destination requiring login. (explicit via the accepted access contract; rationale: the public site's purpose is to be seen by prospective clients and portfolio viewers, and the identity surfaces must be reachable before the access they establish exists.)

NFR-3 — Readable text and controls stay whole. Headlines, wordmarks, labels, numbers, and controls remain 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. (explicit; rationale: stated as a project-wide constraint in the creative direction.)

NFR-4 — Reduced-motion support. Under prefers-reduced-motion, the credits ticker becomes a wrapped two-row list, page-transition wipes become instant cuts, and hover reveals become simple underline reveals. (explicit; rationale: stated in the creative direction's motion specification.)

NFR-5 — Accessible contrast. Bone white #F4F1EA on ink #0B0B0B and on surface #161616 carries all reading text; muted #8A8A85 is restricted to metadata, timestamps, and label/value pairs and is never used for body copy. (explicit; rationale: stated in the palette specification.)

NFR-6 — Inquiry durability. A dispatched contact inquiry is persisted with its sender details, description, timestamp, and ticket number, and remains available to the agency owner as a durable record. (required_inference; rationale: the numbered ticket the client receives is only meaningful if the inquiry it references persists.)

NFR-7 — No fabricated content. Portfolio rows, agency presentation content, and inquiry records are never populated with placeholder or invented data; empty states render as ruled notices instead. (required_inference; rationale: the site's credibility rests on showing only the agency's real work.)

10. Tech Stack

• Front end. React, delivered as a first-party web application. (Default — not specified by user.)
• Back end. Python with FastAPI, providing the public content API, the inquiry endpoint, identity continuity, and the Studio curation endpoints. (Default — not specified by user.)
• Storage. A relational database for portfolio projects, agency presentation content, agency owner identities, sessions, and contact inquiries. (Default — not specified by user.)
• Containerization. Docker and docker-compose, with the front end and the backend as the runnable services. (Default — not specified by user.)
• Orchestration. Kubernetes is not required for the current scope. (Default — not specified by user.)

No source-specified technology choices were given; the above are labeled defaults and do not alter product behavior.

11. Assumptions and Constraints

Assumptions.

• The agency owner is a single principal; the accepted persona catalog contains exactly one working-side role, so Studio serves one owner identity rather than a team. (Assumption — narrow, consistent with the accepted persona set.)
• Portfolio projects and agency presentation content are authored entirely through Studio; no content is supplied from an external CMS or fixed source. (Assumption — consistent with the absence of any content_source reference directive.)
• Contact inquiries are followed up outside the product; no in-product reply, messaging, or status-tracking capability is assumed. (Assumption — narrow, keeps the inquiry lifecycle within accepted scope.)
• The agency's coordinates shown on Contact are authored as part of the agency presentation content. (Assumption — narrow, consistent with Studio owning agency presentation content.)

Constraints.

• The public site must serve both stated purposes simultaneously: presenting the agency for hiring and functioning as a showcase-style portfolio. (explicit)
• Studio is protected and requires an established session; Landing, Portfolio, About, Contact, Login, and Sign Up are anonymously reachable. (explicit via the accepted access contract)
• Identity is application-owned and established through self-service enrollment, with returning verification through Login. No invitation, provisioning, or deployment bootstrap path is in scope. (required_inference)
• No account-management capabilities beyond first-use enrollment and returning verification are in scope. (explicit boundary)
• The visual system is bound to the creative direction: ink-black ground, bone white type, safety orange accent in small hard doses, Archivo throughout, hard 0px corners except 2px on controls, 1px rules instead of fills, and the 45° construction-tape stripe as the only pattern. (explicit)
• The forbidden treatments are binding: no rounded cards with soft shadows, no gradient or glass surfaces, no blue/indigo/violet accent, no centred hero compositions, no Inter/Roboto/Helvetica/Poppins/system-ui, no stock photography, no bouncy or floating motion, no decorative illustration. (explicit)
• No client portal, project management, billing, or messaging capability is in scope. (explicit boundary)

12. Glossary

Agency Owner / Principal. The accepted persona who runs the creative agency, curates the site's content in Studio, and receives client inquiries.

Prospective Client. The accepted persona who evaluates the agency with hiring intent and dispatches a contact inquiry.

Portfolio Visitor / Viewer. The accepted persona who browses the site as a showcase-style portfolio without necessarily hiring.

Studio. The protected three-pane curation workspace where the agency owner manages portfolio projects and agency presentation content.

Portfolio project. A durable record representing one piece of showcased work, carrying title, year, discipline, client, an art-directed image, a description, a published state, and an index position.

Agency presentation content. The durable content describing the agency — description, capabilities, disciplines, and positioning — displayed on the public About spread.

Contact inquiry. A durable record created when a Prospective Client dispatches the Contact form, carrying sender details, description, timestamp, and a ticket number.

Ticket number. The numbered receipt printed in the RECEIVED block on Contact after a successful inquiry dispatch, serving as the client's reference.

Artefact. A portfolio project's art-directed image, treated as a tagged object rather than a decorative photograph, framed by a 1px rule and carrying a client/year corner tag.

Quoted label. The system-wide treatment in which every section, nav item, and Studio panel header renders its name in uppercase inside literal typographic quotation marks, flipping into that form on hover with a 120ms step.

Hazard stripe. The studio's recurring 45° construction-tape motif in bone white on ink, appearing 8px tall at the base of the landing hero, 4px as a section divider, and as the page-transition wipe.

Exposed grid. The 12-column layout whose 1px #2A2A28 column rules remain visible behind Landing and Portfolio content and become the table borders in Studio.

Dispatch slip. The Contact page's layout and metaphor: a ruled form on the left two-thirds and agency coordinates with a stamped RECEIVED block on the right.