---
title: "Ballpark design system"
variant: extended
source: https://ballparkhq.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/ballparkhq-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Ballpark · Design System

> Clear research, presented with calm confidence

**Theme:** light · **Industry:** saas · **Source:** https://ballparkhq.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Ballpark’s homepage pairs oversized, high-contrast typography with a bright, spacious canvas to make complex research software feel approachable. Product interfaces, customer proof, and restrained orange and pink accents add energy without interrupting the clean, editorial flow.

## North star

Keep the page predominantly white and spacious, letting bold black type and real product evidence carry the story while accents stay selective.

## Overview

The visual system is built on a white canvas, with very pale gray bands and surfaces separating long sections without heavy dividers. Near-black headings create strong contrast; muted grays keep supporting copy quiet and readable. Orange marks the small announcement badge and selected emphasis, while saturated pink appears in a prominent product feature band. Oversized, tightly tracked sans-serif headlines establish hierarchy, balanced by compact Inter navigation and body copy. The hero is centered and spacious, with a faint dotted field and a monochrome customer logo grid. Farther down, the page alternates between product-interface showcases, text-and-image feature rows, cards, customer stories, and a softly tinted participant section. Product screenshots and photography supply most of the visual detail; subtle card shadows create depth while the surrounding layout remains open and restrained.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, white cards, and the clean backdrop behind the hero and product showcases. |
| Slate Copy | `#4b5563` | `--color-slate-copy` | neutral | Main muted copy in explanatory text and footer content. |
| Mist Surface | `#f9fafb` | `--color-mist-surface` | surface | Pale section bands, navigation and footer backgrounds, and softly differentiated cards. |
| Ink | `#111827` | `--color-ink` | brand | Primary headings, navigation text, and dark call-to-action buttons. |
| Graphite Copy | `#374151` | `--color-graphite-copy` | neutral | Secondary muted text where body copy needs a slightly stronger tone. |
| Ballpark Orange | `#fc4a2b` | `--color-ballpark-orange` | accent | Announcement badge and selective section or text emphasis; a defining interface accent. |
| Dotted Silver | `#e5e7eb` | `--color-dotted-silver` | semantic | Subtle dotted hero texture and pale gradient detail, not a dominant brand fill. |
| Signal Pink | `#e11d48` | `--color-signal-pink` | accent | Bold feature-section band and selective highlight, distinct from the more frequent orange accent. |
| Blush Tint | `#ffe5e0` | `--color-blush-tint` | semantic | Soft decorative tint in background details rather than a core interface surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9fafb` (Mist Surface) · `--color-text` → `#111827` (Ink) · `--color-text-muted` → `#4b5563` (Slate Copy) · `--color-text-subtle` → `#374151` (Graphite Copy) · `--color-accent` → `#fc4a2b` (Ballpark Orange) · `--color-accent-2` → `#e11d48` (Signal Pink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111827` | `#ffffff` | 17.74:1 | AAA |
| `#111827` | `#f9fafb` | 16.98:1 | AAA |
| `#4b5563` | `#ffffff` | 7.56:1 | AAA |
| `#4b5563` | `#f9fafb` | 7.23:1 | AAA |
| `#374151` | `#ffffff` | 10.31:1 | AAA |
| `#374151` | `#f9fafb` | 9.86:1 | AAA |
| `#fc4a2b` | `#ffffff` | 3.41:1 | AA-large |
| `#fc4a2b` | `#f9fafb` | 3.27:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgb(249, 250, 251) 100%)`
- `radial-gradient(rgb(229, 231, 235) 1px, rgba(0, 0, 0, 0) 1px), radial-gradient(rgb(229, 231, 235) 1px, rgb(255, 255, 255) 1px)`
- `linear-gradient(rgb(249, 250, 251) 11.9792%, rgba(245, 245, 245, 0) 100%)`
- `linear-gradient(rgba(245, 245, 245, 0) 0%, rgb(249, 250, 251) 84.375%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, captions, and most section headings. | Inter |
| Source Serif 4 | `--font-source-serif-4` | webfont | 400 | Occasional serif detail within the otherwise sans-serif presentation. | Literata |
| Inter Display | `--font-display` | webfont | 700, 800 | Large display headlines and primary page headings. | Inter |

- **Inter:** Use clean sans-serif forms; body copy is regular, navigation is semibold, and small uppercase eyebrows are tracked.
- **Source Serif 4:** Keep usage sparse and secondary; measured regular weight contrasts with the dominant sans-serif system.
- **Inter Display:** Heavy weights, tight negative tracking, and compact line-height give headlines a bold, close-set silhouette.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 800 | 1 | -0.035em | — | Inter Display | Large campaign-scale headline moments. |
| h1 | 60px | 800 | 1 | -0.03em | — | Inter Display | Centered hero headline. |
| h2 | 42px | 700 | 1 | -0.03em | — | Inter Display | Major section titles and closing CTA headline. |
| h3 | 24px | 600 | 1.4 | -0.03em | — | Inter | Feature titles and testimonial or product-story headings. |
| h4 | 20px | 500 | 1.5 | -0.02em | — | Inter | Smaller supporting headings within content blocks. |
| body | 14px | 400 | 1.43 | -0.01em | — | Inter | Explanatory paragraphs and interface-adjacent copy. |
| caption | 12px | 400 | 1.33 | 0 | — | Inter | Card labels, participant details, and fine print. |
| nav | 14px | 600 | 1.43 | -0.01em | — | Inter | Header navigation links. |
| eyebrow | 13px | 500 | 1.38 | 0.05em | uppercase | Inter | Compact uppercase section labels and category cues. |
| code | 11px | 600 | 1.5 | 0.15em | uppercase | IBM Plex Mono | Small uppercase technical or system labels where present. |

OpenType features in use: `"cv01", "cv02", "cv04", "cv09"`, `"cv06", "cv13"`, `"cv01", "cv02", "cv03", "cv04", "cv09"`, `"cv06", "cv13", "zero"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 24, 32, 40, 48 px.
- Section rhythm 120px · element gap 16px · card padding 13px · max content width 1180px.

Use a centered content frame with a measured page max width of 1180px and generous side breathing room. The opening hero is center-aligned, followed by a compact monochrome logo grid. Across the long single-page flow, alternate centered sections with asymmetric feature rows, wide product showcases, card grids, and testimonial panels. Preserve spacious section rhythm and moderate component density; let large gaps distinguish ideas instead of relying on rules. Pale full-width bands and the vivid feature strip provide occasional changes of pace.

## Shape & elevation

- Radius: button `7px` · card `16px` · media `50%` · nav `7px` · link `16px` · xs `4px` · sm `5px` · md `6px` · lg `7px` · xl `8px` · 2xl `10px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, rgba(0, 0, 0, 0.05) 0px 10px 15px -3px`
- Shadow `md-2` (other): `rgba(0, 0, 0, 0.1) 0px 6px 9px 0px`
- Shadow `md-3` (other): `rgba(0, 0, 0, 0.14) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.13) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.05) 0px 10px 10px -3.75px, rgba(229, 231, 235, 0.5) 0px 0px 0px 1px`
- Shadow `hairline` (other): `rgba(75, 85, 99, 0.2) 0px 0px 0px 1px`
- Shadow `md-4` (other): `rgba(0, 0, 0, 0.22) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.19) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.08) 0px 10px 10px -3.75px, rgba(75, 85, 99, 0.1) 0px 0px 0px 1px`
- Shadow `md-5` (link): `rgba(0, 0, 0, 0.04) 0px 0.597144px 0.597144px -0.9375px, rgba(0, 0, 0, 0.04) 0px 1.81088px 1.81088px -1.875px, rgba(0, 0, 0, 0.04) 0px 4.78699px 4.78699px -2.8125px, rgba(0, 0, 0, 0.02) 0px 15px 15px `

Keep most page regions visually flat, using pale background bands rather than outlines to separate sections. Product and testimonial cards sit above the canvas with soft, low-contrast shadows and rounded corners. Use fine, subtle hairline treatments around selected floating interface elements; avoid making borders or shadows the main visual feature.

## Imagery

Use detailed product-interface captures as the primary evidence: dashboards, survey responses, prototype previews, and cards. Mix these with selectively framed customer photography and illustrative interface content. The hero’s dotted background stays faint and subordinate. Customer logos are mostly monochrome, while product mockups and participant flags retain their own colors; treat these as content imagery rather than extra brand colors.

## Components

### Announcement bar

A compact centered update sits above the navigation, with a small orange NEW badge and dark announcement text.

### Header navigation

Brand mark on the left, centered product links, and sign-in plus dark demo CTA on the right.

### Hero

Centered oversized black headline, short muted supporting copy, and a faint dotted field behind the customer-logo proof.

### Product showcase

Layered research dashboard and response interface overlap a vivid feature band to show the real product in context.

### Feature cards

Rounded white cards present research methods and examples, with subtle shadowing and product imagery.

### Customer proof

Monochrome brand marks and testimonial panels establish credibility, while photography remains part of the customer story.

### Closing CTA and footer

A centered dark-button call to action leads into a pale, multi-column footer with dense links and small status details.

### Measured component styles

- **Primary button** (“Book a demo”): background #111827 · text #0000ee · radius 7px · padding 0px 14px · 400 12px sans-serif · shadow rgba(255, 255, 255, 0) 0px 0px 0px 0px, rgb(17, 24, 39) 0px 0px 0px 1px, rgba(0,
- **Secondary button** (“Learn more”): background #ffffff · text #0000ee · radius 7px · padding 0px 14px · 400 12px sans-serif · shadow rgba(255, 255, 255, 0) 0px 0px 0px 0px, rgba(75, 85, 99, 0.2) 0px 0px 0px 1px, r
- **Link** (“REC Live interviews”): transparent background · text #0000ee · radius 16px · padding 0px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.04) 0px 0.597144px 0.597144px -0.9375px, rgba(0, 0, 0, 0.04) 0px
- **Card** (“The Netherlands 11,740 participants”): background #ffffff · text #000000 · radius 16px · padding 32px 0px 20px 0px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, rgba(0, 0, 0, 0.05) 0px 10px 15px -3px
- **Navigation item** (“NEW Ballpark is now available in Claude”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Keep the canvas predominantly white.
- Use near-black for high-priority headings and CTAs.
- Reserve orange and pink for selective emphasis.
- Let product screenshots explain the software.
- Use pale section bands to separate content gently.
- Maintain generous space around headline groups.

## Don't

- Do not fill every section with a colored background.
- Do not replace the product evidence with abstract decoration.
- Do not use saturated accents for ordinary body copy.
- Do not crowd the hero with navigation or extra content.
- Do not add heavy borders to every card.
- Do not make the entire page feel like a dashboard.

## Agent prompt

Build a new SaaS page in Ballpark’s restrained, research-focused visual style. Use Gallery White (#ffffff) as the dominant canvas, Mist Surface (#f9fafb) for gentle section changes, Ink (#111827) for headlines and primary actions, Slate Copy (#4b5563) for supporting text, and reserve Ballpark Orange (#fc4a2b) and Signal Pink (#e11d48) for small, intentional accents. Set oversized, tightly tracked sans-serif headlines above compact, readable Inter-style copy. Create a centered hero, customer proof, alternating feature layouts, and product-interface showcases with generous open space. Favor real interface imagery, rounded white cards, and subtle shadows; keep decorative dotted texture faint. Maintain a calm editorial rhythm, using wide pale bands and one vivid feature moment rather than repeated colored blocks.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | A long single-page sequence from announcement and navigation through centered hero, feature showcases, customer proof, CTA, and footer. | Top-level product navigation, Repeated demo calls to action, Feature storytelling, Customer trust signals | Centered oversized hero, Monochrome logo grid, Alternating product and text layouts, Pale section bands, Soft-shadow cards |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ballparkhq-com