# Style Guidelines

Various Guidelines regarding the styles of websites and programs of nethavn

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

<div id="bkmrk-navy-%23182534-%C2%A0-%7C-%C2%A0-r"><div style="display: flex; align-items: center; margin-bottom: 1rem;"><div style="width: 100px; height: 40px; background: #182534; border: 1px solid #F5F7FA; margin-right: 1rem;">  
</div><div><div>**Navy**</div><div>\#182534 | R:24 G:37 B:52</div></div></div><div style="display: flex; align-items: center; margin-bottom: 1rem;"><div style="width: 100px; height: 40px; background: #009BDF; border: 1px solid #F5F7FA; margin-right: 1rem;">  
</div><div><div>**Blue**</div><div>\#009BDF | R:0 G:155 B:223</div></div></div><div style="display: flex; align-items: center; margin-bottom: 1rem;"><div style="width: 100px; height: 40px; background: #F5F7FA; border: 1px solid #182534; margin-right: 1rem;">  
</div><div><div>**Ice**</div><div>\#F5F7FA | R:245 G:247 B:250</div></div></div><div style="display: flex; align-items: center; margin-bottom: 1rem;"><div style="width: 100px; height: 40px; background: #202429; border: 1px solid #F5F7FA; margin-right: 1rem;">  
</div><div><div>**Grey**</div><div>\#202429 | R:32 G:36 B:41</div></div></div><div style="display: flex; align-items: center; margin-bottom: 1rem;"><div style="width: 100px; height: 40px; background: #252D3C; border: 1px solid #F5F7FA; margin-right: 1rem;">  
</div><div><div>**Metallic**</div><div>\#252D3C | R:37 G:45 B:60</div></div></div><div style="display: flex; align-items: center; margin-bottom: 1rem;"><div style="width: 100px; height: 40px; background: #D6DAE0; border: 1px solid #182534; margin-right: 1rem;">  
</div><div><div>**Shadow**</div><div>\#D6DAE0 | R:214 G:218 B:224</div></div></div></div>## 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

<p class="callout info">The groupwiki uses adjusted heading sizes to improve readability and maintain a better text-to-page ratio.</p>

## Layout &amp; 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 &amp; Content Wraps

- Background: nethavn Metallic
- Padding: at least 16px
- Rounded corners: 8px (optional)
- Shadow: Subtle, only for emphasis

## Links &amp; Interactive Elements

- Default: nethavn Blue
- Hover: Underline
- Focus: Visible outline in nethavn Blue
- Visited: Same as default

## Buttons

- **Primary:** Background -&gt; nethavn Blue | Text -&gt; nethavn Ice 
    - Hover: Background -&gt; nethavn Metallic | Text -&gt; nethavn Blue
- **Secondary:** Background -&gt; nethavn Navy | Text -&gt; nethavn Ice 
    - Hover: Background -&gt; nethavn Metallic | Text -&gt; nethavn Ice
- **Disabled:** Reduced opacity, Text in nethavn Shadow

## Forms &amp; Inputs

- Background: nethavn Metallic
- Text: nethavn Ice
- Placeholder: nethavn Shadow
- Focus state: border 1px solid nethavn Blue

## Accessibility &amp; 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.

<p class="callout info">Always use high-quality vector versions or PNG/JPG versions of the logos. </p>