DonPDF

Overview

DonPDF is a privacy-centric, browser-based PDF manipulation suite that embodies the aesthetic of "Functional Minimalism with Trust Emphasis." The brand serves users who prioritize data sovereignty and speed—professionals, students, and privacy-conscious individuals who refuse to upload sensitive documents to cloud services. The UI evokes clarity and confidence through a clean, light-dominant palette (98.1% lightness background, #ffffff surfaces) punctuated by a decisive cobalt primary (#216ad8) that signals action and trustworthiness. Every interaction is designed to feel instant and local, with no loading states or upload spinners—the visual language reinforces the core promise: your files never leave your device.

The tone is direct, reassuring, and jargon-free. DonPDF speaks like a trusted colleague, not a corporate entity. Vocabulary favors concrete verbs ("merge," "sign," "compress") over abstract nouns. The brand personality is competent and humble—it doesn't oversell; it delivers. Example sentence in voice: "Your PDFs are ready. They never left your computer."

Colors

The color system is built on a foundation of trust and clarity. **Primary (#216ad8)** is a medium cobalt blue—the signature accent used exclusively on primary CTAs ("Merge PDFs"), active navigation states, and focus rings. It appears at 100% opacity on white backgrounds and commands immediate attention without aggression; the hex value sits at LAB 45.5% lightness, ensuring sufficient contrast (WCAG AAA) against both #ffffff (on-primary: #fafcff) and dark surfaces. **Secondary (#199962)** is a muted forest green reserved for success states, trust badges ("100% private"), and affirmative feedback; it pairs with secondary-container (#dbf9e6) for low-emphasis backgrounds. **Tertiary (#1a89c5)** is a teal-leaning blue used for informational elements and secondary CTAs like "Fill & Sign."

The s

Typography

The type system uses GeistSans (a geometric, modern sans-serif from Vercel) as the primary family, with GeistMono as the monospace fallback for code and technical content. The hierarchy is built on six core levels: **Display (60px, 700 weight, -0.04em letter-spacing)** for hero headlines; **Headline-lg (44px, 700 weight, -0.02em)** for page titles and major sections; **Headline-md (28px, 600 weight)** for subsection headers; **Body-lg (18px, 400 weight, 28px line-height)** for long-form copy and hero descriptions; **Body-md (15px, 400 weight, 24px line-height)** for standard paragraph text and UI labels; **Label-md (14px, 600 weight, 0.01em letter-spacing)** for button text and form labels; **Label-sm (12px, 500 weight)** for badges, chips, and secondary metadata. Letter-spacing is negativ

Layout

The layout follows a **12-column grid with a fixed 1080px container max-width**, centered on the viewport with symmetric gutters of 24px on desktop. The sidebar (276px fixed width) anchors navigation and brand identity on the left; the main content area flexes to fill remaining space. Spacing is semantic and hierarchical: **lg (40px)** separates major sections (hero from "All tools"); **md (24px)** is the default padding inside cards and the standard gap between related elements; **sm (12px)** is used for tight groupings (icon + label in nav items); **xs (4px)** is reserved for micro-spacing (badge padding, icon margins). The hero section uses a 2-column layout with the headline and CTAs on the left (60% width) and the mascot illustration on the right (40% width), creating visual balance w

Elevation & Depth

Depth is conveyed through a restrained shadow system that mimics soft, diffused light rather than hard drop shadows. The system defines four elevation levels: **Level 1 (sm)**: 0 1px 2px rgba(63, 72, 88, 0.05), 0 1px 3px rgba(63, 72, 88, 0.07)—used for subtle hover states on nav items and input fields; **Level 2 (md)**: 0 4px 12px -2px rgba(63, 72, 88, 0.09), 0 2px 6px -2px rgba(63, 72, 88, 0.06)—applied to cards and dropdown panels; **Level 3 (lg)**: 0 14px 34px -10px rgba(63, 72, 88, 0.16), 0 6px 14px -6px rgba(63, 72, 88, 0.08)—reserved for modals and floating elements; **Level 4 (accent)**

Shapes

The shape philosophy is **"Soft-Technical Precision"**—rounded corners are generous enough to feel approachable and modern, yet restrained enough to maintain professional clarity. The rounded scale uses six tiers: **sm (9px)** for nav items, search inputs, and small interactive elements; **DEFAULT (13px)** for standard input fields and form controls; **md (18px)** for cards, chips, and medium containers; **lg (24px)** for larger cards and modals; **xl (32px)** for hero sections and prominent containers; **full (9999px)** for pills, badges, and fully rounded elements. The primary CTA button use

Components

Action Elements **Button-primary** (48px height, 14px vertical padding, 24px horizontal padding, 9px border-radius, #216ad8 background, #fafcff text, label-md weight 500) is the dominant CTA. It uses the accent shadow (0 8px 22px -6px rgba(33, 106, 216, 0.42)) to float above the surface. On hover, the background darkens to #1559bd and the shadow intensifies to 0 8px 28px -6px rgba(33, 106, 216, 0.5); transition duration is 0.13s (--dur-fast). On active, the background shifts to #144998 (brand-900) with no shadow change, creating a "pressed" tactile effect. **Button-secondary** (48px height, 20px vertical padding, 24px horizontal padding, 18px border-radius, #ffffff background, #1d232e text, 1px outline at #cfd3d9) is used for exploratory or lower-priority actions. On hover, the backgro

Do's and Don'ts

**Do**

• Do use primary (#216ad8) exclusively on primary CTAs and active states—never on secondary buttons or decorative elements.
• Do maintain 24px gutters and 40px section spacing to create visual rhythm and prevent content from feeling cramped.
• Do apply the accent shadow (0 8px 22px -6px rgba(33, 106, 216, 0.42)) only to primary buttons and floating elements to signal importance.
• Do use GeistSans with font-feature-settings: 'cv01', 'ss01' enabled to maintain the geometric, modern aesthetic across all text.
• Do pair icons (18px, left-aligned) with button text; never use icon-only buttons without a tooltip.
• Do use the full rounded scale (9px–32px) based on component type—smaller radii for interactive elements, larger for containers.

**Don't**

• Don't use secondary (#199962) or tertiary (#1a89c5) on primary CTAs—they are reserved for success states and informational elements.
• Don't apply shadows to cards with colored backgrounds; shadows are only for white/light surfaces to maintain clarity.
• Don't use pure black (#000000) or pure white (#ffffff) for text or borders—always use on-surface (#1d232e) or outline (#cfd3d9) from the token system.
• Don't exceed 1080px container max-width on desktop; wider layouts reduce readability and dilute the focused, intimate brand experience.
• Don't animate transitions longer than 0.22s (--dur) for standard interactions; use 0.13s (--dur-fast) for micro-interactions like hover states.
• Don't use more than three font weights in a single view—stick to 400 (regular), 500 (medium), and 600–700 (bold) for hierarchy.