Captik is a public content website with a private, owner-facing editing room behind it. The site owner wants Captik to reproduce the feel and layout of a reference website they have chosen to copy: the published site must read as a deliberately authored, designed object rather than a default template, and the owner must be able to shape its content and structure to mirror that reference. Visitors arrive anonymously, read the site's content, and move through its sections; the owner signs up, signs in, and edits what visitors see.
This document is the System Requirements Document for the product named Captik, delivered under the project name windy-mere. It defines the two-sided product — a public reading surface and a private editing surface — together with the identity boundary that separates them, the visual language the site is built in, and the technical delivery shape.
Audience. Anonymous Site Visitors who read Captik's published content, and the Site Owner / Content Editor who owns the site, publishes into it, and is the only human actor behind the login.
Captik is delivered as a single web application with three runnable services:
Actors.
Accepted behavior in summary. A public Landing page introduces Captik and its content. Public Content pages let visitors browse and read the site. The owner completes self-service enrollment on Sign Up, verifies identity on return through Login, and works in the protected Site Editor to shape the content and structure that visitors then see. The visual language is a Paula Scher–derived poster system: type as architecture, flat colour blocks, hard edges, no gradients or soft cards.
Narrow exclusions. Captik is not a multi-tenant site builder, not a marketplace of templates, and not a collaboration tool. There is one site (Captik) and one owner-editor role; no differentiated permissions, no team roles, no invitation or provisioning flow, and no visitor accounts are part of the current product. No page or section presents or links to a planning document.
Removed from scope
Captik is a first-party application. Both the public reading surface and the private editing surface are owned and rendered by the Captik frontend, backed by the shared Captik backend and its MariaDB store. Nothing about the public site or the editor is delegated to a third-party provider surface.
Access ownership. The public surfaces — Landing and Content — are anonymously reachable with no identity required. The Site Editor is protected and requires the owner to be signed in. Because the owner must privately own and resume durable, actor-specific editing state across visits, Captik establishes application-owned identity: first use happens through self-service enrollment on Sign Up, and returning access happens through verification on Login. Sign Up and Login are themselves anonymously reachable entry surfaces — a protected destination cannot own the interaction that grants access to itself. No invitation, provisioning, or deployment-bootstrap path is established by the source, so self-service enrollment is the sole first-use route.
Current versus future. Everything in this document is current. There is no accepted future horizon for additional capabilities; anything not stated here is out of scope rather than deferred.
FR-1 — Public site identity. As a Site Visitor, I should see the site presented as Captik, so that I know what site I am on. (explicit)
FR-2 — Reference-faithful look and layout. As a Site Owner / Content Editor, I should be able to shape Captik's content and structure so the published site mirrors the feel and layout of the reference website I chose to copy, so that the site reads as a deliberately authored design rather than a default theme. (explicit)
FR-3 — Self-service enrollment. As a Site Owner / Content Editor, I should be able to enroll myself on first use before editing Captik's content, so that I can begin editing without an invitation or provisioning step. (required_inference)
FR-4 — Returning verification. As a Site Owner / Content Editor, I should verify my identity on return before accessing the Site Editor, so that my editing state stays private to me. (required_inference)
FR-5 — Browse and read published content. As a Site Visitor, I should browse Captik's pages and read its content, so that I can find what I need without friction. (required_inference)
FR-6 — Navigate the site's sections. As a Site Visitor, I should move through Captik's sections via the horizontal label bar and the ticker band, so that I can reach any part of the site. (required_inference)
FR-7 — Edit content and structure. As a Site Owner / Content Editor, I should select a page or section in the Site Editor and change its content, structure, and ordering, so that the published site matches my intent. (required_inference)
FR-8 — Publish to visitors. As a Site Owner / Content Editor, I should publish my edits, so that Site Visitors see the updated site. (required_inference)
FR-9 — Protected editor access. As the system, I should require a verified owner session for the Site Editor, so that only the owner reaches the editing room. (required_inference)
FR-10 — Sign out. As a Site Owner / Content Editor, I should sign out of the Site Editor, so that the editing room is not left open on a shared device. (required_inference)
Product context. An anonymous reader who arrives at Captik without an account and without any prior relationship to the site. They encounter the Landing poster first and decide from it whether the site is worth reading.
Primary goal. Read Captik's content and move through its sections without friction.
Distinct responsibilities. The visitor is the audience the published site is judged by. Their work is selection and reading: choosing a section from the label bar or ticker, opening a page, and reading its editorial spread. They never edit, never enroll, and never see the Site Editor.
Inputs and decisions. Which section or page to open next; whether the Landing composition communicates what the site is.
Interactions with other participants. The visitor is the recipient of the owner's published work. They do not interact with the owner directly; the owner's publish action is what changes what the visitor sees.
Observable success. The visitor can read the site's content and navigate its pages without friction, and the site reads as a designed object rather than a template.
Product context. The single human who owns Captik and asked for it to mirror the look and layout of a reference site. They are the only actor behind the login and the only person who writes into the site.
Primary goal. Make the published site present the intended content and structure, in the reference site's feel and layout, to visitors.
Distinct responsibilities. Enrolling on first use; verifying identity on return; selecting pages and sections in the Site Editor; changing content, structure, and ordering; publishing so visitors see the result; signing out. The owner is also the person who judges whether the published result matches the reference.
Inputs and decisions. What content each page carries; how sections are ordered and named; when a draft is ready to publish; whether to discard unsaved changes.
Interactions with other participants. The owner's publish action is what the Site Visitor reads. The owner never sees individual visitors and has no per-visitor controls.
Observable success. The published site presents the intended content and structure to visitors, and the owner can return later, verify, and continue editing the same site.
The visual language is Typography as architecture — Captik built out of words, colour blocks and poster energy, after the muse Paula Scher. The headline idea: the site is the poster, and the editor is the print desk behind it.
Colour tokens (light mode).
| Role | Hex | Usage |
|---|---|---|
| Background (paper) | #F3EFE6 | ~60% of every page; the warm ground |
| Surface | #FFFFFF | ~20%; panels and the editor canvas only |
| Text (ink) | #111111 | ~15%; all type and 2px/3px rules |
| Primary (vermilion) | #E0311E | Primary actions, section blocks, active underline, card hover field |
| Accent (poster yellow) | #F5C518 | Ticker band, secondary blocks, highlights |
| Editorial teal | #0F6E6A | Third flat block, editorial spreads only |
| Muted | #6B655C | Captions and metadata |
No gradients. No shadows on colour blocks — the contrast between flat fields is the effect.
Typography.
0.88 and tracking -0.01em. Occasional single words rotated 90° or set in outlined stroke as a poster gesture — never on readable body copy or control labels.0.14em tracking for section markers.clamp(56px, 12vw, 176px); section head clamp(36px, 6vw, 88px); subhead 28/32; body 17–19; label 12. Mobile display never below 56px and always wraps to full words inside the viewport.Shape language. Hard edges everywhere: zero border-radius, 2px and 3px ink rules, solid rectangles of colour butting against each other, diagonal bands cut at 8–12° across full-bleed sections, outlined type used as texture. No pills, no soft cards, no drop shadows. Controls are rectangles with a visible 2px border and a flat colour fill on hover.
Layout. Asymmetric poster grid on a 12-column base with a visible 2px baseline rule under each section head. Landing opens with a full-viewport type composition. Content pages use a three-column editorial spread (kicker / headline / deck) with colour blocks bleeding off the right edge. The Site Editor is a white canvas on ink-grey chrome with a left rail of uppercase Archivo block labels — the one place the layout goes quiet and functional. Navigation is a single horizontal bar of uppercase 12px labels with an active state shown as a solid vermilion underline spanning the full label width.
Imagery. Typography is the image. Where photography appears it is high-contrast, duotone-treated (ink + vermilion) cut-outs of hands, paper, printing plates and city signage, cropped hard to the grid edge. Content thumbnails are large flat colour fields carrying a single oversized letter or numeral. No stock people smiling at laptops, no illustration for its own sake.
Readability rule. Headlines, wordmarks, labels, numbers, card 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 them. Imagery, decoration and motion may be cropped, bled, rotated or overlapped freely. Tickers and marquees may cross the viewport edge by design, provided every item becomes fully readable as it passes.
The Captik poster wall. The public entry is a full-viewport poster, not a hero band. The word CAPTIK is set in Anton at clamp(56px, 13vw, 200px) and stacked across three lines that fill the width edge to edge. The middle line is reversed out of a solid vermilion #E0311E block that bleeds off the right edge at every breakpoint. Beneath it, flush-left, sits a single 19px Archivo line of plain talk — "A site you publish, and a room behind it where you edit it" — and one rectangular ink-bordered button. A thin ticker band of the site's own section names runs along the bottom of the viewport in yellow #F5C518 on ink.
The composition is type-first and asymmetric: no centred stack, no hero image, no gradient. The same poster logic carries into Content, where section heads sit on a full-column 2px ink rule with a 12px uppercase label and an outlined-stroke numeral at the far right, and content cards flip their entire colour field from paper to vermilion on hover instead of lifting or shadowing. The Site Editor deliberately breaks the poster register: an ink-grey chrome frame around a pure white paper canvas, block labels in uppercase Archivo, a hard 2px rule between rail and canvas — the tool looks like a print layout desk, not a dashboard.
Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat
Landing Hero Motion Brief
prefers-reduced-motion all reveals become instant and the ticker becomes a static wrapped row of section names, each fully readable.prefers-reduced-motion, all reveals become instant and the ticker becomes a static wrapped row so every item can be brought fully into view. Rationale: expressive motion must not block access to content.frontend, backend, database). Kubernetes is not required by the current deployment shape.No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!