Less navigation
Group the product by jobs, not every record type. Contextual views reveal the detail.
Company system / Design
Design
Brand governs expression. Product governs the application. Website governs how the public story, proof and acquisition experience bring both systems together.
Design / Product
A calmer way to run the work
The visual source of truth for the next Design Registry interface: shared components, quieter navigation, standardized forms and a profile system designed around what each participant needs to understand and do next.
One record language
Headers, tabs, activity, files, tasks and communication behave consistently.
Action before data
Profiles explain state, next work and risk before presenting the complete record.
Brand without forks
Workspace identity can lead while interaction patterns remain governed and shared.
F
Product foundations
The rules beneath every screen
Tokens make the interface consistent without making it rigid. They define the permitted visual vocabulary, while density, audience and workspace branding remain controlled configuration.
Ink#111111Canvas#F5F4F1Information#628294Success#568064Attention#C08B4AException#AE6659
Display / 48
Page title / 32
Section / 20
Body / 14 — operational copy stays direct and readable.
LABEL / 11 · 0.08EM TRACKING481216243248
Level 01Boundaries and selected state
Level 02Menus, drawers and sticky bars
Level 03Modals and blocking decisions
C
Universal component contract
Every component answers the same questions
A reusable component is more than a styled rectangle. It owns anatomy, state, permissions, data behavior, accessibility, responsiveness, content rules and instrumentation.
1
2Choose the teammate accountable for the Project.
3Selection saved- 01
IdentityVisible label, accessible name and purpose
- 02
ControlTrigger, value, affordance and keyboard behavior
- 03
GuidanceHelper, validation, source and consequence
- 04
StateLoading, empty, error, disabled, read-only and restricted
- 05
EventsCreated, changed, failed and completed activity
Keyboard first
Tab moves between controls; arrows move within composite controls; Escape closes temporary surfaces; focus returns to its origin.
Perceivable state
Colour never acts alone. Text, iconography and programmatic state carry the same meaning.
Server-enforced access
Permissions determine whether records, fields and actions exist before the interface is rendered.
Responsive equivalence
Dense tables project into prioritized mobile rows; important actions and status remain available.
R
Complete review register
Everything the Product Style Guide must govern
This is the working inventory for component-by-component review. “Concept designed” means a visual direction appears below. “Dedicated pass” means the component still needs its full anatomy, states, responsive behavior and usage rules designed.
Concept designedDedicated design pass202 components and patterns
Application shell & navigation
12 componentsApplication shellPrimary navigationWorkspace switcherGlobal search / command menuAccount menuBreadcrumbsRecord tabsSegmented viewsSub-navigationMobile navigationPage headerAction bar
Actions & menus
12 componentsPrimary buttonSecondary buttonQuiet buttonDestructive buttonIcon buttonSplit buttonLoading actionDisabled actionAction menuBulk action barFloating mobile actionUndo action
Forms & formatted inputs
18 componentsText inputEmail inputPhone inputNumber inputCurrency inputPercentage inputDate pickerTime pickerDate rangeAddress lookupTextareaRich text editorFile inputCheckboxRadio groupToggleField validationAI-extracted field
Dropdowns & record selection
16 componentsSingle-select dropdownMulti-select dropdownSearchable selectDependent selectCreatable selectCountry / province pickerStatus pickerUser pickerTeam pickerClient pickerDesigner Studio pickerProvider pickerProject pickerItem pickerAssignee pickerPermission-aware results
Profiles & identity
16 componentsShared Entity profileClient profileDesigner Studio profileProvider profileProvider Category profile modulesUser profileWorkspace profileProfile headerIdentity blockAvatar / logoQualification summaryMatching ProfileCapacity summaryContact information cardRelationship summaryProfile completeness
Tasks, Notes & collaboration
19 componentsTask rowTask cardTask composerTask detail drawerChecklistDependency pickerMilestoneInternal NoteNotes composerMention pickerNote attachmentsPinned NoteActivity eventActivity timelineComment threadDecision / Approval panelCommunication composerConversation threadTags and assignment
Builders & configuration
19 componentsBuilder shellPipeline BuilderPipeline stage editorForm BuilderField libraryProject Template BuilderPhase BuilderTask Template BuilderAutomation BuilderRule / condition BuilderNotification BuilderTemplate editorProposal Template BuilderDocument / presentation BuilderPermission role BuilderDashboard BuilderSaved-view BuilderImport mapping BuilderPublish / version controls
Data, views & collections
18 componentsEnterprise data gridGrid toolbarColumn selectorFilter BuilderSort BuilderSaved viewsBulk selectionInline editingList rowCard viewKanban boardCalendar viewTimeline / GanttPaginationSearch resultsExport panelImport previewResponsive list projection
Files, media & content
15 componentsFile cardFile rowUpload dropzoneUpload progressFile previewFile version historyImage galleryInspiration galleryDocument viewerAnnotation layerDeliverable cardEvidence captureCamera / mobile captureAI extraction reviewContent visibility control
Project & Provider operations
20 componentsProject summarySeven-Phase progressProject healthCalendar eventResource bookingTime entry / timerItem rowItem detail drawerCategory budgetBudget summaryPurchase Order rowShipment trackerReceiving cardCondition flagStorage LocationDelivery manifestLive delivery statusInstallation checklistDeficiency recordProvider Work Package
Commercial & network
15 componentsMatch Candidate cardMatch score explanationShortlistOffer cardOffer response panelProposal summaryLine-item editorWork Order summaryChange OrderInvoice summaryPayment schedulePayment statusFinancial visibility stateSignature / acceptanceCommercial history
Feedback, states & accessibility
22 componentsStatus pillPriority pillProgress barStep progressInline alertToastEmpty stateLoading skeletonError stateRestricted stateOffline stateComing soon stateModalDrawerConfirmation dialogTooltipPopoverFocus treatmentKeyboard modelScreen-reader contractResponsive behaviorPrint / PDF state
00
Shared component library
Build once. Configure everywhere.
Components keep the same anatomy, interaction, validation and accessibility contract across Admin, Designer, Provider and Client experiences. Audience, permissions, density and content may change; the component does not fork.
ACTIONS
Buttons and action hierarchy
One primary action per region. Destructive and irreversible actions never use the same visual treatment as ordinary progress.
FIELDS
Text, formatted and long-form input
Every field keeps a visible label, optional helper or error message and an explicit state. Formatting is presentational; canonical values remain structured.
SELECTION
Dropdowns, multi-selects and record pickers
Search, selection, empty, loading and restricted states are shared. Options are alphabetized unless business priority or chronology requires another documented order.
AN
Atelier NorthDesigner Studio
AM
Atelier MaisonDesigner Studio
NS
Northline StorageProvider
NAVIGATION
Tabs, breadcrumbs, filters and pagination
Navigation shows location and information hierarchy. A tab changes the current record view; a filter changes the result set; neither is used as a decorative label.
STATUS
Pills, progress and semantic state
Colour reinforces meaning but never carries it alone. Status labels use canonical state language and are distinct from categories, tags and priorities.
DraftIn progressApprovedReview requiredBlockedCompleted
P4 · LowP3 · NormalP2 · HighP1 · Urgent
12 of 18 requirements complete
✓Intake2Review3Approval4Onboarding
CONTENT
Cards, metrics, identity and files
Cards group one coherent question. They do not become arbitrary containers or nested dashboards. The card title, action, state and empty behavior are part of its contract.
EW
Eleanor WestFull-service client
- eleanor@west.ca
- Preferred contact
Issued design package · 12.4 MB
Atelier NorthDesigner Studio · Toronto
PreferredDATA
Enterprise grid and list rows
One governed grid provides selection, sort, filter, column, bulk action, export, density and saved-view behavior. Cells use shared formatters and never invent local controls.
24 records
□ProjectPhaseClientBudgetNext milestoneOwner
□PRProject RosedaleDesign PackageEleanor West$250,000Sep 18BM•••
□PGProject GlebeProcurementCamille Roy$180,000Sep 12SR•••
□PEProject ElginConstructionNoah Chen$425,000Sep 24MC•••
WORK
Tasks, activity and approvals
Operational components connect action, owner, due state and source record. Notes and messages remain distinct; formal approval is never reduced to a comment.
Review revised kitchen elevationProject Rosedale · Design Package
HighBMConfirm site measureProject Elgin · Concept
NormalMC✓
Design Package approved
Eleanor West approved revision 03.
Brad Mitchell · Client decision · 10:42 a.m.□
File uploaded
Kitchen Elevations — Rev 03.pdf
Maya Chen · Internal · YesterdayCLIENT DECISION
Due todayApprove kitchen elevation
Review revision 03 before the millwork package is issued.
FEEDBACK
Alerts, toasts, empty and loading states
Feedback states explain what happened, what was saved, what is affected and what the person can do next. “Coming soon” is visibly disabled and never masquerades as active.
i
3 fields were suggested by AIReview the highlighted values before saving.
!
Delivery date is at riskThe carrier has not confirmed the revised window.
×
Unable to save changesYour entries are preserved. Try again or contact support.
✓
Project createdProject Rosedale is ready.
↶
Task archivedThis action can be undone.
No proposals yet
Create a proposal from approved Project scope or invite a Provider to respond.
Learn how proposals work →COMING SOON
OVERLAYS
Modal, drawer, menu and confirmation
Use a modal for a focused finite action, a drawer for contextual detail that benefits from the underlying page, and a full page for complex or deeply linkable work.
D
Detailed collaboration patterns
The work surfaces designers will live in
Notes, Tasks and Builders need enough depth to replace disconnected messages, spreadsheets and one-off setup screens. These concepts establish their information hierarchy and interaction model.
INTERNAL NOTES · PROJECT ROSEDALE
Project knowledge with context
BM
Brad MitchellToday at 10:42 a.m. · Edited
Client approved the stone direction. Confirm slab availability before the millwork package is released.
@Olivia Brown#Item ST-204#Decision 18
TASK DETAIL
In progressConfirm slab availability
Confirm the selected Calacatta Viola slabs remain held and upload written supplier confirmation.
CHECKLIST · 1 OF 3
DEPENDENCIES
→
Release millwork packageBlocked by this Task
PIPELINE BUILDER
Provider application · Storage
Application stagesDrag to reorder. Select a stage to configure its rules.
SubmittedNo blocking issues
Qualification review6 required fields · 2 automations
Site assessmentNo blocking issues
ApprovedNo blocking issues
STAGE SETTINGSQualification review
WHEN RECORD ENTERS
✉Send review received emailNotification template · Provider
✓Create qualification TaskDue in 2 business days
A
Operational component atlas
Coverage beyond forms and profiles
The same product language must carry the work from an email or calendar event through specification, purchasing, receiving, delivery, commercial approval and payment. These larger compositions show how the primitives operate together.
COMMUNICATIONS
Unified inbox with Project intelligence
Email, SMS, calls and in-app messaging share one conversation frame while preserving channel-specific controls, consent and delivery state.
EW
Eleanor WestKitchen elevations · Project Rosedale
PROJECT · PROJECT ROSEDALECLIENT · ELEANOR WESTDESIGN PACKAGE
We love the stone direction. Could we see the warmer hardware option before approving the kitchen?
@Olivia please add the aged brass option to the presentation before tomorrow.
FILES & MEDIA
One upload queue, many evidence types
⇧Drop files or select from your device
Plans, images, spreadsheets, invoices and condition evidence
Kitchen elevations R03.pdf12.4 MB · Processing
Slab condition.jpg4.8 MB · Ready
Item import.xlsx820 KB · Mapping required
CALENDAR & RESOURCES
Time, people and Project work together
August 3–9, 2026
PROJECT ITEMS, CATEGORIES & BUDGETS
The spreadsheet replacement has to earn trust
KITCHEN · 18 ITEMS$86,500 budget
$67,440 specified$19,060 remaining
Calacatta Viola slabMaterial · ST-204
ApprovedCiot2$8,600$17,200Sep 14Aged brass pull setHardware · HW-118
ReviewDevol24$86$2,064Oct 02Opal globe pendantLighting · LT-072
OrderedAllied Maker3$1,450$4,350Nov 18RECEIVING & CONDITION
Review requiredEvidence at the moment it matters
PHOTO EVIDENCE＋ Add view
Oak dining table
Purchase Order PO-1042 · Project Glebe
- Expected
- 1
- Received
- 1
- Location
- Bay A-14
- Received by
- Maya Singh
DELIVERY & INSTALLATION
In transitOne live manifest
MA
Marcus Allen · Crew ATruck 04 · 18 Items · ETA 10:16 a.m.
DELIVERY WINDOW10:00 a.m.–12:00 p.m.
DESTINATION82 Roxborough St W
INSTALL CHECKLIST0 of 18 complete
NETWORK & COMMERCIAL
From match to paid work without losing context
Matching, Offers and commercial documents share Project scope, counterparties and history while preserving distinct commitments.
Northline StorageReceiving, Warehouse & Storage
93%Service areaCapacityCondition evidence
Project Rosedale receiving48 Items · Sep 14–Nov 30
Awaiting- Response due
- Aug 8, 5 p.m.
- Attachments
- Item list + 2 files
WO-2026-0148Northline Storage
Active- Authorized
- $8,450 CAD
- Invoiced
- $4,225 CAD
- Paid
- $4,225 CAD
S
Complete shared profile system
User and Workspace Profiles speak the same language
They use the same Profile Header, Record Tabs, Overview Card registry, Activity, Projects, Files, Tasks, Communication and History patterns as every other profile. Their identity, permissions and Overview modules differ; the architecture does not.
USERBrad MitchellFounder · The Design Registry · Active
- Display name
- Brad Mitchell
- Job title
- Founder
- Time zone
- Eastern Time
- Workspace Memberships
- 2 active
- Phone
- +1 613 555 0182
- Profile completeness
- 94%
WORKSPACEThe Design RegistryRegistry Administration · Ottawa · Active
- Workspace name
- The Design Registry
- Workspace type
- Registry Administration
- Default currency
- CAD
- Primary market
- Ottawa
- Teammates
- 8 active
- Profile completeness
- 92%
01
Application shell
A cleaner navigation model
The left rail becomes a stable operating spine. Primary navigation is reduced to eight jobs; audience-specific access hides entire jobs when unavailable. The workspace switcher and personal account remain persistent without competing with active work.
Search Projects, people and work…
MONDAY, AUGUST 4
Good morning, Brad.
Here is what needs attention across your active Projects.
PRIORITY WORK
Needs your attention
Project Rosedale · Design PackageClient approval overdueEleanor West
→Project Glebe · Procurement4 items arriving without storageNorthline Storage
→Project Elgin · ConstructionMillwork proposal readyOttawa Millwork
→02
Shared form system
One modal, with clear sections and intelligent fields
Forms use a consistent width, header, section rhythm, validation pattern and footer. Long forms disclose sections progressively. Address, currency, phone, select, multi-select and date fields use canonical shared controls.
NEW PROJECT
Create a Project
Start with the essentials. You can complete the Project profile after creation.
1Essentials2Client3Template
✦
Make setup easier with AI
Paste an intake form, proposal or client email and we will suggest these fields for review.
Labels remain visible
Placeholders never replace a field’s identity.
Formatting is automatic
Currency, phone, postal code and dates display consistently while preserving canonical values.
Validation is local
Explain the exact problem beside the field and summarize it before submit.
AI proposes, people confirm
Extracted values carry source and confidence; consequential values remain reviewable.
Shared entity profiles
One profile framework.
Three different operating priorities.
Every profile begins with identity, relationship state and next action. Shared tabs stay familiar. Overview cards change by entity type: Clients centre active decisions and preferences, Designers centre capacity and network participation, and Providers centre operational readiness and awarded work.
01 / CLIENT
Relationship and decisions first
The internal profile connects contact preferences, addresses, Project Opportunities, active Projects, decisions and communications. The Client-facing experience remains intentionally curated.
Search Projects, people and work…
EW
CLIENT
Eleanor West
Toronto, Ontario · Client since March 2026
Active
EW
Eleanor West
Full-service residential client
- Preferred contact
- Best time
- Weekdays, 9–11 a.m.
- Decision-maker
- Yes
- Time zone
- Eastern Time
Review the revised kitchen elevation with Eleanor.
Requested changes were uploaded yesterday by Atelier North.
ACTIVE PROJECT
Design PackageProject Rosedale
NEXT MILESTONEDesign Package approvedSeptember 18
PROJECT TEAMAtelier North3 active Providers
OPEN DECISIONS2 waitingOldest: 3 days
Eleanor replied yesterday at 4:18 p.m.
Approved design fees · $24,250 paid
02 / DESIGNER STUDIO
Practice, capacity and network trust
The Designer Studio profile shows who they are, what they are best suited for, whether they have capacity, and how they are performing across Registry Projects—without erasing their independent brand.
Search Projects, people and work…
AN
DESIGNER STUDIO
Atelier North
Toronto, Ontario · Registry member since January 2026
Approved
AN
INDEPENDENT DESIGN STUDIO
Thoughtful interiors, quietly expressive.
Residential design studio specializing in full-home renovations, custom millwork and material-led interiors.
MATCHING PROFILE
Strongest fit
TEAM & CAPACITY
4 active teammates
OBMCSRJL
Next Project startOctober 2026
03 / PROVIDER
Readiness and operations first
The shared Provider profile establishes trust and qualification. Its category module then surfaces the operational facts that matter—in this example, expected receipts, condition evidence, Storage Locations and releases.
Search Projects, people and work…
NS
RECEIVING, WAREHOUSE & STORAGE
Northline Storage
Ottawa, Ontario · 24,000 sq. ft. facility
Verified
NS
APPROVED PROVIDER
Northline Receiving & Storage
White-glove receiving, inspection, inventory and residential Project storage across the Ottawa region.
OPERATIONS TODAY
6 scheduled movements
Receiving appointmentProject Rosedale · 10:30 a.m. · 8 itemsExpected
Condition reviewProject Glebe · Dining table · DR-284Action
Release for deliveryProject Elgin · 2:00 p.m. · 14 itemsReady
QUALIFICATION
All requirements current
InsuranceValid to Mar 2027
Service area75 km
Photo evidenceRequired
Barcode scanningEnabled
P
Design and implementation sequence
Lock the system in dependency order
The sequence protects the build-once architecture. Foundational primitives become stable before complex Builders and Provider-specific operations depend on them.
System dependency · P0
Foundation release
Tokens, shell, actions, form fields, selection, feedback, overlays and responsive rules
Replaces daily workarounds · P0
Daily work release
Profiles, Tasks, Notes, activity, files, Enterprise Data Grid and Calendar
Admin configuration · P0
Builder release
Pipeline, Form, Automation, Notification, Project Template and Permission Builders
Project operating centre · P1
Project operations release
Items, Categories, Budgets, Purchase Orders, receiving, storage, delivery and installation
Marketplace economics · P1
Network and commercial release
Matchmaking, Offers, Proposals, Work Orders, Invoices, payments and signatures
Scale and differentiation · P2
Optimization release
AI assistance, density personalization, advanced analytics and approved workspace branding
Implementation contract
Shared structure, configured meaning
These mockups should become a reusable product system, not three independent pages.
ProfileHeader
Identity, Entity type, relationship state, metadata and permission-aware actions
RecordTabs
Overview, Activity, Projects, Files, Tasks, Communication and History
OverviewCards
Configurable cards by Entity type, Provider Category and audience
EntityPicker
Canonical Client, Designer, Provider, Project, User and Team selection
FormModal
Standard sections, field controls, validation, draft state and action footer
AccessProjection
The server determines records, cards, fields and actions before rendering