Illustrations (Legacy)
Illustrations are used to add some colour and fun to the application and enhance the message a page is trying to convey. They should always be used as a complement to the message, never as the sole conveyer of the message.
Available Illustrations
These are the illustrations currently available in Funnel.
Usage Examples
Connect Illustration
Use when: Something needs to be connected or linked.
React component:
Data Share Illustration
Use when: Representing data sharing or data transfer.
React component:
Downloading Data Illustration
Use when: Data is still downloading or processing.
React component:
Empty Illustration
Use when: There is nothing else to show (general empty state).
React component:
No Data Illustration
Use when: There is no data to show (data-specific empty state).
React component:
Not Found Illustration
Use when: Displaying 404 or “not found” pages.
React component:
Success Illustration
Use when: Displaying success pages or completed actions.
React component:
Best Practices
When to Use Illustrations
- Empty states: When users encounter empty pages or sections
- Loading states: When data is being processed or downloaded
- Success states: When actions are completed successfully
- Error states: When something goes wrong (use sparingly)
- Onboarding: To guide new users through setup processes
Design Guidelines
- Always pair with text: Illustrations should complement, not replace, written content
- Keep context relevant: Choose illustrations that match the specific use case
- Maintain consistency: Use the same illustration style across similar scenarios
- Consider accessibility: Ensure illustrations don’t rely solely on color for meaning
Common Use Cases
- Data source connections: Use “Connect” illustration
- Data processing: Use “Downloading data” illustration
- Empty dashboards: Use “Empty” or “No data” illustrations
- 404 pages: Use “Not found” illustration
- Success confirmations: Use “Success” illustration
- Data sharing features: Use “Data share” illustration
