System Requirements Document for company-profile

1. Introduction

company-profile is a public-facing company profile site whose brand identity is carried by two storyboard-derived characters. The company's profile content — who the company is, what it does, and the story it tells — is presented through a dramatic, poster-like visual language in which the two characters act as the brand's visual theme throughout the site.

The product serves two audiences:

• Profile Visitors who arrive anonymously to read the company's profile information and see the two characters that carry the brand story.
• The Company Profile Owner who supplies the storyboard image and the character direction, and who maintains the profile content and character concepts so the site consistently represents the company.

The characters are a visual theme throughout the site, not a portfolio of character-design work. The site is a general corporate profile in which the two characters serve as brand mascots and visual theme.

2. System Overview

The current delivery is a first-party web application with a public entry surface and a small protected owner workspace.

Actors

• Company Profile Owner (human, active) — the user building their own company profile; supplies the storyboard image and the character direction, and maintains profile content and character concepts.
• Profile Visitor (human, active) — anonymous reader of the public company profile and viewer of the two characters.

Accepted behavior

• A public Landing surface presents the company profile and the two storyboard-derived characters as the site's visual theme.
• The owner can self-enroll and later return and verify to resume control of durable profile and character content.
• The verified owner is authorized before editing shared public profile and character content.
• A protected Brand Assets overview lets the owner review the supplied storyboard image and the character concepts currently used by the company profile.
• A protected Character Editor lets the owner supply or update the storyboard image and the two character concepts: a female character with dragon wings and weapons, and a male character suited to the story.

Ownership and exclusions

• The storyboard image is supplied by the user and is the source for the two character concepts and the visual theme reference.
• The characters must follow the supplied storyboard: one female with dragon wings and weapons, and one male suited to the story.
• The characters are a visual theme throughout the site rather than a portfolio of character-design work.
• No character-design portfolio, commission workflow, marketplace, or third-party artist management is in scope.

2a. Product Interpretation and Delivery Boundary

The company profile is delivered as a first-party application. The public entry is anonymously reachable: a Profile Visitor can read the company profile and view the two characters without establishing identity. The owner workspace is protected: the Company Profile Owner must establish identity before editing shared public profile and character content.

Identity is application-owned. Because the owner must privately own and resume durable, actor-specific profile and character state, and because edits change shared public content, the application provides self-service enrollment and returning verification. No invitation, provisioning, or pre-existing account boundary is established by the source, so enrollment is self-starting.

The storyboard image is supplied by the user and is authoritative for the two character concepts and for the visual theme. The site does not generate, commission, or source characters from anywhere else.

Current scope covers the public profile presentation, the two characters as visual theme, owner enrollment and returning verification, owner authorization before editing, the protected brand-asset overview, and the protected character editor. Future or adjacent capabilities — character-design portfolio features, external artist collaboration, commerce, and third-party asset marketplaces — are out of current scope.

2b. Source Content Inventory

The reference directive declares content_source for the storyboard image to be posted by the user.

• Storyboard image (to be supplied by the user) — authoritative source for the two character concepts and the visual theme reference for the company profile.
  • Character 01 — Female: dragon wings and weapons.
  • Character 02 — Male: suited to the story.
• Company profile content — the company's own profile information, presented publicly on the Landing surface.

No other factual entities, collections, fields, values, dates, contacts, links, or media references are verified by the source. The storyboard image itself has not yet been supplied; its contents beyond the two character descriptions above are not verifiable and are not invented here.

2c. Page Content and Component Coverage

Landing

• Information/state: the company profile content; the company wordmark; the two storyboard-derived characters presented as the brand's visual theme; the company tagline.
• Primary actions: read the company profile; view the two characters; proceed to owner access (Login / Sign Up) when the visitor is the owner.
• Supporting actions: navigate to profile sections; follow the section index in the persistent left rail.
• Domain entities: Company Profile, Character 01 (female, dragon wings and weapons), Character 02 (male), Storyboard Image (as visual theme reference), Tagline.
• Component responsibilities:
  • Full-viewport hero: company wordmark stacked in three lines in Anton, bleeding to the left edge; the female character's silhouette rising behind the type as a flat red plane, wings breaking the baseline as decoration only and never covering a letter.
  • Vertical red band on the hero's right third carrying the tagline in uppercase Archivo, with a single yellow CTA block cut into the band's lower edge.
  • Thin cream rule running the full width beneath the composition, with the two character names (01 / 02) set small at the far ends.
  • Persistent left rail: vertical wordmark and section index.
  • Character section: two poster plates, one per character, side by side on desktop and stacked at 768px and 375px, each with an oversized numeral (01 / 02) in the margin and a caption block that slides up on hover.
  • Anton marquee of the company tagline across the top of the character section.
  • Profile facts presented with thick-line pictograms.
