This document outlines the detailed design requirements and specifications for the "Infographic Creator" tool, serving as the foundational blueprint for its development. The goal is to create a robust, intuitive, and professional platform that empowers users to transform complex data and information into compelling visual narratives.

Infographic Creator: Design Requirements & Specifications

1. Project Overview & Goal

The "Infographic Creator" aims to provide a user-friendly, powerful, and versatile online tool for generating professional-grade infographics. It will enable users, regardless of their design expertise, to create visually engaging and informative content quickly and efficiently.

Core Objectives:

• Ease of Use: Simplify the infographic creation process with intuitive drag-and-drop functionality.
• Professional Output: Ensure all generated infographics are high-quality, visually appealing, and suitable for various professional contexts.
• Versatility: Support a wide range of content types, data visualizations, and customization options.
• Efficiency: Streamline workflows with templates, asset libraries, and quick editing features.

2. Target Audience

The Infographic Creator is designed for a broad audience that needs to communicate information visually, including:

• Marketing Professionals: Creating engaging content for campaigns, social media, and presentations.
• Business Analysts: Visualizing data, trends, and reports for internal and external stakeholders.
• Educators & Students: Designing educational materials, project summaries, and research findings.
• Content Creators & Bloggers: Enhancing articles and posts with compelling visuals.
• Small Business Owners: Developing promotional materials and explaining services/products.
• Non-designers: Individuals who need professional visuals without extensive graphic design software knowledge.

3. Core Functionality & Design Requirements

The platform will offer the following key functionalities:

• Template Library: A rich collection of professionally designed, customizable templates across various categories (e.g., process, timeline, comparison, data visualization, resumes).
• Drag-and-Drop Editor: An intuitive canvas-based editor for arranging elements, resizing, rotating, and layering.
• Text Editor: Comprehensive text styling options (fonts, sizes, colors, alignment, line height, letter spacing).
• Shape & Icon Library: A diverse collection of vector shapes, lines, arrows, and scalable icons.
• Image & Media Management:

* Upload custom images (JPG, PNG, SVG).

* Basic image editing (crop, resize, opacity, filters).

* Integration with stock image libraries (future consideration).

• Data Visualization Tools:

* Creation of various chart types (bar, line, pie, donut, area, scatter, bubble, radar).

* Data input via manual entry, CSV upload, or copy-paste.

* Customization of chart colors, labels, axes, and legends.

• Color & Branding:

* Extensive color palette options, including custom color picker (HEX, RGB).

* Ability to save custom brand color palettes.

• Collaboration Features (Future Consideration): Sharing projects, commenting, and real-time co-editing.
• Export & Sharing:

* High-resolution export options: PNG, JPG, PDF (print-ready), SVG.

* Embed code for websites and blogs.

* Direct sharing to social media platforms.

• Project Management: Dashboard to view, edit, duplicate, and delete existing infographic projects.

4. Detailed Design Specifications

4.1. Wireframe Descriptions (Key Screens)

A. Dashboard / My Projects Screen

• Layout: Left sidebar for navigation (Home, Templates, My Infographics, Account Settings). Main content area displaying project cards.
• Components:

* Header: Logo, "Create New Infographic" button, Search bar.

* Project Cards: Each card displays a thumbnail preview, title, creation/last modified date, and options (Edit, Duplicate, Download, Delete, Share).

* Filtering/Sorting: Options to filter by category, sort by date/name.

* "Create New" Button: Prominently placed, leading to Template Browser or a blank canvas.

B. Template Browser Screen

• Layout: Left sidebar for template categories (e.g., Business, Education, Marketing, Timelines, Data). Main content area displaying template thumbnails.
• Components:

* Search Bar: For finding specific templates.

* Category Filters: Dynamic filtering of templates.

* Template Previews: Large, clear thumbnails with template names. Hovering over a template shows a "Preview" and "Use Template" button.

