Ballpark

# Ballpark — Style Reference
> High-contrast research tool; like a scientific dashboard with a single, urgent indicator light.

**Theme:** light

**Site:** https://ballparkhq.com

Ballpark's design conveys a sense of confident authority through its stark visual contrasts and structured layout. The interplay of deep, near-black text and crisp white backgrounds, punctuated by a single vibrant "Rocket Red" accent, creates a focused, high-contrast experience, much like an advanced research instrument. The generous use of space, especially around core content and within card structures, emphasizes clarity and reduces cognitive load, allowing complex information to be easily digestible. Distinctive rounded forms—from the extra-large button radii to the subtle card curves—soften the otherwise sharp edges, balancing precision with approachability.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Rocket Red | `#fc4a2b` | `--color-rocket-red` | Primary Call-to-Action buttons, active indicators, highlights. Its vivid saturation against the largely achromatic palette ensures immediate attention. |
| Passion Red | `#e11d48` | `--color-passion-red` | Secondary brand accent for more intense calls to action or error states, providing a deeper red alternative to Rocket Red. |
| Sunset Orange | `#f97316` | `--color-sunset-orange` | Subtle stroke accents and decorative elements. A warmer, slightly more muted accent. |
| Pale Peach | `#ffe5e0` | `--color-pale-peach` | Very light accent background, almost neutral, for soft visual differentiation. |
| Pill Button Gradient | `#f87171` | `--color-pill-button-gradient` | Background for secondary action pills, offering a soft visual texture. |
| Pitch Black | `#000000` | `--color-pitch-black` | Primary text, critical headings, icons, borders on dark elements. Establishes a bold and clear informational hierarchy. |
| Ghost White | `#ffffff` | `--color-ghost-white` | Page backgrounds, card surfaces, secondary button backgrounds. Provides clean canvas for content and negative space. |
| Ash Gray | `#f9fafb` | `--color-ash-gray` | Subtle section backgrounds, light borders, subtle hover states. Offers a barely-there differentiation from Ghost White. |
| Graphite | `#111827` | `--color-graphite` | Heading text, primary UI element text where Pitch Black might be too intense. Provides significant contrast without being absolute black. |
| Slate Blue | `#4b5563` | `--color-slate-blue` | Body copy, secondary text, iconography. Softens text impact for longer reads while maintaining readability. |
| Medium Gray | `#374151` | `--color-medium-gray` | Slightly darker body copy and secondary text for deeper contrast on lighter backgrounds. |
| Light Gray | `#6b7280` | `--color-light-gray` | Tertiary text, subtle borders, inactive states. Used for less prominent information. |
| Border Gray | `#e5e7eb` | `--color-border-gray` | Default boundary for containers and cards, hint for input fields, offering subtle structure without being visually heavy. |
| Success Green | `#15803d` | `--color-success-green` | Subtle semantic indicator for success messages or positive states. |
| Warning Yellow | `#f59e0b` | `--color-warning-yellow` | Subtle semantic indicator for warnings or informational alerts. |

## Tokens — Typography

### Inter Display
- **Substitute:** system-ui, sans-serif
- **Weights:** 700, 800
- **Sizes:** 42px, 60px, 96px
- **Line height:** 1
- **Letter spacing:** -0.035em, -0.030em
- **Role:** Display headlines and hero text. The tight line height and negative letter-spacing give it a commanding, engineered feel. The specific font features 'cv06', 'cv13', 'zero' are critical for its distinctive look.

### Inter
- **Substitute:** system-ui, sans-serif
- **Weights:** 400, 500, 600, 700
- **Sizes:** 10px, 12px, 13px, 14px, 16px, 18px, 20px, 24px
- **Line height:** 1.2, 1.33, 1.38, 1.4, 1.43, 1.46, 1.5, 1.6, 1.65
- **Letter spacing:** -0.03em, -0.02em, -0.014em, -0.01em, 0.05em
- **Role:** All body copy, subheadings, navigation, and button text. Its versatility across weights and sizes, combined with careful letter-spacing adjustments, maintains readability and a precise tone. Features 'cv01', 'cv02', 'cv04', 'cv09' ensure consistent character design.

### sans-serif
- **Substitute:** system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 12px
- **Line height:** 1.2
- **Role:** Fallback and utilitarian text where a system font provides sufficient clarity, often for labels or minor UI elements.

