iLovePDF

Overview

iLovePDF is a utility-focused PDF processing platform that embodies a philosophy of 'Functional Clarity'—prioritizing straightforward, task-oriented design over decorative flourishes. The brand serves professionals and casual users alike who need reliable document manipulation without learning curves. The aesthetic is clean, accessible, and confident: a bright, neutral canvas (#f5f5fa) anchored by a bold, action-oriented red accent (#e5322d) that signals CTAs and primary interactions. The UI communicates competence and trustworthiness through consistent spacing, clear hierarchy, and generous whitespace.

The brand voice is direct, encouraging, and jargon-light. Sentences are short and benefit-focused: 'Fusionner et combiner des fichiers PDF et les mettre dans l'ordre que vous voulez' (merge and combine PDF files and put them in the order you want). The tone avoids corporate stiffness; instead, it speaks to users as peers solving real problems. Typography uses Graphik—a geometric, humanist sans-serif—at controlled weights (400 for body, 600 for headings) to maintain legibility and approachability across all screen sizes.

Colors

The color system balances a neutral, light foundation with strategic accent colors that guide user attention. The surface stack (#f5f5fa → #ffffff → #d0d0d6) creates subtle depth without darkness, allowing content to breathe. Primary (#e5322d) is the brand's signature red—used exclusively on CTAs, active states, and key interactive elements. It is warm, energetic, and immediately recognizable, appearing on the 'S'inscrire' button and primary actions throughout the interface. Secondary (#4a7aab) is a professional blue reserved for supporting actions, secondary navigation, and informational elements; it appears in the secondary CTA 'Se connecter' and in secondary container backgrounds (#def2ff). Tertiary (#7253e2) is a vibrant purple used sparingly for premium features, badges, and accent hi

Typography

The type system uses Graphik across all weights (100–900) to maintain brand consistency and ensure legibility at all sizes. Display (60px, 700 weight, -0.02em tracking) anchors hero sections and major announcements; headline-lg (42px, 600 weight) is used for page titles like 'Tous les outils nécessaires pour travailler sur vos PDF'; headline-md (28px, 600 weight) breaks up content sections; title-lg (20px, 600 weight) labels tool cards and subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and descriptive text; body-md (16px, 400 weight, 24px line-height) is the default for all body copy and ensures 1.5x line-height for comfortable reading. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons, form labels, and UI controls; label-sm (

Layout

The layout uses a 12-column grid with a max-width of 1280px, allowing content to scale fluidly on mobile (single column, 24px gutter) and expand to full width on desktop. The header is fixed at 60px height with 24px horizontal padding, ensuring navigation remains accessible during scroll. Hero sections use lg spacing (40px) for vertical rhythm between the headline, subheading, and CTA buttons. Tool cards are arranged in a 4-column grid on desktop, 2 columns on tablet, and 1 column on mobile, each with 24px padding and 24px gap between cards. Section separators use 40px (lg) vertical spacing above and below to create breathing room. The container max-width of 1280px ensures text lines remain readable (60–80 characters) and prevents the layout from feeling stretched on ultra-wide displays. W

Elevation & Depth

Depth is achieved through subtle shadow layering and surface color shifts rather than dramatic drop shadows. Level 1 (Base): the surface background (#f5f5fa) with no shadow, establishing the canvas. Level 2 (Standard Cards): 1px solid border in outline-variant (#c4c4cc) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift. Level 3 (Elevated/Modals): box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15)—a multi-layer shadow that conveys prominence without harshness. Hover states on cards transition the

Shapes

The shape philosophy is 'Geometric Pragmatism'—using rounded corners to soften the interface while maintaining clarity and hierarchy. Buttons and inputs use 8px (DEFAULT) border-radius, a moderate curve that feels modern without appearing playful. Cards use 24px (xl) border-radius, creating a more generous, inviting appearance for content containers. Chips and toggles use 16px (lg) for a balanced middle ground. The full radius (9999px) is reserved for badges and circular avatars. Small UI elements like dropdown panels and tooltips use 4px (sm) for a crisp, utilitarian feel. This tiered approac

Components

Action Elements Buttons are the primary driver of user intent. The primary button uses background: {colors.primary} (#e5322d), text-color: white, padding: 8px 12px, height: 40px, border-radius: 8px, and label-md typography (14px, 600 weight). On hover, the background shifts to {colors.primary-container} (#ff6a58) with a 150ms ease transition, and the cursor changes to pointer. On active/pressed, the background darkens to #c41f1a with a 50ms transition. Secondary buttons use a transparent background with a 1px border in {colors.outline-variant} (#c4c4cc) and text-color: {colors.primary}. On hover, the background becomes {colors.surface-container-high} (#dcdce2) with the same 150ms transition. Ghost buttons (used for tertiary actions) have no border, transparent background, and text-colo