System Requirements Document for sweet-4

1. Introduction

sweet-4 is a school magazine design project: an editable, print-ready A4 magazine template made of exactly two sheets forming exactly eight faces (pages). Every face carries exactly four text boxes, and each of those thirty-two text boxes is wrapped in a different geometric shape from a fixed family of eight silhouettes, so no two boxes on a face ever share a silhouette. The design must read as professional, elegant, eye-catching and impressive — a proud, festive, handmade-but-designed arts-and-culture artefact for pupils, parents and staff to see at an exhibition or end-of-term fair.

The audience for the artefact is the school community; the audience for this document is the person who builds and edits the template — the school magazine designer — who must be able to open the file, change text and shapes, and keep the two-sheet / eight-face / four-boxes-per-face / A4 structure intact.

2. System Overview

The product is a single editable A4 magazine template delivered as eight composed faces. It is not a publishing platform, not a content-management system, and not a multi-user editorial workflow. Its whole value is the composition: a strict A4 poster grid, a fixed eight-shape family, a three-colour flat poster palette, and typography used as architecture.

Actors

• مصمم المجلة المدرسية (school magazine designer) — the only active human actor. Creates, edits and finalises the template.
• System process — the template document itself: it holds the two-sheet / eight-face structure, enforces the four-boxes-per-face and distinct-shape rules, and renders each face at A4 proportions.

Accepted behaviour in one line: the designer opens the template, works through the eight faces, edits the text and the geometric shapes of each of the four boxes per face, and exports or prints the result at A4.

Narrow exclusions: no accounts, no sign-in, no roles or permissions, no collaboration, no comments, no analytics, no publishing pipeline, no stock photography library, no icon set, no gradients, no rounded corners, no shadows, no blue/indigo UI accents.

2a. Product Interpretation and Delivery Boundary

The template is a first-party, locally owned design artefact. It is opened and edited directly by the designer; there is no provider-owned surface, no external destination, and no headless delivery. Access is open — the designer works on the file itself, and no identity, account or session is required or inferred, because nothing in the accepted behaviour creates a durable per-person entitlement, commitment or value transfer that must stay bound to a particular person.

The current delivery horizon is the eight-face A4 template with its editable text and shapes. Nothing beyond that is committed: no additional faces, no additional sheets, no web publishing, no reader-facing app, and no content authoring workflow for third parties. Those remain outside the current boundary and are not built.

2b. Page Content and Component Coverage

The template is composed of exactly eight faces. Each face is one A4 composition on the strict 4-column poster grid (210×297 mm, 12 mm outer margin, 6 mm gutters), with four block zones separated by full-width 2 px black rules that run past the page margin and stop dead at the trim. Each face carries exactly four text boxes, each in a different silhouette from the fixed eight-shape family, and each face commits to one dominant poster colour (red / yellow / teal) so the eight faces read as a colour rhythm.

The eight-shape family, recurring across the faces in rotated order so that every face has four different ones and no shape repeats twice on one face:

1. Full-bleed rectangle with a torn-off corner
2. Stacked bar stack (three offset bars)
3. Circle cropped by the face edge
4. 45° diagonal band
5. Half-disc
6. Stepped zigzag block
7. Narrow vertical column with a notched foot
8. Rotated square on point

Each face also carries the four recurring compositional roles: one shout block (type fills the frame, breaking the margin on one side only), one ticker block (a rotated or diagonal band), one column block (narrow, dense, small type), and one plate block (a solid colour field with a short text inset). Page chrome is minimal: the face number in a corner and the magazine name running small along the outer edge.

الوجه الأول

• Information / state: the cover face. The magazine title set in Anton at viewport width, on three stacked lines that fill the entire A4 sheet edge to edge and bleed off both left and right margins. A solid red field occupies the upper 38% of the sheet; the middle title line is knocked out in cream over that red; the third line sits in black on cream with a 6 mm yellow rule under it. School name, issue number and date run as a small uppercase ticker band across the bottom edge and rotated 90° along the right side. A single black-and-white duotone cutout of the school building is cropped by the red field so only its roofline shows.
• Primary actions: edit the title text; edit the school name, issue number and date; replace or reposition the duotone cutout; adjust the red field height.
• Supporting actions: change the dominant colour of the face; edit the four text boxes and their shapes; toggle the ticker band.
• Domain entities: face, title lines, ticker band, duotone cutout, colour field, text box, geometric shape.
• Component responsibilities: masthead type block; red field; knocked-out middle line; yellow rule; bottom ticker band; right-edge rotated ticker; cropped duotone image; four text boxes in four distinct silhouettes.
• States: loading — face renders from the template document; empty — a text box with no content shows its silhouette and placeholder rule, never a collapsed shape; success — all four boxes present, four distinct silhouettes, title bleeds off both edges; error — if a box's shape is duplicated on the face, the face flags the duplicate and keeps the box visible; recovery — the designer reassigns the box to an unused silhouette from the family.

