Web Appearance Guide

This document defines the design standards for all web properties at  nethavn . It ensures a consistent look, feel, and usability across all digital experiences. Designers and developers should follow these guidelines to maintain brand identity. 

 Color System 

 The following brand colors define the nethavn visual identity. Use them consistently across all web properties. 

 

 

 

 

 Navy 

 #182534   |   R:24 G:37 B:52 

 

 

 

 

 

 Blue 

 #009BDF   |   R:0 G:155 B:223 

 

 

 

 

 

 Ice 

 #F5F7FA   |   R:245 G:247 B:250 

 

 

 

 

 

 Grey 

 #202429   |   R:32 G:36 B:41 

 

 

 

 

 

 Metallic 

 #252D3C   |   R:37 G:45 B:60 

 

 

 

 

 

 Shadow 

 #D6DAE0   |   R:214 G:218 B:224 

 

 

 

 Typography 

 

 Primary font: Manrope 

 Secondary (fallback): Arial 

 Base font size: 14px (1rem) 

 Line-height: 1.5 

 Font weights: Regular (400), Medium (500), Bold (700) 

 

 Headings (h1–h6): nethavn Blue, sentence case only 

 

 h1: 32px 

 h2: 26px 

 h3: 24px 

 h4: 22px 

 h5: 20px 

 h6: 18px 

 

 The groupwiki uses adjusted heading sizes to improve readability and maintain a better text-to-page ratio. 

 Layout & Spacing 

 

 Grid system: 12-column responsive 

 Container max-width: 100% 

 Spacing scale: multiples of 4px (4, 8, 12, 16, 24, 32, 48px) 

 White space: maintain breathing room between blocks 

 

 Header 

 

 Background: nethavn Navy 

 Border-bottom: 4px solid nethavn Blue 

 Content: logo (left), navigation (right) 

 

 Body 

 

 Background: nethavn Grey 

 Default text: nethavn Ice 

 Muted text: nethavn Shadow 

 

 Footer 

 

 Background: nethavn Navy 

 Border-top: 4px solid nethavn Blue 

 Content: navigation links, copyright, contact info 

 

 Cards & Content Wraps 

 

 Background: nethavn Metallic 

 Padding: at least 16px 

 Rounded corners: 8px (optional) 

 Shadow: Subtle, only for emphasis 

 

 Links & Interactive Elements 

 

 Default: nethavn Blue 

 Hover: Underline 

 Focus: Visible outline in nethavn Blue 

 Visited: Same as default 

 

 Buttons 

 

 Primary: Background -> nethavn Blue | Text -> nethavn Ice

 

 Hover: Background -> nethavn Metallic | Text -> nethavn Blue 

 

 

 Secondary: Background -> nethavn Navy | Text -> nethavn Ice

 

 Hover:  Background -> nethavn Metallic | Text -> nethavn Ice 

 

 

 Disabled: Reduced opacity, Text in nethavn Shadow 

 

 Forms & Inputs 

 

 Background: nethavn Metallic 

 Text: nethavn Ice 

 Placeholder: nethavn Shadow 

 Focus state: border 1px solid nethavn Blue 

 

 Accessibility & Usability 

 

 Minimum contrast ratio: WCAG AA (4.5:1) 

 Font size: never below 14px 

 Focus outlines: must always be visible 

 Color alone must not convey meaning 

 

 Visual Assets 

 

 Icons: line style, nethavn Blue (active), nethavn Ice (neutral) 

 Images: SVG for logos/icons, PNG/JPG for social media or where SVG is not accepted. 

 Favicon: nethavn logo in nethavn Blue. 

 

 Always use high-quality vector versions or PNG/JPG versions of the logos.