# Hallmark Card Designer - Frontend Interface Prompt ## Interface Overview Build a **web-based greeting card design application** that empowers users to create custom cards for **birthdays and holidays** with a complete creative suite. The interface should provide an intuitive design canvas where users can draw freehand, upload photos, add shapes, customize typography, edit color palettes, and easily share their finished designs digitally through email, social links, and shareable URLs. **Target User:** Casual users with varying design experience seeking an accessible, fun card-making experience with professional-quality results. --- ## Visual Design System ### Color Scheme - **Primary Colors:** Warm, inviting palette (suggest soft pastels with accent colors) - Background: Light cream or soft white (`#FAFAF8` or `#FFFFFF`) - Primary Action: Warm primary color (suggest coral/rose `#E85D75` or soft gold `#D4AF37`) - Secondary: Complementary accent (`#4A90E2` or teal) - Neutral Text: Dark gray (`#333333`) - **Design Canvas:** Clean white or light gray background to make created content stand out ### Typography - **Headers/Titles:** Friendly, rounded sans-serif (e.g., "Inter", "Poppins", "Quicksand") - **Body Text:** Clean, readable sans-serif (e.g., "Inter", "Open Sans") - **Card Text:** Support both serif and sans-serif with multiple font weights and styles - **Font Size Scale:** 12px → 18px → 24px → 32px → 48px for visual hierarchy ### Visual Style - **Layout Style:** Modern, clean interface with generous whitespace - **Visual Hierarchy:** Clear distinction between tool panels and canvas area - **Aesthetic:** Approachable and creative (not overly corporate) - **Imagery:** Festive, celebratory icons for card types; warm illustration style --- ## User Experience Flow ### 1. Initial Launch & Card Type Selection - **Step 1:** User arrives at app homepage with prominent "Create Card" call-to-action - **Step 2:** Display card type selector screen with **two main options:** - Birthday Cards - Holiday Cards (Christmas, Easter, Thanksgiving, Valentine's Day, New Year's, etc.) - **Step 3:** For each category, show 3-5 aesthetic preview thumbnails representing different card styles - **Step 4:** User selects card type and optional template style (blank canvas or starter template) > **UX Note:** Make it clear users can create from scratch or use a starter template; both paths lead to the same editor. ### 2. Main Design Canvas Experience - **Layout Structure:** - Left Sidebar: Tool panel (collapsible on mobile) - Center: Large, interactive design canvas - Right Sidebar: Layers/elements panel and properties inspector - Top Toolbar: File actions, zoom controls, undo/redo - **User Journey:** 1. User sees blank or templated canvas in the center 2. User selects tools from left sidebar to add/modify content 3. User clicks on canvas to place or draw elements 4. User modifies selected elements via right-side properties panel 5. User previews card and moves to sharing phase ### 3. Sharing & Export Flow - **Step 1:** User completes card design and clicks "Share/Send" - **Step 2:** Modal appears with sharing options: - Email (opens share dialog with recipient input) - Copy Shareable Link (generates unique URL) - Social Media (buttons for Facebook, Pinterest, Twitter) - **Step 3:** User receives confirmation of share action --- ## Component Structure ### Primary UI Components #### Navigation & Header - **App Header:** Logo, title, quick access buttons (Help, Templates, Saved Cards) - **Top Toolbar:** Contains undo/redo, zoom controls (fit to screen, 50%, 75%, 100%, 200%), save draft button #### Left Sidebar - Tool Panel - **Drawing Tools Section:** - `FreehandDrawingTool` - Pen/brush with size and opacity control - `EraserTool` - Erase drawn content - `LineDrawingTool` - Straight lines with customizable thickness - **Content Tools Section:** - `PhotoUploadTool` - Click to upload image files - `ShapeToolMenu` - Dropdown/grid showing shape options: - Basic shapes (rectangle, circle, triangle, star, heart) - Decorative shapes (snowflakes, balloons, gifts, etc.) - `TextToolActivator` - Click to add text box to canvas - **Styling Section:** - `ColorPaletteEditor` - Full color picker with palette customization - `FontLibrarySelector` - Browse and select fonts #### Center - Design Canvas - **`DesignCanvas` Component:** Interactive drawing surface - Supports freehand drawing, shape placement, image positioning, text insertion - Grid/snap-to-grid optional toggle - Visual feedback on element selection (bounding box, handles) - **`ElementSelector` Component:** Click elements on canvas to select and edit #### Right Sidebar - Properties & Layers Panel - **`LayersPanel` Component:** - List of all design elements with visibility toggle - Drag-to-reorder layer stacking - Delete/duplicate element buttons - **`PropertiesInspector` Component:** - Dynamic properties based on selected element: - Position (X, Y) - Size (Width, Height) - Rotation (0-360°) - Opacity (0-100%) - Stroke/Border properties - Fill color selector - Text properties (font, size, weight, alignment, letter spacing) #### Modals & Dialogs - **`CardTypeSelector` Modal:** Initial card category selection - **`ShareModal` Component:** Email, link copy, social sharing options - **`ColorPickerDialog` Component:** Detailed color customization (RGB, Hex, HSL) - **`ConfirmationDialog` Component:** For destructive actions #### Floating UI Elements - **`ToolTip` Component:** Hover hints for all toolbar buttons - **`Toast Notification` Component:** Feedback for save, share, copy actions - **`UndoRedoIndicator` Component:** Shows action history status --- ## Mock Data Requirements ### Card Type Data Structure ``` cardTypes = [ { id: "birthday", name: "Birthday", icon: "🎂", description: "Create a special birthday greeting", templates: [ { id: "birthday_modern", name: "Modern", preview: "[image_url]", defaultElements: [] }, { id: "birthday_classic", name: "Classic", preview: "[image_url]", defaultElements: [] } ] }, { id: "holiday", name: "Holiday", icon: "🎄", description: "Design holiday-themed cards", holidays: ["Christmas", "Easter", "Thanksgiving", "Valentine's Day", "New Year's", "Halloween"] } ] ``` ### Canvas Element Mock Data ``` designElements = [ { id: "elem_1", type: "text", content: "Happy Birthday!", position: { x: 100, y: 150 }, size: { width: 400, height: 80 }, style: { fontSize: 48, fontFamily: "Poppins", fontWeight: "bold", color: "#E85D75", textAlign: "center" }, layer: 1 }, { id: "elem_2", type: "shape", shape: "star", position: { x: 200, y: 80 }, size: { width: 60, height: 60 }, style: { fill: "#FFD700", stroke: "#FFA500", opacity: 0.9 }, layer: 0 }, { id: "elem_3", type: "image", src: "[uploaded_image_url]", position: { x: 150, y: 300 }, size: { width: 300, height: 250 }, style: { opacity: 1, rotation: 0 }, layer: 2 }, { id: "elem_4", type: "freehand", strokes: [ { points: [[x1, y1], [x2, y2], ...], color: "#4A90E2", width: 3 } ], layer: 1 } ] ``` ### Font Library Mock Data ``` fonts = [ { name: "Poppins", category: "sans-serif", weights: [400, 600, 700] }, { name: "Quicksand", category: "sans-serif", weights: [400, 700] }, { name: "Georgia", category: "serif", weights: [400, 700] }, { name: "Playfair Display", category: "serif", weights: [400, 700, 900] }, { name: "Brush Script MT", category: "script", weights: [400] } ] ``` ### Shape Library Mock Data ``` shapes = [ // Basic shapes { id: "rect", name: "Rectangle", svg: "[path]" }, { id: "circle", name: "Circle", svg: "[path]" }, { id: "triangle", name: "Triangle", svg: "[path]" }, // Decorative shapes { id: "star", name: "Star", svg: "[path]" }, { id: "heart", name: "Heart", svg: "[path]" }, { id: "snowflake", name: "Snowflake", svg: "[path]" }, { id: "gift", name: "Gift Box", svg: "[path]" }, { id: "balloon", name: "Balloon", svg: "[path]" } ] ``` --- ## Responsive Design ### Desktop (1200px+) - Three-column layout: left toolbar (280px) | center canvas (flex) | right panel (300px) - Full-size design canvas with comfortable margins - All tools visible in expanded sidebars ### Tablet (768px - 1199px) - Collapsible sidebars to maximize canvas space - Toolbar buttons stack vertically in narrower sidebar - Right properties panel collapses to overlay when properties selected - Canvas adapts to remaining space ### Mobile (< 768px) - **Single-column responsive layout:** - Canvas takes full width with pinch-to-zoom support - Toolbar buttons in horizontal scroll at bottom - Tool options appear in slide-up modal panels - Properties inspector becomes full-screen modal when editing properties - Sharing and export options accessible via bottom sheet > **Mobile UX Note:** While desktop is primary, ensure basic card design is possible on tablet. Full mobile support secondary. --- ## Interactive Elements ### Buttons & Actions - **Primary Actions:** - `Create Card` (prominent, brand color) - `Share/Send` (prominent, after design complete) - `Save Draft` (secondary) - `Download/Preview` (secondary) - **Tool Buttons:** - Icon-based with tooltips - Active state highlighting (darker background) - Disabled state when not applicable - **Confirmation Buttons:** - Danger actions (delete) in red/orange - Safe actions (cancel) in gray - Affirmative actions (save) in brand color ### Form Inputs - **Text Inputs:** For card recipient email, link copy, text content in canvas - Clear labels, helpful placeholders - Character count for text boxes (if applicable) - **Sliders:** For size, opacity, rotation adjustments - Numeric input alternative for precise values - **Dropdowns/Selectors:** For font families, card types, shape types - Visual previews where helpful - **Color Picker:** - Preset color swatches for quick selection - Advanced picker (RGB/Hex) for custom colors - Palette builder to save custom color sets ### Drawing & Canvas Interactions - **Drawing Tool:** - Smooth brush strokes with adjustable size (2px - 50px) - Opacity control (0% - 100%) - Visual preview cursor showing brush size - **Shape Placement:** - Click canvas to place shape - Drag to position, resize handles on corners/edges - Rotation handle (circular arrow) at top-center of selection box - **Text Editing:** - Double-click text box to edit inline - Text properties in right panel (font, size, color, alignment) - Automatic text wrapping within box bounds - **Image Upload:** - Drag-and-drop zone or file input - Uploaded image placed on canvas with resize/reposition - Optional image filters/adjustments (brightness, contrast, saturation - if scope allows) - **Selection & Manipulation:** - Click to select element (shows selection box) - Drag to move element - Keyboard shortcuts: Delete, Ctrl+C (copy), Ctrl+V (paste), Ctrl+Z (undo) - Multi-select with Shift+Click or Ctrl+Click ### Feedback & Validation - **Visual Feedback:** - Toast notifications for: save success, share sent, copy to clipboard - Loading spinner during image upload - Disabled state for buttons during async operations - **Hover States:** - All interactive elements have clear hover states - Tool tips appear on hover showing keyboard shortcuts - **Error Handling:** - Error toast for failed image uploads - Validation message if required fields empty in share modal ### Animations & Transitions - **Smooth Transitions:** - Sidebar collapse/expand: 300ms ease - Modal fade-in: 200ms - Toast notifications: slide-in 300ms, auto-dismiss after 4s - **Interactive Feedback:** - Button press: slight scale down (0.98) on active - Hover states: subtle background color change - Drawing: real-time stroke preview as user draws --- ## Design Guidelines & Specifications ### Visual Design Preferences - **Modern & Approachable:** Design feels friendly and creative, not overly technical - **Focus on Canvas:** The design canvas should feel like the "star" of the interface with prominent space - **Festive Elements:** Use warm, inviting colors and celebratory iconography appropriate for greeting cards - **White Space:** Generous margins and spacing makes interface feel spacious and less cluttered ### Design Constraints - **Accessibility:** - All interactive elements keyboard accessible (Tab navigation) - Color contrast ratio ≥ 4.5:1 for text - Icon buttons have text labels or clear aria-labels - Form labels associated with inputs - **Performance:** - Canvas rendering should be smooth even with 20+ elements - Undo/redo should be responsive (no lag) - Image uploads should show progress and handle large files gracefully - **Cross-Browser Support:** - Works on Chrome, Firefox, Safari, Edge (latest versions) - Canvas API support required for drawing functionality ### Branding & Tone - **Tone:** Helpful, encouraging, fun - empowering users to be creative - **Visual Language:** Clean, modern, with warm accent colors and rounded corners - **Icons:** Use recognizable icons; consider custom illustrations for card categories --- ## Specific Feature Details ### Drawing Tool Suite - **Pen Tool:** - Freehand drawing with configurable brush size (2-50px) - Stroke color from color palette - Opacity adjustment - Smooth bezier curve rendering for natural appearance - **Eraser Tool:** - Erase drawn strokes selectively - Size matches pen tool for consistency - Non-destructive (user can undo) - **Line Tool:** - Draw straight lines by clicking start and end points - Real-time preview as user drags - Thickness and color customizable ### Shape Library & Insertion - **Shape Categories:** - **Basic:** Rectangle, circle, triangle, polygon - **Festive:** Stars, hearts, snowflakes, holly, candy canes - **Objects:** Gift boxes, balloons, candles, ornaments - **Shape Interaction:** - Click and drag to size while placing - Preset sizes available or free-form sizing - Full control over fill color, stroke, opacity ### Color Palette Editor - **Preset Palettes:** Show 2-3 curated color palettes (warm, cool, festive) - **Custom Palette:** - Add colors from full color picker - Remove colors --- IMPORTANT BUILD INSTRUCTIONS: - Focus on CORE features only. Do not add extra polish, advanced features, or nice-to-haves. - Do NOT overthink the design or architecture. Keep it simple and functional. - Write all files in parallel where possible. Minimize thinking time. - Skip animations, transitions, and complex interactions unless explicitly requested. - Use simple, clean components. No over-engineering. - Target completion in under 3 minutes. Speed over perfection. - Ship a working MVP, not a feature-complete product. - Do NOT install or suggest any integrations (Supabase, Blob, databases, etc). Use mock data and localStorage only. - Do NOT prompt for user approval or wait for manual steps. Build everything autonomously. - CRITICAL: The app MUST have a working root page at "app/page.tsx" (or "pages/index.tsx") that renders the main UI immediately. Never generate an app where "/" is empty or shows a file picker — the root route must show the primary feature of the app. If you create multiple sub-pages, "app/page.tsx" should still render the main dashboard/home view, not a redirect or empty component.