e² Design System
A symbol and pattern design system for environmental science and engineering.
What is e²?
The e² Design System defines a structured visual language for representing technical, environmental, and spatial systems.
It provides:
- Geometric foundation for consistent symbol construction
- Semantic framework for meaningful visual representation
- Pattern system for continuous data encoding
- Production-ready SVG standard for demanding applications
Why e² exists
Most design systems focus on user interfaces.
e² is designed for:
- Scientific Visualization
- Engineering Applications
- Geospatial Analysis
- Technical Communication
Core Principles
Clarity over Detail
Symbols must be readable at small sizes and across contexts.
Consistency over Variation
All symbols follow the same geometric rules and constraints.
Geometry over Illustration
Symbols are constructed from primitives, not drawn freely.
System over Individual Icon
Each symbol is part of a larger, coherent visual language.
System Architecture
The system is structured into four layers:
Foundations
Defines grid, stroke, spacing, and geometry rules.
Symbols
Discrete representations of objects, entities, and systems.
Patterns
Continuous visual encoding for spatial and environmental data.
Integration
Usage across GIS tools, design software, and applications.
Who it is for
The e² Design System is designed for:
- Environmental scientists
- Oceanographers and Hydrographers
- Engineers
- GIS professionals
- Designers working with technical systems
- Developers building scientific or spatial applications
What makes e² different
Domain-Specific
Built for environmental and engineering contexts—not generic UI.
Pattern-First Thinking
Supports continuous data representation, not just discrete icons.
GIS-Ready
Designed for QGIS, ArcGIS, and spatial workflows.
System-Driven
Focused on rules, consistency, and scalability.
Design Foundations (Quick Overview)
| Parameter | Value |
|---|---|
| Grid | 24 × 24 px |
| Primary stroke | 2 px |
| Secondary stroke | 1 px |
| Radius scale | 0 / 2 / 4 px |
| Primitives | ≤ 5 per symbol |
| Format | SVG |
File Format
All symbols are distributed as:
- SVG (primary format)
- Clean, optimized, and production-ready
- Compatible with:
- web applications
- GIS tools
- design software