PinDownCloud

Overview

PinDownCloud is a cloud-based Pinterest board downloader purpose-built for designers, creatives, and content curators who need to bulk-download entire Pinterest boards in original HD quality without watermarks. The brand embodies a "Practical Minimalism" aesthetic—clean, efficient, and focused on the user's workflow. The interface strips away unnecessary complexity, using a warm stone-and-white palette (surface: #fafaf9, on-surface: #1c1917) paired with a bold Pinterest-red accent (primary: #e60023) that signals action and urgency. The emotional response is one of clarity and empowerment: users feel in control of their creative assets, with the UI acting as a transparent conduit between intention and result.

The brand voice is direct, practical, and encouraging—never condescending or overly casual. Vocabulary emphasizes speed, quality, and freedom: "bulk download," "HD original quality," "no watermark," "organized ZIP." The tone avoids hype; instead, it speaks to real designer pain points. Example sentence in brand voice: "Download 2,000 images in the time it takes to brew coffee—organized, numbered, ready for Figma."

Colors

The color system centers on a warm, neutral foundation (Stone palette: #fafaf9 surface, #0c0a09 inverse-surface) that evokes paper and craft, grounding the interface in tactile authenticity. The primary accent—Pinterest red (#e60023)—is reserved exclusively for call-to-action buttons, active states, and critical interactive elements. This high-saturation red (appearing 128 times in the codebase) creates immediate visual hierarchy without overwhelming the calm background. Secondary and tertiary accents provide semantic meaning: blue (#2563eb) for secondary actions and information, green (#16a34a) for success states and completion feedback. The surface stack is deliberately shallow—only 4 distinct levels (surface, surface-container-low, surface-container-high, surface-container-highest)—to m

Typography

The type system pairs Plus Jakarta Sans (weights 600–700 for headlines, 400–500 for body) with Inter (400–600 for body and labels), creating a hierarchy that balances personality with legibility. Plus Jakarta Sans's geometric warmth communicates approachability in headlines (display: 56px/700, headline-lg: 40px/700), while Inter's neutrality ensures body text remains scannable at 16–18px. Letter-spacing is tightly controlled: headlines use -0.02em to -0.01em for visual compaction and emphasis, while body text uses +0.005em to prevent the warm stone background from creating visual mud. Line-height scales semantically: display uses 64px (1.14x), headlines use 48px (1.2x), and body uses 24–28px (1.5x), ensuring comfortable reading rhythm. Labels (12–14px) use 500–600 weight with +0.01em to +0

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, allowing the interface to breathe on desktop while remaining compact on mobile. The spacing scale is semantic: unit (8px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. The gutter is fixed at 24px on desktop, collapsing to 12px on tablet and 8px on mobile. Container max-width (1280px) is applied to all major sections (hero, features, comparison, footer), preventing text from stretching beyond 80 characters per line—critical for readability. White-space philosophy is "generous but purposeful": sections are separated by lg spacing (40px) to create visual breathing room, while related elements within a section use

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering, avoiding the heavy shadows common in modern UI. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.05)) for subtle card borders and input focus states, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and hover states, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and dropdowns. Primary buttons receive an additional brand-specific shadow on hover: 0 4px 12px rgba(230, 0, 35, 0.25), creating a warm glow that reinforces the red accent. Cards use a 1px border in outline-variant (#d6d3d1) paired

Shapes

The shape philosophy is "Geometric Warmth"—rounded corners that feel intentional and craft-like rather than playful or corporate. Buttons and inputs use lg radius (1rem / 16px), creating a friendly, approachable feel without sacrificing professional appearance. Cards and containers use xl radius (1.5rem / 24px), establishing a softer, more inviting aesthetic for content blocks. Chips and badges use full radius (9999px), signaling their role as discrete, self-contained elements. The DEFAULT radius (0.5rem / 8px) is used sparingly for minor UI elements like list items and small containers. This

Components

Action Elements Buttons follow a three-state model: primary (red #e60023 on white, 40px height, 12px 24px padding, lg radius), secondary (transparent with outline, same dimensions), and ghost (transparent, no border). Primary buttons receive a warm shadow on hover (0 4px 12px rgba(230, 0, 35, 0.25)) and darken to #cc001f, creating tactile feedback. All buttons use label-md typography (14px, 600 weight) with 0.01em letter-spacing for crispness. Transition all color and shadow properties over 150ms ease-out to prevent jarring state changes.

Containers & Surfaces Cards use surface-container-lowest (#f5f5f4) background with a 1px outline-variant border (#d6d3d1) and sm shadow (0 1px 2px rgba(0, 0, 0, 0.05)). On hover, cards transition to surface-container-high (#e7e5e4) with md shadow

Do's and Don'ts

**Do**

• Do use the primary red (#e60023) exclusively for CTAs, active states, and critical interactive elements—never for decorative or background purposes.
• Do maintain the warm stone palette (#fafaf9, #78716c, #a8a29e) as the dominant visual language; it signals craft and authenticity.
• Do apply md spacing (24px) between major sections and lg spacing (40px) for hero/footer separation to create visual breathing room.
• Do use Plus Jakarta Sans (600–700 weight) for all headlines to establish personality and hierarchy; reserve Inter for body and labels.
• Do apply sm shadow (0 1px 2px rgba(0, 0, 0, 0.05)) to cards and inputs to create subtle depth without visual heaviness.
• Do transition all interactive states (hover, focus, active) over 150ms ease-out to create smooth, predictable feedback.

**Don't**

• Don't use the primary red (#e60023) for body text, backgrounds, or decorative elements—it's reserved for action and urgency.
• Don't exceed 3 distinct surface levels in a single view; the shallow surface stack is intentional and prevents visual noise.
• Don't apply shadows heavier than lg (0 16px 40px rgba(0, 0, 0, 0.12)) to any element; the design relies on color contrast and borders for hierarchy.
• Don't use border-radius smaller than DEFAULT (8px) on interactive elements; maintain the Geometric Warmth aesthetic.
• Don't mix Plus Jakarta Sans and Inter in the same headline; use Plus Jakarta Sans exclusively for display, headline-lg, and headline-md.
• Don't apply letter-spacing greater than 0.02em on body text; it reduces readability on the warm stone background.