الوجه الثاني

• Information / state: an interior face with four text boxes on the A4 grid, dominant colour red, the other two colours used only as small flat collisions.
• Primary actions: edit each of the four text boxes; assign each box a silhouette from the family; set the shout, ticker, column and plate roles.
• Supporting actions: adjust the 2 px rules between block zones; edit the face number and outer-edge magazine name.
• Domain entities: face, text box, geometric shape, block role, rule, folio.
• Component responsibilities: four block zones; four distinct silhouettes; full-width rules; face number; outer-edge wordmark.
• States: loading; empty — placeholder rule inside each silhouette; success — four boxes, four distinct silhouettes, rules running past the margin; error — duplicated silhouette or a box overflowing the trim; recovery — reassign the silhouette or reduce the box to fit inside the trim.

الوجه الثالث

• Information / state: an interior face whose purpose is to demonstrate the shape variation without repetition, dominant colour yellow.
• Primary actions: edit the four text boxes; swap silhouettes between boxes; verify no silhouette repeats on the face.
• Supporting actions: edit the ticker strapline; adjust type scale within the block headings.
• Domain entities: face, text box, geometric shape, strapline, block heading.
• Component responsibilities: four block zones; four distinct silhouettes; rotated ticker band; face number; outer-edge wordmark.
• States: loading; empty — silhouette with placeholder rule; success — four distinct silhouettes, no repetition; error — repetition detected; recovery — pick an unused silhouette from the family.

الوجه الرابع

• Information / state: an interior face that keeps the four-box distribution and the editable shapes within the complete design, dominant colour teal.
• Primary actions: edit the four text boxes; edit the shapes; edit the block roles.
• Supporting actions: adjust the colour balance of the face; edit the folio.
• Domain entities: face, text box, geometric shape, block role, colour field.
• Component responsibilities: four block zones; four distinct silhouettes; full-width rules; face number; outer-edge wordmark.
• States: loading; empty; success — four boxes, four distinct silhouettes, A4 proportions held; error — box or text crossing the trim; recovery — resize or reflow the box inside the margin.

الوجه الخامس

• Information / state: the fifth face of the two-sheet magazine, four text boxes with a professional, editable visual composition, dominant colour red.
• Primary actions: edit the four text boxes; edit the shapes; edit the shout block so its type fills the frame and breaks the margin on one side only.
• Supporting actions: edit the ticker strapline; adjust the plate's inset text.
• Domain entities: face, text box, geometric shape, shout block, plate, ticker.
• Component responsibilities: four block zones; four distinct silhouettes; full-width rules; face number; outer-edge wordmark.
• States: loading; empty; success — four boxes, four distinct silhouettes, shout block breaking one margin only; error — shout block breaking both margins or covering readable text; recovery — pull the block back to a single-margin break.

الوجه السادس

• Information / state: an interior face completing the sequence with four text boxes and varied geometric shapes, dominant colour yellow.
• Primary actions: edit the four text boxes; edit the shapes; edit the column block's dense small type.
• Supporting actions: edit the folio; adjust the rule weight.
• Domain entities: face, text box, geometric shape, column block, folio.
• Component responsibilities: four block zones; four distinct silhouettes; full-width rules; face number; outer-edge wordmark.
• States: loading; empty; success — four boxes, four distinct silhouettes, column block readable at body size; error — column type below readable size; recovery — raise the type back to the body scale.

الوجه السابع

