A new visual language for Habitats — drawn from the products you said you envy. Less paper, more space, sharper type, color used like punctuation. This is the proposal; once it lands, every screen gets rebuilt against it.
Type · Geist + Instrument SerifMode · Light · dark to followInspired by · Vercel, Anthropic
01Principles
Space is the design
Components breathe. Pages feel emptier. Where the old design used a rule, the new one uses 32px of nothing. Every element earns its position.
One typeface, with discipline
Geist Sans for everything. Geist Mono only for IDs, codes, and timestamps — not decoration. Instrument Serif used twice per page, max, for moments of voice.
Color is for state
Member avatars stay colored — they identify people. Live = a single green dot. Everything else stays neutral until it needs your attention.
02Type
Display XL
Instrument Serif
72/0.95/-0.035em
Most AI tools are 1:1. Real work isn't.
Display L
Instrument Serif
48/1.05/-0.03em
Caught up in 90 seconds.
Display M
Instrument Serif
32/1.1/-0.025em
Five things waiting on you.
Heading L
Geist 600
24/1.25/-0.02em
Hiring · Junior Engineer
Heading M
Geist 600
18/1.3/-0.015em
Attached agents
Heading S
Geist 600
14/1.4/-0.005em
Recent activity
Body L
Geist 400
16/1.6
A Habitat is where a team works on a stream of work — close, hiring, onboarding, anything ongoing. Humans chat. Agents do.
Body
Geist 400
14/1.55
Drafted v1 last night. Ben P thought the intro buries the lead and Will wanted the comp range pulled. v2 is in the doc with three suggestions waiting on you.
Body S
Geist 400
13/1.5
Generated 9:00 AM PT · covers Apr 27 5:00 PM — Apr 28 9:00 AM
Mono
Geist Mono 400
Code, IDs, timestamps
read_contracts(scope: "vendor")
Run #4127 · 14m ago · audit-logged
What's gone
No more all-caps tracked-out monospace eyebrow labels above every section. No more ⌂ · live · session · co-present · vN.N decorative metadata strips. The product communicates through hierarchy and content, not chrome.
03Color
Surfaces & ink
bg#fafafa
bg-subtle#f5f5f5
surface#ffffff
border#ececec
border-strong#e0e0e0
ink#0a0a0a
ink-2#404040
ink-3#737373
ink-4#a3a3a3
State (use sparingly)
live#00875a
live-bg#f0f9f4
warn#b45309
warn-bg#fef7e6
info#0070f3
info-bg#eff6ff
danger#c1121f
danger-bg#fef2f2
Identity (avatars only)
Ben S#0d6e6e
Will S#6b3d8c
Ben P#b15431
Andy H#5a5a86
Color philosophy
Black is the brand. The contrast between near-black ink and near-white background is the visual signature — same as Vercel, Anthropic, Linear.
Status colors are smaller. A 6px green dot, a single tag chip, never a whole card painted in green. The eye finds state by absence — most things are neutral, the one thing that needs attention pops.
04Buttons
Three intents × three sizes
05Identity & tags
Avatars & stacks
BSWSBPAHJPMC
BSWSBPJP
Tags
Hiringv1.2VerifiedLiveIdleNew
@-mentions
@Job Poster@Monthly Close@Will S@Ben P
06Inputs
07Cards & lists
Default card
1px hairline border. Used for static content.
Elevated card
Shadow instead of border. Used for floating UI — slide-overs, modals, popovers.
Dark card
Used sparingly — for plan tiles, primary CTAs, or moments of voice.
List rows — borderless, hover-revealed
BS
Ben S.
Founder · TheFocus.AI
Owner
WS
Will S.
Controller · Finance
Admin
JP
Job Poster
v1.2 · 5 capabilities · drafts job postings
Live
MC
Monthly Close
v4.1 · 9 capabilities · runs the close checklist
Idle
08Keystone — before / after
The hiring Habitat re-skinned in the new language. Same layout, same content, same scenario — but stripped of the warm paper, the rules, the all-caps mono labels. Half-card preview; the full version comes after sign-off.
v0.1 — currentwarm paper · Plex
v0.2 — proposedcool light · Geist
⌂
Hiring · Junior Engineer
3 members · 1 agent · 1 run live
Today
BS
Ben S.Founder10:03
@Job Poster draft a job posting for a junior engineering role at TheFocus.AI. We're a small AI-product studio shipping every week — five people, building Habitat OS.
BSWSBPJP
6 replies·thread open
JP
Job PosterAgent10:05
Drafted v2 with 3 suggestions in the doc — waiting on accept.
TheFocus.AI · Junior Engineer · job posting
v2 · 3 suggestions pending
Message #hiring-junior-engineer — type @ to invoke an agent or mention a teammate
Warm cream paper background with grain texture, IBM Plex Sans + Plex Serif, all-caps mono eyebrows, visible rules and borders everywhere, four user colors + green/amber/blue/red accents, decorative metadata strips on every component.
v0.2 (proposed)
Cool near-white background, Geist Sans + Instrument Serif (twice per page, max), no all-caps mono labels, hairline borders only where structure requires them, color reserved for state and identity, components communicate through space and weight.
If we go forward
Lock these tokens, then I sweep all 14 product pages over 1-2 turns. Existing IA stays — chat shape, slide-overs, scenario, cast. Only the surface layer changes. The product gets significantly easier to look at and a lot more current — the kind of UI a founder would screenshot for a pitch deck without apologizing.