Surfaces
112 surfaces · 806 checks
A component vocabulary tells you what to build things from. A surface tells you what to build. Each screen or flow lists the requirements it must satisfy and the resources that help.
Onboarding & Auth
- Splash Screen · The branded launch frame that covers app initialisation and hands off to the first real screen.
- Onboarding (Mobile app) · The first-run sequence that orients a new user and collects only what the app needs before it can be used.
- Onboarding (Web app) · The guided setup that takes a newly signed-up account from empty to first meaningful action.
- Onboarding Checklist · The in-app progress checklist that keeps guiding setup after the first session, without blocking the product.
- Login (Mobile app) · The returning-user sign-in screen, optimised for biometrics and autofill rather than typing.
- Login (Web app) · The in-product authentication screen that gets an existing account back into the workspace.
- Login (Website) · The marketing-site login page, which doubles as a branded touchpoint before the user enters the product.
- Sign up · The account creation page that converts an interested visitor into a credentialed user.
- Resetting password · The recovery flow that returns a locked-out user to a working password and back to logging in.
- Verifying account · The code or link challenge that proves the user controls the contact address on the account.
- 2FA · The setup and management surface for a second authentication factor on the account.
- SSO / Enterprise login · The identity-provider path that lets an organisation authenticate its members without product-held passwords.
- Session expired / Re-authentication · The interruption that asks a still-present user to prove identity again without destroying their work.
- Permission primer · The in-app explanation shown before the OS permission dialog, so the system prompt is only fired once it will be accepted.
Monetization & Billing
- Paywall · A hard gate that blocks locked content and offers a fair, dismissible path to subscribe.
- Pricing (Website) · The public pricing page that lets a prospect self-select a plan and understand the total commitment.
- Pricing (Web app) · The in-product plan comparison that converts an active free or trial account onto a paid tier.
- Billing (Web app) · The account billing portal where a customer manages payment method, invoices and failed charges.
- Billing (Website) · The subscriber-facing billing area covering plan, payment history and the exit path.
- Billing (Mobile app) · The mobile billing screen, constrained by App Store and Play Store rules on where subscriptions can be managed.
- Making a card payment · The sequential flow from choosing a payment method to a confirmed charge and stated next steps.
- Entering promo code · The discount-entry flow that applies, reflects, errors on and removes a promotional code.
- Canceling subscription · The graceful exit that ends a paid relationship without dark patterns.
- Usage & limits · The meter that shows consumption against plan entitlements before the user hits a wall.
- Quota exceeded / Rate limited · The blocking state shown when a hard limit is reached, which must explain the limit and the fastest way back to working.
Commerce & Checkout
- Adding to cart · The flow from product variant selection to confirmed cart addition and a route back to the cart.
- Cart (Website) · The pre-checkout review where the shopper edits their order and commits to paying.
- Cart (Mobile app) · The touch-scale cart where quantity, removal and totals must all work with a thumb.
- Checkout · The payment sequence that must minimise typing, survive failure, and end in an unambiguous confirmation.
- Order status & tracking · The post-purchase surface where a buyer confirms what they bought and where it is now.
Account & Settings
- Account (Web app) · The private profile screen where a user edits their own identity and can leave the product.
- Account (Mobile app) · Private account settings covering credentials, linked accounts and destructive actions.
- Settings (Web app) · The organised home for every account-level preference, with destructive actions isolated.
- Settings (Mobile app) · The native grouped-list settings screen, which app stores also require to carry legal links.
- Notification Settings · The preference matrix that lets a user choose what they are told about and on which channel.
- Public Profile · The outward-facing identity page other users see, distinct from private account settings.
- API Keys · The credential manager where a developer creates, scopes and revokes programmatic access.
- Integrations · The catalogue where a user connects, inspects and disconnects third-party services.
- Webhooks · The outbound-event configuration where a developer subscribes an endpoint and debugs failed deliveries.
- Data export & deletion request · The self-serve surface that satisfies a user's right to take their data out or have it erased.
- Deleting account · The full account-closure flow, which must be findable, honest about consequences, and final.
Team & Administration
- Admin Panel · The org-level control room for members, settings, usage, billing and irreversible workspace actions.
- User Management · The member roster where an admin invites, re-roles and revokes access for the whole team.
- Invite · The flow that brings a new person into a workspace with the right access and a visible seat cost.
- Share & permissions · The per-object access dialog that decides who can see or change one document, project or record.
- Workspace / Organisation switcher · The control that tells a multi-tenant user which context they are in and moves them between tenants safely.
Content & Data Views
- Feed · The reverse-chronological or ranked stream that shows what is new and worth opening.
- Search Results · The results page that must let a user judge, refine and recover from a query without starting over.
- Search (Mobile app) · The mobile search screen where the keyboard, live results and filters all compete for one small viewport.
- Search (Website) · Site-wide search over content or catalogue, where sorting and relevance signals do the heavy lifting.
- Filtering items · The flow for narrowing a collection, keeping the applied constraints visible and easy to undo.
- Single Item Detail · The full record view for one object, carrying its status, attributes, history and destructive actions.
- Kanban board · The column-per-stage work view where dragging a card is the primary act of updating state.
- Timeline / Gantt View · The time-axis plan view where duration, sequence and slippage must be readable at a glance.
- Analytics · The metrics dashboard that answers what changed, over what period, and compared to what.
- Version History · The record of past states of a document, with a safe way to inspect and restore any of them.
- Data import · The onboarding-critical flow that gets a customer's existing data into the product without corrupting it.
- Bulk actions & multi-select · The multi-select mode that applies one operation to many records while keeping the blast radius visible.
- Trash & restore · The recoverable holding area that makes deletion survivable for a stated window.
Communication & Notifications
- Chat (Mobile app) · The messaging thread where keyboard behaviour and gestures decide whether the conversation feels native.
- Chat (Web app) · The in-product conversation panel where message provenance and attachments must stay legible.
- Comments · Anchored discussion attached to a specific piece of content, with a path to resolution.
- Notifications · The in-product notification centre that collects activity and lets the user clear it.
- In-App Notifications · The mobile notification inbox, distinct from system push, with grouping and swipe management.
AI & Agents
- AI chat panel · The assistant surface docked beside the product, which must show its work and stay correctable.
- Agent settings · The configuration surface that bounds what an autonomous agent may do on the user's behalf.
- AI action approval · The interrupt that puts a human in the loop before an agent takes a consequential action.
- Agent run history · The retrospective log that makes an autonomous run auditable after the fact.
Navigation & Command
- Tab Bar Navigation · The persistent bottom bar that defines a mobile app's top-level information architecture.
- Gesture navigation · The set of touch gestures a mobile app supports, and how it teaches and confirms them.
- Action Sheet · The bottom sheet that presents options or confirmations without leaving the current screen.
- In-App Browser · The embedded web view that must prove which domain the user is on before they trust it.
- Map View · The spatial browse surface where markers, permission and offline behaviour all have to hold up.
- Camera · The capture screen that requests permission in context and lets the user confirm before committing media.
- Command palette · The keyboard-summoned launcher that exposes every navigable destination and executable action in one input.
- Keyboard shortcuts overlay · The reference sheet that makes a product's keyboard model learnable in one glance.
Forms & Interaction Flows
- Multi-step form · A long input broken into stages, validated per step and reviewable before submission.
- Submitting a form · The submit-to-outcome sequence covering the loading, success and failure states of one form.
- Showing input error · The validation timing model for a single field, so the user is corrected but never interrupted.
- Saving changes · The edit-to-persisted cycle that makes it obvious whether the user's changes are stored.
- Uploading media · The file intake flow covering the drop target, constraints, progress and per-file outcome.
System & Edge States
- Empty State · The screen shown when there is nothing to show, which must distinguish new, filtered-out and broken.
- 404 · The not-found page that explains the miss and offers a way to stay on the site.
- Error boundary / 500 page · The failure surface for an unexpected server or client crash, which must not lose the user's work or their trust.
- Offline state · The degraded mode that keeps a product usable, honest and non-destructive when the network is gone.
- Maintenance · The planned-downtime page that tells users when the product will be back and where to watch.
- Force update required · The blocking gate that stops an unsupported client version from talking to an incompatible backend.
Marketing Site
- Homepage · The top-of-funnel page that has to state what the product is, for whom, and what to do next.
- Features · The capability page that translates what the product does into what the visitor can do.
- Compare · The head-to-head page that positions the product against a named competitor without losing credibility.
- Testimonials · The proof page that converts customer experience into credible, attributable evidence.
- Waitlist · The pre-launch capture page that converts interest into a queued, incentivised signup.
- Affiliate · The partner-programme page that explains the economics clearly enough to recruit promoters.
- Referral flow · The in-product loop where an existing user invites a friend and both sides get a stated reward.
Content & Publishing
- Blog · The content index that lets a reader find, filter and subscribe to the company's writing.
- Blog Post · The article page that has to hold attention, credit its author, and convert a reader onward.
- Changelog / Release notes · The dated record of what shipped, written for users rather than for the commit log.
- Press / Media · The journalist-facing page that supplies facts, assets and a named contact without an email exchange.
Company & Trust
- About · The company page that establishes why the product exists and who is behind it.
- Team · The people page that makes the company legible as a group of humans.
- Careers · The hiring page that sells the company to candidates and routes them into open roles.
- Contact Us · The page that routes a stranger to the right channel and the right team.
- Privacy · The legal hub carrying the privacy policy, terms and cookie policy in a readable, versioned form.
- Cookie consent · The consent gate that must obtain a lawful choice without dark-patterning the visitor.
- Security · The trust page that lets a buyer's security reviewer answer their questions without a call.
- Status · The independently hosted uptime page that reports component health and live incident progress.
Help & Support
- Help Center · The self-serve documentation hub that resolves questions before they become tickets.
- FAQ · The structured question list that removes purchase and usage objections at the point of doubt.
- Contacting support · The flow from a stuck user to the right support channel with expectations set.
- API documentation · The developer reference that has to get someone from zero to a successful first call.
- Feature announcement / Product tour · The in-product introduction of something new, which must inform without hijacking the session.
- In-product feedback survey · The lightweight prompt that collects a rating or comment without derailing the user.