Pacdora

Overview

Pacdora is a precision packaging design platform that democratizes dieline creation for designers, manufacturers, and packaging engineers. The brand aesthetic is 'Technical Minimalism'—a fusion of engineering rigor and clean, accessible design. The UI prioritizes clarity and speed: users navigate complex dimensional specifications through intuitive form layouts, real-time 3D previews, and one-click exports. The emotional response is confidence: users trust Pacdora to handle technical accuracy while they focus on creative iteration. The brand voice is direct, professional, and solution-oriented—never condescending, always precise. Pacdora speaks in imperatives and outcomes: 'Download your dieline in seconds. Customize dimensions without limits. Export to PDF, AI, or DXF.' Example sentence: 'Your 350g white paperboard box is ready—generate the dieline in three formats.'

Colors

Pacdora's color system balances technical precision with approachable energy. The primary color, Vivid Purple (#731eff), is the signature accent used on all call-to-action buttons, active states, and brand-critical interactive elements. It conveys innovation and control—essential for a tool that handles high-stakes packaging specs. The surface stack is anchored in near-white neutrals (surface: #ffffff, surface-dim: #f7f7f7, surface-container: #f0f0f0) to maximize legibility of technical diagrams and dimension callouts. Secondary accent colors support status communication: Error Red (#ff445e) flags dimension conflicts or validation failures; Warning Orange (#ff9947) highlights caution states; Success Green (#00b57a) confirms successful exports or calculations. On-surface text uses a near-bl

Typography

The typography system uses Poppins as the primary typeface, chosen for its geometric clarity and strong numerals—critical for a tool displaying precise measurements. The hierarchy spans eight levels: Display (60px, 700 weight) for hero statements; Headline-lg (40px, 600) for section titles; Headline-md (28px, 600) for subsection headers; Title-lg (20px, 600) for card titles and form labels; Body-lg (18px, 400) for descriptive copy; Body-md (16px, 400) for standard UI text and input values; Label-md (14px, 600) for button text and badges; Label-sm (12px, 500) for helper text and tooltips. Letter-spacing is minimal (0 to 0.02em) to preserve the technical feel, with negative tracking (-0.04em) applied only to Display for dramatic impact. Line-height is set conservatively (1.5 for body, 1.4 fo

Layout

Pacdora uses a 12-column fluid grid with a max-width of 1280px, allowing the interface to scale gracefully from tablet to desktop while maintaining focus on the central canvas. The page rhythm follows a 'sidebar + canvas + sidebar' pattern: the left sidebar (340px) contains form controls and model selection; the center canvas (600–800px) displays the dieline preview; the right sidebar (280px) shows export options and metadata. Spacing uses a semantic scale: xs (4px) for micro-interactions like icon padding; sm (12px) for input field padding and tight component spacing; md (24px) for section separation and card padding; lg (40px) for major section breaks; xl (64px) for page-level margins. The gutter between grid columns is 24px, and all containers maintain a 24px margin from the viewport ed

Elevation & Depth

Elevation in Pacdora is achieved through a restrained shadow system that emphasizes flatness while providing subtle depth cues. The system uses three levels: Level 1 (sm): 0 1px 2px rgba(0, 0, 0, 0.06) for resting cards and input fields—barely perceptible, used to distinguish interactive elements from the background. Level 2 (md): 0 3px 8px rgba(0, 0, 0, 0.15) for hovered cards, dropdown panels, and modal overlays—provides clear lift without distraction. Level 3 (lg): 0 16px 40px rgba(0, 0, 0, 0.12) for floating action buttons, export dialogs, and primary modals—reserved for high-priority inte

Shapes

Pacdora's shape philosophy is 'Precision Softness'—rounded corners are applied judiciously to soften the technical aesthetic without sacrificing clarity. Buttons use lg (1rem / 16px) border-radius, creating a friendly, clickable appearance while maintaining a professional edge. Input fields and selects use DEFAULT (0.5rem / 8px) radius, providing subtle rounding that distinguishes them from the flat background without drawing attention. Cards and modals use xl (1.5rem / 24px) radius, creating a distinct container that feels approachable and modern. The 3D preview pane uses no border-radius (0p

Components

Action Elements Buttons are the primary interaction pattern. The primary button (background: #731eff, text: white, padding: 12px 24px, height: 48px, border-radius: 16px) is used for high-intent actions like 'Download the dieline' and 'Design Online.' On hover, the background shifts to #9447ff (inverse-primary) with a 200ms ease-out transition, signaling interactivity. On active/pressed, the background darkens to #560fd9 (on-primary-container), providing tactile feedback. Secondary buttons (transparent background, border: 1px solid #d1d0d2, text: #731eff) are used for lower-priority actions like 'Cancel' or 'Learn more.' Ghost buttons (transparent, no border, text: #191919) are used for tertiary actions like 'Skip' or 'View details.' All buttons use label-md typography (14px, 600 weight

Do's and Don'ts

**Do**

• Do use the primary purple (#731eff) exclusively for call-to-action buttons and active states—it is the brand's signature accent and must remain visually distinct.
• Do maintain the 24px gutter and md spacing scale throughout forms and layouts to ensure consistent visual rhythm and scanability.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all interactive cards and dropdowns to provide clear depth without visual noise.
• Do use Poppins at body-md (16px, 400 weight) for standard UI text and dimension values to ensure legibility in technical contexts.
• Do include a 3px focus ring (outline: 3px solid rgba(115, 30, 255, 0.3)) on all interactive elements for keyboard accessibility.
• Do use the error red (#ff445e) exclusively for validation failures and conflict states—never use it for warnings or informational messages.
• Do apply 200ms ease-out transitions to all hover and focus state changes to provide smooth, responsive feedback.
• Do use the outline color (#d1d0d2) for subtle borders on input fields and cards to maintain visual hierarchy without overwhelming the interface.

**Don't**

• Don't use the primary purple for backgrounds, body text, or non-interactive elements—it must remain reserved for high-intent actions and active states.
• Don't apply border-radius to the 3D preview pane or technical diagrams—sharp edges reinforce precision and technical accuracy.
• Don't use shadows stronger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) on standard UI elements—excessive depth creates visual clutter in a technical interface.
• Don't mix typefaces—Poppins is the exclusive font family for all UI text, labels, and body copy.
• Don't use the secondary colors (error red, warning orange, success green) for primary interactive elements—they are reserved for status communication and validation states.
• Don't apply letter-spacing greater than 0.02em on body text—it reduces legibility and conflicts with the technical aesthetic.
• Don't use near-black (#191919) for interactive elements or hover states—it creates insufficient contrast with the primary purple and confuses the visual hierarchy.
• Don't omit the 1px solid border (#d1d0d2) beneath shadows on cards and containers—the border provides visual definition and prevents elements from appearing to float.