Theme Guide — Xnet Hub Design System

// SECTION_01

Design Philosophy

Core Concept & Vibe

This design system is built around the Dark Green Cyberpunk / Hacker Terminal aesthetic. The core idea is to recreate the feel of an old CRT monitor or hacker terminal.

Three vibes work together throughout the theme: Matrix Terminal, Cyber Space, and Hacker Dashboard.

Core rule: GREEN ON BLACK — green glow, scanline texture, and monospace fonts are essential to the hacker vibe.

Visual Layer Stack

Each page element is arranged in multiple layers, from bottom to top:

z: 0Base Background#020a02 — almost black with a subtle green tint

z: 1Space CanvasAnimated stars + meteors — <canvas> element

z: 2Hex Grid PatternCSS SVG hexagon background, 4% opacity

z: 3Radial GlowGreen radial gradient spreading from the center

z: 10+Content LayerCards, text, buttons — all core UI elements

z: 9999Scanline OverlayFixed CRT scanlines above everything, with pointer-events:none

// SECTION_02

Color System

Complete Color Palette

Aa

PRIMARY GREEN#00ff41var(--g) — main accent

Aa

GREEN 2#00cc33var(--g2) — gradient

Aa

GREEN 3#008f20var(--g3) — borders

Aa

GREEN DIM#004d12var(--gdim)

Aa

BG DEEP#020a02var(--bg) — body

Aa

BG MID#040e04var(--bg2) — sections

Aa

CARD BG#071407var(--card)

Aa

TEXT PRIMARY#e8ffe8var(--t1) — headlines

Aa

TEXT BODY#6bcc6bvar(--t2) — body text

Aa

TEXT DIM#2d6b2dvar(--t3) — labels

CSS Variables Setup

/* ─── HACKER THEME — copy the full block ─── */
:root {
  /* Green Palette */
  --g:     #00ff41;  /* Matrix green */
  --g2:    #00cc33;  /* Gradient end */
  --g3:    #008f20;  /* Borders, scrollbar */
  --gdim:  #004d12;  /* Very subtle */

  /* Backgrounds */
  --bg:    #020a02;  /* Body bg */
  --bg2:   #040e04;  /* Section alternate */
  --bg3:   #061006;  /* Inputs, code blocks */
  --card:  #071407;  /* Card surfaces */
  --card2: #0a1a0a;  /* Card on hover */

  /* Text */
  --t1:    #e8ffe8;  /* Headlines */
  --t2:    #6bcc6b;  /* Body text */
  --t3:    #2d6b2d;  /* Labels/meta */

  /* Borders */
  --border:  rgba(0,255,65,.12);
  --border2: rgba(0,255,65,.35);

  /* Glow Shadows */
  --glow-sm: 0 0 10px rgba(0,255,65,.3);
  --glow-md: 0 0 20px rgba(0,255,65,.4), 0 0 40px rgba(0,255,65,.15);
  --glow-lg: 0 0 40px rgba(0,255,65,.5), 0 0 80px rgba(0,255,65,.2);
}

Color Usage Rules

Color	Use For	Never Use For
#00ff41	Active links, buttons, hover borders, glow shadows	Body background (too bright)
#e8ffe8	H1, H2 titles, important UI labels	Long body paragraphs
#6bcc6b	Paragraphs, descriptions, card body text	Decorative bg elements
#2d6b2d	Labels, metadata, breadcrumbs, captions	Primary readable content
#020a02	Body background ONLY	Text (would be invisible)

// SECTION_03

Typography System

Font Stack — Only 3 Fonts

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800;900
  &family=Rajdhani:wght@300;400;500;600;700
  &family=Share+Tech+Mono&display=swap"
  rel="stylesheet">

FONT 01 — ORBITRON

HEADINGS · LOGO · BUTTONS

NAV LINKS · STATS · LABELS

Use: Logos, H1/H2/H3, navbar, buttons, stats, card titles, all-caps labels
Avoid: Body paragraphs and long descriptions