* "Use Template" Action: Loads the selected template into the Infographic Editor.

C. Infographic Editor Screen

• Layout:

* Top Toolbar: Global actions (Undo/Redo, Save, Project Name, Preview, Export, Share).

* Left Panel (Asset & Layer Management):

* Tabs for: Text, Shapes, Icons, Images, Charts, Layers.

* Search functionality within each asset tab.

* Drag-and-drop assets onto the canvas.

* Layers panel for managing element stacking order, visibility, and locking.

* Central Canvas: The main workspace where the infographic is built.

* Zoom controls, pan functionality.

* Grid lines and snap-to-grid/object for precise alignment.

* Contextual right-click menu for selected elements (Copy, Paste, Bring to Front, Send to Back, Group, Ungroup).

* Right Panel (Properties Panel): Context-sensitive panel displaying properties of the currently selected element(s).

* Text: Font family, size, color, weight (bold/italic), alignment, line height, letter spacing, text box dimensions.

* Shapes/Icons: Color (fill/stroke), stroke weight, opacity, dimensions, rotation, corner radius (for rectangles).

* Images: Crop, resize, opacity, filters (grayscale, sepia, blur), replace image.

* Charts: Chart type selector, data input (table/CSV), color palette for series, axis labels, legend visibility, title.

* Canvas Properties (when nothing is selected): Background color/image, canvas dimensions.

* Bottom Bar (Optional): Page navigation for multi-page infographics, zoom level indicator.

D. Data Input Module (Integrated within Editor for Charts)

• Layout: Modal window or integrated section within the Right Panel.
• Components:

* Data Table: Spreadsheet-like interface for manual data entry.

* Import Options: Buttons for "Upload CSV" or "Paste Data."

* Chart Type Selector: Dropdown or visual icons for different chart types.

* Data Mapping: Drag-and-drop fields to X/Y axes, series, etc.

* Preview: Small real-time preview of the chart as data is entered/modified.

* "Apply" / "Cancel" buttons.

4.2. Color Palettes

A. UI / Brand Palette (for the Infographic Creator platform itself):

• Primary (Brand Color): #2A9D8F (Teal/Deep Mint) - Professional, fresh, trustworthy.
• Secondary (Accent/CTA): #E76F51 (Terracotta/Burnt Orange) - Energetic, draws attention, warm.
• Neutral Dark (Text/Icons): #264653 (Dark Slate Blue) - Strong contrast, readable.
• Neutral Light (Backgrounds/Borders): #F4F6F8 (Light Grey/Off-White) - Clean, minimalist, provides breathing room.
• Highlight: #E9C46A (Saffron Yellow) - For subtle emphasis or warnings.

B. Content / Data Visualization Palettes (Examples for user-selectable options):

• Modern Professional: #4A90E2, #50E3C2, #F5A623, #BD10E0, #7ED321 (Vibrant, distinct, high contrast).
• Soft & Serene: #A8DADC, #457B9D, #F4A261, #E76F51, #2A9D8F (Harmonious, calming).
• Bold & Energetic: #FF6B6B, #FFD166, #06D6A0, #118AB2, #073B4C (High impact, dynamic).
• Recommendation: Provide a curated library of 5-10 pre-defined, aesthetically pleasing, and WCAG-compliant color palettes for data visualization, along with a custom color picker for full flexibility.

4.3. Typography

• Primary Font (Headings & UI Elements): Montserrat (Sans-serif)

* Purpose: Strong, modern, highly legible. Good for titles, subtitles, and key UI labels.

* Weights: Semibold (600) for main headings, Bold (700) for very prominent titles, Regular (400) for sub-headings.

• Secondary Font (Body Text & Data Labels): Roboto (Sans-serif)

* Purpose: Highly readable, clean, and versatile for body paragraphs, descriptions, and data labels.

* Weights: Regular (400) for body text, Medium (500) for emphasis, Light (300) for subtle annotations.