### IBM Plex Mono
- **Substitute:** monospace
- **Weights:** 600
- **Sizes:** 11px
- **Line height:** 1.5
- **Letter spacing:** 0.15em
- **Role:** Monospaced text for code snippets or specific data representations. The expanded letter spacing gives it a technical, distinct feel.

### Source Serif 4
- **Substitute:** serif
- **Weights:** 400
- **Sizes:** 20px
- **Line height:** 1.6
- **Letter spacing:** -0.02em
- **Role:** Used for specific body text, possibly quotes or editorial content, offering a more traditional and softer reading experience with subtle tracking.

## Tokens — Type Scale

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 10px | 1.4 | 0.5px |
| body | 14px | 1.6 | -0.14px |
| subheading | 18px | 1.5 | -0.36px |
| heading | 24px | 1.4 | -0.48px |
| heading-lg | 42px | 1 | -1.47px |
| display | 96px | 1 | -3.36px |

## Tokens — Spacing

- **Section gap:** 64-96px
- **Card padding:** 14-24px
- **Element gap:** 8px

## Tokens — Radius

- **Buttons:** 6px
- **Inputs:** 6px
- **Cards:** 10px
- **Images:** 6px
- **interactive:** 100px
- **pill:** 9999px

## Tokens — Elevation

- **Feature Card:** `rgba(0, 0, 0, 0.1) 0px 6px 9px 0px, rgba(75, 85, 99, 0.2) 0px 0px 0px 1px`
- **Hovered Button:** `rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(75, 85, 99, 0.2) 0px 0px 0px 1px`
- **Callout / Modal:** `rgba(50, 50, 92, 0.05) 0px 50px 100px -20px, rgba(0, 0, 0, 0.15) 0px 30px 60px -30px`
- **Accent Ring:** `rgb(252, 74, 43) 0px 0px 0px 2px`

## Layout

The page maintains a centered, max-width layout, effectively creating a content-focused experience within clear boundaries. The hero section is characterized by a centered, bold headline over a white background, occasionally featuring subtle background elements or abstract graphics. Sections generally alternate between centered text stacks and two-column layouts pairing text with images or product illustrations, creating a balanced rhythm. A prominent feature is the use of card grids (often 3-column) for displaying multiple features or testimonials, ensuring content is visually digestible. Navigation is a sticky top bar with a clear brand logo and primary actions. Generous vertical spacing between sections creates breathing room and allows each section to convey a distinct message without visual overlap.

## Imagery

This design primarily uses product screenshots and abstract, organic vector graphics that appear to be illustrations. Photography, when present in testimonials, is framed within rounded containers (16px radius) and sometimes features a subtle, brand-colored overlay (like the red Vodafone graphic). Product screenshots are often contained within structured cards, emphasizing functionality over aesthetic appeal. Illustrations are generally flat, geometric, and either filled with muted, abstract colors or outlines in brand colors like Rocket Red. Iconography is primarily outline-based with a medium stroke weight. The overall role of imagery is explanatory and supportive rather than purely decorative, providing visual context to features and testimonials. Image density is moderate, balanced with significant textual content and whitespace.

## Components

### Announcement Banner

### Pill Selector / Research Type Tabs

### Testimonial Card

### Navigation Link
*Primary navigation in header*

