What is Roam Research's primary brand color?

Roam's brand voltage is Blueprint blue (#137cbd), wired in the CSS as --primary-color. It appears 20 times in the captured marketing page — 9 as text (links and labels), 9 as border, 1 as background fill (the CTA button), and 1 as a gradient stop. This is the Blueprint UI component library's default primary color, which signals Roam's dev-tool aesthetic: the brand doesn't distance itself from the underlying component framework, instead embracing it. The mid-blue sits between the dark-navy primary of Linear and the electric-cobalt of Spline — more utilitarian than either.

What typeface does Roam Research use, and what should I use as a substitute?

Roam Research runs Inter throughout the marketing system at weight 500 for most display text and weight 400 for body and secondary copy. The hero h1 sits at 36px weight 500; section headings at 24px weight 500; body at 14-16px weight 400 or 500. A notably deviant token is Times New Roman, which appears inside the embedded product-screenshot panels — it signals that Roam's editor itself is typography-forward for writing, not just for tabular data. Since Inter is openly available, no substitution is needed. For a tighter alternative, IBM Plex Sans matches the functional x-height.

Why does Roam lead with user testimonials instead of a product screenshot?

Roam's marketing philosophy, as evidenced in the page structure, is that the tool is impossible to explain by showing the interface — the value is in what happens to your thinking over time, not in the visual appearance of the editor. Leading with a product screenshot would show a blank page or a messy outline, neither of which is self-evidently compelling. User testimonials from academics and researchers, by contrast, make specific claims about cognitive transformation that the target audience (knowledge workers who have bounced off other note apps) can evaluate. It's the equivalent of showing a book review rather than a book cover.

Where does Roam's blue come from?

The mid-blue (#137cbd) is Blueprint UI's default --pt-intent-primary color. Blueprint is a React component library from Palantir, and Roam's interface is built on it. The marketing site inherits the same token. This means Roam's brand color is not a designed decision in the traditional sense — it's the component-framework default that the team kept rather than overriding. The dark-themed product interface uses the same Blueprint token system, with dark-bg variables like --dark-bg (#202b33) and --dark-left-bg (#30404d) in the CSS.

What is Roam's corner-radius philosophy?

Roam uses a near-flat radius scale: 3px (frequency 9) is the dominant value for cards, containers, and interactive surfaces; 4px (frequency 5) appears on small chips; 8px (frequency 2) on inputs; and 70px or 100px pill variants (frequency 6 and 2 respectively) for the CTA buttons. The 3px default is the most distinctive choice — it reads as barely-rounded, giving the UI an archival document feel. Unlike Notion's 8px default or Workflowy's full-pill default, Roam's near-zero radius signals academic tool rather than consumer app.

Roam Research Design System

Roam Research's marketing system: near-monochrome charcoal and white with a single mid-blue voltage, Inter weight 500, and user testimony as the entire above-fold visual argument.

About Roam Research DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source roamresearch.com

Productivity & SaaS
Documentation & Knowledge

Roam Research's marketing page opens with no hero illustration, no gradient, and no product screenshot. The first thing a visitor reads is "A note taking tool for networked thought" in 36px Inter weight 500, followed immediately by a dense grid of user testimonials — six attributed paragraphs from researchers, writers, and academics describing what happened to their thinking after switching to Roam. This is a rare rhetorical choice: trust the testimony of the community entirely, rather than mediating the first impression through brand imagery. Where Notion uses carefully cropped product screenshots with friendly pastel color, and where Obsidian leads with the graph visualization as visual spectacle, Roam's above-fold experience is literary.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 12 color tokens built on a near-monochrome foundation — the dominant ink is an anonymous charcoal (#444444) appearing 178 times across text and borders, with the single mid-blue voltage (#137cbd, the Blueprint UI blue) appearing 20 times as links, CTA fills, and a gradient stop; 11 typography tokens running Inter across every tier from 44px display to 10.5px fine-print caption; 5 corner-radius tokens centered on a 3px minimum that gives the UI an archival-document feel; and 14 component definitions.

Feed this file to an AI coding tool and it reproduces Roam's specific moves: near-monochrome document aesthetic instead of SaaS color palette, Inter weight 500 as the structural weight rather than 700, Blueprint-blue as the sole interactive signal, and 3px corner rounding as the near-flat default. The one discipline worth studying here is the testimony-as-hero move — it only works for a product with an unusually fervent user base willing to articulate specific, technical, and personal ways the tool changed how they work.

What makes it distinct

Testimony-as-herothe page leads with dense user quotes rather than a product screenshot or gradient illustration, trusting written endorsements to sell a writing tool
Single mid-blue voltagethe Blueprint blue (#137cbd) appears 20 times as links, CTA buttons, pricing highlights, and the lone gradient; no secondary accent exists
Inter weight 500 throughoutthe dominant weight is medium, not bold; even the 36px h1 sits at 500, a quietness that positions Roam as a thinking tool rather than a productivity dashboard
Razor-thin radius scalethe dominant radius is 3px (9 instances), giving every card, button, and chip a near-flat document feel with only the slightest softening
Serif insert in product screenshotsTimes New Roman appears in the embedded Roam app mockups, signaling that the editor is writing-first rather than structured-data-first

Live at roamresearch.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

roamresearch.com

Explore Roam Research

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Roam Research design system FAQ

Common questions about Roam Research's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Roam Research — official site

Roam Research's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.