• Code/Monospace Font (Optional, for specific data display): Fira Code (Monospace)

* Purpose: For displaying raw data, code snippets, or specific numerical sequences where fixed-width characters are beneficial.

Typography Guidelines:

• Hierarchy: Clear size and weight differentiation between headings, subheadings, and body text.
• Legibility: Ensure sufficient contrast between text and background colors.
• Consistency: Maintain consistent font usage throughout the infographic.
• Accessibility: Adhere to WCAG guidelines for minimum font sizes and contrast ratios.

4.4. Iconography Style

• Style: Flat or subtly outlined, modern, clean, and minimalist.
• Consistency: All icons should maintain a consistent visual language (e.g., same stroke weight, corner radius, level of detail).
• Scalability: Vector-based icons (SVG) to ensure crispness at any size.
• Clarity: Icons should be immediately recognizable and convey their meaning without ambiguity.
• Library: A comprehensive built-in library covering common categories (e.g., business, finance, nature, technology, education, arrows, social media).

4.5. Imagery & Asset Style

• Stock Images: High-quality, diverse, and relevant stock photography or illustrations. Focus on professional, modern, and inclusive visuals.
• Illustrations: Flat or semi-flat vector illustrations that complement the overall UI and infographic styles. Avoid overly complex or photo-realistic illustrations.
• Shapes & Elements: A wide array of basic and abstract vector shapes, lines, arrows, speech bubbles, and decorative elements that can be easily customized (color, size, stroke).
• User Uploads: Support for high-resolution images and vector graphics uploaded by the user, with basic editing capabilities.

5. User Experience (UX) Recommendations

• Intuitive Interface:

* Drag-and-Drop: Core interaction for moving elements, uploading files, and arranging layers.

* Contextual Menus: Right-click menus or floating toolbars that appear when elements are selected, offering relevant actions.

* Clear Labeling: All buttons, panels, and options should be clearly labeled and easily understandable.

• Real-time Feedback:

* Instant visual updates on the canvas as changes are made (e.g., color changes, resizing).

* Progress indicators for loading, saving, and exporting operations.

• Undo/Redo History: A robust, multi-level undo/redo system to allow users to revert changes easily.
• Onboarding & Guidance:

* Interactive Tutorial: A brief, optional walkthrough for first-time users highlighting key features.

This document outlines the detailed design specifications for the "Infographic Creator," providing a comprehensive guide for its development. It covers the user interface (UI) and user experience (UX) principles, wireframe descriptions for key screens, and recommended color palettes to ensure a professional, intuitive, and visually appealing product.

1. Detailed Design Specifications

The Infographic Creator aims to empower users to easily design professional, engaging, and data-rich infographics without requiring extensive design skills.

1.1 Core Features & Functionality

• Intuitive Drag-and-Drop Editor: A canvas-based interface allowing users to select, place, resize, rotate, and arrange elements effortlessly.
• Extensive Template Library:

* Categories: Marketing, Data Visualization, Process Flow, Timelines, Comparisons, Educational, Health, Business Reports, etc.

* Customization: All template elements (text, icons, colors, images) must be fully editable.

• Rich Content Element Library:

* Text: Multiple heading styles, paragraphs, lists. Customizable fonts (Google Fonts integration recommended), sizes, colors, line spacing, alignment, bold/italic/underline.

* Icons: A vast, searchable library of vector icons (e.g., Font Awesome, Noun Project integration). Customizable colors and sizes.

* Shapes: Basic geometric shapes (rectangles, circles, triangles, lines, arrows), customizable fill colors, border colors, and thickness.

* Images:

* User Uploads: Support for common image formats (JPG, PNG, SVG).

* Stock Photo Integration: Access to a curated library of high-quality stock images (e.g., Unsplash, Pexels integration).

* Editing: Cropping, resizing, opacity, basic filters (grayscale, sepia, blur).

* Charts & Graphs:

