System Requirements Document for omega-solar

1. Introduction

omega-solar is a public website dedicated entirely to the Crimean Technical College. The product intent is a single, self-contained informational destination that presents the college — its identity, its programmes, its facilities and its admission context — to the public, and that does so as the most visually beautiful, most minutely animated site achievable: motion is treated as a first-class material of the design, elaborated down to the smallest geometric detail, not decoration bolted onto a template.

The audience is the public: Site Visitors who want to understand what the college is, and Prospective Applicants (16–20 year olds and their parents) who use the presented information to evaluate the college and decide whether to pursue admission. A third, college-side audience — the College Content Publisher — is responsible for keeping the site's content about the college accurate and current, and therefore needs a protected workspace behind a returning-verification boundary.

The site is entirely about the Crimean Technical College. It is not a general education portal, not a multi-institution catalogue, and not a marketing funnel for unrelated services.

2. System Overview

omega-solar is a first-party, application-owned web product with custom UI. It delivers:

• An anonymous, visually animated public entry (Landing) that introduces the Crimean Technical College.
• Publicly browsable informational sections about the college (College Info) for visitors and prospective applicants.
• A returning-verification entry (Login) for the college-side publisher.
• A protected content workspace (Content) where the College Content Publisher maintains the college information shown publicly.

Actors:

• Site Visitor — a member of the public who opens the site to learn about the college.
• Prospective Applicant — a person considering study at the college who evaluates it and its programmes.
• College Content Publisher — the college-side person responsible for keeping the site's content accurate and current.

Non-persona actors: the application's own backend/content service (persists and serves published college content), and the identity/verification service that supports returning verification for the publisher.

Narrow exclusions: the site does not present content about institutions other than the Crimean Technical College; it does not provide an online admission application, payment, or enrolment workflow; it does not provide general-purpose account management beyond what the publisher's content maintenance requires.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The public experience — Landing and College Info — is delivered by the application itself as custom, first-party pages, anonymously reachable with no account required. The publisher's content maintenance is also first-party custom UI, but it is protected: the Content workspace is role-restricted and reachable only after returning verification.

Identity ownership. Identity is application-owned. The only accepted human who needs durable, privately owned, resumable state is the College Content Publisher, whose edits must remain bound to the correct person and persist across sessions. First-use identity establishment for the publisher is by invitation or provisioning from the college side, not self-service sign-up; returning access is by verification at Login. Visitors and prospective applicants never establish identity and never reach protected state.

Current vs. future boundary. Everything described in this document is current. No future-horizon capabilities are accepted by the source; nothing in this document should be read as committing to admission applications, student portals, staff directories, news feeds, or any other adjacent institutional system.

Content boundary. All content is about the Crimean Technical College. The site is a presentation of that one institution.

2c. Page Content and Component Coverage

Landing

• Information / state: The college's name as the dominant headline; the college's identity as a technical institution; three numbered micro-labels anchoring the page's document structure (01 Основание · 02 Специальности · 03 Поступление); a primary call to action leading into the college information.
• Primary actions: Enter the college information (primary CTA); navigate to the numbered sections; reach the publisher entry point.
• Supporting actions: Scroll-driven progression through the numbered document; toggle the grid overlay.
• Domain entities: College (name, identity), Section (number, label), Programme category (referenced by the numbered index).
• Component responsibilities:
  • Header rule bar — three-part: wordmark left, numbered section index centre with a red underline that slides between items, and a black "Войти / Кабинет" rectangle right.
  • Hero grid overlay — 12-column 1px rule overlay across the viewport, cascading in column by column at 40ms intervals, dissolving on scroll.
  • Hero headline block — enormous flush-left headline in the left seven columns, last word in red, on the paper ground.
  • Primary CTA rectangle — solid black rectangle with white uppercase label beneath the headline.
  • Numbered micro-label rule — 1px rule with three numbered micro-labels in muted grey.
  • Self-drawing elevation — full-height technical line drawing of the college building elevation in 1.5px black strokes over the paper ground, sitting on a solid red colour block that wipes in first.
  • Progress rule — one thin red horizontal line travelling the full viewport width as a scroll progress indicator.
  • Counting statistics band — tabular-numeral statistics (student count, specialities, years, workshops) counting up on scroll, aligned to ruled label/value rows.