• States:
  • Loading: poster-grid skeleton with the ink-black ground and cream rules in place; type blocks reserved at their final size.
  • Empty: if no storyboard image has been supplied yet, the character plates render as flat colour fields with their numerals and captions, and the profile content still presents.
  • Success: full type composition, both character plates, tagline marquee, and profile content all present.
  • Error: if the storyboard image fails to load, the affected plate falls back to its flat colour field with numeral and caption; the rest of the page is unaffected.
  • Recovery: the plate retries on next visit; the owner can re-supply the image from Character Editor.

Login

• Information/state: returning-verification form for the Company Profile Owner; ink-on-cream panel inverting the poster grid.
• Primary actions: submit credentials to verify identity and resume control of durable profile and character content.
• Supporting actions: navigate to Sign Up when the owner has not yet enrolled.
• Domain entities: Owner Identity, Session.
• Component responsibilities: credential fields with zero border-radius; submit control as a hard-edged block; link to Sign Up; error region.
• States:
  • Loading: submit control disabled with a muted-grey state while verification runs.
  • Empty: fields empty with uppercase small-caps labels.
  • Success: owner is verified and continues to the protected workspace.
  • Error: verification failure is stated in place with the fields preserved for correction.
  • Recovery: the owner retries, or moves to Sign Up if no account exists.

Sign Up

• Information/state: self-service enrollment form for the Company Profile Owner; ink-on-cream panel inverting the poster grid.
• Primary actions: establish owner identity so the owner can control durable profile and character content.
• Supporting actions: navigate to Login when the owner already has an account.
• Domain entities: Owner Identity, Session.
• Component responsibilities: enrollment fields with zero border-radius; submit control as a hard-edged block; link to Login; error region.
• States:
  • Loading: submit control disabled with a muted-grey state while enrollment runs.
  • Empty: fields empty with uppercase small-caps labels.
  • Success: owner identity is established and the owner continues to the protected workspace.
  • Error: enrollment failure is stated in place with the fields preserved for correction.
  • Recovery: the owner corrects and resubmits, or moves to Login if an account already exists.

Brand Assets

• Information/state: protected overview of the supplied storyboard image and the character concepts currently used by the company profile; ink-on-cream workspace panel.
• Primary actions: review the storyboard image; review Character 01 and Character 02 as currently used.
• Supporting actions: move to Character Editor to supply or update the storyboard image or either character concept.
• Domain entities: Storyboard Image, Character 01 (female, dragon wings and weapons), Character 02 (male), Company Profile.
• Component responsibilities: storyboard image plate with heavy ink border and caption block; two character plates with oversized numerals 01 / 02; entry control to Character Editor.
• States:
  • Loading: plate frames reserved at final size on the ink-on-cream panel.
  • Empty: when no storyboard image has been supplied, the storyboard plate shows an empty framed field with a caption directing the owner to Character Editor.
  • Success: storyboard image and both character concepts are shown as currently used.
  • Error: a failed asset load is stated on its own plate without affecting the others.
  • Recovery: the owner re-supplies the asset from Character Editor.

Character Editor

• Information/state: protected focused workspace for supplying or updating the storyboard image and the two character concepts; ink-on-cream workspace panel.
• Primary actions: supply or replace the storyboard image; supply or update Character 01 (female with dragon wings and weapons); supply or update Character 02 (male suited to the story).
• Supporting actions: return to Brand Assets to review the current state.
• Domain entities: Storyboard Image, Character 01, Character 02, Company Profile.
• Component responsibilities: storyboard image input with preview; two character concept inputs, each with its own plate, numeral, and caption; save control as a hard-edged block; validation and error region.
• States:
  • Loading: editor fields and plate frames reserved at final size.
  • Empty: no storyboard image or character concept supplied yet; each field shows its own empty framed state.
  • Success: the supplied storyboard image and both character concepts are saved and become the concepts used by the company profile.
  • Error: validation or save failure is stated in place with the owner's input preserved.
  • Recovery: the owner corrects and resubmits; previously saved content remains in place until a successful save.