* Types: Bar charts, line graphs, pie charts, area charts, donut charts.

* Data Input: Manual entry, CSV upload, or (advanced) direct integration with spreadsheet tools (e.g., Google Sheets).

* Customization: Colors, labels, axes, data point styling.

• Data Integration (Advanced):

* Ability to connect charts and graphs to external data sources (CSV, Google Sheets, potentially APIs) for dynamic updates.

• Branding Kit:

* Users can upload their company logo, define brand-specific color palettes, and select preferred fonts for quick application across their designs.

• Project Management:

* User dashboard to save, organize, duplicate, and delete infographics.

* Search and filter capabilities for projects.

• Export Options:

* High-resolution image formats: PNG, JPG (with quality options).

* Vector format: SVG (for scalability).

* Print-ready format: PDF.

* Web Embedding: Generate embed codes for easy integration into websites/blogs.

• Undo/Redo Functionality: Essential for design iterations.
• Responsive Design Considerations: While creation is primarily desktop-focused, exported infographics should render well on various devices.

1.2 Design Principles

• Simplicity: Clean, uncluttered interface to minimize cognitive load.
• Intuitiveness: Features should be discoverable and easy to understand without extensive tutorials.
• Consistency: Predictable behavior and visual elements across the entire application.
• Feedback: Clear visual and textual feedback for user actions (e.g., saving, errors, element selection).
• Performance: Smooth interactions, fast loading times, and responsive editor canvas.

2. Wireframe Descriptions

Below are descriptions for the primary screens of the Infographic Creator, outlining their layout and key components.

2.1 Dashboard / Project Management Screen

• Header:

* [Product Logo] (Left)

* [Search Bar] (Central, for projects)

* [User Profile Icon/Menu] [Help Icon] [Upgrade/Plan Info] (Right)

• Left Sidebar Navigation:

* [Create New Infographic Button] (Prominent CTA)

* [My Projects] (Link to saved projects)

* [Templates] (Link to template library)

* [Brand Kit] (Link to branding settings)

* [Settings]

• Main Content Area:

* "Recent Projects" Section:

* Grid or list view of recently modified infographics.

* Each item shows [Thumbnail], [Project Name], [Last Modified Date].

* Hover actions: [Edit], [Duplicate], [Delete], [Preview].

* "Start New" Section:

* Prominent [Create from Scratch] button.

* [Browse Templates] button.

* "Popular Templates" (Optional):

* A small selection of top templates to inspire users.

2.2 Template Selection Screen

• Header:

* [Product Logo] (Left)

* [Back to Dashboard Button] (Left)

* [Search Bar] (Central, for templates)

* [User Profile Icon/Menu] (Right)

• Left Sidebar (Template Categories):

* [All Templates]

* [Marketing]

* [Data Visualization]

* [Process Flow]

* [Timelines]

* ... (and other categories)

• Main Content Area:

* Grid view of [Template Thumbnails].

* Each thumbnail displays [Template Name] and a [Preview/Select Button] on hover.

* [Start from Scratch] option, possibly as a prominent card.

* Pagination or infinite scroll for numerous templates.

2.3 Infographic Editor Interface

• Top Bar:

* [Product Logo] (Left)

* [Project Name] (Editable)

* [Save Button] (Auto-save indicator)

* [Undo] [Redo] icons

* [Preview Button]

* [Share/Export Button] (Right)

• Left Sidebar (Asset Panel):

* Tabs: [Templates], [Text], [Icons], [Shapes], [Images], [Charts], [Uploads], [Brand Kit].

* Content within Tabs:

* Search bar for assets.

* Categories/filters for assets.

* Drag-and-drop elements onto the canvas.

• Central Canvas Area:

* The [Infographic Workspace] where elements are placed and manipulated.

* [Zoom Controls] (Bottom right or top right of canvas).

* [Grid Lines] and [Snap-to-Grid/Guides] for precise alignment.

