System Requirements Document for gate-2027-hari

1. Introduction

gate-2027-hari is a GATE exam preparation website covering two papers: GATE Computer Science & Engineering (CSE) and GATE Data Science & Artificial Intelligence (DA). The product intent is to give an aspirant preparing for either or both papers a single place to study exam-relevant material, understand the shape of each paper (subjects, weightage, syllabus, previous-year questions), and monitor preparation readiness ahead of the exam.

The audience is GATE aspirants — engineering students and working professionals preparing for GATE 2027 — who need one website that serves both the CSE and DA papers rather than two disconnected resources. The site is publicly readable: no account is required to reach the Landing page, the GATE CSE page, or the GATE DA page.

The product is deliberately narrow. It is a preparation and study surface for the two named papers. It is not a coaching platform, not a test-series engine, not a doubt-solving marketplace, and not an admissions or counselling portal.

2. System Overview

The website is a first-party, custom-UI web application with three pages:

Actors. The only active human actor is the GATE CSE & DA Aspirant. There are no administrative, instructor, or reviewer personas in the current scope. No system, provider, or external service is an accepted participant in the current scope; the site is self-contained first-party content.

Accepted behavior. The aspirant arrives at the Landing page, understands that both papers are covered, and enters the paper they are preparing for. On a paper page the aspirant reads the paper's syllabus and subject structure, sees subject weightage, works through subject-wise preparation content, and can check previous-year questions and revision material. The aspirant can move between the two paper pages at any time, because a candidate may be preparing for both.

Ownership. All three pages are owned by the application. There is no provider-owned surface, no external destination, and no headless delivery in the current scope.

Exclusions. No account creation, login, or profile management is required or offered. No payment, subscription, or enrollment flow exists. No live classes, video hosting, or instructor interaction exists. No third-party analytics, advertising, or social feed is part of the product. No mobile native application is in scope.

2a. Product Interpretation and Delivery Boundary

The user asked for a website for GATE CSE + DA exam preparation. That request is the whole current product boundary. Everything the site does is reachable without signing in: the aspirant opens the site, sees that both papers are covered, and goes straight into the paper they are studying.

The delivery boundary is therefore simple and public. There is no protected area, no identity establishment step, and no session continuity requirement, because no accepted behavior in the source creates a durable, private, per-aspirant record that must be bound to a specific person. Preparation progress shown on a paper page is presentation of the paper's own structure (subject weightage, syllabus coverage, revision checklists) rather than a stored personal account record.

Anything beyond reading and navigating preparation content for the two named papers — accounts, payments, live teaching, doubt forums, test series with scored attempts, mobile apps — is outside the current delivery boundary and is not implemented.

2b. Source Content Inventory

Not applicable. No reference directive in this project declares content_source authority, so no source content inventory is produced.

2c. Page Content and Component Coverage

Landing

Information and state. The Landing page is the anonymous public entry. It states, in the aspirant's own terms, that this website is a preparation resource for GATE 2027 covering two papers: GATE CSE and GATE DA. It presents the two papers as the two things the aspirant can enter, and it presents the shared preparation material (syllabus and previous-year questions) as available for both.

Primary actions.

• Enter the GATE CSE paper page.
• Enter the GATE DA paper page.
• Reach the shared Syllabus + PYQ material.

Supporting actions.

• Read the exam-date ticker.
• Read the short statement of what the site covers.

Domain entities. Paper (CSE, DA), exam date, syllabus reference, previous-year question reference.

Component responsibilities.

• Hero headline block — stacked paper identity: "GATE 2027", "CSE", "DA", each line flush-left and tight to the one above; CSE carries the CSE paper identity colour and DA carries the DA paper identity colour.
• Paper entry stack — three bordered rectangles: CSE entry, DA entry, and Syllabus + PYQ.
• Exam-date marquee — a single line carrying exam dates and short motivational lines, moving continuously and stopping into static wrapped rows when reduced motion is requested.
• Column grid rule — a faint 12-column hairline grid visible across the page.
• Diagonal paper band — a full-bleed diagonal band carrying a paper name, cutting across a section transition.

States.

