mygate-com is a working community-management web application for gated residential societies, modelled on the MyGate-style product category: residents pre-approve and track visitors at the gate, security guards verify visitors and keep the gate log, residents raise complaints that community admins review and resolve, admins publish notices that residents read, and residents view their dues while admins track dues collection across the community. The product serves three human roles — Resident, Security Guard, and Community Admin / Management Committee — each with a role-appropriate account and a role-scoped working area.
The requester asked for a directly working build rather than a planning artefact; this document records the requirements that build must satisfy. The audience is neighbours, gate staff, and committee volunteers in Indian residential communities, not enterprise IT teams, and the product's tone and interface reflect that.
mygate-com is delivered as a first-party web application with application-owned identity. Three runnable services make up the current system:
The frontend calls the backend over HTTP; the backend reads and writes MariaDB. No other services are required for the current scope.
Actors. The active human personas are Resident, Security Guard, and Community Admin / Management Committee. All three are first-party application users with self-service accounts. There are no system, provider, or external actors in the current scope.
Accepted behavior. Self-service sign-up with role selection, returning login, and role-appropriate scoping; resident visitor gate requests with status tracking; guard lookup of gate requests and recording of entry and exit in the gate log; resident complaint submission and status tracking; admin complaint review and resolution; admin notice publishing and resident notice reading; resident dues viewing and admin dues-collection tracking.
Exclusions. The current scope is limited to the eleven pages and the workflows above. It does not include amenity or clubhouse booking, accounting/ERP functions, polls and discussions, classifieds, AI-assisted policy answers, e-Intercom calling, payment gateway integration, or automated escalation matrices.
Removed from scope
mygate-com is a first-party application: the community app itself owns the accounts, the gate workflow, the complaint workflow, the notice board, and the dues records. Nothing in the current scope is delegated to a provider surface or an external destination, and nothing is delivered headlessly.
Access is split into two boundaries. The Landing page is anonymously reachable and explains the product to visitors who have not signed in. Login and Sign Up are also anonymously reachable, because a protected destination cannot own the interaction that establishes access to itself. Every other page — Gate Requests, Gate Log, Complaints, Complaint Management, Notices, Notice Management, Dues, and Dues Collection — requires sign-in and the appropriate role, and is scoped so each role sees only its own areas.
Identity is application-owned and established self-service: a person chooses Resident, Security Guard, or Community Admin / Management Committee at sign-up, and returning users verify at Login. Identity provides role-appropriate scoping of the working areas; it does not introduce any finer-grained permission model beyond the three roles.
The current delivery horizon covers the eleven pages and the workflows described in this document. Amenity booking, accounting/ERP, community discussion features, AI-assisted policy answers, e-Intercom fallback calling, payment-gateway settlement, automated escalation, and dues-based visitor blocking are outside the current horizon and are not part of any current page.
FR-1 — Working community app. As a user of mygate-com I should have a working community-management application covering the gate, complaint, notice, and dues workflows so that the community's day-to-day operations run in one place. (explicit)
FR-2 — Self-service sign-up with role selection. As an anonymous visitor I should be able to create an account by choosing Resident, Security Guard, or Community Admin / Management Committee and providing my account details, so that I can enter the area appropriate to my role. (required_inference)
FR-3 — Returning login verification. As a returning user I should sign in with my credentials before accessing any protected area, so that my role-scoped work is protected. (required_inference)
FR-4 — Role-appropriate scoping. As a signed-in user I should see only the areas appropriate to my role, so that each role's work is separated. (required_inference)
FR-5 — Resident creates a visitor gate request. As a Resident I should create a gate request for a visitor so that the guard can verify the visit at the gate. (explicit)
FR-6 — Resident views gate activity. As a Resident I should view the status of my gate requests, including any passcode issued for an approved visitor, so that I know whether my visitor may enter. (explicit)
FR-7 — Guard verifies visitors at the gate. As a Security Guard I should look up a visitor's gate request so that I can verify the visit before allowing entry. (explicit)
FR-8 — Guard maintains the gate log. As a Security Guard I should record a visitor's entry and exit so that the gate log reflects every movement. (explicit)
FR-9 — Resident raises a complaint. As a Resident I should submit a complaint with a description so that the community admin can address the issue. (explicit)
FR-10 — Resident follows complaint status. As a Resident I should follow the status of my complaints so that I know whether the issue is being handled or resolved. (explicit)
FR-11 — Admin manages and resolves complaints. As a Community Admin / Management Committee member I should review resident complaints and update their status to resolved so that issues are closed out. (explicit)
FR-12 — Admin publishes notices. As a Community Admin / Management Committee member I should publish a notice with a title and body so that residents receive community information. (explicit)
FR-13 — Resident reads notices. As a Resident I should read notices published by the community admin so that I stay informed. (explicit)
FR-14 — Resident views dues. As a Resident I should view my dues and their payment status so that I know what I owe. (explicit)
FR-15 — Admin tracks dues collection. As a Community Admin / Management Committee member I should view dues collection status across residents so that I can see what has been collected and what remains. (explicit)
Product context. A Resident lives in the gated community and uses mygate-com from a phone or laptop to handle the parts of community life that touch them personally: getting visitors through the gate, reporting problems, reading what the committee has announced, and knowing what they owe.
Primary goal. Get visitors through the gate without friction, get complaints tracked to resolution, and stay informed about notices and dues.
Distinct responsibilities. The Resident is the only role that creates visitor gate requests and the only role that submits complaints. The Resident is the originator of the gate request that the guard later verifies, and the originator of the complaint that the admin later resolves. The Resident also reads notices and views dues — both are read-only for this role.
Inputs and decisions. Visitor name and visit details when creating a gate request; a complaint description when raising an issue; the decision to check a request's status or passcode before a visitor arrives.
Interactions with other participants. The Resident's gate request is the object the Security Guard looks up and acts on at the gate; the Resident sees the resulting status. The Resident's complaint is the object the Community Admin reviews and resolves; the Resident sees the resolved status. The Resident reads notices the admin publishes and views dues the admin tracks.
Observable success. Gate requests show a clear status and passcode; complaints move from new to resolved; notices are readable; dues and their status are visible.
Product context. A Security Guard staffs the gate of the community and uses mygate-com at the gate to check incoming visitors against resident approvals and to record every movement.
Primary goal. Verify every visitor against a resident's gate request and capture every entry and exit in the gate log.
Distinct responsibilities. The Security Guard is the only role that looks up gate requests for verification and the only role that records entry and exit. The guard is the indispensable participant on the other side of the Resident's gate request: the request is not usable until the guard verifies it and records the movement.
Inputs and decisions. The visitor's identifying details for lookup; the decision to record entry or exit once the request is verified.
Interactions with other participants. The guard acts on gate requests the Resident created and produces the gate-log entries and status changes the Resident sees.
Observable success. Every lookup resolves to a request or a clear empty result; every movement is recorded in the gate log with direction and timestamp.
Product context. A Community Admin / Management Committee member volunteers to run the community's shared operations and uses mygate-com to close out resident complaints, publish notices, and see the state of dues collection.
Primary goal. Close complaints out, get notices to residents, and keep dues status visible.
Distinct responsibilities. The Community Admin is the only role that updates complaint status to resolved, the only role that publishes notices, and the only role that views dues collection across residents. The admin is the indispensable participant on the other side of the Resident's complaint and the source of the notices the Resident reads.
Inputs and decisions. The decision to resolve a complaint; the notice title and body to publish; the review of dues status across residents.
Interactions with other participants. The admin acts on complaints the Resident raised and produces the resolved status the Resident sees; the admin publishes notices the Resident reads; the admin views dues the Resident also views from their own side.
Observable success. Complaints reach resolved; notices appear on the residents' Notices page; dues collection status is visible across residents.
The muse is Pablo Stanley, and the headline is "Your society, running smoothly" — warm, human community software with modular illustration, big radii, and sunny primaries on cream.
Colour tokens (light mode).
| Role | Token | Hex |
|---|---|---|
| Page ground | background | #FBF3E4 |
| Card surface | surface | #FFFFFF |
| Text | ink | #1F2A44 |
| Primary action | terracotta | #E4572E |
| Secondary signal (resolved / inside / approved, guard-side UI) | teal | #2F9E8F |
| Labels and metadata | muted clay-grey | #6E6A5E |
| Status support — approved | mint | #D8F0E6 |
| Status support — pending | butter | #FBE7B2 |
| Status support — overdue | blush | #F8D9CF |
Terracotta is the single hot action colour — gate approvals, pay dues, primary buttons — used on roughly 10% of surface. Teal is the secondary signal for resolved/inside/approved states and guard-side UI. Status chips use the pastel supports with ink text for contrast. No blue or indigo primary buttons anywhere.
Typography. Headings: Bricolage Grotesque at 700–800, tight tracking (-0.02em), sentence case. Body and UI: DM Sans at 400/500, 16–18px reading size, 1.55 line-height. Scale is 1.333 modular: 64/48/36/27/20/18/16/14. Hero display clamp(40px, 9vw, 96px); section headings clamp(28px, 4vw, 44px); card titles 20px; body 16px; labels 14px. Inter, Roboto, and system-ui are not used for headings or body.
Shape language. Big continuous radii — 24px cards, 999px pills for buttons and chips; sticker-like circular badges; soft offset shadows 0 6px 0 rgba(31,42,68,0.08) instead of blur glows; hand-drawn underline squiggles beneath key words; modular character illustrations built from simple geometric primitives. No sharp corners, no glassmorphism, no hairline-only borders.
Spacing rhythm. 12-column grid with 24px gutters on the cream canvas; white rounded cards float on the ground with the offset shadow.
Imagery. Pablo Stanley-style modular vector people: a resident with a phone, a guard with a clipboard, an admin with a megaphone, drawn in flat shapes with terracotta, teal, butter, and blush fills on cream. Hand-drawn accents — squiggle underlines, small stars, dotted paths connecting the three role cards. Status badges as stickers. No stock photography in the hero; small real photos only inside complaint attachments.
Section colour-blocking. Terracotta band for Visitor Management, teal band for Helpdesk, butter band for Dues — each with its own illustrated section opener.
The public entry is an asymmetric cream first screen. The left seven columns carry the oversized Bricolage Grotesque headline "Your society, running smoothly" at clamp(40px, 9vw, 96px) with a hand-drawn terracotta squiggle under "smoothly", and beneath it a single terracotta pill CTA "Get started" plus a text link "I already have an account". The right five columns hold a stacked, slightly rotated trio of white role cards — Resident, Guard, Admin — each with a modular character illustration, a bold card title, and one line of plain copy ("Approve visitors from the sofa", "Log every entry at the gate", "Close complaints and collect dues"), connected by a dotted hand-drawn path. There is no gradient blob, no centred stack, and no blue button anywhere.
Below the hero, scrolling the Landing page feels like walking through rooms: colour-blocked bands — terracotta for Visitor Management, teal for Helpdesk, butter for Dues — each with its own illustrated section opener. Sticker-style status chips (mint "Approved", butter "Pending", blush "Overdue") with 999px radii and a 2px ink outline are used identically across gate requests, complaints, and dues so state is learnable once and reused everywhere. The app interior uses a role-aware shell: a persistent left rail on desktop that swaps its items by role with a small character illustration at the top, collapsing to a bottom tab bar on mobile — the navigation itself tells you who you are. The Resident's Gate Requests page carries a "live gate" widget: a stack of the three most recent visitor requests with big terracotta Approve / outline Deny pills and a 6-digit passcode shown as a monospace chip, animated in with a springy stagger.
Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d
Landing Hero Motion Brief. The focal subject is the rotated stack of three illustrated role cards — Resident, Guard, Admin — joined by a dotted hand-drawn path, set against the oversized headline. The thesis: as the page settles, the three role cards spring into their stacked positions in sequence and the dotted path draws between them, so the visitor reads the three roles as one connected community; the terracotta squiggle under "smoothly" draws itself last. The motion vocabulary is springy but purposeful — 180–280ms with a soft overshoot cubic-bezier(0.34, 1.56, 0.64, 1) on chips, status changes, and card entrances; character illustrations do a small nod or wave on first view of a section; hover lifts a card by 3px and shifts its offset shadow; gate-approval buttons give a satisfying press. The composed first frame shows the headline, CTA, and the three role cards already in place with the dotted path faintly visible, so nothing is missing before motion begins. The reduced-motion state shows the same composed arrangement with instant state changes and no transforms.
font-size: clamp(...) with its mobile size) to fit; no other element covers any part of them. Imagery and decoration may be cropped, bled, rotated, or overlapped as the direction asks, as long as they cover no readable text or control.prefers-reduced-motion, all motion falls back to instant state changes with no transforms, and any moving or scrollable content provides a usable static arrangement in which each item can be brought fully into view.frontend service).backend service).database service).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!