OpenCapital

---
version: alpha
name: OpenCapital landing-page reference
description: A restrained financial-research landing page with white space, regular-weight
  Geist typography, charcoal pill actions and warm gray panels. A large filing-reader
  demonstration sits over muted city photography, followed by compact earnings strips,
  paired audience panels, data-table and chart showcases, and a large closing headline.
colors:
  primary: '#25241D'
  surface: '#FFFFFF'
  on-surface: '#25241D'
  secondary: '#F3F1EB'
  accent: '#2F4D77'
typography:
  headline:
    fontFamily: Geist, "Geist Fallback", system-ui, sans-serif
    fontSize: 26px
    fontWeight: '400'
    lineHeight: 32.5px
  body:
    fontFamily: Geist, sans-serif
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  closing:
    fontFamily: Geist, sans-serif
    fontSize: 72px
    fontWeight: '400'
    lineHeight: 79.2px
---

# OpenCapital landing-page reference

## Overview

Observed at 2026-09-19T06:42:03.705702+00:00; desktop 1440 × 1000 CSS pixels at device scale 1, with a full-page capture and a separate 390 × 844 mobile opening view. Values explicitly called measured come from computed styles; other spatial descriptions are visual observations.

An independent reference for a public-company research landing page. It combines a quiet editorial frame with dense, credible-looking product demonstrations: a filing reader, earnings cards, a company screener and a chart. The public marketing page is the reference; the pictured research application is embedded demonstration content, not a separately captured dashboard. This is not an official brand manual.

## Colors

The measured page canvas is #FFFFFF, paired with warm charcoal #25241D for text and primary actions. Pale #F3F1EB and #ECEAE3 surfaces organize metadata, cards and conversations, with #E7E5DE appearing in supporting fills. Blue #2F4D77 is present in data marks and links; use it sparingly. Positive-value treatments are green-tinted, while the photographic backdrop contributes muted blue-gray and amber, observed visually rather than treated as exact global tokens. The footer returns to a warm pale surface. Supporting copy uses the dark foreground at reduced opacity, measured at 60% in several blocks. Preserve dark text on light panels instead of introducing a terminal-like dark theme.

## Typography

The declared stack is Geist, Geist Fallback, system-ui, sans-serif. The opening headline is deliberately small: 26px, weight 400, line-height 32.5px and tracking -0.325px. It occupies a 715px desktop box and a 358px mobile box. Section headings use 22px/28.6px with regular weight. Smaller feature-card titles use 16px/24px at weight 500, while metadata labels and table headings include 14px/20px. The main call-to-action label is 16px/24px. Dense preview conversations use 12px/18px; do not use that small size for primary marketing copy. The closing headline expands to 72px/79.2px in an 880px centered box, reducing to 52px/59.8px on mobile. This size contrast is a major part of the page rhythm.

## Layout

The desktop content aligns to x=94 within a 1252px-wide central region. Place the compact wordmark at the left of the header, short navigation near the center, and secondary/primary actions at the right. The hero is left aligned with a small headline, one dark action and a subdued row of AI-client names. Leave ample open space before a wide photographic stage containing the filing-reader preview.

The reader uses three desktop zones: a narrow application rail, a large central document and a compact tools card. Below it, three horizontal strips of compact earnings cards introduce controlled data density. Then show two equal audience panels, each with brief copy and its own framed demonstration. A four-item statistic row separates these from two alternating split features: copy beside a large screener, then a chart beside copy. A three-column follow-up feature group uses chat and email previews. Add a restrained releases row, the oversized closing action area, then a multi-column legal/product footer.

At 390px, the outer margin becomes 16px. The header retains a small primary action and a menu control while hiding full navigation. The hero wraps into two lines; integration names wrap across two rows. The reader demonstration drops its wide desktop side zones in the inspected view, showing the document heading, compact menu icon, metadata block and readable body copy. Long metadata is visibly truncated within its container rather than overflowing the whole page. Sampled later feature headings align to x=40 inside padded single-column panels. Footer groups measure 163px and form two columns. Both inspected widths have zero horizontal document overflow. Only the mobile opening was visually reviewed; exact intermediate breakpoints and the full mobile scroll experience were not exercised.

## Elevation & Depth

Use photographs as soft frames behind crisp product windows. The filing tools card and inset application windows provide modest local elevation; most marketing panels remain flat with only subtle rules or tonal separation. Avoid adding large universal shadows. Precise shadow tokens were not measured.

## Shapes

The main exploration action is a full pill, measured at 182px wide with 20px horizontal padding. The mobile menu control is 36px wide and also uses a full-radius hit area. Main marketing sections are broadly rectangular; inner windows and metadata panels use gentle corner rounding. Keep dense data rows squared enough for column alignment. Exact panel radii are visual estimates, not measured design-system values.

## Components

The filing preview combines a ticker/company heading, a metadata definition block, prose and a striped financial table. Its desktop tool card contains compact icon-and-label rows. Earnings strips use company icons, ticker identifiers and short metrics; they are intentionally clipped at the strip boundary. Audience panels contrast conversational AI output with a document-reader view. The screener uses aligned numeric columns, while the chart places a large headline number above pale bars and an overlapping source annotation. Smaller feature cards pair short explanatory text with a conversation or email composition. Release cards rely on date and title rather than illustrations.

Nested scrollers in desktop and mobile evidence belong to bounded previews; the complete desktop page was captured through the footer. The capture shows one static state of the earnings strips and demos. Menu behavior, research navigation, hover states and animation timing were not tested. Cookie consent was rejected before capture. The displayed financial numbers are illustrative page content, not validated financial data.

## Do's and Don'ts

- Do combine quiet marketing copy with clearly structured, denser product demonstrations.
- Do retain the warmer panel surfaces against the white canvas.
- Do make narrow layouts prioritize the document and its context over desktop sidebars.
- Don't turn the whole page into a dashboard grid; preserve generous section spacing.
- Don't add bright colors to every metric or use decoration in place of readable tables.
- Don't infer application functionality or investment conclusions from the static preview.