• Loading — the page shell, grid rule, and hero headline block render immediately; the exam-date marquee populates when its content is available.
• Empty — if no exam dates are available, the marquee region is omitted entirely rather than showing an empty moving strip; the hero and paper entry stack are unaffected.
• Success — the aspirant sees both papers named and can enter either.
• Error — if the page's content fails to load, a plain message states that the page could not be loaded and offers a retry that reloads the Landing page.
• Recovery — retry reloads the page; the aspirant can also navigate directly to a paper page by URL.

GATE CSE

Information and state. The GATE CSE page presents GATE Computer Science exam preparation content. It opens with the paper name at display scale on a full-bleed band in the CSE paper identity colour. It then presents the paper's subject structure with each subject's exam weightage, the syllabus for each subject, and the previous-year question and revision material for the paper.

Primary actions.

• Read the CSE syllabus, subject by subject.
• Read a subject's weightage in the paper.
• Work through a subject's preparation content.
• Open previous-year questions for the paper.
• Move to the GATE DA page.

Supporting actions.

• Jump to a subject from the subject index.
• Read the revision checklist.
• Read cutoff trend information for the paper.

Domain entities. Paper (CSE), subject, subject weightage (marks), syllabus topic, previous-year question, revision checklist item, cutoff trend point.

Component responsibilities.

• Paper band — full-bleed band carrying "GATE CSE" at display scale in the CSE paper identity colour.
• Sticky left rail — subject index, weightage bar, and progress ring; stays in place while the right column scrolls; becomes a horizontally scrollable chip row at the narrowest viewport.
• Subject cards — one card per subject, each sized by that subject's exam weightage so a heavier subject is visibly larger than a lighter one; each card carries the subject name, its weightage, and its syllabus topics.
• Weightage bar chart — flat cream and accent bars on the black ground showing subject weightage across the paper.
• Cutoff trend line — flat-stroke line chart of cutoff trend for the paper.
• Previous-year question list — the paper's previous-year questions.
• Revision checklist — the paper's revision items with a completed state.

States.

• Loading — the paper band and sticky rail render immediately; subject cards and charts populate as their content arrives.
• Empty — if a subject has no syllabus topics listed, its card shows the subject name and weightage with an explicit "no topics listed" note rather than an empty card body; if no previous-year questions are available, the previous-year question list is omitted with a short note.
• Success — the aspirant can read the syllabus, see weightage, and open previous-year questions.
• Error — if the paper content fails to load, the paper band and a plain error message render, with a retry that reloads the GATE CSE page.
• Recovery — retry reloads the page; the aspirant can navigate to the GATE DA page or back to Landing.

GATE DA

Information and state. The GATE DA page presents GATE Data Science & Artificial Intelligence exam preparation content. It opens with the paper name at display scale on a full-bleed band in the DA paper identity colour. It then presents the paper's subject structure with each subject's exam weightage, the syllabus for each subject, and the previous-year question and revision material for the paper.

Primary actions.

• Read the DA syllabus, subject by subject.
• Read a subject's weightage in the paper.
• Work through a subject's preparation content.
• Open previous-year questions for the paper.
• Move to the GATE CSE page.

Supporting actions.

• Jump to a subject from the subject index.
• Read the revision checklist.
• Read cutoff trend information for the paper.

Domain entities. Paper (DA), subject, subject weightage (marks), syllabus topic, previous-year question, revision checklist item, cutoff trend point.

Component responsibilities.

• Paper band — full-bleed band carrying "GATE DA" at display scale in the DA paper identity colour.
• Sticky left rail — subject index, weightage bar, and progress ring; stays in place while the right column scrolls; becomes a horizontally scrollable chip row at the narrowest viewport.
• Subject cards — one card per subject, each sized by that subject's exam weightage so a heavier subject is visibly larger than a lighter one; each card carries the subject name, its weightage, and its syllabus topics.
• Weightage bar chart — flat cream and accent bars on the black ground showing subject weightage across the paper.
• Cutoff trend line — flat-stroke line chart of cutoff trend for the paper.
• Previous-year question list — the paper's previous-year questions.
• Revision checklist — the paper's revision items with a completed state.

States.