• States:
  • Loading: grid rules cascade in as 40ms-staggered columns; red block wipes in from the left edge over 400ms; the elevation self-draws over 1.4s; headline words rise 24px with a linear reveal; numerals count up.
  • Empty: not applicable — the Landing always presents the college's identity content.
  • Success: the full poster composition is composed and legible; the numbered index is interactive; the CTA is reachable.
  • Error / recovery: if the elevation drawing asset fails, the red colour block and the headline composition remain intact and the drawing area holds its grid slot; if the statistics source is unavailable, the ruled label/value rows render with their labels and hold their alignment rather than collapsing.
  • Reduced motion: every draw and count is removed, leaving static final states — the grid overlay, the completed elevation, the final numerals, and the settled headline.

College Info

• Information / state: The college's informational sections — its identity and history, its specialities and programmes, and its admission context — presented as a numbered document with full-bleed 1px rules and section numbers in the left margin.
• Primary actions: Read the college's information sections; move between numbered sections; return to the Landing.
• Supporting actions: Follow the header section index; use the publisher entry point.
• Domain entities: College, Section (number, label, body content), Speciality / Programme, Admission context.
• Component responsibilities:
  • Header rule bar — same three-part bar as the Landing, with the red underline advancing to the active section.
  • Numbered section blocks — each section separated by a full-bleed 1px rule with its number set in the left margin (01 / 02 / 03 …).
  • Asymmetric content composition — content in columns 1–7, with columns 8–12 carrying a full-height drawing, a colour block, or a numbered index.
  • Programme matrix — colour-coded matrix of specialities using red as primary and yellow as secondary category colour.
  • Documentary imagery blocks — high-contrast black-and-white documentary photographs of workshops, lathes, welding rigs, circuit benches and students at drafting tables, cropped hard to the grid, sometimes with a red or yellow flat rectangle overlapping one corner.
  • Progress rule — the same thin red scroll progress rule.
• States:
  • Loading: section rules draw themselves left-to-right over 500ms with linear ease as they enter; colour bands wipe in as rectangles from a hard edge over 400ms.
  • Empty: if a section has no published body content, its numbered rule and heading still render so the document structure stays intact, with the body area holding its grid slot.
  • Success: all sections render as a legible numbered document; imagery is cropped to the grid; the index reflects the active section.
  • Error / recovery: if published content cannot be retrieved, the page renders the section structure with a clear unavailable state in the body area and offers a retry; the numbered document structure and navigation remain usable.
  • Reduced motion: rules and bands appear in their final state; no draws, wipes, or counts.

Login

• Information / state: The returning-verification entry for the College Content Publisher; the fact that access is by invitation or provisioning from the college side.
• Primary actions: Submit credentials for returning verification; proceed to the Content workspace on success.
• Supporting actions: Return to the public site.
• Domain entities: Publisher identity, verification credential.
• Component responsibilities:
  • Underline input fields — a single underline plus a label above, never a boxed field.
  • Submit rectangle — solid black rectangle with white uppercase label, snapping to red in 120ms on hover.
  • Error message region — inline, aligned to the grid, in the primary red.
• States:
  • Loading: submit control shows a determinate in-progress state; inputs are held.
  • Empty: fields render empty with labels above their underlines.
  • Success: verification succeeds and the publisher is taken to the Content workspace.
  • Error / recovery: invalid credentials produce an inline error in red, the fields remain filled, and the publisher may retry; a publisher who has not been invited or provisioned is told that access is by invitation from the college side and is offered a route back to the public site.
  • Reduced motion: no draw or wipe; states change instantly.

Content

