LoadUp Junk Removal

Overview

LoadUp is a direct-action junk removal service brand that rejects corporate softness in favor of bold, high-contrast visual communication. The aesthetic is "Utilitarian Directness"—a design philosophy that prioritizes speed, transparency, and immediate comprehension over decorative flourish. The brand serves homeowners and businesses seeking hassle-free clutter removal, and the UI evokes confidence and efficiency through stark black-and-white typography paired with a vibrant lime-green (#ccff00) accent that signals urgency and action. Every visual element is purposeful: the 80px display headline in 800-weight Google Sans commands attention without apology; the lime CTA button is impossible to miss and psychologically triggers the "click now" impulse.

The voice is conversational yet authoritative, stripped of jargon and hedging. Sentences are short, declarative, and benefit-focused. Example: "Guaranteed upfront pricing. Same-day pickup in most areas. No surprise fees." The brand personality rejects the twee or overly friendly tone common in service industries; instead, it sounds like a trusted friend who cuts through the noise and delivers results. Vocabulary favors concrete nouns (truck, item, price, pickup) over abstract marketing speak (experience, journey, solution).

Colors

The LoadUp color system is built on radical contrast and functional hierarchy. **Primary (#ccff00)** is the brand's signature lime-green accent, deployed exclusively on call-to-action buttons, key links, and interactive focus states. This high-saturation, high-luminance yellow-green creates an unmistakable visual pop against the white background and signals immediate actionability—users instinctively recognize it as clickable. **On-Primary (#0a0a0a)** is near-black, ensuring WCAG AAA contrast (19.5:1) on the lime button surface.

**Secondary (#4fd3cf)** is a soft cyan-teal used for supporting accents, secondary CTAs, and status indicators. It provides visual relief from the lime's intensity while maintaining the brand's modern, tech-forward aesthetic. **Tertiary (#1863dc)** is a profession

Typography

Google Sans is the exclusive typeface across all scales, chosen for its geometric clarity and tech-industry associations. The type system uses weight as the primary hierarchy lever: **Display (80px, 800-weight)** commands hero sections with extreme boldness; **Headline-lg (40px, 700-weight)** anchors section breaks; **Body-md (16px, 400-weight)** is the workhorse for body copy, set at 24px line-height (1.5x) for comfortable reading. **Label-md (14px, 700-weight)** is applied to button text and form labels, with 0.01em letter-spacing to maintain crispness at small sizes.

Letter-spacing is minimal across all scales (ranging from -0.04em on display to +0.02em on labels) to preserve the geometric, tight-fitting aesthetic. Line-height is consistently generous (1.4x–1.5x) to ensure readability

Layout

LoadUp uses a 12-column fluid grid with a max-width of 1320px, centered on desktop and full-bleed on mobile. The page rhythm is driven by generous whitespace: sections are separated by 40px (lg spacing) vertically, creating visual breathing room that reinforces the brand's "no clutter" philosophy. The hero section uses asymmetric layout—text on the left (60% width), illustration on the right (40%)—to balance the heavy 80px headline with visual interest.

Container padding is consistently 24px (gutter) on desktop, reducing to 12px (sm spacing) on tablets and 8px on mobile. The primary CTA button sits at 44px height with 10px vertical and 24px horizontal padding, sized for thumb-friendly mobile interaction. Card components use 24px internal padding with 12px gaps between elements. The spacin

Elevation & Depth

Depth in LoadUp is achieved through subtle shadows and layering, not through color darkening. The elevation system uses three tiers: **Level 1 (sm)**: 0 1px 2px rgba(0, 0, 0, 0.06) for subtle dividers and inactive states. **Level 2 (md)**: 0 3px 8px rgba(0, 0, 0, 0.15) for cards, dropdowns, and hover states—this is the most-used shadow, creating a gentle lift without drama. **Level 3 (lg)**: 0 10px 28px rgba(0, 0, 0, 0.16) for modals, overlays, and the most prominent interactive elements.

No element uses a hard drop-shadow or blur-heavy effect; all shadows are tight, spread-minimal, and desig

Shapes

LoadUp's shape philosophy is **Geometric Pragmatism**: rounded corners are used sparingly and purposefully, never decoratively. **Buttons** use 6px border-radius (DEFAULT), a subtle rounding that softens hard edges without appearing playful or organic. **Cards and containers** use 8px (md) or 12px (lg) for slightly more breathing room. **Inputs and form fields** default to 6px, matching buttons for visual consistency. **Badges and pills** use 9999px (full) for a classic capsule shape, signaling that these are discrete, contained pieces of information.

The rationale: sharp 0px corners would fe

Components

**Action Elements**: The primary CTA button is the visual anchor of every page section. It uses 44px height, 10px vertical padding, 24px horizontal padding, 6px border-radius, and a solid lime-green background (#ccff00) with near-black text (#0a0a0a). On hover, the background shifts to #b8e600 (primary-container) and a subtle md-level shadow (0 3px 8px rgba(0, 0, 0, 0.15)) appears, creating a 150ms ease-in-out transition. The secondary button uses a full-black background (#0a0a0a) with white text, 9999px border-radius (pill shape), and 15px vertical / 31px horizontal padding for a more prominent, rounded aesthetic. Ghost buttons (transparent with a 2px lime border) are used for tertiary actions; they inherit the primary button's 6px radius and 44px height but use transparent background wit

Do's and Don'ts

**Do**

• Do use the lime-green primary (#ccff00) exclusively on CTAs and interactive focus states—it is the brand's signature accent and loses impact if overused.
• Do maintain at least 24px vertical spacing (lg) between major sections to reinforce the "clutter-free" brand promise.
• Do apply 80px / 800-weight display headlines only to hero sections; use 40px / 700-weight for subsection headers to preserve hierarchy.
• Do use the 6–12px border-radius range consistently; avoid mixing sharp corners with heavily rounded elements in the same component family.
• Do pair the near-black on-surface text (#0a0a0a) with white or light-gray backgrounds for maximum legibility and contrast.
• Do use secondary cyan (#4fd3cf) for supporting accents and status indicators, never as a primary CTA color.
• Do apply md-level shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to interactive elements on hover to signal elevation and interactivity.

**Don't**

• Don't use the lime-green primary on body text, backgrounds, or non-interactive elements—it is reserved for CTAs and focus states only.
• Don't mix Google Sans with other typefaces; the system is monofamily by design for visual coherence.
• Don't reduce line-height below 1.4x on body text; the generous spacing is essential for readability and brand perception.
• Don't apply shadows heavier than lg-level (0 10px 28px rgba(0, 0, 0, 0.16)) to any element; the system uses subtle depth, not dramatic floating.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii fragment the system.
• Don't place small text (12px) over busy backgrounds without a 0 1px 2px rgba(0, 0, 0, 0.1) text-shadow for legibility.
• Don't use the error color (#ef4444) for non-critical messaging; reserve it for validation failures and warnings only.