Design Research · 02 / 08

Representing Clients Visually

Cutaway architectural elevation of five adjoining rooms sharing identical structure, each washed in a different single accent color with its own emblem on the wall

How should Collaboration OS render a client as an entity? The convergent answer: a client is a place you re-enter, not a record you query — brand-themed, already visually "dressed," with one aggregated timeline as its memory.

The Reference: Attio's Object-Based Record Page

Attio is widely regarded as the best-designed modern CRM and the closest analog for our client entity. Two patterns worth stealing directly:

Automatic enrichment — Attio pulls a company's logo, profile pictures, social handles, and description automatically and keeps refreshing them. A client entity never arrives as a bare text row; it arrives dressed.
The activity timeline — a single chronological feed aggregating every touchpoint (emails, meetings, notes, tasks, stage changes) with type filters. For us this maps onto engagements + ClickUp task events + meeting artifacts flowing into one scrollable client history.

Attio also embeds files, notes, and enriched fields inline on the record page rather than in separate tabs — reducing the "where is that thing" hunt.

Logo and Brand as Identity Engine

Brand-driven identity is the highest-leverage visual lever for a calm app: each client page feels like their space with zero manual design work.

Clearbit's Logo API is dead (2026); the replacement is Brandfetch — returns logo types (icon, symbol, wordmark), dark/light theme variants, and smart fallbacks. LogoKit adds explicit fallback tiers (monogram generation, transparent placeholder — never a broken image)
The genuinely interesting move: brand-color extraction to theme the client's page — the client's primary color as accent (header band, active states, avatar ring) so navigating between clients feels like moving between distinct rooms while the chrome stays consistent
We already re-hosted client logos in the Supabase brand bucket during the Airtable migration — the substrate exists; the enrichment/extraction layer is the missing piece

The Fallback Ladder (Most Clients Won't Have a Fetchable Logo)

Best practice degrades gracefully: photo/logo → colored monogram → generic icon, never a broken image. Key details:

Monograms: 1–2 letters, high contrast
Stable hashed color per client — the same client is always the same color everywhere. That consistency is what makes a colored initial read as identity rather than decoration

People: Facepiles and (Careful) Presence

Stacked/overlapping avatars with a +N counter (facepile) for engagement teams — avatars double as triggers (hover → profile, click → filter)
Presence dots (green/gray on avatar corner) should be used sparingly — presence can read as surveillance. For the client-facing side, prefer "last active" text over live dots. (This is also a Antipatterns concern — visibility coercion.)

Relationship Visualization — Don't Over-Engineer

CRM convention: the aggregated interaction timeline is the primary relationship artifact, optionally paired with a lightweight freshness signal ("last contact 12 days ago") derived from recency/frequency. Full network graphs and org charts usually over-engineer for a small studio — the timeline + freshness conveys ~90% of the value calmly. Reserve graph views for clients with many stakeholders (and for the Phase 4 field, where relationships become spatial).

"Client as Place"

Little formal literature names this, but the ingredients converge:

A persistent, distinct, brand-themed page per client (Attio record + Brandfetch color)
Ambient continuity via the timeline — the room remembers
Are.na-style channel thinking — the client space as a curated container of engagements, files, and artifacts, not a database row

Agency portfolio sites (COLLINS, Koto, Work & Co) model the feeling to aim for: one identity per space, strong hierarchy, restraint. This is also the deepest connection to the Pattern Language — "client as place" is essentially a center in Alexander's sense; see Collaboration OS Through the Pattern Language.

Takeaways for Collaboration OS

Client page = header themed with brand color + logo; stable monogram fallback with hashed color
One aggregated timeline per client (tasks, meetings, notes) with type filters — the client's memory
Facepiles for engagement teams; freshness text over presence dots
Skip graphs at the record level; let the Phase 4 field carry relationship spatially

Collaboration OS Design Research — hub
The Client Dashboard — the client-facing side of the same entity
The Work OS Landscape — Notion gallery views (clients as visual objects)
Collaboration OS Through the Pattern Language