3. Functional Requirements

FR-1 — Public company profile presentation (explicit) As a Profile Visitor, I should read the company's profile information on the public Landing surface so that I understand who the company is.

• Trigger: the visitor opens the Landing surface.
• Observable result: the company profile content is presented on the ink-black poster stage.
• Access state: anonymous; no identity required.
• Failure/recovery: if profile content fails to load, the page states the failure and offers a retry; the type composition and character plates remain.
• Continuation: the visitor continues into the character section and profile facts.

FR-2 — Two storyboard-derived characters as the site's visual theme (explicit) As a Profile Visitor, I should see the two storyboard-derived characters presented as the company's visual theme throughout the site so that I feel the company's mythology.

• Trigger: the visitor views the Landing surface and its character section.
• Observable result: Character 01 (female with dragon wings and weapons) and Character 02 (male suited to the story) appear as poster plates with oversized numerals 01 / 02 and caption blocks.
• Access state: anonymous.
• Failure/recovery: if a character plate's asset fails to load, that plate falls back to its flat colour field with numeral and caption; the other plate is unaffected.
• Continuation: the visitor reads each character's caption and continues through the profile.
• Constraint: the characters are a visual theme throughout the site, not a portfolio of character-design work.

FR-3 — Character 01 conforms to the storyboard (explicit) As a Company Profile Owner, I should have Character 01 presented as a female with dragon wings and weapons, following the supplied storyboard, so that the brand theme matches my story.

• Trigger: the owner supplies or updates Character 01.
• Observable result: Character 01 is shown as a female with dragon wings and weapons, staged against a flat red field with her wings cut as bold silhouette planes.
• Access state: protected; the owner must be verified and authorized.
• Failure/recovery: if the concept cannot be saved, the error is stated in place and the owner's input is preserved.
• Continuation: the saved concept becomes the concept used by the company profile.

FR-4 — Character 02 conforms to the storyboard (explicit) As a Company Profile Owner, I should have Character 02 presented as a male character suited to the story, following the supplied storyboard, so that the brand theme matches my story.

• Trigger: the owner supplies or updates Character 02.
• Observable result: Character 02 is shown as a male character suited to the story, staged against a signal-yellow field with a harder, grounded stance.
• Access state: protected; the owner must be verified and authorized.
• Failure/recovery: if the concept cannot be saved, the error is stated in place and the owner's input is preserved.
• Continuation: the saved concept becomes the concept used by the company profile.

FR-5 — Supply the storyboard image (explicit) As a Company Profile Owner, I should supply the storyboard image that is the source for the two character concepts and the visual theme reference, so that the site's characters and theme derive from my storyboard.

• Trigger: the owner supplies the storyboard image in Character Editor.
• Observable result: the storyboard image is stored and becomes the source reference shown in Brand Assets and used as the visual theme reference.
• Access state: protected; the owner must be verified and authorized.
• Failure/recovery: if the image cannot be accepted or saved, the error is stated in place and the owner's selection is preserved.
• Continuation: the owner reviews the supplied image in Brand Assets.

FR-6 — Self-service enrollment (required_inference) As a Company Profile Owner, I should establish my own owner identity without an invitation or provisioning step so that I can begin controlling the company profile and character content.

• Trigger: the owner opens Sign Up and submits enrollment details.
• Observable result: an owner identity is established and the owner continues to the protected workspace.
• Access state: anonymous entry; the Sign Up surface is reachable without prior identity.
• Failure/recovery: enrollment failure is stated in place with the owner's input preserved; the owner corrects and resubmits, or moves to Login if an account already exists.
• Continuation: the owner proceeds to the protected workspace.

FR-7 — Returning verification (required_inference) As a Company Profile Owner, I should verify my identity on return so that I can resume control of durable profile and character content.

• Trigger: the owner opens Login and submits credentials.
• Observable result: the owner is verified and regains access to the protected workspace.
• Access state: anonymous entry; the Login surface is reachable without prior identity.
• Failure/recovery: verification failure is stated in place with the fields preserved; the owner retries, or moves to Sign Up if no account exists.
• Continuation: the owner proceeds to Brand Assets or Character Editor.