• Loading — the paper band and sticky rail render immediately; subject cards and charts populate as their content arrives.
• Empty — if a subject has no syllabus topics listed, its card shows the subject name and weightage with an explicit "no topics listed" note rather than an empty card body; if no previous-year questions are available, the previous-year question list is omitted with a short note.
• Success — the aspirant can read the syllabus, see weightage, and open previous-year questions.
• Error — if the paper content fails to load, the paper band and a plain error message render, with a retry that reloads the GATE DA page.
• Recovery — retry reloads the page; the aspirant can navigate to the GATE CSE page or back to Landing.

3. Functional Requirements

FR-1 — Public entry to the preparation website

As a GATE CSE & DA Aspirant I should be able to open the website and immediately understand that it covers both the GATE CSE and GATE DA papers, so that I know this is the right place for my preparation.

• Provenance: explicit (source: "Create gate cse +da exam preparation website"; Planning Scope requirement "Create a website for GATE CSE + DA exam preparation.")
• Owner: Landing (first-party page)
• Access state: public, no account required
• Trigger/input: the aspirant opens the site root.
• Observable result: the Landing page renders with "GATE 2027", "CSE", and "DA" as the stacked headline, and a paper entry stack offering CSE, DA, and Syllabus + PYQ.
• Failure/recovery: if the page content fails to load, a plain error message and a retry that reloads the Landing page are shown.
• Continuation: the aspirant enters the paper they are preparing for.

FR-2 — Enter the GATE CSE paper

As a GATE CSE & DA Aspirant I should be able to enter the GATE CSE paper from the Landing page, so that I can study Computer Science preparation content.

• Provenance: explicit (source: "Create gate cse +da exam preparation website"; Planning Scope requirement "The site covers both the GATE Computer Science (CSE) and Data Science & Artificial Intelligence (DA) papers.")
• Owner: Landing → GATE CSE (first-party pages)
• Access state: public, no account required
• Trigger/input: the aspirant activates the CSE entry in the paper entry stack.
• Observable result: the GATE CSE page renders with its full-bleed paper band carrying "GATE CSE" at display scale in the CSE paper identity colour.
• Failure/recovery: if the GATE CSE page fails to load, the paper band and a plain error message render with a retry that reloads the page; the aspirant can return to Landing.
• Continuation: the aspirant reads the CSE syllabus and subject structure.

FR-3 — Enter the GATE DA paper

As a GATE CSE & DA Aspirant I should be able to enter the GATE DA paper from the Landing page, so that I can study Data Science & Artificial Intelligence preparation content.

• Provenance: explicit (source: "Create gate cse +da exam preparation website"; Planning Scope requirement "The site covers both the GATE Computer Science (CSE) and Data Science & Artificial Intelligence (DA) papers.")
• Owner: Landing → GATE DA (first-party pages)
• Access state: public, no account required
• Trigger/input: the aspirant activates the DA entry in the paper entry stack.
• Observable result: the GATE DA page renders with its full-bleed paper band carrying "GATE DA" at display scale in the DA paper identity colour.
• Failure/recovery: if the GATE DA page fails to load, the paper band and a plain error message render with a retry that reloads the page; the aspirant can return to Landing.
• Continuation: the aspirant reads the DA syllabus and subject structure.

FR-4 — Read the paper's subject structure and weightage

As a GATE CSE & DA Aspirant I should be able to see the subjects of the paper I am studying together with each subject's exam weightage, so that I can judge where the marks are and plan my study time.

