A Bloomberg Terminal
for founder voice.Made to be played.
community.io is the seriousness of a trading desk, the warmth of a notebook, and the responsiveness of a synthesizer — operators don't use it, they play it.
Every screen is set in editorial type at editorial scale. The interface does not contain the data — the interface is the data, made physical in ink and light.
A designer at Linear, Vercel, or Arc opens this system and says "who made this?" — not "oh, another dark dashboard." If any screen could be mistaken for a Tailwind template, we have failed.
Surfaces float on light.
No borders on cards. No border: 1px solid separating regions. Layers are separated by luminance steps — each surface is 5–8L lighter than what it sits on. Ambient light bleeds from behind active cards. Paper grain runs over everything at 3% — barely there, makes every screen feel printed, not rendered.
✓ INSTEAD: radial ambient behind the card · luminance separation · negative space as the primary separator · typography weight as the status signal
Type is the primary interface element.
Fraunces is the voice of the product — not just for headlines, for the draft, the score, the specimen. DM Sans for UI and prose (not Inter — Inter is the vibe-coded giveaway). JetBrains Mono only for live ticking data. Every number uses tabular figures, unit set at 0.6× size, baseline-aligned.
96–180px · wght 300–400
tracking −0.05em
64px number · 36px unit
baseline-aligned
18–22px · wght 300–400
1.6–1.72 leading
We built our entire growth engine on listening-first principles. Instead of broadcasting, we monitor AI conversations — then engage where intent is highest.
wght 400–500
NOT Inter
3 drafts ready for approval · avg confidence 91% · StackOps visibility declining −12%
10–13px · only for ticking
numbers
9–10px · uppercase
2px tracking
Color is information density.
Two accent identities, never decorative. Red — editorial accent, the primary action color. Amber — live data arriving, success, pipeline. Intent heat is a continuous ramp: the geometry of the signal stream communicates score; color confirms it.
Motion with mass and friction.
The score wire. Geometry is the score.
Signals live on a vertical wire. Their horizontal offset equals their intent score — higher intent physically pushes further into the reader's attention. No badges. No colored side rails. The position on the wire is the data. Ambient light bleeds from behind hot signals only.
Looking for alternatives to HubSpot — need AI community features
"We're a 12-person B2B team. Budget $2–5K/mo. Anyone using tools that combine community monitoring with AI-assisted engagement?"
Best tools for monitoring AI model visibility?
"I want to know when GPT/Claude/Gemini recommends my product. Currently doing manual searches…"
Why community-led growth is the only moat left for B2B SaaS
"The companies winning aren't those with the best features — they're the ones with communities that AI models cite as authoritative…"
The waveform breathes with the draft.
Voice confidence is a breathing waveform — not a gauge, not a percentage bar. It pulses with the phonetic rhythm of the training corpus. Confidence is felt, not read. The draft itself is set in Fraunces at 22px with an opening quote mark — it reads like a sentence written by a human.
Controls with meaning-coded radius.
Radii are semantic, not universal. 2px for data readouts. 6px for inputs. 10px for chips. 16px for panels. 0px for editorial blocks. Never round everything to 2xl.
What killed the soul of v3.
If it could appear in a Tailwind UI template, a Shadcn component, or a Vercel dashboard clone, it doesn't belong here. These are the patterns that made v3 forgettable.
The single most vibe-coded tell in any dark dashboard. Status is encoded in typography weight, ambient light behind the surface, or spatial position — never a decorative stripe.
Active cards have an iris radial glow behind the surface (8% opacity, breathing at 5s). At-risk cards have a heat-hot glow. Idle: no ambient at all. The light whispers, never shouts.
Inter is the giveaway that something was assembled, not designed. It's optimized for screens, not for personality. DM Sans carries warmth. Fraunces carries authority. Use those.
DM Sans for UI prose and labels. Fraunces at optical-size max for all editorial moments — drafts, scores, headlines, the voice specimen. JetBrains Mono only for ticking live data.
When everything is rounded to 20px the system has no hierarchy. Radius is semantic: 2px for data readouts. 6px for inputs. 10px for chips. 16px for cards. 0px for editorial blocks.
Sharper = more precise = more data. Rounder = more human = more conversational. A live intent score has a 2px radius. A founder-voice draft card has a 16px radius. Shape communicates nature.
A glowing dot that animates forever is noise. It trains the operator to ignore it. The status bar's live signal count communicates real-time activity without visual spam on every card.
Intent is communicated by horizontal position on the score wire — geometry that the operator learns in 5 seconds and uses forever. No badges. No indicators. The position is the data.