• Information / state: The publisher's protected workspace listing the college information currently shown publicly, with each item's section, state, and last-updated metadata.
• Primary actions: Create a new content item; edit an existing item; publish or unpublish an item; save changes.
• Supporting actions: Preview an item as it will appear publicly; discard unsaved changes; sign out.
• Domain entities: Content item (section, heading, body, imagery reference, publication state, last-updated timestamp), Section, Publisher.
• Component responsibilities:
  • Content item list — ruled rows with tabular-numeral index; rows invert to black-on-white on hover with the index number flipping.
  • Editor panel — underline inputs and a body area aligned to the grid, with a label above each field.
  • Publication control — a solid rectangle toggling between publish and unpublish, snapping between black and red in 120ms.
  • Preview surface — renders the item as it will appear on the public page.
  • Status and metadata row — muted-grey metadata (state, last updated) in tabular numerals.
• States:
  • Loading: the item list renders its ruled row structure while content loads.
  • Empty: with no content items yet, the workspace shows the ruled list structure with an empty-state message and the create action available.
  • Success: a saved or published item appears in the list with updated state and timestamp; the public page reflects the published change.
  • Error / recovery: a failed save or publish shows an inline error in red, keeps the publisher's unsaved edits in the editor, and offers retry; a session that has expired returns the publisher to Login with the unsaved work preserved where possible.
  • Reduced motion: no draws or wipes; state changes are instant.

3. Functional Requirements

Each requirement is a distinct story point with provenance. explicit = stated by the user; required_inference = indispensable mechanics inferred to make an accepted journey executable.

FR-01 — Public presentation of the college As a Site Visitor, I should open the site and immediately see a visually animated presentation entirely about the Crimean Technical College, so that I understand what the college is.

• Provenance: explicit
• Trigger/input: the visitor opens the site.
• Observable result: the Landing renders the college's name as the dominant headline, the numbered document structure, and the self-drawing elevation of the college building.
• Access state: anonymous, no account required.
• Failure/recovery: if the elevation drawing asset fails, the composition holds its grid slot and the headline and CTA remain intact.
• Continuation: the visitor proceeds into the college information.

FR-02 — Browsing the college's information sections As a Site Visitor, I should browse the college's informational sections, so that I can learn about the college's identity, specialities and admission context.

• Provenance: explicit
• Trigger/input: the visitor selects a numbered section or scrolls through College Info.
• Observable result: the selected section renders as part of a numbered document with full-bleed 1px rules and its number in the left margin; the header index advances its red underline.
• Access state: anonymous, no account required.
• Failure/recovery: if published content cannot be retrieved, the section structure renders with a clear unavailable state and a retry.
• Continuation: the visitor continues to the next section or returns to the Landing.

FR-03 — Evaluating the college as a prospective applicant As a Prospective Applicant, I should review the college's presented information — its specialities and programmes and its admission context — so that I can decide whether to pursue admission.

• Provenance: explicit
• Trigger/input: the applicant reads the specialities/programmes section and the admission-context section.
• Observable result: the programme matrix and admission context are presented legibly, with the applicant able to compare specialities.
• Access state: anonymous, no account required.
• Failure/recovery: if a section's content is unavailable, the applicant sees the unavailable state and can retry or move to another section.
• Continuation: the applicant leaves with an understanding sufficient to decide whether to pursue admission.

FR-04 — Motion elaborated in the smallest details As a Site Visitor, I should experience animation worked out in the smallest details throughout the site, so that the site reads as the most beautiful, most minutely crafted presentation of the college.

• Provenance: explicit
• Trigger/input: page load, scroll, and hover interactions.
• Observable result: 1px rules draw left-to-right over 500ms with linear ease; colour bands wipe in as rectangles from a hard edge over 400ms; numbers count up with tabular figures without width shift; grid columns fade in as a 40ms-staggered cascade; the hero elevation self-draws via stroke-dashoffset over 1.4s linear; hover states resolve in 120ms; a thin red progress rule travels the full viewport width on scroll.
• Access state: anonymous, no account required.
• Failure/recovery: with prefers-reduced-motion, every draw and count is removed and static final states are shown.
• Continuation: motion continues to accompany the visitor's reading of the document.

FR-05 — Publisher first-use access by invitation or provisioning As a College Content Publisher, I should receive an invitation or provisioning from the college side before accessing content maintenance, so that my access is bound to the correct person.

