ScrapingBee

Overview

ScrapingBee is a developer-focused web scraping API that eliminates infrastructure complexity. The design system embodies "Energetic Pragmatism"—a visual language that pairs bold, high-contrast yellow (#ffc91f) with deep charcoal (#0f0f0e) to convey confidence, speed, and technical competence. The brand personality is direct and action-oriented: no fluff, no apologies, just clear solutions for data extraction at scale. The UI celebrates the yellow-and-black contrast as a signal of power and reliability, evoking the visual language of industrial tools and warning systems—appropriate for a platform that handles mission-critical scraping tasks. Voice: technical but approachable, confident without arrogance. Example: "Scrape at scale without managing proxies, browsers, or anti-bot defenses—we handle the complexity so you don't."

Colors

The color system is built on a striking primary accent—#ffc91f (golden yellow)—deployed on CTAs, the header bar, and interactive highlights to command attention and signal actionability. This primary is paired with a near-black on-surface color (#0f0f0e) for maximum contrast and readability, ensuring 7:1+ WCAG AAA compliance on all text. Secondary colors (#ffc252, a lighter yellow-orange) and tertiary (#f68600, a warm orange) provide supporting accents for secondary actions, badges, and status indicators. The surface stack ranges from pure white (#ffffff) for primary content areas to soft grays (#f6f6f6, #f5f5f5) for container backgrounds, with a mid-tone (#e6ecf2) reserved for elevated surfaces and hover states. Outline colors (#5a7184, a muted slate-blue) are used for borders and divider

Typography

The type system centers on Circular Std, a geometric sans-serif that conveys modernity and precision—essential for a technical API platform. Display (56px, 700 weight, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (48px, 700, -0.015em) and headline-md (36px, 700, -0.01em) establish section hierarchies with consistent 1.22–1.33 line-height ratios for readability. Body-lg (18px, 400, 1.56 line-height) and body-md (16px, 400, 1.5 line-height) form the core reading experience, with generous line-height (1.56–1.77) to ease scanning of technical documentation. Label-md (14px, 700, 0.01em) and label-sm (12px, 700, 0.05em) are reserved for UI labels, buttons, and badges, with increased letter-spacing to enhance legibility at small sizes. All headings use 700 weight

Layout

The layout follows a 12-column grid with a fixed max-width of 1204px, centered with 20px horizontal padding on mobile (768px breakpoint) and 30px on desktop. This creates a fluid, responsive canvas that scales gracefully from 320px to 1536px viewports. Spacing is semantic: lg (40px) separates major sections (hero, features, testimonials); md (24px) divides subsections and card groups; sm (12px) provides breathing room within components. The gutter (20px) is used for horizontal spacing between grid columns and card padding. Container backgrounds use surface-container-lowest (#f5f5f5) to subtly distinguish content zones without harsh borders. Vertical rhythm is maintained through consistent margin-bottom increments (10px, 15px, 20px, 24px, 30px, 40px, 60px, 80px) to create visual predictabil

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of the primary yellow accent. Level 1 (Base): flat surfaces with no shadow, used for primary content and cards in neutral contexts. Level 2 (Elevated Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to cards on hover or when they require subtle lift. Level 3 (Modals/Overlays): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for modals, dropdowns, and floating elements that demand visual separation. The header bar uses no shadow, relying instead on its saturated primary color (#ffc91f) to establish dominance

Shapes

The shape philosophy is "Geometric Minimalism"—sharp, purposeful corners that convey technical precision without coldness. Buttons use 4px border-radius (0.25rem), a subtle rounding that feels modern yet functional, avoiding the softness of larger radii. Cards and containers use 6px (0.5rem) for a slightly warmer feel while maintaining geometric clarity. Input fields and smaller UI elements use 3px (0.375rem) for consistency with button styling. Modals and elevated surfaces use 12px (1rem) to signal importance and create visual separation. Full-radius (9999px) is reserved exclusively for badge

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses #ffc91f background with #0f0f0e text, 48px height on desktop (56px on tablet+), 16px font-size (18px on tablet+), 700 weight, and 4px border-radius. Padding is 0 39px horizontally. On hover, the background shifts to #ffd655 (primary-container) with opacity: 0.9, transitioning over 150ms. The secondary button (button-secondary) uses #ffc252 background, 12px font-size, 700 weight, 7.5px vertical padding, 24px horizontal padding, and 3px border-radius—a compact variant for tertiary actions. The outline button (button-outline) has transparent background, 2px border in #0f0f0e, and inverts to solid on hover (background: #0f0f0e, color: #ffffff) over 150ms. All buttons use Circular Std, le

Do's and Don'ts

**Do**

• Do use the primary yellow (#ffc91f) exclusively for CTAs, focus states, and brand-critical highlights—it is the visual anchor of the system.
• Do maintain 7:1+ contrast ratios between text and background; pair #0f0f0e text with #ffc91f, #ffd655, or #ffffff backgrounds only.
• Do apply 150ms cubic-bezier(0.4, 0, 0.2, 1) transitions on all hover and focus state changes to create a cohesive, responsive feel.
• Do use Circular Std for all UI text; it is the brand typeface and ensures consistency across all touchpoints.
• Do reserve the 4px border-radius for buttons and small interactive elements; use 6px for cards and 12px for modals to establish clear visual hierarchy.

**Don't**

• Don't use the primary yellow for body text, backgrounds, or non-interactive elements—it must remain a signal of actionability.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.12); excessive depth contradicts the clean, modern aesthetic.
• Don't mix typefaces; Circular Std is the sole brand font. System fonts (system-ui, sans-serif) are fallbacks only.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii fragment the visual language.
• Don't apply opacity or blur effects to buttons or primary CTAs; use solid color transitions instead to maintain clarity and confidence.