MyTwin Documentation - Images Guide¶

This document lists all images needed for the MyTwin documentation with detailed descriptions for designers/illustrators.

Color Palette¶

Use these MyTwin brand colors consistently:

Primary Blue: #004C73
Blue Light: #195F86
Blue Dark: #003651
Mint: #45C2B5
Cyan: #5ED0E6
Background: #FFFFFF
Text: #3C505C

Image Specifications¶

Format: PNG with transparency or JPG
Resolution: Minimum 1920px width for hero images, 800px for content images
Optimization: Compress for web (use tools like TinyPNG)
Naming: Use descriptive names (e.g., dashboard-overview-fr.png)

Images Needed by Page¶

Homepage (index.md) - FR & EN¶

1. Hero Image - Dashboard MyTwin¶

File: hero-dashboard.png Description: Main dashboard view showing a circular security score in the center (e.g., 72/100) with several info cards around it (detected leaks, monitored emails, recommendations). Modern, professional design with clean interface using MyTwin colors (blue #004C73, mint #45C2B5, cyan #5ED0E6). Premium SaaS dashboard style. Dimensions: 1920x1080px

2. Process Infographic - 4 Steps¶

File: process-4-steps.png Description: Horizontal schema with 4 icons and short text: 1) Radar icon with "Detection" 2) Chart icon with "Evaluation" 3) Shield icon with "Protection" 4) Broom icon with "Cleanup". Arrows connecting the steps. Modern infographic style, MyTwin colors. Dimensions: 1600x400px

3. Family Protection Illustration¶

File: family-protected.png Description: Modern and warm illustration showing a family (2 adults, 2 children) with a digital shield protecting them. Symbols of emails, padlocks, and security signals floating around. Flat design style, soft colors, feeling of protection and serenity. Dimensions: 800x600px

4. Professional at Work Illustration¶

File: professional-working.png Description: Illustration of a modern professional working on computer with MyTwin interface visible on screen. Security icons, charts and notifications around. Clean desk, plant, coffee. Modern vector illustration style, professional but human colors. Dimensions: 800x600px

5. Business Dashboard Multi-user¶

File: dashboard-business.png Description: Business dashboard interface showing overview of multiple employees/profiles, global exposure charts, risk heat map, alerts panel. Professional and analytical style, similar to business intelligence tools. Dimensions: 1600x900px

6. Testimonials Avatars¶

File: testimonials.png Description: Testimonials section design with 3 cards containing: stylized profile photo/avatar, testimonial text, name and title. Modern, credible style, circular photos, stylized quotation marks. Dimensions: 1200x400px

7. Onboarding Flow - 4 Steps¶

File: onboarding-flow.png Description: 4 miniature screenshots side by side showing: 1) Registration form 2) Add email interface 3) Scan in progress (progress bar) 4) Dashboard with first results. Numbers 1-2-3-4 visible. Clean design. Dimensions: 1600x400px

Parameters (parameters.md) - FR & EN¶

8. Parameters Panel Screenshot¶

File: parameters-panel.png Description: Screenshot showing the parameters interface with left sidebar menu (General, Notifications, Privacy, Advanced) and main panel displaying configuration options. Dimensions: 1600x900px

9. Language Settings¶

File: language-settings.png Description: Language selection interface with flags and dropdown list of available languages. Dimensions: 800x400px

10. Notifications Management¶

File: notifications-management.png Description: Notifications panel with on/off switches for each alert category, organized by priority level with color coding (red for critical, orange for important, blue for info). Dimensions: 1200x700px

11. Scan Frequency Comparison¶

File: scan-frequency-table.png Description: Table with 3 columns (Free, Light, Advanced) visually showing different scan frequencies with calendar icons. Dimensions: 1000x500px

12. Privacy Management Panel¶

File: privacy-panel.png Description: Clean interface with accordion sections for each privacy aspect, with plain text explanations and toggles. Dimensions: 1200x800px

13. API Key Generation¶

File: api-key-generation.png Description: Panel showing a field with generated API key, "Generate new key" and "Copy" buttons, plus links to API documentation. Dimensions: 1000x500px

14. 2FA Activation Process¶

File: 2fa-activation.png Description: Infographic showing 3 steps: 1) Scan QR code 2) Enter verification code 3) Save backup codes. Modern design with numbers in circles. Dimensions: 1200x400px

15. Diagnostics Panel¶

File: diagnostics-panel.png Description: Diagnostic dashboard with status indicators (green/red) for each service (API, Database, Scan Engine, etc.), like a "status page". Dimensions: 1200x600px

Product Roadmap (plan.md) - FR & EN¶

