System Requirements Document for teal-zip

1. Introduction

The user wants an application to be created and chose the project name teal-zip. The user asked whether ZIP files can be read and whether the assistant can crawl the user's local laptop where their application project is located. The user attached digisko-db.txt and .gitignore.

2. System Overview

teal-zip is the project name selected for an application the user wants created. The delivery context includes the user’s questions about reading ZIP files and crawling a project on their local laptop, plus the attached digisko-db.txt and .gitignore files.

The requesting user is the only human actor established by the evidence. The assistant is a supporting delivery actor for reviewing materials supplied in the conversation. The laptop and any existing local project are referenced source environments, not confirmed actors or accessible systems. The evidence does not establish direct laptop crawling, filesystem access, deployment access, or the contents of any ZIP archive.

The supplied files are project evidence only. Their contents, schema, technology, workflows, pages, components, and behavior have not been established here. The question about reading ZIP files does not define ZIP upload, extraction, browsing, or processing as application functionality.

No additional roles, workflows, quantities, states, integrations, visual or motion requirements, implementation stack, or page catalog are established by this evidence. Product scope and boundaries beyond the selected project name and supplied project materials remain unspecified. Direct access to local files is not assumed; any project material must be explicitly provided through an available delivery channel.

Defaults: no product behavior, access method, technology choice, page coverage, or design behavior is defined where the evidence is silent.

3. Functional Requirements

No additional details specified.

4. User Personas

No additional details specified.

5. Core User Flows

The user wants an application created under the project name teal-zip. The recorded interaction concerns whether ZIP files can be read and whether the assistant can inspect a project located on the user’s local laptop. The user attached digisko-db.txt and .gitignore. No further product behavior, access model, file-processing rules, or completion criteria are established by this evidence.

1. Ask about ZIP-file reading and provide project materials
   • Actor: User.
   • Trigger: The user wants an application created and asks whether ZIP files can be read.
   • Actions: The user identifies the project as teal-zip and provides the recorded attachments: digisko-db.txt and .gitignore.
   • Handoff: The materials are supplied to the assistant for the ongoing project discussion.
   • Result: The project name and supplied files are available in the conversation as project evidence. The evidence does not establish whether any ZIP file was read or processed.
   • Failure and recovery: No ZIP-processing failure or recovery behavior is established. Any material not supplied in the conversation remains outside the recorded evidence.

2. Ask about inspecting the local laptop project
   • Actor: User.
   • Trigger: The user explains that the application project is located on their local laptop and asks whether the assistant can crawl it.
   • Actions: The user requests clarification about local-laptop inspection capability.
   • Handoff: The question is directed to the assistant; the evidence does not establish that local-laptop access or crawling occurred.
   • Result: The capability question is recorded for clarification. No inspection result, discovered file list, or local-access behavior is established.
   • Failure and recovery: No failure or recovery procedure for local inspection is established by the evidence.

Necessary defaults: No additional defaults are established. The evidence does not define a complete application workflow, persona catalog, page catalog, login sequence, permissions model, ZIP contents or limits, parsing behavior, implementation stack, or delivery criteria.

6. Visuals Colors and Theme

[Design proposal; unspecified choices are defaults.]

Muse: Zaha Hadid. Headline: “Your Supabase project, under your hand.”

teal-zip is a dark, architectural control surface for a solo Application Owner configuring and operating a private, self-hosted Supabase-backed application. Its visual language is fluid parametric precision: continuous swept curves, asymmetric composition, generous negative space, and instrument-like data treatment rather than a conventional admin template.

Dark-mode tokens: background #0E1416; surface #161D20; primary, live state and focus #0FBFB0; rare identity accent #D9B36A; muted metadata #7C8A8C; hairlines and structural guides #2A3538; primary text #F2F5F4. Maintain approximately 80% charcoal, 15% pearl, 4% teal and 1% gold. Gold is reserved for the owner identity chip or the single most important number, never buttons or body copy. Body text on surfaces remains #F2F5F4; muted text is limited to labels and metadata.

Use Jost for headings and body. Headings use weights 300–400, sentence case, -0.02em tracking and 1.02–1.08 leading. Micro-labels use Jost 500 at 11px, uppercase, with 0.16em tracking. Body text is 17px desktop and 16px mobile with 1.6 leading. Display sizes use clamp(44px, 9vw, 132px), clamp(32px, 5vw, 64px), and clamp(24px, 3vw, 34px); UI scale follows a 1.25 modular rhythm. Numerals are tabular at 15px.