Text: Inter, 16px, weight 500, Graphite (#111827). Hover state: Pitch Black (#000000). Active state: underline 2px Rocket Red (#fc4a2b). Generous padding: 8px vertical, 8-16px horizontal to ensure distinct hit areas.

### Secondary Ghost Button
*Tertiary actions, secondary calls to attention*

Text: Pitch Black (#000000), 16px, weight 400. Background: transparent. Border: transparent. Active state: faint border or background color change. Used for subtle interactions like 'Sign In'.

### Feature Card
*Showcasing features or testimonials*

Background: Ghost White (#ffffff). Border radius: 10px. Box shadow: rgba(0, 0, 0, 0.1) 0px 6px 9px 0px, subtle inner shadow rgba(75, 85, 99, 0.2) 0px 0px 0px 1px. Contains content with 16px padding on all sides. The prominent shadow lifts the card significantly.

### Header Brand Link
*Brand logo in header*

Text: Pitch Black (#000000), 24px, Inter Display, weight 700. Features: 'cv06', 'cv13'. Minimal padding. Sets a bold brand identity at the top of every page.

### Tertiary Callout Button
*Informational or less prominent calls to action*

Text: Pitch Black (#000000), 16px, weight 400. Background: Light Gray (#e6e8eb). Radius: 6px. Padding: 8px vertical, 14px horizontal. Serves as a neutral, accessible button for less critical actions.

## Guidelines

### Do

- Prioritize high contrast between text and background using Pitch Black (#000000) or Graphite (#111827) on Ghost White (#ffffff) or Ash Gray (#f9fafb).
- Use Rocket Red (#fc4a2b) exclusively for primary call-to-action buttons and essential active states to maintain its impact.
- Apply a 9999px radius for all pill-shaped elements (buttons, tags, filters) and use 6px for standard buttons and inputs.
- Employ the Inter Display font with specific font features ('cv06', 'cv13') for all display-level headlines (42px and above) to achieve its distinct character.
- Maintain generous padding around content blocks and within components, targeting 14-24px for card padding and 8px as a base element gap.
- Utilize the shadow `rgba(0, 0, 0, 0.1) 0px 6px 9px 0px, rgba(75, 85, 99, 0.2) 0px 0px 0px 1px` for all elevated cards and containers to create a consistent lifted appearance.
- Ensure letter-spacing is applied as specified in the typography for Inter and Inter Display, especially the negative values for larger headlines, to optimize visual density.

### Don't

- Do not introduce new primary accent colors; restrict vibrant accents to Rocket Red (#fc4a2b) and its derivatives.
- Avoid using multiple shadows on a single element; stick to the defined shadow styles for cards to prevent visual clutter.
- Do not deviate from the specified font features for Inter and Inter Display, as they are integral to the brand's typographic identity.
- Refrain from using radii smaller than 6px or larger than 10px (except for 9999px pills) to maintain shape consistency.
- Do not use generic system sans-serif for body or heading text; always use 'Inter' for its consistent, readable structure.
- Avoid excessive use of bold text in body copy; reserve weights 600-700 for headings, subheadings, and key UI labels only.

## Agent Prompt Guide

### Quick Color Reference
- **Text:** Pitch Black (#000000)
- **Background:** Ghost White (#ffffff)
- **CTA:** Rocket Red (#fc4a2b)
- **Body Text:** Slate Blue (#4b5563)
- **Border:** Border Gray (#e5e7eb)

### 3-5 Example Component Prompts
1. **Create a Hero Section:** Set background to Ghost White (#ffffff). Headline text: "Your Research, Simplified" using Inter Display, 96px, weight 800, Pitch Black (#000000), letter-spacing -3.36px. Subheading: "A new way to get insights." using Inter, 24px, weight 400, Slate Blue (#4b5563), letter-spacing -0.48px. Add a Primary CTA Button (see below).
2. **Generate a Primary CTA Button:** Text: "Get Started Now" using Inter, 16px, weight 700, Pitch Black (#000000). Background: Rocket Red (#fc4a2b). Border radius: 6px. Padding: 8px vertical, 14px horizontal. Box shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px.
3. **Design a Feature Card:** Background: Ghost White (#ffffff). Border radius: 10px. Box shadow: rgba(0, 0, 0, 0.1) 0px 6px 9px 0px, rgba(75, 85, 99, 0.2) 0px 0px 0px 1px. Inside, add a heading: "Instant Insights" using Inter, 20px, weight 600, Graphite (#111827), letter-spacing -0.2px. Below, add body text: "Leverage AI to get data in minutes." using Inter, 14px, weight 400, Slate Blue (#4b5563), letter-spacing -0.14px. Inner padding should be 16px.
4. **Create a Pill Tag:** Text: "Surveys" using Inter, 14px, weight 400, Graphite (#111827). Background: Ash Gray (#f9fafb). Border radius: 9999px. Padding: 7px horizontal, 0px vertical.
5. **Compose a Navigation Link:** Text: "Solutions" using Inter, 16px, weight 500, Graphite (#111827). On hover, change text to Pitch Black (#000000). Active state adds a 2px underline in Rocket Red (#fc4a2b). Padding: 8px vertical, 12px horizontal.