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. Tokens, buttons, cards, pills, and light/dark values mirror nemesisnet.co.za 1:1 — use the toggles above to preview the Base, Aurora, and Nemesis looks.

• 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 brand */
  --nemesis-blue-bright: #2979FF;   /* hover / emphasis */
  --nemesis-blue-deep: #0f4c81;     /* deep accents */
  --aurora-base: #00C2A8;           /* secondary teal */
  --aurora-flare: #33D6B7;          /* aurora hover */
  --aurora-ember: #008B6A;          /* deep aurora */
  --aurora-glow: rgba(0,194,168,0.12);
  --aurora-hover: var(--aurora-flare);
  --nemesis-gray: #3b3b3b;
  --nemesis-black: #0a0e27;
  --nemesis-white: #F4F4F4;
  --accent-color: var(--nemesis-blue);
  --accent-hover: var(--nemesis-blue-bright);
  --accent-glow: rgba(41,121,255,0.14);
  --secondary-accent: #2979FF;
  --secondary-glow: rgba(41,121,255,0.07);
  --bg-color: var(--nemesis-black);
  --bg-gradient: radial-gradient(circle at 20% 20%, rgba(41,121,255,0.28) 0%, transparent 42%), radial-gradient(circle at 80% 10%, rgba(0,194,168,0.22) 0%, transparent 45%), radial-gradient(circle at 60% 80%, rgba(41,121,255,0.18) 0%, transparent 55%), #0a0e27;
  --text-color: var(--nemesis-white);
  --text-muted: rgba(244,244,244,0.82);
  --card: #0f0f10;
  --card-bg: rgba(255,255,255,0.03);
  --card-border: rgba(255,255,255,0.06);
  --glass-bg: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
  --header-bg: linear-gradient(135deg, rgba(41,121,255,0.04), rgba(255,111,60,0.03));
  --font-stack: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ui-radius: 12px;                /* base corner radius */
  --radius-base: 20px;              /* card radius */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
}
/* Light mode: [data-theme="light"] — text #0a0e27, muted rgba(26,26,26,0.8),
   glass rgba(255,255,255,0.9), border rgba(41,121,255,0.08), cards #fff. */

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 matches the live site system stack: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif — no webfont dependency. Use system fallbacks in the same order. 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 (nemesisnet.co.za): glass base with blur, solid accent hover. Radius is 12px, padding 12px 28px, transition 0.3s cubic-bezier(0.4, 0, 0.2, 1).

Copyable CSS (live pattern)

.btn-glass {
  padding: 12px 28px;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text-color);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-glass:hover {
  background: var(--accent-hover);
  color: #0a0e27;
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-glow);
}

.btn--primary {
  background: var(--nemesis-blue);
  color: #0a0e27;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
}

.btn--dual {
  background: linear-gradient(90deg, var(--nemesis-blue) 0%, var(--aurora-base) 100%);
  color: #0a0e27;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
}

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

NemesisNet ships dependency-free inline SVG outline icons (Lucide-style: 2px stroke, round caps) plus minimal unicode glyphs (☰ ✦ ⚙ ☀) for toggles — exactly as the live site does. No icon CDN, no external requests. Never mix icon styles within a single component group.

Rules: Outline-only style. Consistent stroke width. Icons support function — not decoration. No rotation, bounce, or morph animations. All icons must pass: "Does this feel like a serious infrastructure system?"

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;
  --nemesis-blue-deep: #0f4c81;
  --aurora-base: #00C2A8;
  --aurora-flare: #33D6B7;
  --aurora-ember: #008B6A;
  --nemesis-gray: #3b3b3b;
  --nemesis-black: #0a0e27;
  --nemesis-white: #F4F4F4;
  --accent-color: var(--nemesis-blue);
  --secondary-accent: #2979FF;
  --text-color: var(--nemesis-white);
  --text-muted: rgba(244,244,244,0.82);
  --glass-bg: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.06);
  --ui-radius: 12px;
  --radius-base: 20px;
}

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

The production footer: link grid, disclaimer, attribution line. Dark bar rgba(8,12,28,0.78) with blur; light mode rgba(255,255,255,0.92). Links #a8d4ff (light: #1a4da6) with an underline-grow hover. Footer line 0.85rem.

<footer class="site-footer">
  <div class="footer-links-grid">
    <div class="footer-group">
      <strong class="footer-heading">Business</strong>
      <a href="/services">Services</a>
      <a href="/projects">Projects</a>
      <a href="/contact">Contact</a>
    </div>
    <div class="footer-group">
      <strong class="footer-heading">Legal</strong>
      <a href="/legal/terms">Terms</a>
      <a href="/legal/privacy">Privacy</a>
    </div>
  </div>
  <div class="footer-disclaimer">
    <p>Your disclaimer text.</p>
  </div>
  <div class="footer-inner">
    <div class="footer-line">
      <span>© <span id="footer-month"></span> <span id="footer-year"></span> NemesisNet</span>
      <span class="footer-divider">|</span>
      <span>Based in Cape Town, South Africa</span>
      <span class="footer-divider">|</span>
      <span>Remote engagements globally</span>
      <span class="footer-divider">|</span>
      <span>Built by <a href="https://github.com/NemesisGuy" target="_blank" rel="noopener">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>
      <span class="footer-divider">|</span>
      <span class="footer-version">{{ buildVersion }}</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.