• Information / state: an interior face inside the editable magazine file, holding A4 proportions and the four-box distribution, dominant colour teal.
• Primary actions: edit the four text boxes; edit the shapes; edit the block roles.
• Supporting actions: edit the ticker strapline; edit the face number.
• Domain entities: face, text box, geometric shape, block role, strapline.
• Component responsibilities: four block zones; four distinct silhouettes; full-width rules; face number; outer-edge wordmark.
• States: loading; empty; success — four boxes, four distinct silhouettes, A4 held; error — duplicated silhouette; recovery — reassign from the family.

الوجه الثامن

• Information / state: the closing face that completes the eight faces, four text boxes with editable geometric shapes, dominant colour red.
• Primary actions: edit the four text boxes; edit the shapes; confirm the magazine closes on eight faces.
• Supporting actions: edit the folio; edit the outer-edge wordmark.
• Domain entities: face, text box, geometric shape, folio, wordmark.
• Component responsibilities: four block zones; four distinct silhouettes; full-width rules; face number; outer-edge wordmark.
• States: loading; empty; success — four boxes, four distinct silhouettes, eight faces total confirmed; error — face count or box count off; recovery — restore the missing face or box to the required count.

3. Functional Requirements

FR-1 — Two sheets, eight faces (explicit) As مصمم المجلة المدرسية, I should have a magazine template made of exactly two sheets forming exactly eight faces, so that the printed artefact matches the requested structure.

• Trigger/input: the designer opens the template.
• Observable result: the document contains exactly 2 sheets and exactly 8 faces, numbered 1–8.
• Access state: open, no identity required.
• Failure/recovery: if the face count is not 8, the template flags the mismatch and the designer restores the missing face.
• Continuation: the designer moves to the next face.

FR-2 — Four text boxes on every face (explicit) As مصمم المجلة المدرسية, I should see exactly four text boxes on each of the eight faces, so that every face carries the required four blocks.

• Trigger/input: the designer opens any face.
• Observable result: exactly 4 text boxes are present on that face, in 4 block zones.
• Access state: open.
• Failure/recovery: if a face has fewer or more than 4 boxes, the face flags the count and the designer adds or removes a box to return to 4.
• Continuation: the designer edits the boxes.

FR-3 — A different geometric shape for every text box (explicit) As مصمم المجلة المدرسية, I should have each text box wrapped in a geometric shape different from the others, so that no two boxes on a face look alike.

• Trigger/input: the designer assigns or edits a box's silhouette.
• Observable result: the four boxes on a face carry four different silhouettes drawn from the fixed eight-shape family; no silhouette repeats on the same face.
• Access state: open.
• Failure/recovery: if two boxes on a face share a silhouette, the face flags the duplicate and the designer reassigns one box to an unused silhouette.
• Continuation: the designer continues to the next face.

FR-4 — Professional, elegant, eye-catching, impressive design (explicit) As مصمم المجلة المدرسية, I should get a design that is professional, elegant, eye-catching and impressive, so that the magazine is presentable at a school exhibition or end-of-term fair.

• Trigger/input: the designer views or prints a face.
• Observable result: the face uses the flat poster palette, the poster type scale, hard-edged geometry with no rounded corners, shadows or gradients, and a composition in which each block is a distinct compositional event rather than a repeated card.
• Access state: open.
• Failure/recovery: if a face falls back to four identical cards, or introduces rounded corners, shadows, gradients or blue/indigo accents, the face is corrected back to the flat poster language.
• Continuation: the designer reviews the next face.

FR-5 — Editable design (explicit) As مصمم المجلة المدرسية, I should be able to edit the design, so that I can change the magazine's content and shapes without rebuilding it.

• Trigger/input: the designer selects a text box, a shape, a colour field or a folio.
• Observable result: the selected element's text, silhouette, colour or position can be changed, and the change persists in the template.
• Access state: open.
• Failure/recovery: if an edit would break the four-boxes-per-face or distinct-shape rule, the face flags it and the designer corrects the edit.
• Continuation: the designer continues editing or finalises the file.

FR-6 — A4 paper size (explicit) As مصمم المجلة المدرسية, I should have every face set to A4 (210×297 mm), so that the magazine prints correctly.

• Trigger/input: the designer views or prints a face.
• Observable result: every face holds A4 proportions with a 12 mm outer margin and 6 mm gutters on the 4-column poster grid.
• Access state: open.
• Failure/recovery: if a face's proportions drift from A4, the face is restored to A4.
• Continuation: the designer prints or exports.