FR-8 — Authorization before editing shared content (required_inference) As a Company Profile Owner, I should be authorized before editing shared public profile and character content so that the public profile is only changed by its owner.

• Trigger: the owner attempts to open Brand Assets or Character Editor, or to save changes.
• Observable result: only a verified and authorized owner reaches the protected workspace and can save changes to shared public profile and character content.
• Access state: protected; Brand Assets and Character Editor are role-restricted to the owner.
• Failure/recovery: an unauthorized attempt does not change shared content; the owner is directed to verify identity.
• Continuation: once authorized, the owner edits and saves.

FR-9 — Review current brand assets (required_inference) As a Company Profile Owner, I should review the supplied storyboard image and the character concepts currently used by the company profile so that I know what the site is presenting.

• Trigger: the owner opens Brand Assets.
• Observable result: the storyboard image and both character concepts currently in use are shown.
• Access state: protected; role-restricted to the owner.
• Failure/recovery: a failed asset load is stated on its own plate without affecting the others; the owner re-supplies the asset from Character Editor.
• Continuation: the owner moves to Character Editor to make changes.

FR-10 — Update the storyboard image and character concepts (required_inference) As a Company Profile Owner, I should supply or update the storyboard image and the two character concepts so that the site consistently represents the company.

• Trigger: the owner edits in Character Editor and saves.
• Observable result: the updated storyboard image and character concepts become the concepts used by the company profile.
• Access state: protected; role-restricted to the owner.
• Failure/recovery: validation or save failure is stated in place with the owner's input preserved; previously saved content remains in place until a successful save.
• Continuation: the owner returns to Brand Assets to review the updated state.

4. User Personas

Company Profile Owner

Product context. The owner is the user building their own company profile. They hold the storyboard image and the character direction, and they are the only actor who changes what the public profile presents.

Primary goal. Assemble and maintain the company profile content and the two character concepts so that the site consistently represents the company and its story.

Distinct accepted responsibilities.

• Supply the storyboard image that is the source for the two character concepts and the visual theme reference.
• Supply or update Character 01 — a female with dragon wings and weapons — following the storyboard.
• Supply or update Character 02 — a male character suited to the story — following the storyboard.
• Review the storyboard image and the character concepts currently used by the company profile.
• Establish owner identity by self-service enrollment, and verify identity on return to resume control of durable profile and character content.

Relevant inputs and decisions. The storyboard image; the two character concepts; the decision of when a concept is ready to become the concept used by the company profile; the decision to replace a previously supplied asset.

Interactions with other accepted participants. The owner's saved work is what Profile Visitors see on the public Landing surface. The owner does not interact with visitors directly; the handoff is the published profile and character presentation.

Observable success. The storyboard image and both character concepts are saved and are the concepts the company profile presents; the owner can return later, verify identity, and find that content intact.

What makes this role different. The owner is the only actor with write responsibility over shared public profile and character content, and the only actor whose work must persist across sessions and be bound to the correct participant. A Profile Visitor only reads.

Profile Visitor

Product context. The visitor arrives at the public company profile without an account and without prior knowledge of the company.

Primary goal. Understand who the company is and the character-driven theme it presents.

Distinct accepted responsibilities.

• Read the company's profile information.
• View the two storyboard characters that carry the brand story.

Relevant inputs and decisions. Which profile sections to read; whether to continue into the character section and profile facts.

Interactions with other accepted participants. The visitor sees the published result of the Company Profile Owner's work. The visitor does not edit anything and does not interact with the owner.

Observable success. The visitor has read the company profile and seen both characters presented as the brand's visual theme.

What makes this role different. The visitor's work is entirely read-only and anonymous; nothing the visitor does changes durable state, and no identity is required.

5. Core User Flows

Flow A — Profile Visitor reads the company profile and views the characters