FONT 02 — RAJDHANI

Comfortable body text for reading paragraphs.

Bold emphasis in body content.

Use: body default font, paragraphs, descriptions, footer text
Avoid: headings, labels, and technical UI elements

FONT 03 — SHARE TECH MONO

// terminal_font = monospace_labels;

SECTION · TAG · BADGE · CODE · TIMESTAMP

Use: Section tags (// tag), badges, timestamps, labels, code, status indicators
Tip: always keep letter-spacing between 2px and 4px

Font Size & Weight Reference

Element	Font	Size	Weight	Letter-spacing
Hero Title	Orbitron	clamp(60px,14vw,160px)	900	-2px
Page Banner H1	Orbitron	clamp(30px,6vw,64px)	900	normal
Section H2	Orbitron	clamp(22px,4vw,44px)	900	normal
Card Title	Orbitron	16–20px	700–800	normal
Navbar Links	Orbitron	11px	600	2px
Button Text	Orbitron	11–13px	700–800	2px
Body Paragraphs	Rajdhani	15–17px	400	normal
Section Tags	Share Tech Mono	11px	400	4px
Badges / Labels	Share Tech Mono	9–11px	400	2–3px
Stat Numbers	Orbitron	clamp(26px,4vw,42px)	900	normal

Typography Rules

Section tag format: // section_name — Share Tech Mono, var(--g), letter-spacing:4px
H2 accent line: width:70px height:2px linear-gradient(90deg, #00ff41, transparent)
Hero title 2 lines: Line 1 white (#e8ffe8) | Line 2 green (#00ff41) + glow + glitch
Uppercase everywhere: buttons, labels, badges, nav links — text-transform:uppercase
line-height: Body 1.85–1.9 | Headings 0.9–1.1 | Labels 1.0

// SECTION_04

Background Effects

Effect 1 — Scanline Overlay

Horizontal lines that mimic a CRT monitor. This is one of the most important effects for the hacker feel.

body::after {
  content: '';
  position: fixed;   /* stays fixed while scrolling */
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px
  );
  pointer-events: none;  /* does not block clicks */
  z-index: 9999;
  opacity: 0.35;  /* keep between 0.3–0.4 */
}

Effect 2 — Hexagon Grid Pattern

.hex-grid {
  background-image: url("data:image/svg+xml,
    %3Csvg xmlns='http://www.w3.org/2000/svg'
    width='60' height='104'%3E
    %3Cpolygon points='30,2 58,17 58,47 30,62 2,47 2,17'
    fill='none' stroke='rgba(0,255,65,0.04)'
    stroke-width='1'/%3E%3C/svg%3E");
  /* keep stroke opacity between 0.03 and 0.05 */
}

Effect 3 — Glow Effects

/* Text Glow — for titles */
.text-glow {
  color: #00ff41;
  text-shadow:
    0 0 30px rgba(0,255,65,.8),
    0 0 80px rgba(0,255,65,.4),
    0 0 140px rgba(0,255,65,.15);
}

/* Box Glow — for buttons and cards */
.box-glow {
  box-shadow:
    0 0 20px rgba(0,255,65,.4),
    0 0 60px rgba(0,255,65,.15);
}

/* Section Radial BG Glow */
.section-glow {
  background: radial-gradient(
    ellipse 80% 70% at 50% 0%,
    rgba(0,255,65,.07), transparent 65%
  );
}

Effect 4 — Space Canvas (Hero)

/* ─── 200 stars + 8 meteors ─── */
class Star {
  reset() {
    this.r  = Math.random() * 1.2 + 0.1;    // 0.1–1.3px
    this.a  = Math.random() * 0.7 + 0.1;    // alpha
    this.da = (Math.random()-0.5) * 0.008; // twinkle
    this.green = Math.random() > 0.7;     // 30% green
  }
  draw() {
    ctx.fillStyle = this.green
      ? `rgba(0,255,65,${this.a * 0.6})`
      : `rgba(180,240,180,${this.a * 0.4})`;
  }
}
class Meteor {
  reset() {
    this.len   = Math.random() * 80 + 40;  // 40–120px
    this.speed = Math.random() * 4  + 2;   // 2–6 px/frame
    this.angle = Math.PI / 5;           // 36° diagonal
    this.active = Math.random() > 0.6;  // 40% active
  }
}
// Init: 200 stars, 8 meteors
for(let i=0; i<200; i++) stars.push(new Star());
for(let i=0; i<8;   i++) meteors.push(new Meteor());

// SECTION_05

Animation Library

See all animations live below:

GLITCH EFFECTHUB

GLOW PULSEXNET

CURSOR BLINK█

HEX SPIN

SCAN LINE

TYPE EFFECT

// loading...

Glitch Effect

.glitch { position: relative; color: #00ff41; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; top:0; left:0; right:0;
  color: #00ff41; opacity: 0;
}
.glitch::before {
  text-shadow: -3px 0 rgba(255,0,100,.6);
  animation: glitch1 6s infinite;
}
.glitch::after {
  text-shadow: 3px 0 rgba(0,200,255,.6);
  animation: glitch2 6s infinite;
}
@keyframes glitch1 {
  0%,92%,100%{ opacity:0; }
  94%{ opacity:.8; transform:translateX(-3px) skewX(-2deg); }
  96%{ opacity:.8; transform:translateX(3px) skewX(2deg); }
  98%{ opacity:0; }
}
@keyframes glitch2 {
  0%,93%,100%{ opacity:0; }
  95%{ opacity:.7; transform:translateX(3px) skewX(1deg); }
  97%{ opacity:.7; transform:translateX(-3px) skewX(-1deg); }
  99%{ opacity:0; }
}

Navbar Scan Line

XNET HUB

Home

Apps

About

⬇ DOWNLOAD

#nav::after {
  content:''; position:absolute;
  bottom:-1px; left:0; height:1px; width:0;
  background:linear-gradient(90deg,transparent,#00ff41,transparent);
  animation:navScan 4s ease-in-out infinite;
}
@keyframes navScan {
  0%  { width:0;   left:0;    opacity:0; }
  20% { opacity:1; }
  50% { width:60%; left:20%; }
  80% { opacity:1; }
  100%{ width:0;   left:100%; opacity:0; }
}

Status Dot Pulse & Glow Pulse

/* Status dot (the green dot in ● ONLINE) */
.status-dot {
  width:7px; height:7px; border-radius:50%;
  background:#00ff41; box-shadow:0 0 8px #00ff41;
  animation:dotPulse 1.5s infinite;
}
@keyframes dotPulse {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.2; transform:scale(.7); }
}
/* Hexagon Logo spin */
.hex-spin { animation:hexSpin 10s linear infinite; }
@keyframes hexSpin { to{ transform:rotate(360deg); } }

Scroll Reveal

/* CSS */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.on { opacity:1; transform:translateY(0); }
.d1{ transition-delay:.1s } .d2{ transition-delay:.2s }
.d3{ transition-delay:.3s } .d4{ transition-delay:.4s }

/* JavaScript */
const obs = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if(e.isIntersecting) {
      e.target.classList.add('on');
      obs.unobserve(e.target);
    }
  });
}, { threshold: .08, rootMargin: '0px 0px -30px 0px' });
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));