• Provenance: required_inference
• Trigger/input: the college side invites or provisions the publisher.
• Observable result: the publisher holds a verified identity that the application recognizes at Login.
• Access state: anonymous entry at Login; protected state remains unavailable until identity is established.
• Failure/recovery: a person who has not been invited or provisioned is told at Login that access is by invitation from the college side and is offered a route back to the public site.
• Continuation: the publisher proceeds to returning verification.

FR-06 — Publisher returning verification As a College Content Publisher, I should complete returning verification before maintaining durable site content, so that my edits remain bound to me and persist across sessions.

• Provenance: required_inference
• Trigger/input: the publisher submits credentials at Login.
• Observable result: on success the publisher reaches the Content workspace; on failure an inline error in red is shown and the fields remain filled for retry.
• Access state: Login is anonymously reachable; Content is role-restricted and reachable only after verification.
• Failure/recovery: invalid credentials produce an inline error and allow retry; an expired session returns the publisher to Login.
• Continuation: the publisher maintains content in the Content workspace.

FR-07 — Maintaining the college's public content As a College Content Publisher, I should create, edit, publish and unpublish the college information shown publicly, so that the site's content about the Crimean Technical College stays accurate and current.

• Provenance: required_inference
• Trigger/input: the publisher selects an existing item or creates a new one in the Content workspace.
• Observable result: the item is saved with an updated state and last-updated timestamp in the ruled list, and the public page reflects the published change.
• Access state: role-restricted; requires completed returning verification.
• Failure/recovery: a failed save or publish shows an inline error in red, keeps unsaved edits in the editor, and offers retry.
• Continuation: the publisher continues editing or returns to the list.

FR-08 — Previewing content as it will appear publicly As a College Content Publisher, I should preview an item as it will appear publicly before publishing, so that I can confirm the college information is correct.

• Provenance: required_inference
• Trigger/input: the publisher requests a preview of the item being edited.
• Observable result: the preview surface renders the item as it will appear on the public page.
• Access state: role-restricted; requires completed returning verification.
• Failure/recovery: if the preview cannot render, the publisher is told so inline and the editor retains the unsaved work.
• Continuation: the publisher publishes, continues editing, or discards changes.

FR-09 — Reaching the publisher entry point from the public site As a College Content Publisher, I should reach the publisher entry point from the public site, so that I can begin returning verification.

• Provenance: required_inference
• Trigger/input: the publisher selects the "Войти / Кабинет" rectangle in the header rule bar.
• Observable result: the Login page is presented.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the publisher completes returning verification.

4. User Personas

Site Visitor

Product context. A member of the public who opens omega-solar to learn about the Crimean Technical College. They arrive without an account and without a commitment to the institution; they are there to form an impression.

Primary goal. To understand what the Crimean Technical College is and what it offers, from a presentation that is visually compelling and trustworthy.

Distinct accepted responsibilities. The visitor reads the animated presentation of the college and its information sections. They are the audience for the site's visual craft — the motion, the grid, the self-drawing elevation — and they are the reader of the numbered document. They do not evaluate programmes against a personal decision, and they do not maintain content.

Relevant inputs or decisions. Which numbered section to read next; whether to continue scrolling or leave.

Interactions with other accepted participants. None directly. The visitor consumes content that the College Content Publisher maintains; the visitor never interacts with the publisher.

Observable success. The visitor leaves with an understanding of what the college is and offers, having experienced the site as a coherent, minutely animated presentation.

Prospective Applicant

Product context. A person considering study at the Crimean Technical College — typically 16–20 years old, or a parent acting on their behalf. They arrive anonymously, with a real decision in front of them.

Primary goal. To evaluate the college and its programmes well enough to decide whether to pursue admission.

Distinct accepted responsibilities. The applicant reads the specialities and programmes and the admission context specifically as decision inputs, comparing what the college offers against their own intentions. This is different from the visitor's general orientation: the applicant is looking for the fit between the college's programmes and their own path.

Relevant inputs or decisions. Which specialities exist; what the admission context is; whether the college is the right place to pursue.

Interactions with other accepted participants. None directly. The applicant relies on content the College Content Publisher maintains.

Observable success. The applicant reaches a decision about whether to pursue admission, based on the presented college information.

