NemesisNet Brand Playbook

Purpose & Scope

This document replaces the production brand guide container. It is the single source of truth for designers, engineers, vendors, and collaborators building NemesisNet experiences. Use the theme toggles above to preview the Aurora and Nemesis overlays exactly as they appear on nemesisnet.co.za.

• Audience: product design, frontend engineering, marketing, vendor partners.
• Coverage: color, typography, layout, motion cues, accessibility, voice.
• Governance: submit updates via the NemesisNet brand ops board before shipping.

Core Tokens

Tokens align 1:1 with the main site (index.html). Keep names stable to maintain parity across applications, documentation, and embedded components.

:root {
  --nemesis-blue: #1E88E5;           /* primary blue */
  --nemesis-blue-bright: #2979FF;   /* hover / emphasis */
  --aurora-base: #00C2A8;           /* secondary teal (Aurora) */
  --aurora-flare: #33D6B7;          /* lighter teal */
  --accent-color: var(--nemesis-blue);
  --accent-hover: var(--nemesis-blue-bright);
  --accent-glow: rgba(41,121,255,0.14);
  --nemesis-black: #0a0e27;
  --nemesis-white: #F4F4F4;
  --text-color: var(--nemesis-white);
  --text-muted: rgba(244,244,244,0.65);
  --glass-bg: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
  --ui-radius: 12px;                /* base corner radius */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
}

Palette

NemesisNet relies on a deep blue core, grounded neutrals, and the Aurora teal accent. Maintain contrast ratios ≥ 4.5:1 for body copy.

Backgrounds & Gradients

These surfaces create the NemesisNet depth effect. Pair gradients with glass overlays to keep content legible across both themes.

Spacing & Layout

Use the spacing scale for predictable rhythm. The main layout grid uses max-width: 1280px with a single-column stack below 900px.

Typography

Primary typeface: Inter. Use system fallbacks if webfonts are unavailable. Maintain optical margin alignment for big headlines.

Logo Clearspace & Minimum Sizes

Maintain at least 16px clearspace around the mark. Minimum width: 48px for favicons, 96px for UI placements.

Never recolor, rotate, or distort the logomark. Always use provided assets.

Logo Assets

Primary logo assets live in assets/. Use PNG/SVG for UI and the ICO for favicons.

NemesisNet

Keep a minimum 16px clearspace and avoid placing the logo on complex backgrounds.

Files: assets/optimized/[email protected], assets/optimized/[email protected], assets/optimized/Nemesis_Logo_Icon.webp, assets/Nemesis_Logo_Icon.ico

Digital & UI

Buttons mirror the main site: glass base, gradient hero, and Aurora secondary. Ghost buttons support tertiary actions.

Copyable CSS (example)

.btn-primary {
  background: linear-gradient(90deg, var(--nemesis-blue) 0%, var(--aurora-base) 100%);
  color: #0a0e27;
  border-radius: 12px;
  padding: 12px 26px;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(41,121,255,0.32);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-color);
}

Base NemesisNet Components

These samples are lifted from nemesisnet.co.za hero, chips, and project grid. Use them when reproducing the primary site experience.

Components & Accessibility

Contrast ratios, focus states, and keyboard support match production. Audit releases against WCAG 2.1 AA.

Accessibility checklist

• Contrast: text vs background ≥ 4.5:1 for body text.
• Focus styles: ensure visible focus rings on all interactive elements.
• Keyboard: every component must be operable via keyboard.
• Alt text: provide descriptive alternative text for imagery and logos.

Imagery & Photography

Favor candid shots with natural lighting and strong contrast. Avoid heavy filters or color casts that fight the brand palette.

• Do: shallow depth-of-field, balanced composition, authentic collaboration moments.
• Don't: oversaturate, crop the logo into photos, or rely on generic stock.

Iconography & Illustration

Stick to geometric shapes with consistent stroke weight. Use 16/24/32px grids and rounded corners that echo UI radii.

Voice & Tone

NemesisNet voice is confident, concise, and empathetic. Highlight measurable outcomes, avoid hype, and speak like a senior engineer guiding a partner.

Applications

Showcase the system across business cards, slide decks, marketing landing pages, dashboards, and swag. Provide editable templates in Figma or the preferred tool.

Quick Start

Bootstrap new surfaces with these base tokens:

:root {
  --nemesis-blue: #1E88E5;
  --nemesis-blue-bright: #2979FF;
  --aurora-base: #00C2A8;
  --aurora-flare: #33D6B7;
  --nemesis-black: #0a0e27;
  --nemesis-white: #F4F4F4;
  --accent-color: var(--nemesis-blue);
  --glass-bg: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
  --ui-radius: 12px;
}

Vector assets reside in assets/. Use PNG/SVG for high resolution contexts and ICO for favicons.

Light / Dark Button Examples

Preview button contrast on light and dark surfaces. Toggle the switch to confirm focus and accessibility behavior.

Legal & Trademark Use

Retain trademark notices and partner usage rules. Obtain NemesisNet brand approval before modifying or co-branding assets.

Nemesis Footer

Reuse this footer pattern for all NemesisNet-owned properties. It mirrors the production footer with dynamic year and attribution.

<footer class="site-footer">
  <div class="footer-inner">
    <div class="footer-line">
      <span>@ <span id="footer-month"></span> <span id="footer-year"></span></span>
      <span class="footer-divider">|</span>
      <span>Built by <a href="https://github.com/NemesisGuy" target="_blank" rel="noopener"><i class="fab fa-github" aria-hidden="true"></i> NemesisGuy</a></span>
      <span class="footer-divider">|</span>
      <span>Powered by <a href="https://nemesisnet.co.za" target="_blank" rel="noopener">NemesisNet.co.za</a></span>
      <span class="footer-divider">|</span>
      <span>All rights reserved.</span>
    </div>
  </div>
</footer>

<script>
  const now = new Date();
  const monthName = now.toLocaleString('default',{ month:'long' });
  document.getElementById('footer-month').textContent = monthName;
  document.getElementById('footer-year').textContent = now.getFullYear();
</script>

Drop the script once per page (after the footer) so every property automatically shows the current month + year.

Contact / Brand Team

Asset requests & approvals: [email protected]. Escalations route through the brand operations channel.