1. The Profile Visitor opens the public Landing surface anonymously. No identity is required.
2. The full-viewport hero presents the company wordmark stacked in three lines in Anton, bleeding to the left edge, with the female character's silhouette rising behind the type as a flat red plane. Her wings break the type's baseline as decoration only and never cover a letter.
3. The visitor reads the tagline running bottom-to-top in the vertical red band on the hero's right third.
4. The visitor scrolls into the character section. A slow Anton marquee of the company tagline runs across the top of the section.
5. The visitor sees two poster plates: Character 01 (female, dragon wings and weapons) on a flat red field, and Character 02 (male) on a signal-yellow field, each with an oversized numeral 01 / 02 in the margin.
6. The visitor hovers a plate; its caption block slides up and the plate's background colour swaps from red to yellow.
7. The visitor reads the profile facts presented with thick-line pictograms.
8. Observable result: the visitor has read the company profile and seen both characters presented as the brand's visual theme.
9. Failure/recovery: if a character plate's asset fails to load, that plate falls back to its flat colour field with its numeral and caption, and the rest of the page is unaffected. If profile content fails to load, the page states the failure and offers a retry.
10. Continuation: the visitor continues through the remaining profile sections, or leaves the site.
11. Reduced motion: the tagline marquee stops and wraps into static rows; reveals become instant.

Flow B — Company Profile Owner enrolls for the first time

1. The Company Profile Owner opens Sign Up anonymously. No prior identity exists and no invitation or provisioning step is established.
2. The owner submits enrollment details on the ink-on-cream panel that inverts the poster grid.
3. While enrollment runs, the submit control is disabled in a muted-grey state.
4. Observable result: an owner identity is established and the owner continues to the protected workspace.
5. Failure/recovery: if enrollment fails, the error is stated in place with the owner's input preserved. The owner corrects and resubmits, or moves to Login if an account already exists.
6. Continuation: the owner proceeds to Brand Assets or Character Editor.

Flow C — Company Profile Owner returns and verifies identity

1. The Company Profile Owner opens Login anonymously.
2. The owner submits credentials to verify identity.
3. While verification runs, the submit control is disabled in a muted-grey state.
4. Observable result: the owner is verified and regains access to the protected workspace, resuming control of durable profile and character content.
5. Failure/recovery: if verification fails, the error is stated in place with the fields preserved. The owner retries, or moves to Sign Up if no account exists.
6. Continuation: the owner proceeds to Brand Assets or Character Editor.

Flow D — Company Profile Owner reviews current brand assets

1. The authorized Company Profile Owner opens Brand Assets. The surface is role-restricted; an unauthorized attempt does not change shared content and is directed to verify identity.
2. The owner reviews the supplied storyboard image on its plate with a heavy ink border and caption block.
3. The owner reviews Character 01 (female, dragon wings and weapons) and Character 02 (male) as currently used by the company profile, each with its oversized numeral 01 / 02.
4. Observable result: the owner knows exactly what the site is presenting.
5. Failure/recovery: if an asset fails to load, the failure is stated on its own plate without affecting the others; the owner re-supplies the asset from Character Editor.
6. Continuation: the owner moves to Character Editor to make changes, or leaves the workspace.

Flow E — Company Profile Owner supplies or updates the storyboard image and character concepts

1. The authorized Company Profile Owner opens Character Editor. The surface is role-restricted.
2. The owner supplies or replaces the storyboard image — the source for the two character concepts and the visual theme reference — and sees its preview.
3. The owner supplies or updates Character 01: a female with dragon wings and weapons, following the storyboard.
4. The owner supplies or updates Character 02: a male character suited to the story, following the storyboard.
5. The owner saves.
6. Observable result: the updated storyboard image and character concepts become the concepts used by the company profile, and Profile Visitors see them on the public Landing surface.
7. Failure/recovery: if validation or save fails, the error is stated in place with the owner's input preserved. Previously saved content remains in place until a successful save.
8. Continuation: the owner returns to Brand Assets to review the updated state.

6. Visuals Colors and Theme

Muse and headline: Typographic maximalism after Paula Scher — two characters as painted architecture. The brand identity IS the two storyboard characters; the company name is the structure and the site reads like a title card for the story rather than a template.

Mode: dark.

Colour tokens (exact hex, by role)

No gradients, no glow, no blue-indigo anywhere.

Typography