College Content Publisher

Product context. The college-side person responsible for keeping the site's content about the Crimean Technical College accurate and current. They are not a member of the public audience; they are the institution's own maintainer of the public record.

Primary goal. To keep the college information shown publicly accurate and current.

Distinct accepted responsibilities. The publisher creates, edits, previews, publishes and unpublishes the college's informational content. They are the only accepted participant with durable, privately owned state, and the only one who reaches protected state. Their work directly determines what the Site Visitor and Prospective Applicant see.

Relevant inputs or decisions. Which item to edit; whether a draft is correct enough to publish; whether to unpublish an item that is no longer accurate.

Interactions with other accepted participants. The publisher's published content is what the Site Visitor and Prospective Applicant read; the publisher never interacts with them directly, but their work is the substance of both other personas' experience.

Observable success. The public pages reflect the publisher's published changes, with accurate state and last-updated metadata.

5. Core User Flows

Flow A — Site Visitor learns about the college

1. The Site Visitor opens omega-solar and lands on Landing anonymously, with no account.
2. On load, the red colour block wipes in from the left edge over 400ms, the grid rules cascade in as 40ms-staggered columns, the technical elevation of the college building self-draws over 1.4s, the headline's words rise 24px with a linear reveal, and the statistics numerals count up in tabular figures.
3. The visitor reads the headline — the college's name, with the last word in red — and the three numbered micro-labels (01 Основание · 02 Специальности · 03 Поступление).
4. The visitor selects the primary CTA (a solid black rectangle with a white uppercase label) or scrolls; the grid overlay scales up and dissolves, and the thin red progress rule begins travelling the viewport width.
5. The visitor arrives at College Info, where section rules draw themselves left-to-right over 500ms as they enter and colour bands wipe in from a hard edge over 400ms.
6. The visitor reads the numbered sections, with the header's red underline advancing to the active section as they scroll.
7. Failure/recovery: if a section's published content cannot be retrieved, the section's numbered rule and heading still render, the body area shows a clear unavailable state with a retry, and the visitor can continue to other sections.
8. Continuation: the visitor continues through the numbered document or returns to the Landing. With prefers-reduced-motion, every draw and count is removed and the visitor sees the static final states throughout.

Flow B — Prospective Applicant evaluates the college

1. The Prospective Applicant opens omega-solar and lands on Landing anonymously.
2. The applicant moves past the hero into College Info, using the numbered section index in the header.
3. The applicant reads the specialities and programmes section, comparing the colour-coded programme matrix — red as primary category, yellow as secondary.
4. The applicant reads the admission-context section, treating it as the input to their decision.
5. Failure/recovery: if a section is unavailable, the applicant sees the unavailable state, can retry, and can move to another section without losing the document structure.
6. Continuation: the applicant leaves with an understanding sufficient to decide whether to pursue admission. No application, payment, or enrolment step exists on the site.

Flow C — College Content Publisher gains access

1. The college side invites or provisions the College Content Publisher, establishing an application-owned identity bound to that person.
2. The publisher opens omega-solar and selects the black "Войти / Кабинет" rectangle in the header rule bar.
3. The publisher arrives at Login, which is anonymously reachable; protected state remains unavailable.
4. The publisher enters credentials into underline fields with labels above them and submits via the solid black rectangle, which snaps to red in 120ms on hover.
5. Success: verification succeeds and the publisher is taken to the Content workspace.
6. Failure/recovery: invalid credentials produce an inline error in red, the fields remain filled, and the publisher may retry. A person who has not been invited or provisioned is told that access is by invitation from the college side and is offered a route back to the public site.
7. Continuation: the publisher maintains content, or returns to the public site.

Flow D — College Content Publisher maintains the college's public content