FR-7 — An editable A4 design file (required_inference) As مصمم المجلة المدرسية, I should receive the magazine as an editable A4 design file, so that the accepted editing journey is actually executable.

• Trigger/input: the designer opens the delivered file.
• Observable result: the file opens with all eight faces, each at A4, each with four editable text boxes in four distinct silhouettes.
• Access state: open, no identity required.
• Failure/recovery: if the file opens without the full eight-face structure, the designer restores the missing faces from the template.
• Continuation: the designer begins editing.

FR-8 — The document is set to two sheets and eight faces (required_inference) As مصمم المجلة المدرسية, I should have the document configured so that the two sheets produce exactly eight faces, so that the sheet-to-face relationship is correct before printing.

• Trigger/input: the designer inspects the document setup.
• Observable result: the document setup shows 2 sheets and 8 faces, with faces paired front/back per sheet.
• Access state: open.
• Failure/recovery: if the pairing is wrong, the designer corrects the sheet-to-face assignment.
• Continuation: the designer proceeds to print or export.

FR-9 — Text and geometric shapes are editable (required_inference) As مصمم المجلة المدرسية, I should be able to edit both the text and the geometric shapes, so that the accepted "editable design" requirement covers the two things the brief actually names.

• Trigger/input: the designer selects a text box's text or its silhouette.
• Observable result: the text content changes, and the silhouette can be swapped for another from the eight-shape family, with the distinct-shape rule re-checked after the swap.
• Access state: open.
• Failure/recovery: if a swap creates a duplicate silhouette on the face, the face flags it and the designer picks a different silhouette.
• Continuation: the designer continues editing the remaining boxes.

4. User Personas

مصمم المجلة المدرسية

Product context. The designer is the person who owns the school magazine artefact — a student or teacher producing an arts-and-culture magazine for pupils, parents and staff to see at an exhibition or end-of-term fair. They are not running a publishing platform; they are composing eight printed faces and handing the file to a printer or exporting it.

Primary goal. Produce an editable A4 school magazine of two sheets and eight faces, each face carrying exactly four text boxes, each box in a different geometric shape, in a design that is professional, elegant, eye-catching and impressive.

Distinct accepted responsibilities.

• Hold the structure: exactly 2 sheets, exactly 8 faces, exactly 4 text boxes per face.
• Assign a different silhouette from the fixed eight-shape family to every text box, and keep no silhouette repeated on a face.
• Compose each face as one poster composition with a shout block, a ticker block, a column block and a plate block, rather than four identical cards.
• Commit each face to one dominant poster colour so the eight faces read as a colour rhythm.
• Edit text and shapes freely without breaking the structural rules.
• Keep every face at A4 with the 12 mm margin and 6 mm gutters.

Relevant inputs and decisions. Which silhouette each of the thirty-two boxes takes; which block is the shout, the ticker, the column and the plate on each face; which of red, yellow and teal dominates each face; the title, school name, issue number and date on the cover; the strapline on each face's ticker band.

Interactions with other accepted participants. None. The designer is the only active human actor; the template document itself is the system process that holds the structure and flags rule violations.

Observable success. The designer opens the file and finds eight A4 faces, four editable text boxes per face, four different silhouettes per face, no repeated silhouette on any face, and a composition that reads as a proud, festive, printed magazine rather than a screen template.

5. Core User Flows

Flow 1 — Open the template and confirm the structure

1. مصمم المجلة المدرسية opens the delivered editable A4 design file. (Owner: the template document.)
2. The document shows exactly 2 sheets and exactly 8 faces, numbered 1–8, each at A4 (210×297 mm) with a 12 mm outer margin and 6 mm gutters.
3. The designer checks that each face carries exactly 4 text boxes.
4. Observable result: the structure matches the brief — 2 sheets, 8 faces, 4 boxes per face.
5. Failure/recovery: if a face is missing or a face has the wrong number of boxes, the face flags the mismatch and the designer restores the missing face or box.
6. Next step: the designer moves to the cover face.

Flow 2 — Compose the cover face (الوجه الأول)

