Ballpark uses a confident, editorial research-platform language: a near-pure white canvas, oversized grotesque display headlines, and a single warm vermilion accent (#fc4a2b) that fires across borders, highlights, and icon strokes. The system feels quiet by default — almost every surface is white or whisper-gray — and lets the orange act as a small, functional flash against monochrome typography. Components are flat and pill-leaning: floating rounded tags, hairline-bordered cards, and a dark CTA that grounds the page against the airy type. The result reads like a magazine spread that happens to be a SaaS homepage — weight, scale, and one chromatic note doing all the work.
#fc4a2bBrand accent — borders, highlight strokes, icon fills, small inline emphasis marks. The only saturated color in the system; appears as punctuation, never as a wash; Brand-to-tint linear gradient — appears as a full-bleed color bar behind embedded product screenshots
#ea3718Deeper vermilion variant — icon glyphs and small filled marks where the primary accent needs more weight against white
#f97316Secondary warm accent — decorative strokes and illustration outlines that sit beside the primary vermilion
#ffac9eSoft warm fill — subtle wash backgrounds, shadow tints that carry the brand's warmth without screaming
#ffe5e0Tinted surface — warm-tinted card or section background, barely-there warmth to differentiate from neutral gray
#ffedd5Lightest warm tint — badge fills, tag backgrounds, and hover surfaces that need warmth without saturation
#dc2626Red supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
#15803dGreen supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
#ff7e67Decorative warm gradient — used behind product imagery to extend the brand's warmth into visual sections
#000000Headlines, body text, filled dark buttons, the heaviest typographic weight in the system
#111827Supporting neutral for secondary UI, dividers, and muted labels.
#374151Secondary headings and body emphasis where Slate 600 is too light
#4b5563Body text, paragraph copy, secondary descriptions, link text
#6b7280Tertiary text, captions, icon strokes at reduced weight, disabled labels
#ffffffPrimary canvas, card surfaces, button text on dark fills
#f9fafbSection background — the quietest gray band used to separate content zones from the pure white canvas
#f2f3f5Elevated surface — card backgrounds that sit on the Fog band, subtle inputs, and table row alternation
#e6e8ebHairline dividers, card borders, input outlines at rest
96px · 800 · 1 · -0.035px trackingThe quick brown fox jumps
60px · 800 · 1The quick brown fox jumps
42px · 700 · 1The quick brown fox jumps
24px · 600 · 1.43 · -0.03px trackingThe quick brown fox jumps
20px · 500 · 1.6 · -0.02px trackingThe quick brown fox jumps
18px · 400 · 1.46 · -0.014px trackingThe quick brown fox jumps
16px · 400 · 1.5 · -0.01px trackingThe quick brown fox jumps
14px · 400 · 1.43The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
sans-serif — detected in extracted data but not described by AI
Display headlines only — the 96px hero 'Research without the complexity' is the signature moment. Weight 800 at display sizes with -0.035em tracking creates a compressed, editorial block of type. lineHeight 1.0 stacks lines tightly. Do not use below 42px; below that, switch to Inter.
Body, UI, navigation, and sub-headings. Weight 400 for paragraphs, 500 for nav and UI labels, 600 for sub-headings and strong emphasis, 700 for inline emphasis. Negative letter-spacing tightens the body (-0.01em to -0.03em) — a small but consistent editorial choice.
Eyebrow and label text — 'DEMOCRATISING RESEARCH AT CUSTOMER OBSESSED COMPANIES SUCH AS' and similar uppercase tags. The +0.15em letter-spacing creates wide mechanical tracking that reads as editorial metadata. Always uppercase, always at 11px.
Pull-quote and testimonial body text — introduces a serif counterpoint to the otherwise all-grotesque system. Used sparingly to add texture in quote cards and long-form editorial moments.
6px16px9999px10px6px6px1px2px3px4px5px6px7px8px10px12px14px15px16px18px20px22px24px32px34px40px48px56px72px80px104px120pxFull-width bar with Mist Gray (#f2f3f5) background, 5px vertical padding, centered IBM Plex Mono 11px 600 uppercase text with +0.15em tracking. Contains a small inline emoji and a link arrow. Border-bottom: 1px solid #e6e8eb.
White background, 0px border-bottom (relies on spacing for separation). Logo (Ballpark wordmark with subtle strikethrough detail) left-aligned, nav links (Inter 500, 14px, Slate 900) center-aligned, two buttons right-aligned. Height approximately 64px. Max-width 1200px container.
Transparent fill, 1px solid #e6e8eb border, 6px radius, Inter 500 14px in Slate 900, padding 8px 16px. Hover: border darkens to Slate 600.
Ink Black (#000000) background, white text, Inter 600 14px, 6px radius, padding 8px 16px. Contains a small arrow icon trailing the label. This is the only dark button in the system — the contrast against the white canvas makes it the clear action target.
Inter Display 800 at 96px (hero) or 60px (section), lineHeight 1.0, letterSpacing -0.035em, color Ink Black. Stacks as a tight block — often 2-3 lines. No color emphasis; relies on weight and scale alone.
IBM Plex Mono 600, 11px, +0.15em letter-spacing, uppercase, Slate 600. Always appears above a headline or section title. Functions as a typographic tag identifying the section category.
White fill, 1px solid #e6e8eb border, 9999px radius (pill), Inter 500 14px Slate 900, padding 6px 16px. Small box-shadow: 0 1px 2px rgba(0,0,0,0.05). Arranged in a horizontal row above product previews, often with thin connecting lines to a central node.
White card, 16px radius, floating on a full-bleed vermilion-to-coral gradient background. Contains browser-chrome mockup with tab labels, content sections, and UI elements. Elevation: 0 50px 100px -20px rgba(50,50,92,0.05), 0 30px 60px -30px rgba(0,0,0,0.15). The gradient bar behind the card is the strongest color moment on the page.
4-column grid, all logos rendered in Slate 900 (#111827) or pure black. 24px row gap, 40px column gap. No color, no boxes — just monochrome wordmarks on white. The absence of color signals trust and lets the content speak.
White background, no border, 16px radius on the image side, 10px radius on the text side. Left: full-bleed photo with subtle warm gradient overlay. Right: company logo (top), quoted text in Inter 500 16px Slate 700, attribution with avatar circle (40px) + name (Inter 600 14px) + role (Inter 400 13px Slate 600). Dot pagination indicators below.
White background, 10px radius, 1px solid #e6e8eb border, 24px padding. Icon at top in Vermilion Flame (#fc4a2b), heading in Inter 700 20px Ink Black, body in Inter 400 16px Slate 600. No shadow at rest; subtle hover lift.
White fill, 1px solid #e6e8eb border, 6px radius, Inter 400 16px Slate 900 text, padding 10px 14px. Placeholder: Slate 500. Focus: 2px Vermilion Flame ring (0 0 0 2px #fc4a2b) replaces the border.
Apricot Wash (#ffedd5) background, Ink Black text, Inter 600 12px, 9999px radius, padding 4px 10px. Used for feature tags and category labels where the brand warmth should carry through.
White or Fog background, 16px radius on the top edge (curved top boundary), multi-column link grid with Inter 400 14px Slate 600. Column headings in Inter 600 14px Ink Black. Generous vertical padding (48-64px).
#ffffffPrimary page background — pure white dominates the system
#f9fafbSection separator — the first step away from pure white, used for alternating content bands
#f2f3f5Card surface — sits on top of Fog bands for subtle elevation without shadows
#ffe5e0Brand-tinted surface — warm wash for product showcase areas and color-coded content blocks
0 1px 2px rgba(0, 0, 0, 0.05)
0 6px 9px rgba(0, 0, 0, 0.1)
0 50px 100px -20px rgba(50, 50, 92, 0.05), 0 30px 60px -30px rgba(0, 0, 0, 0.15)
0 0 0 2px rgb(252, 74, 43)
0 0 0 1px rgba(75, 85, 99, 0.2), 0 2px 2px rgba(0, 0, 0, 0.06)
Centered, max-width 1200px container with generous breathing room. The hero is a centered text stack: eyebrow label → massive 96px display headline → single paragraph subtext → floating capability tags above an embedded product preview. Below the fold, the rhythm alternates between centered text sections and two-column splits (text left / product visual right or vice versa). Customer logos form a 4-column grid with 24px row gaps. Testimonials appear in a carousel format with large left-image / right-text cards. Sections are separated by 80px vertical gaps, and the product preview is the only section that uses a full-bleed color band. Navigation is a minimal top bar with logo, centered links, and two right-aligned buttons. No sidebar, no mega-menu.
The visual language is product-first and editorial. Photography appears only in testimonial cards — warm-toned lifestyle portraits (outdoor, golden-hour, candid) with a subtle warm gradient overlay that ties into the brand palette. Product screenshots are the dominant visual element: full browser-chrome mockups floating on a vermilion gradient bar, showing the actual product UI with orange accent highlights. Customer logos are rendered in pure monochrome black — no color, no boxes, no treatment. The overall density is low: large white space between elements, one photograph or product shot per section maximum. Icons are minimal, single-weight line icons that pick up the vermilion accent when active.
## Quick Color Reference - Canvas: #ffffff - Primary text: #111827 (Slate 900) / #000000 for display - Body text: #4b5563 (Slate 600) - Border / hairline: #e6e8eb - Section background: #f9fafb - Accent (vermilion): #fc4a2b - primary action: no distinct CTA color ## 3-5 Example Component Prompts 1. **Hero Section**: White (#ffffff) background. Eyebrow in IBM Plex Mono 11px 600 uppercase, +0.15em tracking, #4b5563. Headline in Inter Display 800, 96px, line-height 1.0, letter-spacing -0.035em, color #000000. Subtext in Inter 400, 18px, line-height 1.46, #4b5563. Row of 6 pill-shaped capability tags below: white fill, 1px solid #e6e8eb, 9999px radius, Inter 500 14px #111827, 6px 16px padding. primary action: no distinct CTA color 2. **Feature Card Grid**: 3-column grid, 24px gap. Each card: white background, 10px radius, 1px solid #e6e8eb, 24px padding. Icon at top in #fc4a2b (24px, line-weight). Heading: Inter 700, 20px, #000000. Body: Inter 400, 16px, line-height 1.5, #4b5563. 3. **Testimonial Card**: Full-width card, 16px radius, no border. Left half: photograph with warm gradient overlay (linear-gradient 268deg from #ff7e67 to #fff3f1). Right half: white background, 32px padding. Company logo at top in #111827. Quote in Inter 500, 16px, #374151. Attribution row: 40px circular avatar + name in Inter 600 14px #000000 + role in Inter 400 13px #6b7280. 4. **Product Preview Block**: Full-bleed section with vermilion-to-coral linear gradient background (linear-gradient(268.33deg, #fc4a2b, #ff7e67, #ffac9e, #ffe5e0)). Centered white product card floating on the gradient: 16px radius, browser-chrome mockup with tabs labeled in Inter 500 13px #4b5563, white content area with 24px padding, elevation shadow 0 50px 100px -20px rgba(50,50,92,0.05). 5. **Customer Logo Grid**: 4-column grid, 24px row gap, 40px column gap. All logos rendered in #111827 or pure black, centered in their cells. No boxes, no borders, no color. Logos sized to 120px max-width. Section preceded by IBM Plex Mono 11px 600 uppercase eyebrow in #6b7280.
The system uses a two-voice typographic strategy: Inter Display 800 at massive sizes for editorial authority, and Inter 400-600 for functional UI. The contrast between a 96px display headline and 14px body text is the system's primary visual mechanism — the more extreme the scale jump, the more confident the design feels. IBM Plex Mono introduces a third voice: mechanical, wide-tracked, uppercase metadata that frames content as labeled and categorized rather than flowing. Source Serif 4 appears only in pull-quote moments to add human texture. Negative letter-spacing is used aggressively at display sizes (-0.035em) and gently at body sizes (-0.01em to -0.03em) — the system tightens as it scales up, creating compressed, high-density type blocks.
The vermilion accent (#fc4a2b) follows a strict 5% rule: it should appear on no more than 5% of any given screen's pixel area. It manifests as: (1) 2px border or stroke on one element per section, (2) small icon fills on active or highlighted states, (3) the full-bleed gradient band behind product previews, and (4) the 2px focus ring on form inputs. It never appears as a filled button, a large background, or body text. The only exception is the product preview gradient bar, which is the page's single chromatic moment. This discipline is what makes the orange feel like a signal rather than decoration.
Same editorial display-headline approach with oversized grotesque type, minimal color palette, and pill-shaped feature tags floating above product previews
Shared monochrome-on-white aesthetic with a single chromatic accent and massive centered display headlines, though Vercel uses a cooler palette
Similar pill-tag navigation above product screenshots, warm accent against white, and confident typographic scale
Same generous whitespace philosophy, monochrome-by-default interface with restrained color accents, and editorial headline treatment
Both use a single warm accent color against pure white with oversized display type, floating element tags, and product-preview-as-hero layouts
Use the design exports or connect Musterlab to your AI.