Card Hover Scan Sweep

.card { position:relative; overflow:hidden; }
.card .scan {
  position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background:linear-gradient(90deg,
    transparent, rgba(0,255,65,.04), transparent);
  transition:left .5s ease; pointer-events:none;
}
.card:hover .scan { left:100%; }

// SECTION_06

UI Components

Navbar

Height: keep it at a bold 80px
Position: fixed, top:0, z-index:5000
Background: rgba(2,10,2,.85) + backdrop-filter:blur(20px) — glassmorphism
Layout: Logo left (flex-shrink:0) | Links center (flex:1) | CTA right (flex-shrink:0)
Logo: SVG hexagon (spinning) + Orbitron bold text, letter-spacing:3px
Links: Orbitron 11px, uppercase, letter-spacing:2px, bottom border on hover
Scroll effect: when scrollY>60 add the `.scrolled` class for a darker background and brighter border
Bottom: ::after animated green scan line, 4s loop

Hero Section Structure

<section id="hero">
  <canvas id="space-canvas"></canvas>  <!-- Layer 1 -->
  <div class="hero-hexgrid"></div>     <!-- Layer 2 -->
  <div class="hero-vignette"></div>    <!-- Layer 3 -->
  <div class="hero-glow"></div>        <!-- Layer 4 -->
  <div class="hero-content">            <!-- Layer 5 -->
    <div class="status-badge">● ONLINE</div>
    <h1>
      <span class="line-white">BRAND</span>
      <span class="line-green glitch" data-text="NAME">NAME</span>
      <span class="tagline">// Your tagline</span>
    </h1>
    <div class="hero-btns">...</div>
    <div class="stats-bar">...</div>
  </div>