• Headings: Anton at 400, all-caps, tight leading 0.88–0.94, tracking −0.01em for stacked poster lines.
• Secondary headings: Archivo Black at 900 with 0.02em tracking.
• Body and labels: Archivo 400/600 at comfortable reading size; uppercase small-caps labels at 0.14em tracking.
• Scale: 1.333 modular, clamp-based — display XL clamp(56px, 11vw, 148px); display L clamp(40px, 7vw, 88px); heading clamp(28px, 4vw, 44px); subhead 22px; body 17px/1.6; label 12px uppercase 0.14em.
• Mobile display starts at 56px so the headline stays whole and inside the viewport at 375px.
• Display type is set to fill its column edge-to-edge.

Shape language: hard edges only — zero border-radius on cards, buttons, inputs and images. Composition is built from rectangles and diagonal bands: full-bleed colour blocks, thick 6px rules, and angled 8–12deg bands that slice across sections. Character panels are framed like poster plates with a heavy 4px ink border and a caption block underneath. Icons are thick-line, single-weight pictograms. No blobs, no glass, no soft shadows; depth comes from overlapping flat planes, not blur.

Layout: poster grid — a 12-column asymmetric grid with a persistent left rail carrying a vertical wordmark and section index. The landing opens with a full-viewport type composition where the company name is stacked in three lines and the female character's wing panels collide with the type. Sections alternate between full-bleed colour blocks (red, yellow, teal) and ink-black typographic spreads. The two characters get one large plate each, side by side on desktop and stacked at 768px and 375px, with their names set as oversized numerals (01 / 02) in the margin. The owner-facing pages (Login, Sign Up, Brand Assets, Character Editor) reuse the same grid but invert to a lighter ink-on-cream panel so the workspace reads as a different room of the same building.

Imagery: typography is the primary image. The two characters are rendered as high-contrast art-directed plates: the female with dragon wings and weapons staged against a flat red field with her wings cut as bold silhouette planes; the male staged against signal yellow with a harder, grounded stance. Both use a duotone treatment (ink black plus one flat colour) so they read as screen-printed posters rather than stock fantasy art. Supporting imagery is limited to a high-contrast cutout of the supplied storyboard image, treated the same way, and thick-line pictograms for the profile facts. No photography of people, no 3D renders, no gradient meshes.

Readable-content rule: headlines, wordmarks, labels, numbers, item images, cards and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling to fit, and no other element covers any part of them. Crops, bleeds and off-edge placement are for decoration only. Moving content (marquees, tickers, scrollable rows) may cross the edge by design and must show every item fully readable as it passes; with prefers-reduced-motion it stops and wraps into rows or sits in a horizontally scrollable row.

7. Signature Design Concept

The title card. The public Landing opens as a full-viewport ink-black stage. The company wordmark is set in Anton at clamp(56px, 11vw, 148px), stacked in three lines that bleed to the left edge. Behind the type, the female dragon-winged character's silhouette rises as a flat red plane — her wings break the type's baseline as decoration only and never cover a letter. On the right third, a vertical red band carries the tagline in uppercase Archivo running bottom-to-top, with a single yellow CTA block cut into the band's lower edge, echoing Scher's Public Theater posters. A thin cream rule runs the full width beneath the composition with the two character names (01 / 02) set small at the far ends.

Nothing is centred. No subhead sits under the headline. No button floats in the middle of the screen.

The concept recomposes only accepted content and controls: the company wordmark, the tagline, the two characters, the profile content, and the owner-access entry. It introduces no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the stacked company wordmark in Anton, with the female dragon-winged character's red wing silhouette rising behind it as a flat plane.
• Input → transformation → outcome thesis: as the visitor scrolls, each headline line enters from behind a colour block that wipes away in 420ms, revealing the type; the wing plane holds its position behind the type and never covers a letter. The outcome is the full title-card composition fully legible, with the tagline marquee running across the top of the character section.
• Motion vocabulary: wipes, slides, and marquees only. Staggered word reveals on scroll; a slow horizontal Anton marquee of the company tagline; colour-block wipes on section transitions; hover on a character plate slides its caption block up and swaps the plate's background colour from red to yellow. Nothing bounces, nothing floats.
• Composed first frame: ink-black ground; the three-line wordmark bleeding off the left edge; the red wing plane behind the type; the vertical red band on the right third with the tagline and the yellow CTA block cut into its lower edge; the cream rule beneath with 01 / 02 at the far ends.
• Reduced-motion state: all marquees stop and wrap into static rows; reveals become instant; hover colour swaps remain as instant state changes.

9. Non-Functional Requirements