File: roadmap-banner.png Description: Hero banner showing a stylized horizontal timeline with 4 phases (Now, Q1 2025, Q2 2025, Future) with icons representing each phase, MyTwin blue gradient background. Dimensions: 1920x400px

17. 4 Pillars Infographic¶

File: 4-pillars.png Description: 4 equal columns with icon on top, pillar title and short text, modern style with soft shadows, MyTwin colors. Dimensions: 1600x500px

18. Features Grid Screenshots¶

File: features-grid.png Description: Grid of 6 screenshots showing Dashboard, Leaks detection, Dark web monitoring, Reports, Advice panel, Score evolution graph. Dimensions: 1600x1000px

19. AI Assistant Mockup¶

File: ai-assistant-mockup.png Description: Elegant chat interface with AI messages giving security advice, modern ChatGPT-style design but with MyTwin colors. Dimensions: 800x1000px

20. Family Dashboard Screenshot¶

File: family-dashboard.png Description: Interface showing 4-5 family profiles with photo/avatar, first name, individual score, and global family overview, warm and accessible design. Dimensions: 1600x900px

21. Deletion Request Tracking¶

File: deletion-tracking.png Description: Dashboard showing a list of data brokers with status (Pending, Deleted, Refused), global progress bar, action buttons, professional style. Dimensions: 1400x800px

22. Ecosystem Illustration¶

File: ecosystem-3d.png Description: Isometric 3D illustration showing computer with browser extension, smartphone with app, cloud with connections to different partner services, modern and tech style. Dimensions: 1200x1200px

23. Feature Voting Interface¶

File: feature-voting.png Description: Page showing a list of proposed features with vote buttons (upvote), number of votes, status tags (In Progress, Planned, Idea), modern ProductBoard-style. Dimensions: 1400x900px

24. Interactive Timeline Graphic¶

File: timeline-graphic.png Description: Stylized horizontal timeline with markers for each quarter, clickable points to see details, colored progress line, icons for each phase, modern and engaging design. Dimensions: 1800x500px

Dashboard (dashboard.md) - FR & EN¶

25. Dashboard Overview¶

File: dashboard-overview.png Description: Complete dashboard view with global score, recent alerts, monitored elements summary, main signals and advice. Clear, organized interface. Dimensions: 1600x1200px

26. Score Evolution Chart¶

File: score-evolution.png Description: Line chart showing security score evolution over time with annotations for important events. Dimensions: 1200x600px

Leaks (leaks.md) - FR & EN¶

27. Leaks List Table¶

File: leaks-table.png Description: Data table showing detected breaches with columns: Service, Date, Exposed data, Severity. Filters and sorting options visible. Dimensions: 1400x800px

28. Leak Detail View¶

File: leak-detail.png Description: Detailed view of a specific breach showing all exposed information and recommended actions. Dimensions: 1200x900px

Onboarding (onboarding.md) - FR & EN¶

29. Registration Form¶

File: registration-form.png Description: Clean registration form with fields for name, email, password, plan selection. Modern, trustworthy design. Dimensions: 800x1000px

30. First Scan Setup¶

File: first-scan-setup.png Description: Interface for adding first email and usernames to monitor, with clear instructions. Dimensions: 1200x800px

Advice (advice.md) - FR & EN¶

31. Advice Priority List¶

File: advice-priority-list.png Description: List of prioritized recommendations with impact indicators (high/medium/low), action buttons, and progress tracking. Dimensions: 1200x900px

Security (security.md) - FR & EN¶

32. Security Architecture Diagram¶

File: security-architecture.png Description: Technical diagram showing MyTwin's security layers: encryption, authentication, data isolation, monitoring. Dimensions: 1400x800px

Image Creation Guidelines¶

Style Guide¶

Consistency: All images should follow the same visual language
Clarity: Prioritize readability and understanding
Professionalism: Corporate-friendly, trustworthy aesthetic
Modern: Contemporary design trends (gradients, soft shadows, rounded corners)
Accessibility: Sufficient contrast, clear text

Do's¶

Use MyTwin brand colors consistently
Include clear labels and annotations
Show realistic data (but anonymized)
Use high-resolution assets
Optimize for web performance

Don'ts¶

Don't use stock photos that look generic
Avoid cluttered or busy compositions
Don't use outdated UI patterns
Avoid dark patterns or misleading visuals

Delivery¶

Place all images in the /docs/images/ directory with the following structure:

/docs/images/
├── README.md (this file)
├── hero-dashboard.png
├── process-4-steps.png
├── family-protected.png
├── professional-working.png
└── [other images...]

For language-specific images (if needed), use suffixes: - hero-dashboard-fr.png - hero-dashboard-en.png

Questions?¶

Contact the design team or open an issue if you need clarification on any image specification.

MyTwin Design Team design@getmytwin.io