</section>

Card Component

.card {
  background:var(--card);
  border:1px solid rgba(0,255,65,.12);
  border-top:2px solid rgba(0,255,65,.12);
  transition:all .4s cubic-bezier(.23,1,.32,1);
}
.card:hover {
  border-color:rgba(0,255,65,.4);
  border-top-color:#00ff41;
  transform:translateY(-6px);
  background:var(--card2);
  box-shadow:
    0 0 0 1px rgba(0,255,65,.1),
    0 20px 50px rgba(0,0,0,.6),
    0 0 30px rgba(0,255,65,.06);
}
/* Corner cuts */
.card::before, .card::after {
  content:''; position:absolute;
  width:12px; height:12px;
  background:var(--bg);
  border:1px solid rgba(0,255,65,.35);
}
.card::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.card::after { bottom:-1px; right:-1px; border-left:none; border-top:none; }

Buttons

/* PRIMARY — green filled, diagonal clip-path */
.btn-primary {
  background:#00ff41; color:#020a02;
  font-family:'Orbitron',monospace;
  font-size:12px; font-weight:800;
  letter-spacing:2px; text-transform:uppercase;
  padding:16px 42px;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  box-shadow:0 0 30px rgba(0,255,65,.4);
}

/* OUTLINE — slide-in fill on hover */
.btn-outline {
  background:transparent; color:#00ff41;
  border:1px solid rgba(0,255,65,.5);
  position:relative; overflow:hidden;
}
.btn-outline::before {
  content:''; position:absolute; inset:0;
  background:#00ff41;
  transform:translateX(-101%);
  transition:transform .3s ease;
}
.btn-outline span { position:relative; z-index:1; }
.btn-outline:hover::before { transform:translateX(0); }
.btn-outline:hover { color:#020a02; }

Borders & Dividers

/* Default */ border: 1px solid rgba(0,255,65,.12);
/* Hover  */ border: 1px solid rgba(0,255,65,.35);
/* Top accent (cards) */ border-top: 2px solid var(--g);
/* Left accent (note blocks) */ border-left: 3px solid var(--g);

/* Section Divider */
.divider {
  width:100%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,65,.15),transparent);
}
/* H2 Underline */
.sec-line {
  width:70px; height:2px;
  background:linear-gradient(90deg,#00ff41,transparent);
}
/* Scrollbar */
::-webkit-scrollbar{ width:4px; }
::-webkit-scrollbar-thumb{ background:#008f20; }
::-webkit-scrollbar-thumb:hover{ background:#00ff41; }

// SECTION_07

Layout & Spacing

Element	Value	Notes
Section padding	90–120px top/bottom	Large breathing room
Section max-width	1300px	margin: 0 auto
Body side padding	3–4%	Fluid responsive
Card padding	24–40px	Depends on content type
Grid gap (cards)	16–20px	Spacing between cards
Section header mb	60–70px	Space between header and content
Navbar height	80px	Set body padding-top to 80px
Page banner	120px top / 60–70px bottom	Clears the navbar space

// SECTION_08

AI Prompt Commands

Copy and paste the prompt below when asking any AI model, such as Claude, ChatGPT, or Gemini, to build a website in this theme.

Master Full-Page Prompt

Create a website/page with this EXACT design system:

THEME: Dark Green Hacker / Cyberpunk Terminal aesthetic.

COLORS (CSS variables, use exactly):
--g:#00ff41  --g2:#00cc33  --g3:#008f20
--bg:#020a02  --bg2:#040e04  --card:#071407
--t1:#e8ffe8  --t2:#6bcc6b  --t3:#2d6b2d
--border:rgba(0,255,65,.12)  --border2:rgba(0,255,65,.35)

FONTS (all 3 from Google Fonts, required):
Orbitron → ALL headings, logo, buttons, nav, stats
Rajdhani → body default, paragraphs, descriptions
Share Tech Mono → tags, labels, badges, code, metadata

REQUIRED EFFECTS (implement ALL):
1. SCANLINE: body::after fixed z-index:9999
   repeating-linear-gradient(0deg, transparent,transparent 2px,
   rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px) pointer-events:none opacity:.35
2. HEX GRID: SVG hexagon bg on hero/banners, stroke rgba(0,255,65,0.04)
3. GLITCH: main green title ::before ::after red/cyan offset, 6s cycle
4. NAV SCAN: navbar::after green gradient sweeps left→right 4s
5. SPACE CANVAS: 200 stars(30% green) + 8 meteors on hero section
6. SCROLL REVEAL: .reveal opacity 0→1 translateY 28px→0, IntersectionObserver
7. STATUS DOT: 7px circle green, 1.5s pulse scale animation
8. GLOW PULSE: hero center radial green gradient, 4s scale animation

NAVBAR (fixed, 80px):
Logo left (spinning SVG hexagon + Orbitron bold text)
Center: Orbitron 11px uppercase letter-spacing:2px links
Right: outline btn with fill-slide-in hover animation
Bottom: animated scan line (::after gradient 4s loop)
Glassmorphism bg: rgba(2,10,2,.85) backdrop-filter:blur(20px)

HERO (100vh, 5 layers):
canvas / hex-grid / vignette / green-glow / content
Title: Line1 #e8ffe8 + Line2 #00ff41 glitch (Orbitron 900 huge)
Tagline: Share Tech Mono letter-spacing:8px '// text' #2d6b2d
CTA: primary(green filled clip-path) + outline(slide-in)
Stats: 4 col glassmorphism bar

CARDS:
border-top:2px→green hover, ::before/::after corner cuts,
hover scan sweep, translateY(-6px)

FORBIDDEN:
Inter/Roboto/Arial, purple gradients, white backgrounds,
blue as primary, rounded corners (use clip-path/sharp)

Component-Specific Prompts

NAVBAR ONLY: Fixed 80px hacker navbar. rgba(2,10,2,.85) bg
backdrop-filter:blur(20px). Left: spinning SVG hexagon + Orbitron
logo (white+green). Center: Orbitron 11px uppercase links.
Right: outline btn fill-on-hover. Bottom::after scan animation 4s.
scroll→.scrolled: darker bg, border rgba(0,255,65,.35).

HERO SECTION: 100vh. 5 layers: canvas(200 stars 30% green +
8 diagonal meteors) / SVG hex grid 4% / vignette dark edges /
center radial green glow 4s pulse / content center.
Title: Orbitron 900 clamp(60px,14vw,160px), Line1 #e8ffe8,
Line2 #00ff41 glow+glitch. Share Tech Mono tagline letter-spacing:8px.
clip-path diagonal buttons. 4-col glassmorphism stats bar.

CARD GRID: 3-col. #071407 bg, border rgba(0,255,65,.12),
border-top:2px→#00ff41 on hover. ::before top-left & ::after
bottom-right corner cuts 12px. Hover scan sweep + translateY(-6px).
Content: index(Share Tech Mono) / icon / Orbitron title /
Share Tech Mono category / Rajdhani desc / tag pills / footer btn.

Quick One-Line Commands

Component	Quick Prompt
Button	Orbitron 12px bold uppercase letter-spacing:2px, green filled, clip-path diagonal corners, glow box-shadow
Section Tag	Share Tech Mono 11px #00ff41 letter-spacing:4px uppercase "// name" with Orbitron H2 below and 70px 2px gradient underline
Status Badge	border:1px rgba(0,255,65,.3) bg rgba(0,255,65,.05) Share Tech Mono 11px green, pulse dot left side 7px circle
Divider	width:100% height:1px linear-gradient(90deg, transparent, rgba(0,255,65,.15), transparent)
Footer	bg #040e04 border-top rgba(0,255,65,.35) top green gradient highlight, Orbitron headings, Share Tech Mono copyright

// SECTION_09

Implementation Checklist

Confirm every item below before deploying a new page.

Fonts & Colors

3 fonts import: Orbitron + Rajdhani + Share Tech Mono
All CSS variables are defined: --g, --bg, --card, --t1, --t2, --t3, --border, --border2
body: font-family:'Rajdhani' + background:var(--bg) + color:var(--t1)
Custom scrollbar: 4px, #008f20 thumb

Background Effects

Scanline overlay: body::after, fixed, z-index:9999, pointer-events:none, opacity:.35
Hex grid pattern is present on the banner or hero
Radial green glow is present at the hero center
Vignette overlay is present around the hero edges
Space canvas animation is present in the hero

Animations

Glitch animation is applied to the green main title text (6s cycle)
Nav scan line is implemented on navbar::after (4s loop)
Status dot pulse appears in the ONLINE indicator
Scroll reveal .reveal + IntersectionObserver implemented
Card hover scan sweep is present

Typography & Components

Section tags // format, Share Tech Mono, var(--g), letter-spacing:4px
H2 accent line appears on every section header (70px gradient)
Buttons uppercase letter-spacing:2px, Orbitron font
Navbar height 80px, fixed, glassmorphism
Card corner cuts (::before + ::after)
Section dividers use the gradient line style

When every item is complete, the website will fully carry the Dark Green Hacker/Cyberpunk vibe. This design system can be applied to any kind of content.

📄 DOCX Documentation

The full documentation is available in Word format for offline reference, sharing, and printing.

⬇ Download DOCX

// SECTION_10

Xnet Hub Design Documentation

The complete Xnet Hub website design system, with colors, fonts, animations, and components collected in one place.

⬇ DOWNLOAD DOCX // Xnet_Hub_Design_Documentation.docx

▋
LOADING XNET HUB DOCS...

Hacker Theme Design System

Design Philosophy

Core Concept & Vibe

Visual Layer Stack

Color System

Complete Color Palette

CSS Variables Setup

Color Usage Rules

Typography System

Font Stack — Only 3 Fonts

Font Size & Weight Reference

Typography Rules

Background Effects

Effect 1 — Scanline Overlay

Effect 2 — Hexagon Grid Pattern

Effect 3 — Glow Effects

Effect 4 — Space Canvas (Hero)

Animation Library

Glitch Effect

Navbar Scan Line

Status Dot Pulse & Glow Pulse

Scroll Reveal

Card Hover Scan Sweep

UI Components

Navbar

Hero Section Structure

Card Component

Buttons

Borders & Dividers

Layout & Spacing

AI Prompt Commands

Master Full-Page Prompt

Component-Specific Prompts

Quick One-Line Commands

Implementation Checklist

Fonts & Colors

Background Effects

Animations

Typography & Components

📄 DOCX Documentation

Xnet Hub Design Documentation