1. The designer opens الوجه الأول.
2. The face presents the magazine title in Anton at viewport width on three stacked lines filling the sheet edge to edge and bleeding off both left and right margins, with a solid red field over the upper 38%, the middle line knocked out in cream over that red, and the third line in black on cream with a 6 mm yellow rule under it.
3. The designer edits the title text, the school name, the issue number and the date.
4. The designer places the black-and-white duotone cutout of the school building so the red field crops it to its roofline only.
5. Observable result: the cover reads as a cover — no centred headline, no subheading, no button; the composition is the artwork.
6. Failure/recovery: if any readable word is cropped by the red field, the margin or the trim, the designer moves the word inside the safe area and carries the bleed with the imagery or the colour field instead.
7. Next step: the designer works through the interior faces.

Flow 3 — Edit the four text boxes on a face

1. The designer opens an interior face, for example الوجه الثاني.
2. The face shows four block zones separated by full-width 2 px black rules that run past the page margin and stop dead at the trim.
3. The designer selects a text box and edits its text.
4. The designer assigns the box a silhouette from the eight-shape family: torn-corner rectangle, bar stack, cropped circle, 45° band, half-disc, zigzag, notched column, rotated square.
5. The designer repeats this for the remaining three boxes, choosing a different silhouette each time.
6. Observable result: the face carries four text boxes in four different silhouettes, with no silhouette repeated on that face.
7. Failure/recovery: if two boxes end up sharing a silhouette, the face flags the duplicate and the designer reassigns one box to an unused silhouette from the family.
8. Next step: the designer sets the block roles for the face.

Flow 4 — Set the block roles and the face's dominant colour

1. The designer stays on the face and assigns the four blocks their roles: one shout (type fills the frame, breaking the margin on one side only), one ticker (a rotated or diagonal band), one column (narrow, dense, small type), one plate (a solid colour field with a short text inset).
2. The designer commits the face to one dominant poster colour — red, yellow or teal — using the other two only as small flat collisions.
3. The designer edits the ticker band's strapline in uppercase Archivo with 0.18em tracking.
4. Observable result: the face is one composition, not four identical cards, and its dominant colour fits the eight-face colour rhythm.
5. Failure/recovery: if the shout block breaks both margins, or the column type drops below readable body size, or the face drifts toward four identical cards, the designer corrects the composition.
6. Next step: the designer moves to the next face.

Flow 5 — Work through the remaining faces

1. The designer opens الوجه الثالث, then الوجه الرابع, الوجه الخامس, الوجه السادس, الوجه السابع and الوجه الثامن in turn.
2. On each face the designer edits the four text boxes, assigns four different silhouettes, sets the shout / ticker / column / plate roles, and commits the face to a dominant colour.
3. The eight-shape family recurs across the faces in a rotated order, so each face gets four different silhouettes and no shape repeats twice on one face.
4. Observable result: eight faces, thirty-two text boxes, thirty-two silhouettes drawn from the family with no repetition within a face, and a red / yellow / teal rhythm across the sequence.
5. Failure/recovery: if a face repeats a silhouette or loses a box, the face flags it and the designer corrects that face before continuing.
6. Next step: the designer finalises the file.

Flow 6 — Finalise and print at A4

1. The designer reviews all eight faces.
2. The designer confirms the document is 2 sheets and 8 faces, every face at A4, every face with exactly 4 text boxes in 4 different silhouettes.
3. The designer exports or prints the file at A4.
4. Observable result: the printed artefact is a two-sheet, eight-face A4 school magazine with thirty-two differently shaped text blocks.
5. Failure/recovery: if a face's proportions have drifted from A4, or a box crosses the trim, the designer restores A4 and pulls the box inside the margin, then re-exports.
6. Continuation: the designer can reopen the same editable file and change text or shapes at any time.

6. Visuals, Colors and Theme

Muse and headline: Typography as architecture — eight A4 faces where words become the geometry. The muse is Paula Scher: type and flat colour blocks colliding inside a tight poster grid, each panel a different compositional event rather than a repeated card. The register is proud, loud, festive and a little theatrical — handmade-but-designed, impressive at arm's length and readable up close.

Colour tokens (light mode)

Shapes are solid fills, never gradients. Text placed on a colour block is #111111 on yellow or cream, or #FFFFFF on red or teal, checked at body size. Colour is applied in big flat fields, never as tints or shadows.

Typography