* Selected elements show [Resizing Handles], [Rotation Handle], and potentially a [Delete Icon].

• Right Sidebar (Properties Panel):

* Contextual Properties: Changes based on the selected element.

* Text: Font family, size, color, alignment, bold, italic, underline, line height, letter spacing.

* Shape: Fill color, border color, border thickness, opacity.

* Image: Opacity, crop, filters, send to back/front.

* Chart: Data input (table/CSV), chart type, colors, labels, axes settings.

* Canvas Properties (when nothing is selected):

* Background color/image.

* Canvas dimensions (width, height).

* Layers Panel: List of all elements on the canvas, allowing reordering and visibility toggling.

2.4 Export / Share Modal

• Modal Header: [Export / Share Infographic]
• Tabs within Modal:

* [Download]

* [Share]

• Download Tab Content:

* File Type Options: [PNG], [JPG], [PDF], [SVG] (radio buttons or dropdown).

* Quality/Resolution: [Slider] or [Dropdown] (e.g., Low, Medium, High, Custom DPI).

* Background: [Transparent Background Checkbox] (for PNG/SVG).

* [Download Button] (Primary CTA).

• Share Tab Content:

* Link Sharing: [Toggle Public/Private Link], [Copy Link Button].

* Embed Code: [Text Area with Embed HTML/iframe code], [Copy Code Button].

* Social Media Sharing: [Icons for Facebook, Twitter, LinkedIn, Pinterest] (direct share).

* Collaboration (Optional): [Invite via Email Input], [Permission Level Select].

3. Color Palettes

We recommend distinct color palettes: one for the application's UI and several examples for infographic creation, offering users flexibility and professional aesthetic choices.

3.1 Application UI Palette (PantheraHive Brand)

A clean, modern, and professional palette that ensures readability and a pleasant user experience.

• Primary Accent (Blue): #007BFF (A strong, trustworthy blue for primary CTAs, active states)

This document outlines the detailed design specifications, wireframe descriptions, color palette, and user experience (UX) recommendations for the "Infographic Creator" application. The goal is to provide a professional, intuitive, and powerful tool that enables users to create compelling infographics with ease, regardless of their design expertise.

Infographic Creator: Finalized Design Assets

1. Vision & Core Objectives

The Infographic Creator aims to empower users to transform complex data and information into visually engaging and easily digestible infographics. Our core objectives are:

• Simplicity: Provide an intuitive drag-and-drop interface that minimizes the learning curve.
• Power: Offer a rich set of customization options, data visualization tools, and a comprehensive asset library.
• Efficiency: Streamline the creation process with templates, automation, and smart design suggestions.
• Professionalism: Enable users to produce high-quality, brand-consistent outputs suitable for various platforms.

2. Core Features & Functionality

The Infographic Creator will include the following key features:

• Template Library: A diverse collection of professionally designed, customizable infographic templates across various categories (e.g., statistics, timelines, processes, comparisons).
• Drag-and-Drop Editor: An intuitive canvas-based editor for arranging elements, resizing, rotating, and grouping.
• Rich Asset Library:

* Icons & Shapes: A vast library of vector icons and customizable shapes.

* Images: Stock photo integration and user image upload functionality.

* Illustrations: Curated collection of vector illustrations.

• Data Visualization Tools:

* Chart & Graph Creator: Support for various chart types (bar, line, pie, donut, area, scatter, bubble, progress bars, etc.).

* Data Import: Manual data entry, CSV/Excel upload, and potential integration with live data sources (e.g., Google Sheets).

* Dynamic Data Mapping: Easily link data to visual elements.

• Text & Typography: Extensive font selection, text styling options, and text box management.
• Color & Branding:

* Custom Color Palettes: Apply custom color schemes to entire infographics or individual elements.

* Brand Kit Integration: Save and apply brand colors, fonts, and logos for consistent branding.

