Skip to main content

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
  • 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
  • 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. 

Back to top