iLovePDF

Overview

iLovePDF is a utilitarian PDF toolkit built for the everyday user who values speed, clarity, and zero friction. The brand embodies "Functional Minimalism"—a design philosophy that strips away unnecessary ornamentation while maintaining warmth through a bold, energetic red accent (#e5322d) that signals action and confidence. The interface prioritizes task completion: users land on the homepage, select a tool, and begin work within seconds. The emotional response is one of relief—complex PDF operations feel simple, free, and trustworthy.

The brand voice is direct, encouraging, and jargon-free. Vocabulary favors action verbs ("Merge," "Split," "Compress") and concrete benefits ("100% FREE," "easy to use"). The tone never condescends; it speaks to users as capable people solving real problems. Example sentence in brand voice: "Reduce file size while optimizing for maximal PDF quality—no hidden steps, no surprises."

Colors

The color system centers on a high-contrast, accessible palette designed for clarity and task-driven interaction. Primary (#e5322d) is the signature red used exclusively on call-to-action buttons ("Sign up"), critical links, and active states—it commands attention without aggression. The inverse-primary (#ff6a58) provides a lighter, more energetic variant for hover states, creating tactile feedback at 200ms transitions. On-surface (#33333b) is the dominant text color, a near-black that ensures 16:1 contrast against the light background (#f5f5fa). On-surface-variant (#707078) is reserved for secondary text, descriptions, and disabled states, maintaining 7:1 contrast for accessibility.

Secondary (#4a7aab) and tertiary (#ab6993) are supporting accent colors used sparingly in category badges,

Typography

The type system uses Graphik across all weights (100–900), a geometric sans-serif that conveys both professionalism and approachability. Display (56px, 700 weight, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (42px, 600 weight) introduces major sections; headline-md (28px, 600 weight) breaks up tool categories. Body text uses 16px at 400 weight with 24px line-height for comfortable reading at any screen size. Labels are set at 14px, 600 weight with 0.01em tracking to emphasize interactive elements. On small labels over busy tool-card backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure legibility. The type hierarchy reinforces task flow: large headlines draw the eye to the value proposition, body copy explains benefits, and labels guide ac

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport with 24px gutters on desktop (reducing to 12px on tablet, 0px on mobile). The hero section spans full width with 64px (lg spacing) top and bottom padding, creating breathing room around the headline and subheading. Tool cards are arranged in a 4-column grid on desktop, 2 columns on tablet, 1 column on mobile—each card uses 24px (md spacing) internal padding and 24px gap between cards. The fixed header (60px height) sits above all content, with the main content area offset by margin-top: 60px to prevent overlap. White-space is generous: section breaks use lg spacing (40px), subsection breaks use md spacing (24px), and inline element spacing uses sm (12px). This rhythm creates visual rest points that guide

Elevation & Depth

Depth in this system is achieved through subtle shadows and layering, never through color darkening. The base layer (Level 1) is the light background (#f5f5fa) with no shadow. Level 2 (standard cards and inputs) uses elevation-sm (0 1px 2px rgba(0, 0, 0, 0.06))—barely perceptible, creating a 1px visual lift. Level 3 (hovered cards, modals, dropdowns) uses elevation-md (0 3px 8px rgba(0, 0, 0, 0.15))—a soft, spread shadow that suggests depth without drama. Level 4 (tooltips, premium popovers) uses elevation-lg (0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4p

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently but never excessively, balancing approachability with professional clarity. Buttons use lg radius (1rem / 16px), creating a friendly, clickable appearance without appearing cartoonish. Cards use xl radius (1.5rem / 24px), the largest radius in the system, to soften the container and invite interaction. Input fields use DEFAULT radius (0.5rem / 8px), a subtle curve that signals interactivity without distraction. Chips and toggles use full radius (9999px), creating pill-shaped elements that feel distinct from other UI

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary (#e5322d) background with white text, 8px vertical and 16px horizontal padding, 40px height, and lg radius (16px). On hover, the background transitions to inverse-primary (#ff6a58) at 200ms, creating tactile feedback. The button-secondary variant uses a transparent background with a 1px outline-variant border, maintaining the same padding and height; on hover, it fills with surface-container-high (#f9f9fc) and the text color shifts to primary, signaling selection. Button-ghost removes the border entirely, appearing as text until hover, when it gains a subtle background fill. All buttons use label-md typography (14px, 600 weight) and disable state uses 50% opacity with cursor: not-al

Do's and Don'ts

**Do**

• Do use primary (#e5322d) exclusively for primary CTAs and critical interactive states—never use it for decorative elements or backgrounds.
• Do maintain the 24px gutter and lg spacing (40px) between major sections to create visual rest and guide users through the tool catalog.
• Do apply elevation-md shadow and surface-container-highest background on card hover to create clear, tactile feedback at 200ms transitions.
• Do use Graphik 600 weight for all headlines and labels to maintain visual hierarchy and signal importance.
• Do ensure all interactive elements have a visible focus state with a 3px primary-colored box-shadow for keyboard accessibility.
• Do use full radius (9999px) only for chips and badges; never apply it to buttons or cards, which use lg and xl respectively.

**Don't**

• Don't use secondary (#4a7aab) or tertiary (#ab6993) as primary action colors—they are supporting accents only and will dilute the brand's clarity.
• Don't apply shadows darker than elevation-md (0 3px 8px rgba(0, 0, 0, 0.15)) to standard cards; excessive depth creates visual noise and contradicts the minimalist aesthetic.
• Don't mix border-radius values within a single component type (e.g., don't use 8px on one button and 12px on another)—consistency is essential to the system's coherence.
• Don't use on-surface-variant (#707078) for primary text or CTAs; it is reserved for secondary information and disabled states only.
• Don't exceed 1280px container max-width, even on ultra-wide displays—this preserves readability and prevents text lines from exceeding 80 characters.
• Don't animate transitions faster than 150ms or slower than 300ms; the 200ms standard (cubic-bezier(0.2, 0, 0, 1)) is optimized for perceived responsiveness without feeling sluggish.