1. The College Content Publisher, having completed returning verification, is in the Content workspace, which lists the college information currently shown publicly as ruled rows with tabular-numeral indices and muted-grey metadata (state, last updated).
2. The publisher selects an existing item — the row inverts to black-on-white on hover with the index number flipping — or creates a new item.
3. The publisher edits the item in the editor panel, using underline inputs with labels above them and a body area aligned to the grid.
4. The publisher requests a preview; the preview surface renders the item as it will appear on the public page.
5. Failure/recovery: if the preview cannot render, the publisher is told so inline and the editor retains the unsaved work.
6. The publisher publishes the item using the publication control, which snaps between black and red in 120ms.
7. Observable result: the item appears in the ruled list with its updated state and last-updated timestamp, and the public page reflects the published change — the Site Visitor and Prospective Applicant now read the updated college information.
8. Failure/recovery: a failed save or publish shows an inline error in red, keeps the publisher's unsaved edits in the editor, and offers retry. If the session has expired, the publisher is returned to Login with unsaved work preserved where possible.
9. Continuation: the publisher continues editing, unpublishes an item that is no longer accurate, or signs out.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. Muse: Josef Müller-Brockmann. Headline: Grid-locked Swiss geometry for a technical college — precision you can see moving.

Colour tokens (light mode).

Proportion: ~70% paper, ~20% black type/rules, ~7% red, ~3% yellow. No gradients, no shadows, no glass — depth comes from rules, scale and motion only.

Typography. Single family, two voices: Archivo for both headings and body.

• Headings: Archivo 700–800, tracking −0.02em to −0.04em, flush-left ragged-right, never centred, never letterspaced-apart. Sentence case for Russian-language headlines; uppercase reserved for micro-labels at 11–12px / 0.14em tracking / 600 weight.
• Body: Archivo 400–500, line-height 1.6, measure 62–68 characters.
• Numerals: tabular everywhere, so counting animations and rule-aligned data never jitter.

Type scale — 1.5 modular on a 4px baseline: 12 / 16 / 20 / 24 / 36 / 54 / 80 / 120 / 168.

• Display headline: clamp(40px, 9.5vw, 168px)
• Section headline: clamp(28px, 5vw, 80px)
• Sub-head: clamp(20px, 2.6vw, 36px)
• Lead paragraph: clamp(18px, 1.6vw, 24px)
• Body: 16–18px
• Micro-label: 11–12px uppercase, 0.14em tracking

Shape language. Hard edges only — 0px radius on every surface, button, input and image. Structure is expressed as 1px black rules (never grey, never 2px): horizontal rules spanning the full grid width, vertical column rules running the height of a section, and a persistent hairline grid overlay in the hero. Colour appears as flat rectangles and bands, never as rounded cards. Buttons are rectangles of solid black or solid red with white uppercase labels; inputs are a single underline plus a label above, never a boxed field. Icons are 1.5px-stroke geometric pictograms on a 24px grid — circles, arcs, arrows, brackets.

Layout. A visible 12-column modular grid with 24px gutters at 1280px, collapsing to 6 columns at 768px and 2 columns at 375px, with the grid overlay itself toggleable and shown by default in the hero. Asymmetric Swiss poster composition: content occupies columns 1–7 while columns 8–12 carry a full-height drawing, a colour block or a numbered index — never a centred stack. Sections are separated by full-bleed 1px rules with the section number set in the left margin (01 / 02 / 03 …). The header is a three-part rule bar: wordmark left, section index centre (numbered, with a red underline that slides between items), and a black "Войти / Кабинет" rectangle right. Every element aligns to the same 4px baseline grid.

Imagery. Diagrammatic and geometric first: a hero built from a self-drawing line schematic of a college building elevation, engineering section drawings, grid charts, arc-and-circle constructions, and colour-coded programme matrices. Photography appears only as information — high-contrast black-and-white documentary shots of workshops, lathes, welding rigs, circuit benches and students at drafting tables — always cropped hard to the grid, sometimes with a red or yellow flat rectangle overlapping one corner. No stock smiling-students photography, no illustration for its own sake, no 3D renders, no gradient meshes.

Readable text and controls. Headlines, wordmarks, labels, numbers, 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. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut as the direction asks, as long as they cover no readable text or control. Moving and scrollable content may cross the viewport or container edge by design, judged by whether it actually moves and whether every item becomes fully readable as it passes. With prefers-reduced-motion it stops and shows whole items, wrapping into rows or sitting in a horizontally scrollable row.