• Headings: Anton, uppercase, tracking −0.01em, leading 0.86 so stacked lines fuse into a solid typographic mass. Arabic headings in Cairo Black at matching optical weight so the bilingual masthead reads as one block.
• Body: Archivo Regular/Medium, 15–16 px, leading 1.55, flush-left ragged-right, never justified.
• Labels and folios: Archivo SemiBold uppercase, 11 px, 0.18em tracking.
• Scale: 1.5 modular poster scale — face titles clamp(40px, 9vw, 96px); pull-quote numerals clamp(28px, 5vw, 56px); block headings 20/18/16 px; body 16 px desktop / 15 px mobile; folio labels 11 px. Print equivalents on A4: 96 pt / 56 pt / 20 pt / 11 pt.

Shape language. Hard-edged flat geometry only: sharp corners, zero border radius, no shadows, no blur. Each of the four blocks per face takes a distinct silhouette from the fixed eight-shape family — torn-corner rectangle, bar stack, cropped circle, 45° band, half-disc, zigzag, notched column, rotated square — recurring in rotated order so every face has four different ones and no shape repeats twice on one face.

Layout. Strict 4-column A4 poster grid (210×297 mm), 12 mm outer margin, 6 mm gutters, horizontal rules separating the four block zones. Each face is one composition: one shout, one ticker, one column, one plate. Faces alternate dominant red, yellow and teal so the eight read as a sequence with rhythm. Page chrome is minimal: face number in a corner, magazine name running small along the outer edge.

Imagery. Typography IS the image. Where a photograph appears it is a high-contrast black-and-white duotone cutout, hard-cropped to a geometric shape and overprinted with flat colour at 100% opacity. No stock photography, no illustration, no icons beyond simple geometric marks and one repeated school crest rendered as a flat black stamp.