• NFR-1 — Public anonymous entry (explicit): the Landing surface is reachable without identity so that Profile Visitors can read the company profile and view the characters.
• NFR-2 — Protected owner workspace (required_inference): Brand Assets and Character Editor are role-restricted to the verified, authorized Company Profile Owner; unauthorized attempts do not change shared public profile or character content.
• NFR-3 — Durable owner state (required_inference): the owner's supplied storyboard image and character concepts persist across sessions and remain bound to the correct owner identity.
• NFR-4 — Storyboard fidelity (explicit): the characters must follow the supplied storyboard — one female with dragon wings and weapons, and one male suited to the story.
• NFR-5 — Theme, not portfolio (explicit): the characters are a visual theme throughout the site rather than a portfolio of character-design work.
• NFR-6 — Readable content at every viewport (explicit): headlines, wordmarks, labels, numbers, item images, cards and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px; only decoration may crop or bleed.
• NFR-7 — Reduced motion (explicit): with prefers-reduced-motion, marquees stop and wrap into static rows, and reveals become instant.
• NFR-8 — Palette discipline (explicit): no gradients, no glow, and no blue or indigo anywhere in the palette; zero border-radius on structural elements.
• NFR-9 — Performance of the poster stage (required_inference): the flat-plane, screen-printed treatment keeps the site fast and buildable at every viewport, so the hero and character plates render without glossy 3D or gradient meshes.

10. Tech Stack

• Frontend: React (web), single-page application with the poster grid, persistent left rail, and the five surfaces: Landing, Login, Sign Up, Brand Assets, Character Editor.
• Backend: Python / FastAPI, providing owner enrollment, returning verification, authorization for the protected workspace, and persistence of the storyboard image and character concepts.
• Storage: persistent storage for owner identity and for the supplied storyboard image and character concept assets.
• Containerization: Docker / docker-compose for local and deployment packaging.
• Kubernetes: only if the deployment requires it; not otherwise.

11. Assumptions and Constraints

• A-1 (explicit): The user will supply the storyboard image; it is the source for the two character concepts and the visual theme reference. Until it is supplied, the character plates render as flat colour fields with numerals and captions, and the storyboard plate in Brand Assets shows an empty framed field.
• A-2 (explicit): The characters must follow the supplied storyboard — one female with dragon wings and weapons, and one male suited to the story.
• A-3 (explicit): The characters are a visual theme throughout the site rather than a portfolio of character-design work.
• A-4 (required_inference): Identity is application-owned because the owner must privately own and resume durable, actor-specific profile and character state, and because edits change shared public content.
• A-5 (required_inference): Enrollment is self-service because no invitation, provisioning, or pre-existing account boundary is established by the source.
• A-6 (required_inference): The Login and Sign Up surfaces are anonymously reachable; a protected destination cannot own the interaction that establishes access to itself.
• A-7 (required_inference): Authorization is a single owner role over shared public profile and character content. No differentiated permissions beyond owner versus anonymous visitor are established by the source.
• A-8 (explicit): The storyboard image has not yet been supplied; its contents beyond the two character descriptions are not verifiable and are not invented.
• A-9 (explicit): No character-design portfolio, commission workflow, marketplace, or third-party artist management is in current scope.

12. Glossary

• Company Profile — the public presentation of the company's profile information on the Landing surface.
• Company Profile Owner — the accepted human persona who supplies the storyboard image and character direction and maintains the profile content and character concepts.
• Profile Visitor — the accepted human persona who anonymously reads the company profile and views the two characters.
• Storyboard Image — the image supplied by the user, authoritative as the source for the two character concepts and as the visual theme reference.
• Character 01 — the female character with dragon wings and weapons, derived from the storyboard.
• Character 02 — the male character suited to the story, derived from the storyboard.
• Brand Assets — the protected overview surface where the owner reviews the supplied storyboard image and the character concepts currently used by the company profile.
• Character Editor — the protected focused workspace where the owner supplies or updates the storyboard image and the two character concepts.
• Poster plate — a character presentation framed with a heavy 4px ink border on a flat colour field, with an oversized numeral in the margin and a caption block that slides up on hover.
• Colour-block wipe — the section-transition motion in which the incoming section's background rectangle sweeps across the viewport in 420ms, followed by a staggered word reveal of the headline.