7. Signature Design Concept

The Drawing Board. The public entry is composed as a Swiss technical poster that draws itself into existence, using only accepted content and controls.

The first frame is the paper ground #F4F1EA with a 12-column grid overlay visible as 1px black rules across the whole viewport. In the left seven columns sits an enormous flush-left headline — the college's name in Archivo 800, tight tracking, sentence case, with the last word set in red — resting directly on the paper. Directly beneath it, a solid black rectangle holds the primary CTA in white uppercase. Beneath that, a 1px rule carries three numbered micro-labels in muted grey: 01 Основание · 02 Специальности · 03 Поступление.

The right five columns are occupied by a full-height self-drawing technical line drawing of the college building elevation in black 1.5px strokes over the paper ground, with a solid red rectangle sitting behind it as a colour block.

On load, the sequence is the concept: the red block wipes in from the left edge over 400ms; the grid rules cascade in as 40ms-staggered columns; the elevation self-draws over 1.4s with linear easing; the headline's words rise 24px with a linear reveal; the statistics numerals count up in tabular figures. As the visitor scrolls, the grid overlay scales up and dissolves, section rules draw as they enter, the numbered index in the header advances its red underline, and one thin red progress rule travels the full viewport width.

At 375px the drawing moves below the headline as a full-width band, the headline wraps to three lines at 40px, and the grid collapses to two visible columns with the CTA rectangle full width. With prefers-reduced-motion, every draw and count is removed and the poster is shown in its completed static state.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the self-drawing technical elevation of the college building, in 1.5px black strokes on the paper ground, sitting on a solid red colour block — the drawing is the hero image, not a photograph.
• Input → transformation → outcome thesis: on load, the red block wipes in from a hard edge (400ms) and the grid rules cascade in as 40ms-staggered columns; the elevation then self-draws via stroke-dashoffset over 1.4s with linear easing while the headline's words rise 24px with a linear reveal and the statistics numerals count up in tabular figures. The outcome is a completed Swiss poster in which the college's identity, its numbered document structure, and its primary CTA are all legible and interactive.
• Motion vocabulary: geometric and mechanical, never bouncy. 1px rules draw left-to-right over 500ms with linear ease; colour bands wipe in as rectangles from a hard edge over 400ms; numbers count up with tabular figures so nothing shifts; grid columns fade in as a staggered cascade of 40ms steps; hover states are instant or 120ms — a red rectangle snapping to black, a rule thickening to 2px, an index number flipping. Scroll drives a scroll-linked sequence: the hero grid overlay scales up and dissolves, section rules draw as they enter, and the numbered index in the header advances its red underline. One continuous element: a thin red horizontal line that travels the full viewport width as a progress rule. All of it is transform/opacity/stroke-dashoffset only.
• Composed first frame: paper ground #F4F1EA; 12-column 1px grid overlay across the viewport; enormous flush-left headline in the left seven columns with the last word in red; solid black CTA rectangle beneath it; 1px rule with three numbered micro-labels in muted grey; full-height elevation drawing in the right five columns over a solid red colour block. No centred headline, no subtext-under-headline pattern, no button in the middle, no gradient, no glow, no rounded card.
• Reduced-motion state: prefers-reduced-motion removes every draw and count, leaving static final states — the grid overlay, the completed elevation, the final numerals, and the settled headline.

9. Non-Functional Requirements

NFR-01 — Visual craft as a hard requirement. The site must be visually the most beautiful, with animation elaborated in the smallest details. Provenance: explicit. Rationale: this is the user's stated hard constraint and the product's defining quality bar; motion is a first-class material, not decoration.

NFR-02 — Content scope. The site must be entirely about the Crimean Technical College. Provenance: explicit. Rationale: explicit hard constraint; no content about other institutions, and no adjacent institutional systems.

NFR-03 — Motion performance. All animation must be implemented with transform, opacity and stroke-dashoffset only, so that the minutely detailed motion remains smooth. Provenance: required_inference. Rationale: the direction's motion vocabulary requires it, and the explicit beauty constraint depends on it.

