Preview image. Unlock full-res
High-contrast research tool; like a scientific dashboard with a single, urgent indicator light.
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.
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.
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.
