Screenshot Index & Specifications
Every screenshot referenced in the guide, with file naming, mark-up standards, and capture instructions.
Screenshot Index & Specifications
A single source of truth for every screenshot referenced in the user guide. Use this to plan shoots, brief designers, and verify completeness.
⚠️ Note: The UI mock gallery → provides pixel-perfect HTML/CSS replicas of all major screens as an immediate visual reference. The specs below describe what real screenshots should capture when you're ready to replace the mocks with production screenshots.
Screenshot Conventions
File Naming
{section-number}-{sequence}-{short-name}.png
Examples:
00-01-feature-map.png04-13-streaming.png08-09-mapping-dialog.png
Storage Location
docs/user-guide/
├── screenshots/
│ ├── 00-overview/
│ ├── 01-getting-started/
│ ├── 02-subscription-billing/
│ ├── 03-onboarding-create-worker/
│ ├── 04-chat-ai-agent/
│ ├── 05-spaces-projects/
│ ├── 06-mail/
│ ├── 07-calendar-schedule/
│ ├── 08-lead-hub/
│ ├── 09-toolhub-integrations/
│ ├── 10-settings/
│ ├── 11-account-security/
│ └── 12-troubleshooting-faq/
Mark-up Standards
-
Color palette:
- Red
#ef4444for primary callouts (the most important things users must see). - Blue
#3b82f6for secondary labels (supporting information). - Green
#10b981for success states. - Amber
#f59e0bfor warnings and "caution" labels. - Grey
#9ca3affor read-only / disabled / placeholder states.
- Red
-
Typography: Sans-serif, 14–16 pt for callouts, bold for emphasis.
-
Shapes: Rounded rectangles for callout boxes, solid lines for arrows, dashed lines for "what would happen" arrows.
-
Cropping: Crop tightly to the relevant area. For full-screen captures, ensure the browser chrome (URL bar, dev tools) is hidden or irrelevant.
-
Resolution: 2× pixel ratio for retina-quality. Minimum width 1280 px.
State Requirements
- Use real production data where possible (real projects, real names) to look authentic.
- For sensitive content, use clearly fake data (e.g.
nora@ai.allorc.comis fine, but never include a real customer's email). - For light + dark mode coverage, capture both if the feature is theme-sensitive.
The Full Screenshot List
Format:
{file} — {description} — {mark-up callouts}
Section 00 — Overview
| File | Description | Mark-up |
|---|---|---|
00-01-hero.png |
The /chat view in default empty state, with sidebar fully expanded. |
1) Top bar (worker name, Openloop, history, breadcrumb). 2) Sidebar sections (Workspace / Management / Spaces). 3) Chat input bar (attach, model, send). 4) Right edge (Settings, Logout). |
00-02-feature-map.png |
A 3×2 collage of feature screens: Chat, Mail, Calendar, Lead Hub, Toolhub, Settings. | Title each tile. |
00-03-three-concepts.png |
Spaces page with one expanded space, one project expanded, Context Drawer open on Teams. | Numbered labels: 1. Space, 2. Project, 3. Worker. |
Section 01 — Getting Started
| File | Description | Mark-up |
|---|---|---|
01-01-landing-gate.png |
Browser showing / redirecting to /gate. |
Annotation: "Visiting / → auto-redirected to /gate". |
01-02-signup-form.png |
Empty signup form. | Labels on each field + Create button. |
01-03-signup-validation.png |
Signup with too-short password and mismatched confirm. | Red highlights on error messages. |
01-04-verify-check-email.png |
/verify-email in check-email state with sample inbox. |
Envelope icon, Resend button, email button. |
01-05-verify-success.png |
/verify-email success state. |
Green check + countdown. |
01-06-subscribe-card.png |
/subscribe pricing card. |
Price block, feature checklist, primary button. |
01-07-stripe-checkout.png |
Stripe Checkout (test mode). | Order summary, email field, Subscribe button. |
01-08-success-loading.png |
/success verifying-payment spinner. |
Spinner label. |
01-09-success-redirect.png |
/success green check + countdown. |
Green check label. |
01-10-onboarding-form.png |
Empty onboarding form. | Worker name, email prefix, Create button. |
01-11-onboarding-progress.png |
Progress overlay mid-flight (step 2 active). | Active step spinner, completed checks. |
01-12-onboarding-done.png |
Lottie check + "Worker Created!" | Big green label. |
01-13-chat-first-message.png |
Chat with one user message and one worker reply. | Bubble types, input bar, top bar buttons. |
01-14-chat-tool-call.png |
Chat with a tool call mid-execution. | Tool card label. |
Section 02 — Subscription & Billing
| File | Description | Mark-up |
|---|---|---|
02-01-subscribe-card-usd.png |
/subscribe with USD price. |
Price label. |
02-02-subscribe-card-inr.png |
/subscribe with INR price. |
Price label. |
02-03-button-states.png |
Four side-by-side subscribe cards with different button labels. | Captions above each. |
02-04-checkout-redirect.png |
Two frames: Allorc card → Stripe checkout. | Arrow with caption. |
02-05-success-flow.png |
Two frames: spinner → green check. | Arrow with caption. |
02-06-success-error.png |
/success error state. |
Support email label. |
02-07-canceled.png |
/canceled page (light + dark). |
Try Again button. |
02-08-stripe-portal.png |
Stripe Customer Portal subscription card. | Subscription card label. |
02-09-recovery-banner.png |
Settings → Subscription past_due banner. | Banner + button. |
02-10-expired-modal.png |
SubscriptionExpiredModal blocking the app. | Title + button. |
02-11-usage-section.png |
Settings → Usage & Billing. | Progress bar, cycle dates, Manage billing. |
02-12-credits-exhausted.png |
Chat with credits-exhausted alert. | Alert + Upgrade button. |
02-13-stripe-promo-field.png |
Stripe Checkout with promo code entered. | Discount line. |
02-14-stripe-invoices.png |
Stripe portal invoice history. | PDF download icon. |
Section 03 — Onboarding (Create Worker)
| File | Description | Mark-up |
|---|---|---|
03-01-onboarding-form.png |
Empty onboarding form. | Name, email prefix, Create button. |
03-02-form-validation.png |
Form with email prefix error. | Error message. |
03-03-progress-step1.png |
Progress overlay at step 1. | Active step, future steps grey. |
03-04-progress-step2.png |
Progress overlay at step 2. | Step 1 done, step 2 active. |
03-05-progress-step3.png |
Progress overlay at step 3. | Steps 1+2 done, step 3 active. |
03-06-progress-done.png |
Lottie check + caption. | Big green label. |
03-07-resume-banner.png |
Form with yellow resume banner. | Banner. |
03-08-resume-progress.png |
Progress overlay with steps 1–2 done, step 3 active. | Annotation: "Resumed flow". |
03-09-step-error.png |
Progress overlay with step 2 in error. | Error + Retry. |
03-10-after-redirect.png |
Empty chat after redirect. | Worker name in top bar. |
03-11-agent-settings.png |
Settings → Agent with model dropdown open. | Name, email (read-only), model. |
Section 04 — Chat / AI Agent
| File | Description | Mark-up |
|---|---|---|
04-01-chat-overview.png |
Clean chat view with 1 user + 1 worker message. | Four-area brackets. |
04-02-conversation-bar.png |
Close-up of conversation bar. | Attach, model, send. |
04-03-attached-files.png |
Conversation bar with PDF and CSV attached. | Chip labels. |
04-04-pdf-preview.png |
Worker reply with citation card. | Citation label. |
04-05-streaming.png |
Worker message mid-stream. | Status text, partial markdown. |
04-06-tool-call.png |
Tool call card mid-execution. | Card label. |
04-07-tool-completed.png |
Tool call completed + worker reply. | Green check, reply. |
04-08-history-modal.png |
Chat History Modal open. | Search bar, thread rows. |
04-09-thread-switcher.png |
Top bar with two thread tabs. | Active/inactive tabs. |
04-10-openloop.png |
Openloop panel open with entries. | Bell, status badges, filters, count. |
04-11-reasoning-block.png |
Worker message with reasoning block. | Block label, chevron. |
04-12-plan-block.png |
Worker message with plan (steps). | Step status icons. |
04-13-sources.png |
Worker message with sources block. | Source links. |
04-14-error-retry.png |
Worker message with error + Retry. | Banner, button. |
04-15-credits-exhausted.png |
Chat with credits-exhausted alert. | Alert + Upgrade. |
04-16-env-gate.png |
Chat blocked by env gate. | Status, Retry. |
04-17-voice-mode.png |
Conversation bar in voice mode. | Mic, waveform. |
Section 05 — Spaces, Projects, Skills
| File | Description | Mark-up |
|---|---|---|
05-01-spaces-list.png |
/spaces with two spaces. |
+ New space, counts, active indicator. |
05-02-create-space.png |
New space dialog. | Field, Create button. |
05-03-projects-list.png |
/spaces/projects with two project cards. |
+ New project. |
05-04-create-project.png |
New project dialog. | Name, description fields. |
05-05-creation-status.png |
Project creation status mid-flight. | Step statuses. |
05-06-creation-done.png |
Creation done with Upload / Start onboarding CTAs. | Both CTAs. |
05-07-sidebar-expanded.png |
Sidebar with project expanded. | Sub-actions. |
05-08-context-drawer.png |
Context Drawer on Files tab. | Tabs, + New File, file row. |
05-09-teams-tab.png |
Context Drawer on Teams tab. | Roles, + Invite. |
05-10-customers-tab.png |
Context Drawer on Customers tab. | Search, + New Customer. |
05-11-project-settings.png |
Project Settings dialog. | Name, description, Skills, Delete. |
05-12-skills-list.png |
Project Settings → Skills list. | Skill rows, + Add. |
05-13-add-skill.png |
Add Skill modal with editor. | Purpose, body, Save. |
05-14-env-gate.png |
Project Env Gate blocking a page. | Status, Retry. |
05-15-audit-log.png |
Audit log with events. | Status badges, tool calls. |
05-16-workflow.png |
Project workflow Mermaid diagram. | Nodes, arrows. |
05-17-delete-dialog.png |
Delete confirmation dialog. | Text field, disabled Delete button. |
Section 06 — Mail
| File | Description | Mark-up |
|---|---|---|
06-01-mail-sidebar.png |
Sidebar with Mail expanded. | Inbox, Sent. |
06-02-inbox.png |
Inbox with 5 threads. | Unread row, click hint. |
06-03-thread.png |
Open thread with 3 messages. | Action bar, reply editor. |
06-04-reply-editor.png |
Close-up of reply editor. | Formatting buttons, Send. |
06-05-sent.png |
Sent folder. | Row click hint. |
06-06-compose.png |
Compose modal. | Fields, Send. |
06-07-forward.png |
Forward modal. | Quoted text, To field. |
06-08-mail-badge.png |
Sidebar with unread badge. | Badge, annotation. |
06-09-outbound-usage.png |
Settings → Mail Outbound. | Progress bar, limit. |
06-10-limit-reached.png |
Compose with Send disabled. | Banner, disabled button. |
06-11-search.png |
Inbox with search query. | Search bar, filters. |
06-12-openloop-mail.png |
Openloop with email entries. | Email icons, status. |
06-13-sent-email.png |
A sent email in a third-party client. | From, signature. |
Section 07 — Calendar / Schedule
| File | Description | Mark-up |
|---|---|---|
07-01-schedule-buckets.png |
Schedule with items in each bucket. | Bucket labels. |
07-02-add-menu.png |
Add Schedule Menu open. | Type options. |
07-03-add-task.png |
Add Task modal. | Field labels. |
07-04-bucket-movement.png |
Before/after of item moving buckets. | Arrow + caption. |
07-05-item-detail.png |
Item detail panel. | Edit, Mark done, Delete. |
07-06-mark-done.png |
Task with checkbox highlighted. | Checkbox, arrow. |
07-07-recurring.png |
Add Meeting with Repeat dropdown. | Repeat options. |
07-08-project-filter.png |
Schedule with project filter. | Filter, project. |
07-09-timeline.png |
Timeline view horizontal. | Items, current time. |
07-10-auto-refresh.png |
Before/after of schedule updating. | Arrow + caption. |
07-11-types-comparison.png |
Row of 5 example items. | Type labels. |
07-12-worker-creates.png |
Chat where worker creates a task. | Tool card. |
Section 08 — Lead Hub
| File | Description | Mark-up |
|---|---|---|
08-01-lead-hub-tabs.png |
Lead Hub with Find Leads active. | Tab labels. |
08-02-find-leads.png |
Find Leads with filters and results. | Mode toggle, filters, count, checkbox, Add To. |
08-03-people-filters.png |
People filter categories. | Filter labels. |
08-04-company-filters.png |
Company filter categories. | Filter labels. |
08-05-results-table.png |
Result table with selection. | Header checkbox, row checkbox, count, Add To. |
08-06-add-to.png |
Add To dropdown. | Space, project, Add. |
08-07-last-refreshed.png |
"Last refreshed" timestamp. | Timestamp label. |
08-08-csv-download.png |
Download CSV icon. | Icon label. |
08-09-upload-tab.png |
Upload tab with dropzone. | Dropzone. |
08-10-file-dropped.png |
File dropped with preview. | Preview label. |
08-11-mapping-dialog.png |
Mapping dialog. | Source, target, required asterisk, save template. |
08-12-save-template.png |
Save template dialog. | Name, Save. |
08-13-preview.png |
Confirmation step with preview. | Row labels, selectors. |
08-14-add-success.png |
Success banner. | Banner. |
08-15-state-flow.png |
Lead state diagram. | Arrows between states. |
08-16-debounce.png |
Filter with "Searching…" indicator. | Indicator. |
08-17-provider-error.png |
Provider error banner. | Banner, Retry. |
Section 09 — Toolhub
| File | Description | Mark-up |
|---|---|---|
09-01-toolhub.png |
Toolhub grid. | Cards, status badges, Install. |
09-02-install-wizard.png |
Wizard at step 2. | Step indicator, OAuth, permissions, Next. |
09-03-install-success.png |
Wizard at step 4 success. | Green check, Finish. |
09-04-installed-info.png |
Installed app detail. | Connected as, permissions, test, uninstall. |
09-05-tools-catalog.png |
Tools catalog for Google Calendar. | Tool labels. |
09-06-triggers.png |
Triggers list. | Source, action, + New. |
09-07-trigger-wizard.png |
Trigger wizard step 1. | Event source, Next. |
09-08-featured-apps.png |
3×2 grid of featured apps. | App cards. |
09-09-reachstream-connect.png |
ReachStream disconnected state. | API key, Connect. |
09-10-reachstream-connected.png |
ReachStream connected state. | Test, Disconnect. |
09-11-uninstall-confirm.png |
Uninstall confirmation. | Warning, Confirm. |
09-12-scopes.png |
Permission scopes. | Scope chips. |
09-13-app-states.png |
Four app states side by side. | Captions above each. |
09-14-provider-down.png |
Tool call with 503 error. | Error label. |
Section 10 — Settings
| File | Description | Mark-up |
|---|---|---|
10-01-settings-modal.png |
Settings modal with left rail. | Section labels. |
10-02-agent-section.png |
Settings → Agent. | Name, email, model. |
10-03-model-catalog.png |
Model catalog side panel. | Tier labels. |
10-04-integrations.png |
Settings → Integrations (ReachStream). | API key, Connect. |
10-05-subscription.png |
Settings → Subscription active. | Plan, status, renewal, Manage billing. |
10-06-usage-billing.png |
Settings → Usage & Billing. | Progress bar, cycle, days remaining. |
10-07-usage-warning.png |
Usage & Billing at 100%. | Banner, Upgrade. |
10-08-mail-outbound.png |
Settings → Mail Outbound. | Bar, cycle. |
10-09-storage.png |
Settings → Storage. | Total, per-project rows, quota. |
10-10-storage-over-quota.png |
Storage with one project over. | Quota-exceeded label. |
10-11-personalization.png |
Personalization "Coming soon". | Card. |
10-12-schedules.png |
Schedules "Coming soon". | Card. |
10-13-account.png |
Account "Coming soon". | Card. |
10-14-deletion-banner.png |
Login with deletion banner. | Banner. |
10-15-settings-page.png |
/settings page with cards. |
Card labels. |
10-16-recovery-banner.png |
Subscription past_due. | Banner, button. |
10-17-theme-toggle.png |
Top bar with theme toggle. | Toggle. |
Section 11 — Account & Security
| File | Description | Mark-up |
|---|---|---|
11-01-signup.png |
Signup form empty. | Field labels. |
11-02-signup-error.png |
Signup with errors. | Error highlights. |
11-03-signup-closed.png |
"Sign-ups closed" message. | Message. |
11-04-verify-states.png |
Four-frame composition of verify states. | State names. |
11-05-resend-cooldown.png |
Resend countdown. | Cooldown. |
11-06-login.png |
Login form empty. | Fields, button. |
11-07-login-error.png |
Login with error. | Error. |
11-08-login-unverified.png |
Login with unverified error. | Link. |
11-09-login-deletion-banner.png |
Login with deletion banner. | Banner. |
11-10-forgot.png |
Forgot password form. | Field, button. |
11-11-reset.png |
Reset password form. | Fields, button. |
11-12-reset-success.png |
Reset success. | Back to login link. |
11-13-cookie-banner.png |
Cookie banner (if shown). | Controls. |
11-14-2fa-coming-soon.png |
2FA coming soon card. | Card. |
11-15-deletion-banner.png |
Deletion banner. | Banner. |
11-16-deletion-confirm-email.png |
Sample confirmation email. | Date. |
11-17-security-overview.png |
Security practices list/table. | User-facing items. |
11-18-phishing-example.png |
Mock phishing email. | Suspicious URL. |
Section 12 — Troubleshooting
| File | Description | Mark-up |
|---|---|---|
| (TBD as needed) | Each FAQ entry that needs visual support. | n/a |
Production Process
When to Capture
- Capture screenshots after each feature ships, before the docs go out.
- Capture both light and dark mode for any feature that's theme-sensitive.
- Use the staging environment for captures (so you don't expose real customer data).
Tools
- Browser: Chrome with the GoFullPage extension for full-page captures.
- Mock data: Use the platform's own seed data (Spaces named "Acme Inc." and "Side project", etc.).
- Mark-up: Figma, Photoshop, or any image editor. Keep mark-up layers separate for re-use.
Verification
For each shipped feature, the docs author checks:
- Are all referenced screenshots present?
- Do the mark-ups still match the current UI?
- Are file sizes reasonable (< 500 KB each, ideally < 200 KB)?
If the UI has changed, re-capture before re-publishing the docs.