• Collaboration (Optional but Recommended): Real-time editing and commenting features for team projects.
• Export & Sharing: High-resolution export options (PNG, JPG, PDF, SVG) and direct sharing capabilities.
• Revision History & Autosave: Automatic saving and the ability to revert to previous versions.

3. Detailed Design Specifications

3.1. Wireframe Descriptions (Key Screens)

##### A. Dashboard / Project Management Screen

• Purpose: Overview of user's projects, access to templates, and creation of new infographics.
• Layout:

* Header (Top):

* [Logo] on the left.

* [Search Bar] for projects and templates in the center.

* [User Profile/Settings] on the right.

* Sidebar (Left):

* [Navigation Links]: "My Projects," "Templates," "Brand Kits," "Asset Library," "Help."

* Main Content Area:

* "Create New Infographic" Section: Prominent [Button] for "Start from Scratch" and a [Carousel/Grid] showcasing popular template categories or featured templates.

* "My Projects" Section: [Grid View] of project cards. Each card displays [Infographic Thumbnail], [Project Title], [Last Modified Date], and [Options Menu] (Edit, Duplicate, Share, Delete).

• Interaction: Clicking a project card or "Edit" opens the Editor. "Start from Scratch" opens a blank canvas. Template selection leads to the Editor with the chosen template.

##### B. Template Selection Screen (Accessed via Dashboard or Editor)

• Purpose: Allow users to browse, filter, and select a starting template.
• Layout:

* Header (Top): Same as Dashboard, potentially with a "Back to Dashboard" link.

* Filter & Search Bar: [Category Filters] (e.g., Business, Education, Health, Marketing), [Search Input Field], [Sort By] options.

* Template Grid: [Responsive Grid] displaying [Template Thumbnails] with [Template Title] and [Category Tag].

* "Start from Scratch" Option: A distinct [Card/Button] within the grid or prominently placed.

• Interaction: Hovering over a thumbnail shows a [Preview Button]. Clicking a thumbnail selects it and either opens the Editor directly or prompts for confirmation.

##### C. Editor Interface (Main Workspace)

• Purpose: The central area for designing and customizing infographics.
• Layout:

* Top Bar:

* [Logo/Home Link]

* [Project Title (Editable)]

* [Undo/Redo Buttons]

* [Zoom Level Display/Controls]

* [Share Button]

* [Export Button]

* [User Profile/Settings]

* Left Sidebar (Tools Panel):

* [Tabbed Navigation/Accordion Menu] for different element categories:

* Templates: Browse/apply new templates.

* Text: Add [Heading], [Subheading], [Body Text] boxes.

* Images: [Upload Button], [Stock Photo Search], [My Images Library].

* Icons & Shapes: [Search Bar], [Category Filters], [Icon/Shape Thumbnails].

* Charts: [Chart Type Selection] (Bar, Line, Pie, etc.), [Add Chart Button].

* Data: [Data Import/Management] (opens a modal/panel).

* Brand Kit: Apply saved brand assets.

* Layers: [Layer Management Panel] (bring forward, send backward, lock, hide).

* Canvas Area:

* [Main Design Workspace] with [Zoom In/Out], [Pan], [Rulers], [Grids], and [Snapping Guides].

* Selected elements display [Resizing Handles], [Rotation Handle], and a [Contextual Mini-Toolbar] (duplicate, delete, bring to front, send to back).

* Right Sidebar (Properties Panel):

* Contextual Panel: Displays properties of the currently selected element(s).

* Common Properties: [Position (X, Y)], [Size (W, H)], [Rotation], [Opacity].

* Text Properties: [Font Family], [Font Size], [Font Weight], [Color], [Alignment], [Line Height], [Letter Spacing].

* Shape Properties: [Fill Color], [Border Color], [Border Width], [Corner Radius].

* Image Properties: [Crop], [Filters], [Adjustments (Brightness, Contrast)].

* Chart Properties: [Chart Type Selector], [Data Source Link], [Axis Labels], [Legend Options], [Color Scheme].

