ScaleYourShop

Overview

ScaleYourShop is a B2B SaaS platform that enables WooCommerce merchants to rapidly duplicate and localize product catalogs across 22 European markets. The brand embodies "Efficient Minimalism"—a design philosophy that prioritizes clarity, speed, and functional elegance over ornamentation. The interface conveys confidence through a high-contrast monochromatic palette (pure black #1a1a1a on white #ffffff) paired with generous whitespace and precise typography, creating an atmosphere of professional control and technical sophistication. Users interact with a system that feels both powerful and approachable, where every pixel serves a purpose and every interaction is instantaneous.

The brand voice is direct, pragmatic, and solution-oriented. ScaleYourShop speaks to independent e-commerce operators and small-to-medium enterprises with language that is concrete, jargon-light, and action-focused. The tone avoids hype; instead, it emphasizes measurable outcomes and technical precision. Example sentence in brand voice: "Connect once, deploy everywhere—Claude handles the rewriting, we handle the complexity."

Colors

The color system is rooted in a high-contrast, achromatic foundation that communicates trust and technical competence. Primary (#1a1a1a, a near-black) is deployed on all call-to-action buttons, navigation elements, and interactive states—it is the signature accent that drives user attention and action. On-primary (#ffffff) ensures maximum legibility and accessibility on dark backgrounds. The surface stack progresses from pure white (#ffffff) at the brightest level through carefully calibrated grays (surface-container-low #f0f0f0, surface-container-high #e5e5e5) to create visual hierarchy without introducing color. Secondary (#444444) and tertiary (#888888) are reserved for supporting UI elements, disabled states, and secondary labels, maintaining the monochromatic aesthetic while providing

Typography

The typography system is built on Geist, a geometric sans-serif optimized for screen legibility and technical content, with Arial as a fallback. Display (57.6px, weight 900, line-height 64px, letter-spacing -0.02em) is reserved for hero headlines and primary page titles, commanding attention through scale and weight. Headline-lg (48px, weight 900) and headline-md (28px, weight 800) create a two-tier hierarchy for section headers, with aggressive negative letter-spacing (-0.015em, -0.01em respectively) that tightens the letterforms and conveys density and purpose. Body-lg (17px, weight 400, line-height 28px) and body-md (16px, weight 400, line-height 24px) provide comfortable reading rhythm for descriptive copy and feature explanations. Label-md (15px, weight 600) and label-sm (12px, weight

Layout

The layout system employs a 12-column grid with a fixed container max-width of 1200px, centered with symmetric padding of 40px (lg spacing) on desktop. The hero section uses a two-column grid (1fr 1fr) with 80px gap, creating a balanced composition that pairs narrative copy with an interactive demo card. Section spacing follows a semantic rhythm: lg spacing (40px) separates major sections, md spacing (24px) divides subsections, and sm spacing (12px) groups related elements. The page maintains a single-column layout on mobile (< 768px) with reduced padding (24px gutter) and stacked components. Whitespace is treated as a first-class design element—negative space around cards, buttons, and text blocks creates visual breathing room and reduces cognitive load. The container-max-width of 1200px

Elevation & Depth

Depth in ScaleYourShop is conveyed through subtle shadow layering rather than color or blur. The elevation system defines three levels: Level 1 (Base, no shadow) for the page background and default card states; Level 2 (Standard, box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)) for cards, modals, and elevated containers; Level 3 (Prominent, box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08)) for hero cards, floating panels, and interactive overlays. Shadows use a soft, spread blur (12px to 40px) with low opacity (0.06 to 0.08) to create a diffuse, naturalistic effect rather than a hard drop. Interactive el

Shapes

The shape system follows a philosophy of "Functional Softness"—rounded corners are applied strategically to reduce visual harshness while maintaining a technical, professional aesthetic. Buttons and primary CTAs use rounded: full (999px border-radius) to create a pill shape that feels approachable and clickable, with padding 14px 32px and height 48px for comfortable touch targets. Cards and containers use rounded: lg (16px) to soften edges without appearing playful or casual. Input fields and smaller interactive elements use rounded: DEFAULT (8px) for a subtle curve that signals interactivity

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with 14px vertical padding and 32px horizontal padding for comfortable touch targets. The primary button (button-primary) uses background #1a1a1a, color #ffffff, font-weight 700, border-radius 999px, and applies a transition: all 250ms ease. On hover, the background shifts to primary-container (#333333) and text to on-primary-container (#f0f0f0), creating a subtle darkening effect. The secondary button (button-secondary) uses a 2px solid border in outline color (#cccccc), transparent background, and primary text color (#1a1a1a). On hover, the background becomes surface-container-high (#e5e5e5) and the border shifts to primary (#1a1a1a), signaling activation. Both buttons use label-md typograp

Do's and Don'ts

**Do**

• Do use primary (#1a1a1a) exclusively for CTAs, active states, and primary navigation—it is the signature accent that drives user action.
• Do maintain high contrast between text and background (minimum 7:1 ratio per WCAG AA) to ensure legibility across all surfaces.
• Do apply box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08) consistently across elevated components to create a unified depth language.
• Do use negative letter-spacing (-0.02em to -0.01em) on all headlines to create visual tension and forward momentum.
• Do apply transition: all 250ms ease on interactive elements to provide smooth, predictable feedback.
• Do use rounded full (999px) exclusively for buttons and badges to create a clear visual distinction from other components.

**Don't**

• Don't introduce color beyond the monochromatic palette and error red (#d32f2f)—the system's power lies in its achromatic restraint.
• Don't use box-shadow values larger than 0 8px 40px rgba(0, 0, 0, 0.08) or with opacity greater than 0.12, as this breaks the subtle elevation hierarchy.
• Don't apply rounded corners smaller than 4px (sm) or larger than 20px (xl) outside of the full (999px) button pill—intermediate values create visual confusion.
• Don't mix font families—Geist is the sole typeface; Arial is fallback only. Never introduce system fonts or serif families.
• Don't use letter-spacing greater than 0.08em on body copy, as this reduces readability; reserve tight letter-spacing (-0.02em) for headlines only.
• Don't apply opacity or transparency to text colors—use the discrete on-surface and on-surface-variant tokens instead for consistent contrast.