NFR-04 — Reduced-motion accessibility. prefers-reduced-motion must remove every draw and count, leaving static final states. Provenance: required_inference. Rationale: indispensable for the accepted motion-heavy experience to remain usable.

NFR-05 — Readable text and controls at every viewport. Headlines, wordmarks, labels, numbers, cards' text and controls must 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. Provenance: explicit (creative direction). Rationale: the direction's own readability rule, which takes precedence over any cropping gesture.

NFR-06 — Grid and baseline discipline. Every element must align to the same 4px baseline grid, with the 12/6/2-column responsive grid and 24px gutters at 1280px. Provenance: explicit (creative direction). Rationale: the design system's structural premise.

NFR-07 — Content durability and correctness. Published content must persist and remain bound to the correct publisher, with state and last-updated metadata shown truthfully. Provenance: required_inference. Rationale: the publisher's accepted responsibility is to keep the public content accurate and current.

NFR-08 — Protected content boundary. The Content workspace must be reachable only after completed returning verification; protected state must remain unavailable before identity is established. Provenance: required_inference. Rationale: the publisher's edits must remain bound to the correct person.

10. Tech Stack

• Frontend: React, with custom UI built to the creative direction (no component library that imposes rounded corners, shadows, or a blue-on-white default look).
• Backend: Python / FastAPI, serving the college content and the publisher's content-maintenance operations.
• Storage: a persistent store for college content items, their publication state, and last-updated metadata, plus the publisher identity records needed for returning verification.
• Identity: application-owned identity with invitation/provisioning-based first-use establishment and returning verification at Login.
• Packaging and deployment: Docker / 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-01 — The site's content is entirely about the Crimean Technical College; no other institution's content is in scope. (Explicit constraint.)
• A-02 — The site is the most beautiful, most minutely animated presentation achievable within the stated creative direction; motion is a first-class material. (Explicit constraint.)
• A-03 — The public pages (Landing, College Info) are anonymously reachable with no account. (From the page contract's access requirements.)
• A-04 — The Content workspace is role-restricted and reachable only after completed returning verification. (From the page contract's access requirement.)
• A-05 — Publisher first-use access is by invitation or provisioning from the college side, not self-service sign-up. (Required inference.)
• A-06 — No online admission application, payment, enrolment, student portal, staff directory, or news feed is in scope; the site presents the college and its information. (Narrow exclusion consistent with the explicit content-scope constraint.)
• A-07 — The creative direction is authoritative for palette, typography, shape, layout, imagery and motion; the generic indigo/blue-on-white SaaS template is forbidden. (Explicit design constraint.)
• A-08 — [Default — not specified by user] Docker / docker-compose is the deployment packaging; Kubernetes is omitted because no accepted requirement calls for it.
• A-09 — [Default — not specified by user] The persistent store is a relational database; the specific engine is not specified by the user.

12. Glossary

• omega-solar — The project name for this website, dedicated entirely to the Crimean Technical College.
• Crimean Technical College — The single institution this site is about; a vocational and engineering education institution.
• Site Visitor — A member of the public who opens the site to learn about the college.
• Prospective Applicant — A person considering study at the college who uses the site to evaluate it and decide whether to pursue admission.
• College Content Publisher — The college-side person responsible for keeping the site's content about the college accurate and current.
• Landing — The anonymous public entry surface presenting the college's identity.
• College Info — The publicly browsable informational sections about the college.
• Login — The anonymously reachable returning-verification entry for the College Content Publisher.
• Content — The role-restricted workspace where the College Content Publisher maintains the college information shown publicly.
• Grid overlay — The visible 12-column 1px rule overlay in the hero that cascades in column by column and dissolves on scroll.
• Self-drawing elevation — The 1.5px black technical line drawing of the college building elevation that animates via stroke-dashoffset.
• Progress rule — The thin red horizontal line that travels the full viewport width as a scroll progress indicator.
• Tabular numerals — Numerals of equal width, used everywhere so counting animations and rule-aligned data never jitter.
• Returning verification — The process by which the College Content Publisher re-establishes their identity at Login to reach the Content workspace.
• Invitation or provisioning — The college-side act that establishes the College Content Publisher's application-owned identity for first use.