Econet.nz Website Rebuild
Initial Draft Style Guide
1. Design Philosophy
The Econet visual identity is built on a foundation of **clarity, precision, and trust**. As a platform for crucial environmental data, the design must be clean, functional, and highly legible. It avoids trends in favour of timeless usability. The aesthetic is inspired by the natural environment of Aotearoa, New Zealand, balanced with the structured nature of GIS data and scientific recording.
2. Colour Palette
Primary Palette
The core colours are drawn from the New Zealand landscape. The deep green is professional and natural, while the light tint provides breathing room.
Neutral Palette
A set of neutral tones for text, borders, and backgrounds ensures readability and a clean interface.
Functional & Feedback Palette
This palette defines colours for user interactions. Blue is used for conventional text links to ensure clarity. A vibrant orange is used as a highlight for key action-oriented links that need to stand out. The feedback colours provide clear, accessible status indicators.
3. Typography
Typography is chosen for clarity and professionalism. Montserrat provides clean, geometric headings appropriate for a data-focused platform. Open Sans is used for body text due to its excellent legibility across all screen sizes.
Heading 1 - Montserrat Bold, 2.5rem
Heading 2 - Montserrat Bold, 2rem
Heading 3 - Montserrat Bold, 1.5rem
Heading 4 - Montserrat Bold, 1.2rem (Secondary Text Colour)
This is a standard paragraph of body text using Open Sans. You can interact with standard links within the text, which are clearly differentiated by the conventional blue colour. This maintains readability for long-form content. For high-priority actions, such as in a card or a special notice, we use a specific action link style to draw the user's eye.
5. Form Elements
Form elements are crucial for data entry (e.g., reporting a weed). They must be clean, spacious, and have a clear focus state.
6. UI Components
Alerts / Feedback Messages
Alerts provide immediate feedback to the user after an action.
Cards
Cards are used to display snippets of content, like news, projects, or team members, in a visually appealing grid. Note the use of the orange action link for the primary action.
Project Tītipounamu
A community-led effort to restore the habitat for the native Rifleman bird in the Hunua Ranges.
View Project →7. Imagery & Iconography
Imagery
Photography should be authentic, high-quality, and specific to Aotearoa, New Zealand. It should feature:
- Clear shots of native and invasive flora.
- Volunteers and professionals working in the field.
- Expansive New Zealand landscapes that Econet helps protect.
Iconography
Icons should be simple, clean, and universally understood line icons (e.g., Feather Icons, Material Symbols). They should be used functionally to aid navigation and comprehension, especially in the GIS map interface, without adding unnecessary visual clutter.
Econet.nz Website Rebuild
Mobile Style Guide
1. Design Philosophy
The Econet visual identity is built on a foundation of **clarity, precision, and trust**. As a platform for crucial environmental data, the design must be clean, functional, and highly legible. It avoids trends in favour of timeless usability. The aesthetic is inspired by the natural environment of Aotearoa, New Zealand, balanced with the structured nature of GIS data and scientific recording.
2. Colour Palette
Primary Palette
The core colours are drawn from the New Zealand landscape. The deep green is professional and natural, while the light tint provides breathing room.
Neutral Palette
A set of neutral tones for text, borders, and backgrounds ensures readability and a clean interface.
Functional & Feedback Palette
This palette defines colours for user interactions. Blue is used for conventional text links to ensure clarity. A vibrant orange is used as a highlight for key action-oriented links that need to stand out. The feedback colours provide clear, accessible status indicators.
3. Typography
Typography is chosen for clarity and professionalism. Montserrat provides clean, geometric headings appropriate for a data-focused platform. Open Sans is used for body text due to its excellent legibility across all screen sizes.
Heading 1
Heading 2
Heading 3
Heading 4
This is a standard paragraph of body text using Open Sans. You can interact with standard links within the text, which are clearly differentiated by the conventional blue colour. This maintains readability for long-form content. For high-priority actions, such as in a card or a special notice, we use a specific action link style to draw the user's eye.
5. Form Elements
Form elements are crucial for data entry (e.g., reporting a weed). They must be clean, spacious, and have a clear focus state.
6. UI Components
Alerts / Feedback Messages
Alerts provide immediate feedback to the user after an action.
Cards
Cards are used to display snippets of content, like news, projects, or team members, in a visually appealing grid. Note the use of the orange action link for the primary action.
Project Tītipounamu
A community-led effort to restore the habitat for the native Rifleman bird in the Hunua Ranges.
View Project →7. Imagery & Iconography
Imagery
Photography should be authentic, high-quality, and specific to Aotearoa, New Zealand. It should feature:
- Clear shots of native and invasive flora.
- Volunteers and professionals working in the field.
- Expansive New Zealand landscapes that Econet helps protect.
Iconography
Icons should be simple, clean, and universally understood line icons (e.g., Feather Icons, Material Symbols). They should be used functionally to aid navigation and comprehension, especially in the GIS map interface, without adding unnecessary visual clutter.