PDFtiny

Overview

PDFtiny is a privacy-first, browser-based document and image toolkit that transforms complex file operations into a seamless, zero-upload experience. Serving professionals, students, and enterprises who demand both functionality and data sovereignty, the platform embodies a "Functional Minimalism" aesthetic—clean, direct, and purposeful. The UI prioritizes clarity through a bright, neutral canvas (white surfaces at #ffffff) punctuated by a vibrant indigo primary accent (#4f46e5) and a fresh teal secondary (#00bb7f) that signal trust, efficiency, and modern capability. The emotional response is one of calm competence: users feel they are in control of their data, never surveilled.

The brand voice is precise, reassuring, and action-oriented. Vocabulary favors concrete outcomes over marketing hyperbole: "100% Client-Side Engine," "Zero Server Uploads," "GDPR Compliant." Tone is conversational yet authoritative, never breathless or casual. Example sentence in brand voice: "Compress your PDF to 100KB in seconds—your file never leaves your browser."

Colors

The color system balances accessibility with brand personality. Primary (#4f46e5, a saturated indigo) anchors all interactive elements—buttons, links, focus states, and badges—creating a consistent call-to-action language. Secondary (#00bb7f, a vibrant teal) reinforces trust and privacy messaging, used sparingly on accent elements and success states. Tertiary (#f99c00, a warm amber) highlights warnings and secondary actions. The surface stack is deliberately light: surface (#ffffff) provides the neutral canvas, surface-container (#e9ecef) creates subtle depth for grouped content, and surface-container-highest (#cbd5e1) establishes clear visual separation. On-surface text (#1e293b, a near-black slate) ensures 7:1 contrast for accessibility. Error states use a clinical rose (#e11d48) to sign

Typography

The type system pairs Outfit (a geometric, friendly sans-serif for headlines) with Inter (a neutral, highly legible workhorse for body text). This pairing communicates both approachability and technical competence. Display and headline-lg use Outfit at 900 weight (60px and 48px respectively) with tight -0.04em letter-spacing to create visual impact and brand presence. Headline-md (32px, 700 weight) bridges headlines and body content. Body-lg and body-md (18px and 16px, both 400 weight) maintain 1.5x line-height (28px and 24px) for comfortable reading on screens. Label-md and label-sm (14px and 12px, 600 and 900 weights respectively) handle UI labels and badges with crisp, scannable hierarchy. On small labels over busy backgrounds (e.g., workflow badges), apply text-shadow: 0 1px 2px rgba(0

Layout

The page rhythm follows a 12-column grid with a max-width of 1280px, allowing content to breathe on desktop while remaining readable on mobile. The hero section uses lg spacing (40px) for vertical separation between the headline, subheading, and search input, creating a clear visual hierarchy. Section breaks employ xl spacing (64px) to establish distinct content zones. The gutter (24px) is applied consistently to left/right padding on containers, ensuring content never touches viewport edges. White-space is treated as a design material: generous margins around cards (md spacing: 24px) and inputs (sm padding: 12px) reduce cognitive load. Container widths scale from 850px (narrow content) to 1400px (full-width sections), with 1200px as the standard max-width for the main content area. The sp

Elevation & Depth

Depth is conveyed through subtle layering and soft shadows rather than dramatic contrast. The elevation system defines three levels: Level 1 (Base) is the white surface (#ffffff) with no shadow. Level 2 (Standard Card) applies elevation-sm (0 1px 2px rgba(0,0,0,0.06)) and a 1px border at outline-variant (#cbd5e1), creating a gentle lift. Level 3 (Elevated/Modal) uses elevation-lg (0 8px 32px rgba(0,0,0,0.1)) with a 1px border, establishing clear separation from the background. Interactive states (hover, focus) transition to elevation-md (0 4px 12px rgba(0,0,0,0.08)) to signal interactivity wit

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, signaling approachability without sacrificing professional clarity. Buttons use lg radius (1rem / 16px), creating a friendly, clickable appearance. Cards and containers use xl radius (1.5rem / 24px) for a softer, more inviting feel. Input fields use lg radius (1rem / 16px) to match buttons and create visual cohesion. Small UI elements (icons, badges) use md radius (0.75rem / 12px) or full radius (9999px) for pill-shaped badges. The rationale: lg and xl radii (16–24px) are large enough to feel modern and approa

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses a solid indigo background (#4f46e5) with white text, lg radius (16px), and compact padding (8px 14px, 40px height). Label text is set to 12px, 900 weight, with 0.05em letter-spacing for crisp, scannable labels. On hover, the background darkens to #3f39d6 (a 10% shade shift) with a 200ms ease-out transition. Secondary buttons use a white background with a 1px outline-variant border, lg radius, and md padding (20px 24px, 56px height). On hover, the background shifts to surface-container-low (#f1f5f9). Both button types support a disabled state with 50% opacity and cursor: not-allowed.

Containers & Surfaces Cards are the primary content container. Standard cards use a white background (#ffffff), xl

Do's and Don'ts

**Do**

• Do use primary (#4f46e5) exclusively for CTAs, focus states, and brand-critical interactive elements—never dilute it with secondary uses.
• Do maintain lg spacing (40px) between major sections to create visual breathing room and reduce cognitive load.
• Do apply elevation-md (0 4px 12px rgba(0,0,0,0.08)) on hover to cards and buttons for tactile, responsive feedback.
• Do pair Outfit headlines with Inter body text to signal both approachability and technical authority.
• Do use full radius (9999px) exclusively for badges and pill-shaped elements; never apply it to cards or buttons.

**Don't**

• Don't use secondary (#00bb7f) or tertiary (#f99c00) as primary button backgrounds—they dilute the primary accent and confuse the action hierarchy.
• Don't apply shadows darker than elevation-lg (0 8px 32px rgba(0,0,0,0.1))—the design relies on subtle depth, not dramatic contrast.
• Don't use border-radius values smaller than sm (0.25rem / 4px) or larger than full (9999px) outside the defined scale; this breaks visual consistency.
• Don't set line-height below 1.5x for body text (16px body-md should be 24px line-height minimum)—readability suffers on screens.