Continuous curvature governs the system: panels use varied non-uniform radii such as 28px 28px 28px 4px; section boundaries use SVG arcs or large-radius masks; buttons are elongated capsules with 2px teal strokes, with the filled teal capsule reserved for the primary action. Cards use 1px #2A3538 borders and a subtle inset top highlight. Diagonal 1px #2A3538 guide lines may run behind content at 12–18 degrees. Use an asymmetric 12-column grid with 96px margins at 1280px, 40px at 768px and 20px at 375px. Keep every readable text element, control and data value fully within its container and viewport.

The public entry is a split architectural hero: the left 58% contains the oversized headline, a 3px teal arc beneath “hand,” supporting copy, and the “Enter workspace” and “Configure connection” controls. The right 42% contains a full-bleed generative SVG field of nested 2px teal curves on charcoal, with a compact panel showing the live project reference and teal connection-status dot. Below, the Project surface presents project reference, organization ID, application user and connection state as an instrument panel. Avoid photography, stock imagery, blue or indigo primaries, violet-to-pink gradients, centered SaaS hero composition, identical card grids, and straight full-width dividers.

7. Signature Design Concept

[Design proposal; unspecified choices are defaults.]

Signature Design Concept: teal-zip as a swept, self-hosted control surface. The interface treats Supabase credentials and project configuration as an engineered instrument: a pearl-and-charcoal ground, luminous teal connection signals, one gold identity moment, and architectural SVG line-work give the private technical tool a distinct material presence.

The implementable public-entry idea is a full-bleed parametric curve field bleeding from the hero’s right and lower edges. Nested teal strokes create a flowing architectural surface rather than a gradient blob; a compact instrument panel at its center presents the live project reference and connection state. The hero headline occupies the left side, while the curve field supplies depth and directional flow without covering readable content. The Project surface continues the language through ruled tabular rows, a curved vertical seam and a teal state gauge. On mobile, the composition becomes one column: the curve field forms a 180px band beneath the headline and the seam becomes a horizontal arc.

8. Interaction Model & Motion Direction

[Design proposal; unspecified choices are defaults.]

Interaction Model: Parallax Motion Tempo: cinematic Hero Dimensionality: layered_2d

Landing Hero Motion Brief: The focal subject is the full-bleed nested teal SVG curve field, paired with the live project-reference panel and status dot. Input is the accepted workspace/configuration entry action or a connection-state change; transformation is a continuous, slow architectural drift of the curve field and a single teal sweep across the relevant instrument row; outcome is a clear, confident transition toward the Supabase workspace/configuration surface. The curve form moves at 0.85x scroll speed while the headline remains at 1x. The SVG stroke loops over 24 seconds without easing theatrics, and button or row hover uses a restrained 180ms ease-out. The composed first frame shows the headline on the left, the primary CTA beneath its final line, the curved field bleeding to the right and bottom, and the live project reference centered in its compact panel.

With prefers-reduced-motion, replace the drifting SVG stroke with a static gradient arc, disable parallax, and retain the readable static instrument layout. Do not animate text or use bounce, particles or decorative kinetic type. No separate 3D scene is required; the hero is layered 2D SVG/CSS.

9. Non-Functional Requirements

No additional details specified.

10. Tech Stack

10.1 Source overview

SUPABASE_ACCESS_TOKEN=sbp_fc50adbfc104471d1cfc56bd00db2bc7ada97e29

ORG_ID=egdvnvgxwbdpbkhdmrso

APP_USER=digisko_app

APP_PASSWORD=LIbms4xgtTnUkLdHUOVmsZAY

PROJECT_REF=zwwtbhcqxacgzjitsuwb

11. Assumptions and Constraints

No additional details specified.

12. Glossary

• teal-zip — The chosen name for the application project.
• ZIP — An archive file format the user asked whether it could be read.
• Local laptop — The user’s computer containing the application project; the user asked whether it could be crawled.
• digisko-db.txt — A file attached by the user as project-related source material.
• .gitignore — A file attached by the user as project-related source material.