* Bottom Bar (Optional): [Page Navigation] for multi-page infographics.

##### D. Data Input/Management (Modal or Dedicated Panel)

• Purpose: Allow users to input or import data for charts and graphs.
• Layout:

* [Tabbed Interface]: "Manual Entry," "CSV Upload," "Connect Data Source."

* Manual Entry: [Table-like Interface] for entering data series, labels, and values. [Add Row/Column Buttons].

* CSV Upload: [File Upload Button], [Drag-and-Drop Area], [Column Mapping Interface] (map CSV columns to chart data fields).

* Connect Data Source: [Integration Options] (e.g., Google Sheets, Excel Online), [Authentication Flow].

* [Live Chart Preview] updates as data is entered/modified.

* [Confirm/Apply Button].

##### E. Export / Share Options (Modal)

• Purpose: Provide options for downloading or sharing the completed infographic.
• Layout:

* [Format Selection]: [Radio Buttons/Dropdown] for PNG, JPG, PDF, SVG.

* PNG/JPG Options: [Quality Slider], [Resolution/Size Input], [Transparent Background Checkbox].

* PDF Options: [Page Range], [Print Quality/Web Quality].

* SVG Options: [Embed Fonts Checkbox].

* [Preview Thumbnail] of the infographic.

* Share Options: [Generate Shareable Link], [Social Media Share Buttons], [Embed Code].

* [Download Button].

* [Close Button].

3.2. User Interface (UI) Elements

• Buttons:

* Primary: Solid fill, rounded corners, clear call-to-action text.

* Secondary: Outline style, rounded corners.

* Tertiary/Icon Buttons: Minimalistic, used for actions within the editor.

• Input Fields: Clean, minimal design with clear labels and placeholder text. Focus state indicated by a subtle border change or shadow.
• Sliders: Horizontal sliders for numerical adjustments (e.g., opacity, font size).
• Dropdowns: Standard dropdown menus for selections (e.g., font family, chart type).
• Checkboxes/Radio Buttons: Standard, clear visual feedback for selection.
• Tabs/Accordions: Used for organizing content in sidebars and modals.
• Tooltips: On-hover tooltips for icon buttons and complex features.
• Modals/Dialogs: Used for focused tasks (e.g., data input, export options) with clear headers and actions.

3.3. Typography

• Primary Font (Headings & UI Elements): Montserrat (or similar clean, geometric sans-serif like Lato, Open Sans).

* Usage: For all main headings, navigation items, button text, and prominent UI labels.

* Weights: Bold (700), Semi-Bold (600), Regular (400).

* Sizes: H1 (36px), H2 (28px), H3 (22px), Body Large (18px), Body (16px), Small (14px).

• Secondary Font (Body Text & Data Labels): Roboto (or similar highly readable humanist sans-serif like Noto Sans, Source Sans Pro).

* Usage: For paragraph text, detailed descriptions, data labels within charts, and smaller UI text.

* Weights: Regular (400), Light (300).

* Sizes: Body (16px), Small (14px), X-Small (12px).

• Code/Monospace (Optional): Fira Code or Roboto Mono for any technical data display.

3.4. Iconography

• Style: Line icons with a consistent stroke weight (1-2px) and rounded corners. Filled icons can be used for active states or primary actions.
• Library: Utilize a comprehensive icon library (e.g., Font Awesome, Material Icons, Feather Icons) or custom-designed set for consistency.
• Purpose: Clearly represent actions (e.g., Save, Export, Undo, Redo), categories (e.g., Text, Image, Chart), and navigation.

3.5. Imagery & Illustrations

• Product Illustrations: Use vector-based, modern, and friendly illustrations to enhance onboarding, empty states, and marketing materials. Consistent style with the chosen icon set.
• Stock Photography: Integrate with a high-quality stock photo library (e.g., Unsplash, Pexels) for user access. Ensure images