P01
Status labels
Monday.comchecking…Lands: project health, lead status, intake stage, meeting-triage state · click a pill to cycle it
Bold colour-coded status cells you click to change. The whole grammar of Monday in one control.
Design Lookbook
The pattern vocabulary for EnvisionOS, borrowed from the best apps around the web and rendered in our skin. Browse a chapter, click around, and note what feels right. Everything here is a live demo with sample EnvisionUP data.
LIVE the shared layer carries it today PENDING not in eos-ui.css or eos-ui.js yet in prototype a working version exists in eos-prototype.html
Pattern index reading the shared layer…
Codes are permanent. P01 to P38 were assigned once and are never renumbered, never reused and never reordered, so “build it like P14” means the same thing next year. A new pattern appends as P39. P38 sits beside P27 on purpose, because it extends it. Status is never typed here — each card declares the shared-layer component that would prove it exists, and this page reads eos-ui.css and eos-ui.js on load to decide. A status nobody can edit is a status that cannot go stale.
Status & Health how work tells you it needs attention
The exception-first principle: nothing should require reading a report to notice. Colour carries state, and the state is always clickable.
P02
Pulse-ring avatars
Instagram storieschecking…Lands: Clients list + This Week chips
LKL
82
DRH
88
POA
48
THC
71
Ring fill = pulse score. The whole roster's health in one glance-row.
P03
Portfolio status roll-up
Asanachecking…click a statusLands: Delivery health + the Owner exception view
Every project as a coloured status, progress, and a one-line human update. A whole book of work rolls into one glance.
P04
SLA countdown chips
Intercom · Zendeskchecking…Lands: every queue row (triage, approvals, Desk view)
LKL · "site feels slow"2h 29m left
POA · form spam43m left
KEW · DNS questionbreached · 1h over
The under-4h at 95% SLA target, made visible per row. A breach becomes an exception routed to the seat owner.
P05
Record highlights panel
Salesforcechecking…Lands: top of Client 360 and Project pages
Dr HVAC
Healthy · 88CodeDRH
Active projects3
MRR$4,200
Last meetingJul 10
PMTara
The key facts pinned to the top of a record, so nobody scrolls to answer "who runs this and is it okay".
Navigation & Speed a system staff live in all day must feel instant
Speed is adoption. If getting anywhere takes two clicks and a hunt, the team goes back to their spreadsheets.
P06
Command palette
Linear · Notionchecking… in prototypepress Ctrl+K / Cmd+K, or clickLands: everywhere · the prototype's quick-switcher · try: open it, type "meeting", arrow down, Enter
One shortcut to jump anywhere or run any action without hunting menus. The single biggest speed win.
P07
Stage path chevrons
Salesforcechecking… in prototypeclick a stageLands: Opportunity 360, web project lifecycle, launch progress
Where a thing sits in its lifecycle, and the click advances it. Paired with stage guidance in the prototype.
P08
View toggle
Linear · Monday · Notionchecking…Lands: Backbone, Intake, Projects, Meetings · try: switch the view, same five Backbone ideas every time
Same data, three ways. Each person picks how they think. Pattern 09 below adds filters and saved views on top of this.
Lists & Boards the daily working surfaces
Where the team actually lives. These demos are fully live: filter, switch views, move cards, check things off.
P09
Projects workspace
Monday · Attio · Linearchecking… in prototypesaved views · filters · status · view toggle, all liveLands: Projects (all), and the grammar for every list in EOS · try: switch to Board and move a card, or click a status pill
One dataset, three views, filterable, with click-to-change status. Saved views mean every list remembers your slices: "my clients", "at-risk projects", "overdue time".
P10
Many views of one list
ClickUpchecking…switch the viewLands: Projects, Backbone, Intake · Calendar and Gantt join List and Board
ClickUp's calling card: the same tasks as List, Board, Calendar, or Gantt. The launch Gantt strip in the prototype is this pattern's cousin.
P11
Collapsible groups
Airtable · Mondaychecking…click a headerLands: Projects (all), grouped by line or PM
▸ IM · 2 projects1 blocked
LKL-IM 84
POA-IM 48 · blocked 19d
▸ WD · 2 projects1 paused
KEW-WSQC · launches Fri
DRH rebuildpaused
Group headers carry the rolled-up alarms, so collapsed never means hidden.
P12
Grouped list + progress battery
Monday · Teamworkchecking… in prototypeLands: projects by PM, delivery health, launch tracker
Tara's book
DR Dr HVAC · site relaunch
72%
MI Marin Immigration · standup
40%
Caleb's book
LK Laurysen · marketing
90%
PO Portia · content
25%
Rows grouped under coloured headers with a battery bar for completion. Wired as the Monday task batteries on Projects (all).
P13
My Tasks
Asanachecking…check a task · add oneLands: the This Week "my actions" card, each person's landing
A personal list split into Today / Upcoming / Later with priority and project. The one view every staff member checks first.
Actions & Micro-moves small interactions that make it feel alive
The difference between a report and a tool: you can act right where you're looking, and regret is cheap.
P14
Hover peek card
Notion · Attiochecking…hover the linkLands: every client and project link, everywhere
Overdue task on LKL →
Laurysen Kitchens AR flag
pulse 82 · stale 6d · Tara
2 projects · 3 promises open · next mtg Tue
hover = context without leaving your page and a promise due Friday.
pulse 82 · stale 6d · Tara
2 projects · 3 promises open · next mtg Tue
hover = context without leaving your page and a promise due Friday.
Context on demand. Nobody loses their place to answer "wait, which client is this again".
P15
Hover quick-actions
Monday · Linearchecking…hover a rowLands: every queue and list row
LKL · Houzz refresh promiseopen
DRH · review widget ideaopen
Rows stay clean until you hover, then the verbs appear where your cursor already is.
P16
Next best action
Salesforce Einstein · your AI Adminchecking…click a buttonLands: This Week + 360 sidebars
AI
POA has no meeting booked and pulse is 48.
Suggest: book a check-in this week · Caleb owns it
Every suggestion carries its evidence and a one-click act. Dismissals are remembered.
P17
Undo toast
Gmailchecking…click DeclineLands: every queue action (decline, dismiss, not-relevant)
Entity: "Kitchen Visualizer Pro"
Fast actions need cheap regret. Six seconds of undo beats a confirm dialog every time.
P18
Inline edit + honesty stamp
Attio · the anticipated-dates rulechecking…click the value and typeLands: every editable fact (billing dates, priorities, thresholds)
Next billing: Aug 1 anticipated · click to edit
Edit in place, no form, no modal. But every edit stamps who, when, and what it was. Honesty is the feature.
Charts & Targets numbers with a point of view
Every chart answers "versus what". A number without a target is decoration.
P19
KPI cards with trend
AgencyAnalyticschecking… in prototypeLands: the owner scorecard, client KPI roll-ups (sparklines wired on IM KPI tiles)
Qualified leads / wk
42
▲ 18% vs last wk
Revenue (MTD)
$63k
▲ 6%
AR outstanding
$18k
▼ up 4%
On-track projects
11/13
▲ 2
Big number, change vs last period, a sparkline for the trend. The whole story in one card.
P20
Bullet charts for targets
Stripe dashboardschecking…Lands: Finance › Revenue + Scorecard, fed by Targets
Revenue · July$94.2K / $102K
Qualified leads · wk52 / 45
AR > 30d$9.2K / target <$5K
Bar = actual, tick = target. Denser than gauges, scans in a column.
P21
Weighted forecast bar
HubSpotchecking…Lands: Sales dashboard, against Targets
July weighted pipeline$11.1K vs target $6.75K
target
Stage times probability equals an honest forecast. The gap to target links straight to the pipeline.
P22
Seasonality heat-strip
GitHub contribution calendarchecking…Lands: Client 360 Overview + This Week's 30-day lens
JFMAMJJASOND
LKL kitchens
DRH hvac
THC comfort
The seasonal_windows table as a picture. Campaign planning reads itself.
P23
Goals (Rocks)
Asana Goals · EOSchecking…nudge with − / +Lands: the Exec hub and quarterly planning
Company goals with live progress. The digital version of quarterly Rocks.
P24
Profitability / retainer burn
Productive · Accelochecking…Lands: money-first Phase 1, the way agencies actually read it
Dr HVAC
$2,480 of $4,000 used
+38%
Laurysen Kitchens
$3,520 of $4,000 used
+22%
Portia International
$5,200 of $4,500 · over
-9%
Budget vs actual per client, and how much of a retainer is burned. Margin health at a glance.
People & Capacity catch overload before delivery slips
Empathy first: this view exists to protect people, not to police them.
P25
Capacity planner
Scoro · Productivechecking… in prototypeclick a cell · step the weekLands: the Managers layer (workload capacity bars wired on Time Report)
Who's booked vs free next week, at a glance. Over-capacity in red, light in blue, off in grey.
Records & Relationships the memory of the business
Records are full pages with URLs, never popups. These patterns give each record its story and its connections.
P26
Activity timeline
Salesforcechecking…Lands: Client 360 and each contact's back-and-forth
Meeting · Weekly check-in
Jul 10 · Grain recording · Tara
Ad budget bumped +$1,500/mo
Jul 8 · Intake request · approved
Homepage went live
Jul 2 · Launch · Jeremiah
Invoice #1047 paid
Jun 28 · QuickBooks
A running history of everything that touched a client. The answer to "what happened here" without asking anyone.
P27
Entity mini-graph
Obsidian graph viewchecking…Lands: Client 360 Mentions tab + R&D map
Size = mention count, edges = co-mentions, click a node to open its record. What meeting triage quietly builds over time.
P28
Mind map
ClickUpchecking…hover for + and ✕ · click any text to edit · delete asks firstLands: planning EOS itself, a client's strategy map, breaking big projects into pieces
A node tree that grows in any direction. Hover any node: + adds a child at any depth, ✕ deletes (it arms to "sure?" first, so no accidental losses). New nodes open as a box you type straight into, and clicking any existing node's text edits it in place. Enter or clicking away commits; empty cancels a new node.
P29
Client portal
Accelo · AgencyAnalyticschecking… phase 2Lands: the slice you choose to share with clients
Dr HVAC · Your results
July 2026 · shared by EnvisionUP
Qualified leads
42
▲ 18% vs June
Calls tracked
67
▲ 9%
Ad spend
$3,100
on budget
"The ads are working", no deep detail. Transparency without homework. Respects the empathy law: clients never see their own behaviour scored.
P38
Knowledge graph, live
Obsidian · real EOS entitieschecking…drag nodes · hover to trace · click a chip to filterLands: the full-screen R&D map behind the entity mini-graph (27) · real clients, projects, meetings, contacts and entities from triage
· drag any node · hover to light up its connections · Ctrl+scroll to zoom
The grown-up version of the mini-graph: everything meeting triage learns, as one living map. This is what the warehouse quietly builds while the team just files meetings.
Canvases & Builders different ways to add and shape content
Not everyone thinks in rows. These give the team spatial and visual ways to create: drag a sitemap into shape, wire up an automation, or see a real Teamwork project wearing the EOS skin.
P30
Planner canvas
Whimsical · Miro · FigJamchecking…drag cards · hover for actions · double-purpose templatesLands: website maps, service-line plans, project breakdowns, workshops · try: drag a card, hover it for + child and rename, switch templates
One canvas, many jobs. Positions and connections are live in-browser; in EnvisionOS the canvas saves to Supabase, so a website map or a service-line plan becomes a real record you can share.
P31
Workflow builder
Attio · Zapier · Makechecking…+ adds a step · drag a step to move it · flip the layoutLands: the AI Admin builder, automations, process maps
Trigger → steps → branches. Add a branch to split the path (if / else). Drag any step onto a + or another card to re-order or move it between branches.
The same canvas is the AI Admin builder and a process map. Every automation the team can read is an automation the team can trust.
P32
A real project, reskinned
Teamwork · real LKL-IM datachecking…all four tabs liveLands: the Ops project pages · the migration story for the team · try: expand task lists and subtasks, switch to Board for the real Production workflow columns
Real task lists and tasks from your Teamwork, shown the EnvisionOS way. Board columns are your actual Production workflow. Retainer numbers on the Time tab are illustrative.
Seeing the Data the SEO & cross-client viz playbook
Every chart tied to the decision it helps make: one client over time, this period vs last, the whole book at a glance, and the local-and-competitor specials. Hover anything for detail.
P33
When to use what
The cheat sheetchecking…Lands: the shared grammar for every dashboard and client report in EOS
The question you're asking picks the chart, never the other way around. This table is the playbook's spine.
P34
One client over time
Ahrefs · GSC · GA4checking…hover the pointsLands: Client 360 KPIs tab, monthly SEO reviews
Rank tracking (bump chart)
→ decide which keywords to double down on or rescue
Traffic with event markers (area)
→ decide what actually moved traffic (launch, algo)
Ranking profile over months (stacked)
→ decide if the SEO trend is really improving
1-34-1011-2020+
P35
Comparing time periods
Stripe-style honestychecking…hover the pointsLands: monthly reports, QBRs, the "are we really up" question
Indexed comparison (this vs last)
→ decide if you're really up, fairly compared
This yearLast year
Before / after (dumbbell)
→ decide which clients improved or slipped MoM
Last monthThis month
P36
Across the whole book
Portfolio viewschecking…hover the cellsLands: the Owner exception view, Monday-morning attention triage
Portfolio heatmap (clients × KPIs)
→ decide where to spend your attention this week
decliningimproving (MoM)
Small multiples (one KPI, every client)
→ decide which client's trend needs a look
Share of voice vs competitors (100% area)
→ decide if you're gaining or losing the market
YouComp AComp B
P37
Local & competitor specials
Local Falcon · classic radarchecking…hover the gridLands: local SEO clients (HVAC, kitchens), competitive reviews
Local rank grid (Local Falcon style)
→ decide which neighbourhoods to target
1-34-1011+
Competitor radar (multi-metric)
→ decide where you out-run or trail a rival
YouCompetitor
The radar earns its place sparingly: profiles vs one rival, never trends.