• Provenance: required_inference (indispensable mechanics for the accepted outcome of preparing for a named GATE paper; the paper's subject structure and weightage are what makes a paper page a preparation surface rather than a title)
• Owner: GATE CSE and GATE DA (first-party pages)
• Access state: public, no account required
• Trigger/input: the aspirant opens a paper page.
• Observable result: the sticky left rail shows the subject index and a weightage bar, and the right column shows one subject card per subject, each card sized by that subject's exam weightage so a heavier subject is visibly larger than a lighter one.
• Failure/recovery: if the subject structure fails to load, the paper band and a plain error message render with a retry that reloads the paper page.
• Continuation: the aspirant opens a subject to read its syllabus.

FR-5 — Read a subject's syllabus

As a GATE CSE & DA Aspirant I should be able to read the syllabus topics of a subject in the paper I am studying, so that I know exactly what to cover.

• Provenance: required_inference (indispensable mechanics for the accepted outcome of preparing for a named GATE paper)
• Owner: GATE CSE and GATE DA (first-party pages)
• Access state: public, no account required
• Trigger/input: the aspirant selects a subject from the subject index or a subject card.
• Observable result: the subject's syllabus topics are shown on the subject card in the wide right column.
• Failure/recovery: if a subject has no syllabus topics listed, the card shows the subject name and weightage with an explicit "no topics listed" note rather than an empty card body.
• Continuation: the aspirant moves to the next subject or to previous-year questions.

FR-6 — Work through previous-year questions

As a GATE CSE & DA Aspirant I should be able to open the previous-year questions for the paper I am studying, so that I can practise against real exam questions.

• Provenance: required_inference (indispensable mechanics for the accepted outcome of preparing for a named GATE paper; the Landing page's "Syllabus + PYQ" entry is the accepted surface for this material)
• Owner: GATE CSE and GATE DA (first-party pages)
• Access state: public, no account required
• Trigger/input: the aspirant activates the previous-year question entry on a paper page or the Syllabus + PYQ entry on Landing.
• Observable result: the paper's previous-year questions are listed.
• Failure/recovery: if no previous-year questions are available for the paper, the list is omitted with a short note instead of an empty list.
• Continuation: the aspirant returns to the subject they were studying.

FR-7 — Track preparation readiness with a revision checklist

As a GATE CSE & DA Aspirant I should be able to see a revision checklist for the paper I am studying and mark items as completed, so that I can monitor my readiness ahead of the exam.

• Provenance: required_inference (indispensable mechanics for the accepted outcome "monitoring readiness ahead of the exam" stated in the accepted persona rationale; the progress ring and completed state are the observable form of that readiness)
• Owner: GATE CSE and GATE DA (first-party pages)
• Access state: public, no account required
• Trigger/input: the aspirant marks a revision checklist item as completed.
• Observable result: the item shows the completed state in the progress accent colour, and the progress ring in the sticky left rail reflects the completed proportion.
• Failure/recovery: if the checklist fails to load, the paper band and a plain error message render with a retry that reloads the paper page; the rest of the paper page remains readable.
• Continuation: the aspirant continues through the remaining revision items.

FR-8 — Move between the two papers

As a GATE CSE & DA Aspirant I should be able to move from one paper page to the other, so that I can prepare for both GATE CSE and DA from one website.

• Provenance: explicit (source: "Create gate cse +da exam preparation website"; Planning Scope requirement "The site covers both the GATE Computer Science (CSE) and Data Science & Artificial Intelligence (DA) papers.")
• Owner: GATE CSE and GATE DA (first-party pages)
• Access state: public, no account required
• Trigger/input: the aspirant activates the link to the other paper from a paper page.
• Observable result: the other paper page renders with its own paper band and paper identity colour.
• Failure/recovery: if the other paper page fails to load, the paper band and a plain error message render with a retry that reloads that page.
• Continuation: the aspirant continues studying in the paper they moved to.

FR-9 — Read exam dates and revision reminders

As a GATE CSE & DA Aspirant I should be able to see exam dates and short revision reminders while I study, so that I stay oriented to the exam timeline.

• Provenance: required_inference (indispensable mechanics for the accepted outcome of preparing ahead of a dated exam; the persistent ticker is the accepted surface for this material)
• Owner: Landing, GATE CSE, GATE DA (first-party pages)
• Access state: public, no account required
• Trigger/input: the aspirant opens any page.
• Observable result: a single marquee line carrying exam dates and short motivational lines runs across the top of the page.
• Failure/recovery: if no exam dates are available, the marquee region is omitted entirely rather than showing an empty moving strip.
• Continuation: the aspirant continues reading the page.

FR-10 — Read cutoff trend information

As a GATE CSE & DA Aspirant I should be able to see the cutoff trend for the paper I am studying, so that I can calibrate how much I need to score.

• Provenance: required_inference (indispensable mechanics for the accepted outcome of preparing for a competitive exam with a qualifying cutoff; the cutoff trend line is the accepted surface for this material)
• Owner: GATE CSE and GATE DA (first-party pages)
• Access state: public, no account required
• Trigger/input: the aspirant opens a paper page.
• Observable result: a flat-stroke cutoff trend line is drawn in cream and accent on the black ground.
• Failure/recovery: if cutoff trend data is unavailable, the chart region is omitted with a short note rather than showing an empty axis frame.
• Continuation: the aspirant returns to the subject they were studying.

4. User Personas

GATE CSE & DA Aspirant

Product context. The aspirant is preparing for GATE 2027 and is working across the CSE and/or DA papers. They are studying alongside coursework or a job, so their study time is fragmented and they return to the site repeatedly over a long preparation window. They are not looking for a soft, encouraging experience; they want the exam taken as seriously as they are taking it, and they want the shape of the paper — subjects, weightage, syllabus, previous-year questions, cutoffs — laid out plainly.

Primary goal. Prepare for the GATE CSE and DA papers from one website, with the paper's structure and study material in front of them and a way to see how far their revision has come.

Distinct accepted responsibilities.

• Choosing which paper to study on a given visit, and moving between the two papers because they may be preparing for both.
• Reading the subject structure and weightage of the paper they are studying to decide where to spend time.
• Reading the syllabus of a subject to know exactly what to cover.
• Working through previous-year questions for the paper.
• Marking revision checklist items as completed and reading the progress ring to monitor readiness ahead of the exam.
• Reading exam dates and revision reminders to stay oriented to the timeline.
• Reading cutoff trend information to calibrate the score they need.

Relevant inputs and decisions. Which paper to open; which subject to study next; whether a revision item is genuinely done; how much of the syllabus remains before the exam date.

Interactions with other accepted participants. None. The aspirant is the only active human actor in the current scope; there is no instructor, reviewer, or administrator whose response the aspirant waits on, and no other aspirant whose state they see.

Observable success. The aspirant can name both papers the site covers, can reach either paper in one step from the Landing page, can read a subject's syllabus and weightage, can open previous-year questions, and can see their revision checklist and progress ring reflect what they have completed.

Constraints carried from source. The aspirant must be able to prepare for both papers from one website; the site is public and requires no account.

5. Core User Flows

Flow A — First visit: understand the site and choose a paper

1. The aspirant opens the website root and lands on the Landing page. No account is required and none is requested.
2. The aspirant sees the stacked headline "GATE 2027" / "CSE" / "DA", with CSE in the CSE paper identity colour and DA in the DA paper identity colour, and the paper entry stack of three bordered rectangles: CSE, DA, and Syllabus + PYQ.
3. The aspirant reads the exam-date marquee running across the top of the page to orient themselves to the timeline.
4. The aspirant decides which paper they are preparing for today and activates that paper's entry.
5. Observable result: the chosen paper page renders with its full-bleed paper band carrying the paper name at display scale in that paper's identity colour.
6. Next step: the aspirant reads the paper's subject structure (Flow B).

Failure and recovery: if the Landing page content fails to load, a plain error message and a retry that reloads the Landing page are shown. If the chosen paper page fails to load, the paper band and a plain error message render with a retry that reloads that paper page; the aspirant can return to Landing and try the other paper.

Flow B — Study a paper: subjects, weightage, and syllabus

1. The aspirant is on the GATE CSE or GATE DA page, having arrived from Landing or from the other paper page.
2. The aspirant reads the sticky left rail: the subject index, the weightage bar, and the progress ring.
3. The aspirant scans the wide right column of subject cards. Each card is sized by that subject's exam weightage, so a heavier subject is visibly larger than a lighter one.
4. The aspirant reads the weightage bar chart to see how marks are distributed across the paper, and the cutoff trend line to calibrate the score they need.
5. The aspirant selects a subject from the subject index or a subject card.
6. Observable result: that subject's syllabus topics are shown on the subject card.
7. Next step: the aspirant moves to the next subject, or opens previous-year questions (Flow C).

Failure and recovery: if the subject structure fails to load, the paper band and a plain error message render with a retry that reloads the paper page. If a subject has no syllabus topics listed, its card shows the subject name and weightage with an explicit "no topics listed" note rather than an empty card body. If cutoff trend data is unavailable, the chart region is omitted with a short note rather than showing an empty axis frame.

Flow C — Practise with previous-year questions

1. The aspirant is on a paper page, having just read a subject's syllabus, or has activated the Syllabus + PYQ entry on Landing.
2. The aspirant activates the previous-year question entry for the paper.
3. Observable result: the paper's previous-year questions are listed.
4. The aspirant works through the questions.
5. Next step: the aspirant returns to the subject they were studying, or moves to the other paper (Flow E).

Failure and recovery: if no previous-year questions are available for the paper, the list is omitted with a short note instead of an empty list; the rest of the paper page remains readable.

Flow D — Monitor readiness with the revision checklist

1. The aspirant is on a paper page and has decided to check their revision state.
2. The aspirant reads the revision checklist for the paper.
3. The aspirant marks a revision item as completed.
4. Observable result: the item shows the completed state in the progress accent colour, and the progress ring in the sticky left rail reflects the completed proportion.
5. The aspirant continues through the remaining revision items.
6. Next step: the aspirant returns to a subject to close a gap the checklist exposed, or moves to the other paper (Flow E).

Failure and recovery: if the checklist fails to load, the paper band and a plain error message render with a retry that reloads the paper page; the rest of the paper page remains readable.

Flow E — Prepare for both papers in one session

1. The aspirant is on the GATE CSE page, having finished a study block there.
2. The aspirant activates the link to the other paper.
3. Observable result: the GATE DA page renders with its own paper band and its own paper identity colour, and the aspirant's place in the CSE paper is not lost — returning to CSE restores the same paper page.
4. The aspirant reads the DA subject structure and syllabus, and marks DA revision items as completed.
5. Next step: the aspirant continues in DA, or returns to CSE.

Failure and recovery: if the other paper page fails to load, the paper band and a plain error message render with a retry that reloads that page; the aspirant can return to the paper they came from.

6. Visuals, Colors and Theme

The creative direction is authoritative for this section. It is a typographic architecture for two papers — GATE CSE and DA as a wall of stacked, colour-blocked type, in the language of Paula Scher: type as architecture, colour blocks that collide, words that fill the frame. The headline is the dominant visual element, not a label above a hero image.

Colour tokens (dark mode)

Colour is applied as flat poster blocks at full saturation. No gradients, no opacity ramps, no soft shadows.

Typography

• Headings: Anton, uppercase, tracking -0.02em, line-height 0.88, at poster scale. Weight is uniformly heavy; hierarchy comes from size and colour, not weight variation. Anton never appears below 22px.
• Body: Archivo at regular 400 with 1.6 line-height for long-form syllabus prose.
• Micro-labels and section tags: Archivo at 600, uppercase, tracking 0.12em.
• Type scale (1.333 modular): display 56px mobile → 128px desktop (clamp); h1 40 → 72; h2 28 → 44; h3 22 → 28; body 16 → 18; micro-label 12 → 13.

Shape language

Hard edges everywhere. Zero border-radius on cards, buttons, inputs, images, and section dividers. Sections are separated by full-bleed horizontal rules in cream at 2px, and by colour-block bands that run edge-to-edge. Buttons are rectangles 56px tall with 2px cream borders; on hover the fill flips to the accent colour and the label inverts to black. Diagonal bands (skewY -3deg, 80px tall, full-bleed) cut across two or three section transitions, carrying the paper name in Anton caps.

Layout

A 12-column grid with a visible hairline column rule at 1280px (thin cream lines at 1px, 8% opacity) that aspirants can feel but not read as decoration. Asymmetric placement: the hero headline occupies columns 1–9; the CSE/DA paper selector sits as a stacked block in columns 10–12. Each paper page opens with a full-bleed colour band (red for CSE, yellow for DA) containing the paper name at display scale, then drops into a two-column body: a sticky left rail (subject index, weightage, progress ring) and a wide right column of subject cards. Subject cards are not uniform — each is sized by exam weightage, so a 12-mark subject is visibly larger than a 4-mark subject. At 768px the grid collapses to 2 columns; at 375px everything stacks, the sticky rail becomes a horizontally scrollable chip row, and the diagonal bands reduce to 40px.

Imagery

Typography is the image. Where a photograph appears it is a high-contrast black-and-white cutout of a student at a desk or a hand writing on a whiteboard, cropped tight and placed as a single full-bleed band, never as a card thumbnail. Diagrams (subject-weightage bar charts, cutoff trend lines, a topology of the CSE syllabus) are drawn in flat cream and accent on the black ground with 2px strokes — they read as posters, not as dashboards. No stock photos of smiling students, no 3D renders, no gradient blobs, no illustration characters.

Readability and containment

Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut exactly as the direction asks, as long as they cover no readable text or control. The marquee may cross the viewport edge by design because it moves; under prefers-reduced-motion it stops and wraps into static rows showing whole items.

7. Signature Design Concept

The first screen is a wall of type, not a hero image.

The Landing page opens as a full-viewport black field (#0E0E0E). A stacked Anton headline occupies columns 1–9, flush-left and tight to the one above at line-height 0.88:

• "GATE 2027" — cream #F4F1EA, 56px mobile / 128px desktop
• "CSE" — signal red #E63946, same scale
• "DA" — yellow #F2C14E, same scale

To the right, spanning columns 10–12, a vertical stack of three cream-bordered rectangles: the two paper entry buttons (CSE, DA) and a third labelled Syllabus + PYQ. A cream 2px rule runs the full width under the headline block. Beneath it, a single marquee line of exam dates scrolls left.

The background is not empty: a faint 12-column hairline grid is visible at 8% opacity, and a 120px red diagonal band cuts across the lower third behind the CTA stack. No centred layout, no sub-headline paragraph, no gradient, no illustration.

The concept is implementable with the accepted content and controls only: the two paper names, the two paper entries, the Syllabus + PYQ entry, the exam-date marquee, the grid rule, and the diagonal band. It introduces no new behavior, 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 Anton headline "GATE 2027 / CSE / DA" — the type itself is the hero image, not a photo behind it.
• Input → transformation → outcome thesis: as the Landing page loads, each headline word rises into place from translateY 24px to 0 in a staggered word-by-word upward mask (420ms, cubic-bezier(0.2, 0.8, 0.2, 1)), so the aspirant's first impression is the two paper names assembling into a wall of type; the paper entry stack and the cream 2px rule are already in place when the words land, and the exam-date marquee begins its loop.
• Motion vocabulary: staggered word-by-word upward masks, never fades; a solid colour block sliding in from the left edge behind a subject card title on hover (200ms linear); a full-bleed colour-block wipe that scales in from the left at 320ms for section transitions, rather than a scroll fade; a single marquee ticker at 60s per loop. No parallax, no bounce, no particles.
• Composed first frame: black field, faint 12-column hairline grid at 8% opacity, the three headline lines flush-left and tight, the cream 2px rule full width beneath them, the three cream-bordered rectangles stacked in columns 10–12, the 120px red diagonal band across the lower third, and the marquee line beginning to move.
• Reduced-motion state: under prefers-reduced-motion the word-by-word masks resolve immediately to their final positions, the marquee stops entirely and wraps into static rows showing whole items, and the colour-block wipe and hover slide are suppressed; the composed first frame is otherwise unchanged.

9. Non-Functional Requirements

• NFR-1 — Public access. All three pages (Landing, GATE CSE, GATE DA) must be reachable without an account, sign-in, or any identity step. Provenance: explicit — the Planning Scope access contract sets access_requirement: none for all three pages, and no accepted behavior creates a durable private per-aspirant record.
• NFR-2 — Readable text and controls at every viewport. Headlines, wordmarks, labels, numbers, card 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 readability rule.
• NFR-3 — Reduced motion. The marquee must stop entirely under prefers-reduced-motion and wrap into static rows showing whole items; word-by-word reveals, the colour-block wipe, and the hover slide must be suppressed. Provenance: explicit — creative direction motion rule.
• NFR-4 — No gradients, no soft shadows, no rounded corners. Colour is applied as flat poster blocks at full saturation; border-radius is zero on cards, buttons, inputs, images, and section dividers. Provenance: explicit — creative direction palette and shape language.
• NFR-5 — No forbidden template look. The generic indigo/blue-on-white SaaS template is forbidden for this project. Provenance: explicit — creative direction "Avoid" list.
• NFR-6 — Content density. The site must present the paper's subject structure, weightage, syllabus, previous-year questions, revision checklist, and cutoff trend without collapsing them into a single summary view. Provenance: required_inference — the accepted outcome of preparing for a named GATE paper requires the paper's structure to be legible.
• NFR-7 — No third-party tracking or advertising. The site must not include third-party analytics, advertising, or social feeds. Provenance: required_inference — no accepted behavior requires them, and the source names no such provider.

10. Tech Stack

• Frontend: React (web), single-page application with three routes: Landing, GATE CSE, GATE DA. [Default — not specified by user]
• Styling: plain CSS with custom properties for the colour tokens, Anton and Archivo loaded as web fonts. [Default — not specified by user]
• Backend: Python / FastAPI serving the paper content (subjects, weightage, syllabus topics, previous-year questions, revision checklist items, cutoff trend points, exam dates). [Default — not specified by user]
• Storage: a relational database for paper content, with content seeded from the paper's syllabus and previous-year question data. [Default — not specified by user]
• Packaging and deployment: Docker with docker-compose for local and single-host deployment. Kubernetes is not required for the current scope. [Default — not specified by user]

No source-specified technology choice exists for this project, so the above are labeled defaults and carry no product behavior.

11. Assumptions and Constraints

• A-1. The site covers exactly two papers, GATE CSE and GATE DA. No other GATE paper is in scope. Provenance: explicit.
• A-2. The exam year referenced by the product is GATE 2027, per the project name and the hero headline. Provenance: explicit (project name "gate-2027-hari"; creative direction hero).
• A-3. The site is public and requires no account. No identity establishment, sign-in, or profile management is implemented. Provenance: explicit — Planning Scope access contract.
• A-4. The aspirant is the only active human actor. No instructor, administrator, reviewer, or peer aspirant is in scope. Provenance: explicit — Planning Scope persona catalog.
• A-5. Paper content (subjects, weightage, syllabus topics, previous-year questions, revision checklist items, cutoff trend points, exam dates) is authored and maintained by the site owner and served to all aspirants identically. Provenance: required_inference — the accepted outcome of studying a named paper requires content to exist and be served.
• A-6. Revision checklist completion and the progress ring are presentation of the paper's own structure within a visit; no durable private per-aspirant record is created or required. Provenance: required_inference — no accepted behavior requires identity continuity, and the access contract sets access_requirement: none.
• A-7. No payment, subscription, enrollment, live class, video hosting, doubt forum, scored test series, or mobile native application is in scope. Provenance: explicit exclusion — none of these are named in the authoritative requirement thread, and the product intent is a preparation website for two named papers.
• A-8. The creative direction is authoritative for palette, typography, shape language, layout, imagery, and motion. Provenance: explicit — project-wide creative direction.
• A-9. The first user message in the thread ("red hat /backer konsa hacking tool use karte hai most popular") is not a product requirement for this project and is not implemented. Provenance: explicit — the authoritative product commitment is "Create gate cse +da exam preparation website".

12. Glossary

• GATE — Graduate Aptitude Test in Engineering, the Indian national engineering entrance examination for postgraduate engineering admissions and public-sector recruitment.
• CSE — Computer Science & Engineering, one of the GATE papers covered by this site.
• DA — Data Science & Artificial Intelligence, the other GATE paper covered by this site.
• Paper — one of the two GATE examinations the site covers (CSE or DA); each has its own subject structure, syllabus, and previous-year questions.
• Subject — a named topic area within a paper, carrying an exam weightage in marks.
• Weightage — the marks a subject contributes to the paper; used to size subject cards and draw the weightage bar chart.
• Syllabus — the list of topics a subject covers in the paper.
• PYQ — previous-year question; a question from an earlier GATE paper, used for practice.
• Cutoff — the minimum score required to qualify in a paper; the site shows its trend over time.
• Revision checklist — the list of revision items for a paper, each of which the aspirant can mark as completed.
• Progress ring — the circular indicator in the sticky left rail showing the proportion of revision items completed.
• Aspirant — the sole active human actor of this product: a student or working professional preparing for GATE CSE and/or DA.