Roam Research Design System

Overview

Roam Research's marketing page is a confidence act. Testimony as architecture. The page opens with text — no hero graphic, no full-screen screenshot, no gradient band — and that text is not the brand's description of itself, but six attributed quotes from researchers, writers, and academics explaining what the tool did to their thinking. The hero is, in effect, a collection of book blurbs for software.

Unlike Notion, which leads with carefully staged product screenshots in pastel-tinted interface frames, and unlike Obsidian, which makes the knowledge graph the marketing image, Roam trusts the written word to sell a writing tool. The page structure mirrors the product's positioning in the Tools for Thought movement: if your users are researchers at Stanford and the Berkshire Hathaway Initiative, showing rather than telling is secondary.

Chromatically the system is near-monochrome. The dominant ink tone (#444444) is not black — it's an anonymous middle charcoal that reads as text-color without reading as heavy. The single chromatic element is Blueprint-blue (#137cbd), inherited from the Blueprint UI component library that Roam is built on. The marketing site did not override the framework default; instead it adopted it as the brand voltage.

Key Characteristics:

• Blueprint blue (#137cbd, --primary-color) is the sole interactive color — CTAs, links, pricing highlights, and the lone gradient stop.
• Inter weight 500 is the structural display weight; the 36px hero headline sits at weight 500, not 700 — document-tool register rather than SaaS marketing.
• The near-flat 3px corner radius (9 occurrences) gives cards and containers an archival-document feel.
• Times New Roman appears inside embedded product mockup panels — a deliberate serif insert that signals the app is for writing, not structured data.
• The dark nav (#182026, --dark-bg-4 / themeColor) contrasts with the bone-white body canvas (#ebf1f5), creating a document-with-chrome frame.
• No hero illustration, no background gradient, no decorative chrome — the page's structural bet is that testimony is more convincing than marketing imagery for this audience.
• Pricing uses a 3-tier layout (Pro / Believer / Enterprise) with the middle tier highlighted in Blueprint blue — the only fill-color use of the voltage on the page.

Colors

Brand

• Blueprint Blue ({colors.primary} — #137cbd): frequency 20. Used as text (9), border (9), bg (1), gradient (1). Every interactive element — links, CTAs, pricing highlight border — in the system. The Blueprint UI default primary color, adopted rather than designed.
• Blueprint Light ({colors.primary-light} — #48aff0): frequency 2. Used as bg (2). Hover-state fill for the download platform buttons. Lighter tint of the Blueprint voltage.

Ink

• Charcoal ({colors.ink} — #444444): frequency 178. Used as text (91), border (87). The dominant text and border color — an anonymous middle-gray rather than true black, keeping the page in document register.
• Mid Blue-Gray ({colors.ink-muted} — #738694): frequency 13. Used as text (6), border (6), bg (1). Secondary text: attribution bylines under testimonials, sub-labels in pricing.
• Light Blue-Gray ({colors.ink-light} — #a7b6c2): frequency 10. Used as text (5), border (5). Tertiary text and the dark-mode icon color (--dark-icon-color).

Canvas

• Bone White ({colors.canvas} — #ebf1f5): frequency 1. The page body background (--background-color) — a slightly blue-tinted off-white rather than pure white.
• White ({colors.canvas-white} — #ffffff): frequency 95. Used as text (45), border (44), bg (6). Pure white for card fills, nav text, and button labels on dark surfaces. Wired as --dark-ff.

Surfaces

• Blue-Gray Hairline ({colors.surface-1} — #bfccd6): frequency 28. Used as text (14), border (14). The standard card border and divider tone across the page.
• Light Gray ({colors.surface-2} — #d3d3d3): frequency 22. Used as text (9), border (13). Secondary borders and input edges.

Dark Mode / Nav

• Dark Canvas ({colors.dark-canvas} — #182026): frequency 4. Used as bg (1), text (2), border (1). The top navigation surface and footer background — the themeColor declared in the page's <meta>.
• Dark Surface ({colors.dark-surface} — #343a40): frequency 4. Used as bg (2), text (1), border (1). Elevated dark panels — the left sidebar color in the embedded app screenshot (--dark-left-bg).
• Shadow ({colors.shadow} — #10161a): frequency 6 as shadow only. The Blueprint-standard shadow color, used on cards in the product screenshot panels.

Typography

Font Family

The system runs Inter across every marketing-surface typographic tier — a deliberate choice for a tool targeting researchers and developers who associate the typeface with documentation and technical writing. The only exception is Times New Roman, which appears inside the embedded product-screenshot panels at 24px weight 400: it represents the Roam editor's own serif rendering, not the marketing chrome. Times New Roman signals that Roam's notes are writing documents, not database rows.

Hierarchy

Principles

The system uses weight 500 as the primary emphasis tier rather than 700. The hero h1 at 36px / 500 reads as editorial declaration rather than SaaS imperative — a quietness suited to a tool that positions itself as infrastructure for thought. Weight 700 appears only at 44px for the large display number moments (pricing feature counts). The combination of 500 for everything from h1 to body leads creates typographic uniformity that reinforces the archival aesthetic.

Note on Font Substitutes

Inter is freely available. No substitution is needed. The Times New Roman insert inside product screenshots is intentional semantic content — if you're building a Roam-inspired interface, any legible serif (Georgia, Lora, or system Times) serves the signal that this is a writing surface.

Layout

Spacing System

• Base unit: 8px, with 10px as an unusual non-4px base from the Blueprint grid.
• Tokens: {spacing.xs} 1px · {spacing.sm} 5px · {spacing.md} 8px · {spacing.base} 10px · {spacing.lg} 12px · {spacing.xl} 16px · {spacing.2xl} 20px · {spacing.3xl} 24px · {spacing.4xl} 48px.
• Section padding: 98px top for the hero area, 24x48px for sections, matching Blueprint's --s4 (32px) and --s3 (24px) spacing variables.
• Card internal padding: 10px for small cards, 24px for pricing panels.

Grid & Container

• Max content width: ~1080px — the full-width testimonial grid fills the viewport at 1440px.
• Hero: centered text column (headline + sub-copy + sign-in CTA + download button) above two overlapping product-screenshot panels.
• Testimonials: 3-column grid of attributed quotes with name + affiliation below each.
• Pricing: 3-column comparison (Pro $15/mo · Believer $165/yr · Enterprise $500/5 years) with the Believer column highlighted by Blueprint-blue border.
• Downloads section: 3-column layout (Desktop / Mobile / Browser Extension) with platform links as underlined text rather than buttons.
• Footer: dark (#182026) surface with 4-column link grid.

Rhythm

The page uses alternating density — the testimonials section is text-dense (six full paragraphs), the product-screenshot section is image-dominant, the pricing section is structured, and the downloads section is spare. Each section does one job and transitions directly to the next without decorative inter-band treatments.

Elevation

The system uses the Blueprint shadow convention: rgba(16,22,26,0.15) 0 0 0 1px, rgba(16,22,26,0.15) 0 1px 1px 0 for card lift, derived from the dark shadow token (#10161a). This is a 1px hairline shadow rather than a diffuse glow — close to no shadow, used only on the product-screenshot panels that need to read as floating application windows.

All other surfaces sit flat against their background without shadow. The pricing cards use border-only differentiation; the testimonials have no elevation treatment at all.

Shapes

The radius scale is near-flat with a pill exception:

• {rounded.none} 0px — text elements, footer grid.
• {rounded.xs} 3px — the dominant card and container radius (frequency 9). Barely-rounded — reads as document-tool, not consumer app.
• {rounded.sm} 4px — small chips and secondary interactive surfaces.
• {rounded.md} 8px — form inputs and slightly larger interactive components.
• {rounded.pill} 70px — the primary CTA button only. A generous pill that contrasts with the 3px card corners.
• {rounded.full} 100px — secondary pill variant for download buttons.

The 3px default is the defining choice. At this scale the corners are visible but minimal — a concession to softness without committing to the 8px-plus radius that most SaaS products use as default. The effect is that cards feel like index cards from a filing system rather than floating UI tiles.

Components

button-primary — Blueprint blue (#137cbd) fill, white text, 70px pill radius, 10x21px padding, 60px height, 0.42px letter-spacing. "Sign Up" is the canonical hero instance.

button-secondary — Dark-canvas (#182026) fill, white text, 8px radius. The platform download buttons ("macOS Desktop App") use this treatment at the same height.

button-platform — Dark-canvas fill with white text, 3px radius, 5x10px padding, 40px height. The individual platform download options (macOS (Silicon), macOS (Intel), Linux, iOS, Android) below the CTA.

top-nav — Dark-canvas (#182026) background, white text, 0x15px padding, 40px height. Houses the Roam logo, Docs / Community / Pricing / Downloads / What's New links, and a Sign In text-link on the right — no pill button in the nav.

nav-link — Transparent, white text at 14px weight 400. Links in the dark nav band.

hero-heading — Charcoal (#444444) text, Inter 36px weight 500. "A note taking tool for networked thought."

section-heading — Charcoal text, 24px weight 500. "What People are Saying," "Trusted by," "Downloads."

body-paragraph — Charcoal text, 16px weight 500. Testimonial excerpts and section descriptions.

testimonial-card — Transparent fill, charcoal text, 3px radius, 8x0px padding. Six attributed testimonials in a 3-column grid — no card background, just text blocks with attribution lines below.

card — White fill, 3px radius, 10px padding, blue-gray (#bfccd6) hairline border. Small UI containers in the product-screenshot region.

pricing-card — White fill, 4px radius, 24px padding, light-gray (#d3d3d3) border. The standard tier (Pro / Enterprise).

pricing-card-featured — White fill, 4px radius, 24px padding, Blueprint-blue (#137cbd) border. The Believer tier — border highlight, not background fill.

product-screenshot — White fill, 3px radius, 0 padding, blue-gray border. The embedded application panels showing Roam's dark-themed editor UI.

footer — Dark-canvas (#182026) fill, light blue-gray (#a7b6c2) text, 24x48px padding. A 4-column link grid (About / Learn / Connect) with the Roam wordmark below.

Do's and Don'ts

Do use Blueprint blue (#137cbd) exclusively for interactive and clickable elements. Every link, every CTA, every interactive signal in the system runs on this one voltage — using it on a passive surface (a section heading, a decorative rule) would break the interactive contract.

Do keep the hero headline at weight 500, not 700. The 36px h1 at weight 500 is the quietness that positions Roam as a thinking tool for researchers. Bumping to 700 shifts the register from academic monograph to enterprise SaaS.

Do use 3px corner radius for cards and containers, and reserve the pill radius (70px) for the primary CTA only. The near-flat card corners read as archival document surfaces; mixing in 8px or 12px rounding would shift the aesthetic toward consumer app territory.

Do render product screenshots in the dark Blueprint theme (dark-canvas #182026 background, dark-surface #343a40 sidebar) — the contrast between the bone-white marketing canvas and the dark product interior reinforces that entering the app is entering a focused work environment.

Don't add a second accent color alongside Blueprint blue. The system's visual argument is built on near-monochrome restraint — introducing a secondary tint (say, a green for success states or a red for urgency) would break the document-tool register. Use charcoal grays (#738694, #a7b6c2) for semantic variation.

Don't replace the user testimonials with product screenshots in the hero. Roam's above-fold choice to lead with testimony rather than imagery is a deliberate rhetorical stance for a specific audience. A product screenshot hero would be more conventional, but it would undermine the claim that the tool's value is experiential and transformative rather than visual.

Don't use the Times New Roman serif token ({typography.serif-display}) in the marketing chrome. It belongs only inside embedded product-screenshot panels where it represents the Roam editor's own rendering. Using it in headings or body copy would create a mixed-register confusion between the marketing layer and the product layer.

Don't use a drop shadow heavier than the Blueprint 1px hairline shadow on product-screenshot cards. The 1px shadow (rgba(16,22,26,0.15)) is deliberately close to invisible. A diffuse glow-shadow would make the product panels feel like promotional imagery rather than actual application windows.

Known Gaps

• Dark-mode tokens: the product uses an extensive dark-mode token system (--dark-bg, --dark-bg-2 through --dark-bg-4, --dark-hl, --dark-left-bg, etc.) visible in the CSS extraction. The marketing site renders in light mode only; dark-mode variants are not captured here.
• Interactive states: hover and focus states are not captured from the static extraction. Blueprint's interaction model (hover: light blue-gray tint, focus: Blueprint primary ring, active: slightly darker blue-gray) lives in the component library CSS.
• Block-reference and page-link styling: the inline bidirectional link format (double-bracket references) that defines Roam's interface has its own typography and color conventions inside the product — not represented here.
• Mobile layout: the page uses responsive breakpoints that stack the 3-column testimonial grid and collapse the pricing comparison, but mobile token overrides are not captured.
• Animation: the product screenshot shows overlapping panels with z-index depth, but any transition or hover-parallax behavior is not captured in static extraction.
• Highlight colors: the CSS declares --highlight-color (warm yellow) and --dark-highlight-yellow (amber) for Roam's inline text-highlight feature — these are product tokens, not marketing chrome.