Avoid. Rounded corners; soft shadows; glass or frosted surfaces; gradients; a grid of four identical cards per face; blue/indigo UI accents (#2563EB, #4F46E5, #6366F1 and neighbours); justified or centred body text; hyphenated Arabic copy; full-colour or soft-edged photographs; decorative icons, emoji or clip art; any readable text or control cropped by a shape, margin or the trim.

7. Signature Design Concept

The cover is the artwork. Face 1 is not a landing page — it is a cover, and the concept is that the magazine title is the cover image.

The title is set in Anton at viewport width, clamp(64px, 17vw, 210px), on three stacked lines that fill the entire A4 sheet edge to edge and bleed off both left and right margins. Behind the top line sits a solid red field occupying the upper 38% of the sheet. The middle line is knocked out in cream over that red. The third line sits in black on cream with a 6 mm yellow rule under it. The school name, issue number and date run as a small uppercase ticker band across the bottom edge and rotated 90° along the right side. A single black-and-white duotone cutout of the school building is cropped by the red field so only its roofline shows.

There is no centred headline, no subheading and no button. The composition is the cover. The gesture that carries the bleed is the type and the colour field; every readable word stays whole inside the safe area at 375 px, 768 px and 1280 px.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the three stacked title lines of the cover, filling the A4 sheet edge to edge, with the solid red field behind the top line and the duotone roofline cropped by it.
• Input → transformation → outcome thesis: as the cover scrolls into view, the title lines reveal word by word in a staggered sequence; the red field wipes in behind the top line; the middle line resolves as a cream knockout over that red. The outcome is the finished cover composition — the same composition the designer then edits.
• Motion vocabulary: poster-like and deliberately un-theatrical — type marquees on the ticker blocks, staggered word-by-word reveals when a face scrolls into view, and colour-block wipes between faces. No bounce, no easing theatrics; the movement of a printed sheet being flipped.
• Composed first frame: the red field already occupying the upper 38% of the sheet, the top title line fully set and bleeding off both edges, the middle line mid-knockout, the bottom ticker band already running, and the duotone roofline cropped at the red field's lower edge.
• Reduced-motion state: with prefers-reduced-motion everything stops. Each marquee becomes a wrapped row of whole words, the staggered reveals resolve immediately to their final state, and the colour-block wipes are removed. Every item remains fully readable.

9. Non-Functional Requirements

• NFR-1 — A4 fidelity (explicit): every face is 210×297 mm with a 12 mm outer margin and 6 mm gutters. Rationale: the brief fixes the paper size at A4.
• NFR-2 — Structural exactness (explicit): exactly 2 sheets, exactly 8 faces, exactly 4 text boxes per face. Rationale: the brief fixes these counts.
• NFR-3 — Shape distinctness (explicit): no two text boxes on the same face share a silhouette. Rationale: the brief requires each box to differ from the others by a different geometric shape.
• NFR-4 — Editability (explicit): text and shapes remain editable in the delivered file. Rationale: the brief requires the design to be editable.
• NFR-5 — Print survivability (required_inference): flat colour, hard edges and no effects, so nothing degrades on paper. Rationale: the artefact is printed.
• NFR-6 — Readable text and controls stay whole (required_inference): headlines, wordmarks, labels, numbers, block text and controls stay entirely inside the viewport and their container at 375 px, 768 px and 1280 px, wrapping or scaling to fit, with no other element covering them. Shapes and imagery may bleed; words may not. Rationale: the design language bleeds type, which would otherwise crop readable text.
• NFR-7 — Reduced motion (required_inference): with prefers-reduced-motion, all motion stops and marquees become wrapped rows of whole words. Rationale: the screen preview is animated.
• NFR-8 — Body-size contrast (required_inference): text on a colour block is #111111 on yellow or cream, or #FFFFFF on red or teal, checked at body size. Rationale: flat poster colour fields sit behind body copy.

10. Tech Stack

• React for the screen preview of the eight faces, with the poster grid, the eight-shape family and the block roles expressed as reusable components.
• CSS for the A4 grid, the flat colour fields, the hard-edged silhouettes and the print stylesheet; clamp() for the poster type scale; prefers-reduced-motion media queries for the reduced-motion state.
• Python / FastAPI to serve the template document and its face data, so the eight faces and their text boxes are held as structured, editable content rather than hard-coded markup.
• Storage for the template document: the two-sheet / eight-face structure, the four text boxes per face, their text, their assigned silhouettes and their block roles.
• Docker / docker-compose to run the preview and the template service together.
• Kubernetes is not required for this project.

11. Assumptions and Constraints

Constraints (binding)

• The paper size is A4 (210×297 mm).
• The magazine is exactly two sheets.
• The magazine is exactly eight faces.
• Every face contains exactly four text boxes.
• Every text box on a face has a geometric shape different from the other boxes on that face.
• The design is editable.
• The design must be professional, elegant, eye-catching and impressive.

Assumptions (narrow, labeled)

• [Assumption] The delivered artefact is an editable design file plus a screen preview of the eight faces; the brief asks for a design, not a publishing service.
• [Assumption] The eight-shape family is fixed at eight silhouettes so that four distinct shapes per face can rotate across eight faces without repetition within a face.
• [Assumption] The magazine's text content is supplied by the designer; the template ships with placeholder text inside each silhouette.
• [Assumption] The screen preview is a preview of the printed artefact, not a separate product surface.

Explicit exclusions

• No accounts, sign-in, roles or permissions.
• No collaboration, comments or multi-user editorial workflow.
• No publishing pipeline or reader-facing application.
• No additional sheets, faces or text boxes beyond the fixed counts.
• No gradients, rounded corners, shadows, frosted surfaces or blue/indigo UI accents.

12. Glossary

• Face (وجه): one A4 page of the magazine. Eight faces total.
• Sheet (ورقة): one physical A4 sheet carrying two faces, front and back. Two sheets total.
• Text box (مربع نص): one of the four editable text blocks on a face. Thirty-two total.
• Silhouette / geometric shape: the flat, hard-edged outline wrapping a text box, drawn from the fixed eight-shape family.
• Eight-shape family: torn-corner rectangle, bar stack, cropped circle, 45° band, half-disc, zigzag, notched column, rotated square.
• Shout block: the block whose type fills the frame and breaks the margin on one side only.
• Ticker block: the rotated or diagonal band carrying the face's strapline.
• Column block: the narrow, dense block set in small type.
• Plate block: the solid colour field with a short text inset.
• Folio: the face number and outer-edge magazine name.
• Trim: the outer edge of the A4 sheet, where rules and shapes stop dead.
• Duotone cutout: a high-contrast black-and-white photograph hard-cropped to a geometric shape and overprinted with flat colour.