Hacker Theme Design System — Complete Documentation

// SECTION_01

Design Philosophy

Core Concept

This design system is built on the Dark Green Cyberpunk / Hacker Terminal aesthetic. The core idea is to create the feeling of an old CRT monitor or hacker terminal, where everything feels dark, glowing, and digital.

The three core vibes are Matrix Terminal, Cyber Space, and Hacker Dashboard.

The soul of this theme is Green on Black — the classic hacker-in-cinema look, with green glow, scanline texture, and monospace typography throughout.

Visual Layer Stack

Each page element sits across multiple visual layers, from bottom to top:

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

z:1Space CanvasAnimated stars, meteors, nebula — canvas element

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

z:3Radial GlowGreen radial gradient that spreads from the center

z:4Content LayerCards, text, buttons — all content sits on this layer

z:9999Scanline OverlayFixed CRT scanline effect across the entire page, above everything else

// SECTION_02

Color System

Complete Color Palette

Aa

PRIMARY GREEN #00ff41 / rgb(0,255,65) Main accent, glow, active states

Aa

GREEN 2 #00cc33 Gradients, secondary accents

Aa

GREEN 3 #008f20 Borders, scrollbar, dim elements

Aa

GREEN DIM #004d12 Very subtle borders, backgrounds

Aa

BG DEEP #020a02 Main body background

Aa

BG MID #040e04 Section alternate backgrounds

Aa

CARD BG #071407 Card, panel backgrounds

Aa

TEXT PRIMARY #e8ffe8 Headlines, important text

Aa

TEXT SECONDARY #6bcc6b Body text, descriptions

Aa

TEXT DIM #2d6b2d Labels, captions, metadata

Use only different shades of green for the main system. Orange, blue, or purple may be used only as secondary accents to separate apps or items, never as the main theme.

Color Usage Rules

Color	Use For	Never Use For
#00ff41	Active links, buttons, borders on hover, glow shadows, icon colors	Body background (too bright)
#e8ffe8	H1, H2 titles, important UI labels	Body paragraphs (too bright for long text)
#6bcc6b	Paragraphs, descriptions, card body text	Decorative elements
#2d6b2d	Labels, metadata, breadcrumbs, timestamps	Primary content
#020a02	Main body background ONLY	Text (invisible)

CSS Variables Setup

        /* ─── HACKER THEME CSS VARIABLES ─── */
:root {
  /* Primary Green Palette */
  --g:    #00ff41;  /* Matrix green — main accent */
  --g2:   #00cc33;  /* Slightly darker green */
  --g3:   #008f20;  /* Mid-dark green */
  --gdim: #004d12;  /* Very dim green */

  /* Background Layers */
  --bg:   #020a02;  /* Body — almost pure black */
  --bg2:  #040e04;  /* Sections alternate bg */
  --bg3:  #061006;  /* Input fields bg */
  --card: #071407;  /* Card surfaces */
  --card2:#0a1a0a;  /* Card on hover */

  /* Text Colors */
  --t1:   #e8ffe8;  /* Headlines */
  --t2:   #6bcc6b;  /* Body text */
  --t3:   #2d6b2d;  /* Metadata/labels */

  /* Border Colors */
  --border: rgba(0,255,65,.12); /* Default subtle */
  --border2:rgba(0,255,65,.35); /* Hover/active */

  /* Glow Shadow */
  --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);
}
      

// SECTION_03

Typography System

Font Stack — 3 Fonts Only

Only three Google Fonts are used, and each one has a specific role.

ORBITRON BOLD

Orbitron Regular Weight 600

FONT 01 — ORBITRON Google Fonts Import: family=Orbitron:wght@400;600;700;800;900

Use: logo, H1, H2, H3 headings, navbar links, buttons, stat numbers, card titles, all-caps labels.
Avoid: body text, long paragraphs, and descriptions.

Rajdhani body text for comfortable reading.

Rajdhani Bold for emphasis in body.

FONT 02 — RAJDHANI Google Fonts Import: family=Rajdhani:wght@300;400;500;600;700

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

// share_tech_mono = terminal_font;

LABEL · TAG · METADATA · CODE · TIMESTAMP

FONT 03 — SHARE TECH MONO Google Fonts Import: family=Share+Tech+Mono

Use: section tags (// tag), metadata, badges, timestamps, small labels, code snippets, status indicators, and all monospace elements.
Tip: Always keep letter-spacing between 2px and 4px. It strengthens the terminal feel.

        <!-- Google Fonts import link -->
<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 Size Scale

Element	Font	Size	Weight	Letter-spacing
Hero Title (Line 1/2)	Orbitron	clamp(60px, 14vw, 160px)	900	-2px
Page Banner Title	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 (// tag)	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
Code/Terminal text	Share Tech Mono	13px	400	normal

Typography Rules

Section tag format: Always use // section_name or // page.name / section in Share Tech Mono with the var(--g) color.
Line after heading: Every H2 should have an accent line below it — width:70px; height:2px; background: linear-gradient(90deg, var(--g), transparent);
Hero title: Two lines — first line white (--t1), second line green (--g) with glow.
Subtitle/tagline: Share Tech Mono, letter-spacing: 6-8px, color: var(--t3), // text format।
uppercase everywhere: Every button, label, badge, and nav link should remain uppercase.
line-height: Body text: 1.85-1.9 | Headings: 0.9-1.1 | Labels: 1.0

// SECTION_04

Background Layers

Scanline Overlay (Most Important Effect)

This creates the horizontal line effect of a CRT monitor across the whole website. It uses position:fixed and z-index:9999 to stay above everything else.

/* ─── SCANLINE — above everything, pointer-events:none ─── */
body::after {
  content: '';
  position: fixed;
  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 — higher values reduce readability */
}
      

Hexagon Grid Pattern

Use a subtle hexagon grid in section backgrounds. An inline SVG is used for this effect.

/* ─── HEX GRID — typically used in hero or banner sections ─── */
.hex-grid-bg {
  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%3Cpolygon points='30,52 58,67 58,97 30,112 2,97 2,67' 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 — stronger values become distracting */
}
      

Space Canvas Animation

The hero section uses a fullscreen canvas with animated stars, meteors, and a green nebula.

/* ─── SPACE CANVAS — for the hero section ─── */
class Star {
  constructor() { this.reset(true); }
  reset(init) {
    this.x = Math.random() * W;
    this.y = init ? Math.random() * H : Math.random() * H;
    this.r = Math.random() * 1.2 + 0.1;   // radius 0.1–1.3
    this.a = Math.random() * 0.7 + 0.1;   // alpha 0.1–0.8
    this.da = (Math.random() - 0.5) * 0.008; // twinkle speed
    this.green = Math.random() > 0.7;     // 30% are green tinted
  }
  update() {
    this.a += this.da;
    if(this.a < 0.05 || this.a > 0.85) this.da *= -1;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
    ctx.fillStyle = this.green
      ? `rgba(0,255,65,${this.a * 0.6})`     // green stars
      : `rgba(180,240,180,${this.a * 0.4})`;  // white-ish stars
    ctx.fill();
  }
}

/* Meteor class — diagonal shooting stars */
class Meteor {
  reset() {
    this.x = Math.random() * W;
    this.y = -20;
    this.len = Math.random() * 80 + 40;   // length 40–120px
    this.speed = Math.random() * 4 + 2;   // speed 2–6
    this.angle = Math.PI / 5;            // 36° angle
    this.active = Math.random() > 0.6;   // 40% meteors active
  }
}
/* 200 stars + 8 meteors recommended */
      

Green Glow Effects

/* ─── TEXT GLOW — for titles ─── */
.hero-green-text {
  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 ─── */
.green-glow-box {
  box-shadow:
    0 0 20px rgba(0,255,65,.4),
    0 0 60px rgba(0,255,65,.15);
}

/* ─── RADIAL BG GLOW — for sections ─── */
.section-glow {
  background: radial-gradient(
    ellipse 80% 70% at 50% 0%,
    rgba(0,255,65,.07),
    transparent 65%
  );
}

/* ─── SCROLLBAR GLOW ─── */
::-webkit-scrollbar-thumb { background: #008f20; }
::-webkit-scrollbar-thumb:hover { background: #00ff41; }
      

// SECTION_05

Animation Library

Watch the boxes below to preview every live animation:

GLITCH EFFECT HUB

CURSOR BLINK █

GLOW PULSE XNET

HEX SPIN

SCAN LINE

TYPE EFFECT

// loading...

Glitch Effect — For Titles

/* ─── GLITCH — applied to hero title ::before and ::after ─── */
.hero-title-green { position: relative; }

.hero-title-green::before,
.hero-title-green::after {
  content: attr(data-text); /* HTML: data-text="HUB" */
  position: absolute;
  top: 0; left: 0; right: 0;
  color: var(--g);
  opacity: 0;
}
.hero-title-green::before {
  text-shadow: -3px 0 rgba(255,0,100,.6);
  animation: glitch1 6s infinite;
}
.hero-title-green::after {
  text-shadow: 3px 0 rgba(0,200,255,.6);
  animation: glitch2 6s infinite;
}

@keyframes glitch1 {
  0%,92%,100% { opacity: 0; transform: none; }
  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; transform: none; }
  95% { opacity: .7; transform: translateX(3px) skewX(1deg); }
  97% { opacity: .7; transform: translateX(-3px) skewX(-1deg); }
  99% { opacity: 0; }
}
      

Blink / Pulse Effects

        /* ─── STATUS DOT PULSE ─── */
.status-dot {
  width: 7px; height: 7px;
  background: var(--g);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--g);
  animation: statusPulse 1.5s infinite;
}
@keyframes statusPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .2; transform: scale(.7); }
}

/* ─── GLOW PULSE — for the hero glow orb ─── */
@keyframes glowPulse {
  0%,100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ─── TEXT BLINK (cursor-style effect) ─── */
@keyframes textBlink {
  0%,49%  { opacity: 1; }
  50%,100%{ opacity: 0; }
}
.blink { animation: textBlink 1s steps(1) infinite; }
      

Navbar Scan Line

        /* ─── NAV BOTTOM SCAN LINE ─── */
#navbar::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; }
}
      

Scroll Reveal Animation

        /* ─── CSS: initial hidden state ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.on {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger delays — for sibling elements */
.d1{ transition-delay: .1s }
.d2{ transition-delay: .2s }
.d3{ transition-delay: .3s }

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

document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
      

// SECTION_06

UI Components

Navbar Design

XNET HUB

Home

Apps

About

Contact

⬇ DOWNLOAD

        /* ─── NAVBAR STRUCTURE ─── */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 5000;
height: 80px;  /* keep a strong 80px height */
  background: rgba(2,10,2,.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,255,65,.12);
}
#nav.scrolled {
  background: rgba(2,10,2,.97);
  border-bottom-color: rgba(0,255,65,.35);
  box-shadow: 0 0 40px rgba(0,255,65,.05), 0 4px 20px rgba(0,0,0,.8);
}
/* Logo: flex-shrink:0 | Nav: flex:1 center | CTA: flex-shrink:0 */
.nav-inner {
  display: flex; align-items: center;
  padding: 0 3%; height: 100%;
}
      

Hero Section Structure

        <!-- Hero section structure -->
<section id="hero">
  <!-- Layer 1: Animated canvas background -->
  <canvas id="space-canvas"></canvas>

  <!-- Layer 2: Hex grid overlay -->
  <div class="hero-hexgrid"></div>

  <!-- Layer 3: Vignette (edges dark) -->
  <div class="hero-vignette"></div>

  <!-- Layer 4: Center green glow -->
  <div class="hero-glow"></div>

  <!-- Layer 5: Content -->
  <div class="hero-content">
    <!-- 1. Status badge -->
    <div class="hero-status">● SYSTEM ONLINE · EST. 2023</div>
    <!-- 2. Giant title -->
    <h1><span class="line-white">XNET</span><span class="line-green">HUB</span></h1>
    <!-- 3. Tagline -->
    <!-- 4. CTA buttons -->
    <!-- 5. Stats bar -->
  </div>
</section>
      

Card Component

        /* ─── CARD BASE ─── */
.card {
  background: var(--card);        /* #071407 */
  border: 1px solid rgba(0,255,65,.12);
border-top: 2px solid rgba(0,255,65,.12); /* slightly thicker on top */
  transition: all .4s cubic-bezier(.23,1,.32,1);
}
.card:hover {
  border-color: rgba(0,255,65,.4);
border-top-color: #00ff41;    /* on hover the top border turns fully green */
  transform: translateY(-6px);
  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);
background: var(--card2);      /* #0a1a0a — slightly brighter */
}

/* Corner cut effect */
.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; }

/* Hover scan sweep effect */
.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;
}
.card:hover .scan { left: 100%; }
      

Button Styles

        /* ─── PRIMARY BUTTON (green filled, 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%);
/* ↑ this clip-path creates the corner cut */
  box-shadow: 0 0 30px rgba(0,255,65,.4), 0 0 60px rgba(0,255,65,.15);
  transition: all .3s;
}
.btn-primary:hover {
  box-shadow: 0 0 50px rgba(0,255,65,.7);
  transform: translateY(-3px);
}

/* ─── OUTLINE BUTTON (transparent, green border) ─── */
.btn-outline {
  background: transparent;
  border: 1px solid rgba(0,255,65,.5);
  color: #00ff41;
  position: relative; overflow: hidden;
}
.btn-outline::before { /* fill on hover effect */
  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; }
      

// SECTION_07

Layout Rules

Spacing System

Element	Padding/Margin	Notes
Section padding	90-120px top/bottom	Large breathing room
Section max-width	1300px + margin: 0 auto	Centered content
Card padding	24-40px	Depends on content type
Grid gap	16-20px	Spacing between cards
Section header MB	60-70px	Space from header to content
Navbar height	80px	Body padding-top: 80px
Body side padding	3-4%	Percentage — fluid
Page banner	120px top, 60-70px bottom	Clears the navbar space

Border & Divider System

        /* ─── BORDER VARIANTS ─── */
/* Default subtle */
border: 1px solid rgba(0,255,65,.12);

/* On hover / active */
border: 1px solid rgba(0,255,65,.35);

/* Accent top border (cards) */
border-top: 2px solid var(--g);

/* Left accent (blockquotes, mission blocks) */
border-left: 3px solid var(--g);

/* Section divider line */
.divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,65,.15), transparent);
}

/* Heading underline */
.sec-line {
  width: 70px; height: 2px;
  background: linear-gradient(90deg, var(--g), transparent);
  border-radius: 1px;
}

/* Corner cuts — top-left, bottom-right */
.cut-corner {
  clip-path: polygon(
    12px 0%, 100% 0%,           /* top */
    100% calc(100% - 12px),     /* right */
    calc(100% - 12px) 100%,     /* bottom */
    0% 100%,                    /* left bottom */
    0% 12px                     /* left top */
  );
}
      

// SECTION_08

AI Prompt Commands

Use the prompts below when asking any AI model, such as Claude, ChatGPT, or Gemini, to build a website in this theme.

Master System Prompt — Full Guide

Create a website with the following EXACT design system:

THEME: Dark Green Hacker / Cyberpunk Terminal aesthetic

COLOR SYSTEM (CSS variables — must use exactly):
--g: #00ff41 (Matrix green - primary accent)
--g2: #00cc33 (darker green gradient)
--g3: #008f20 (borders, scrollbar)
--bg: #020a02 (body background - almost black)
--bg2: #040e04 (alternate section background)
--card: #071407 (card/panel background)
--t1: #e8ffe8 (headline text)
--t2: #6bcc6b (body text)
--t3: #2d6b2d (labels/metadata)
--border: rgba(0,255,65,.12) (default)
--border2: rgba(0,255,65,.35) (hover/active)

FONTS (import from Google Fonts - all 3 required):
1. Orbitron (weights 400,600,700,800,900) - ALL headings, logos, buttons, nav links, stats
2. Rajdhani (weights 300,400,500,600,700) - body element default, paragraphs
3. Share Tech Mono - section tags, labels, badges, code, metadata

REQUIRED EFFECTS (implement all):
1. SCANLINE: body::after { position:fixed; z-index:9999; background: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 on banners: SVG hexagon pattern, stroke rgba(0,255,65,0.04)
3. GLITCH on main title green text: ::before ::after with red/cyan offset, triggers every 6s
4. NAV SCAN: navbar::after animated gradient left-to-right, 4s loop
5. SPACE CANVAS: animated stars (200) + meteors (8) + green nebula on hero
6. SCROLL REVEAL: .reveal class, opacity 0→1 translateY 28px→0, IntersectionObserver
7. STATUS DOT PULSE: 7px circle, background var(--g), 1.5s animation
8. GLOW PULSE: hero center radial gradient, 4s scale animation

NAVBAR (fixed, 80px height):
- Left: Logo (spinning hexagon SVG + Orbitron bold text)
- Center: nav links (Orbitron 11px, letter-spacing:2px, uppercase)
- Right: CTA button (outline style, fill-on-hover animation)
- Bottom: animated scan line
- On scroll: background darkens to rgba(2,10,2,.97), border brightens

HERO SECTION (100vh, layers):
Canvas space bg → hex grid → vignette → green glow → content
Title: Line 1 white (#e8ffe8), Line 2 green (#00ff41) with glitch
Subtitle: Share Tech Mono, letter-spacing:8px, color #2d6b2d, "// tagline"
Buttons: clip-path diagonal cut corners
Stats bar: 4 columns, glassmorphism background

CARDS:
border-top: 2px solid on hover becomes #00ff41
Corner cut decorations (::before ::after)
Hover scan sweep animation
translateY(-6px) on hover

SECTION HEADERS pattern:
// section_name (Share Tech Mono, color #00ff41, letter-spacing:4px)
H2 title (Orbitron 900)
Accent line: width:70px height:2px gradient(#00ff41, transparent)

Do NOT use: Inter, Roboto, Arial, purple gradients, blue as primary color, rounded corners (use sharp/0px or clip-path cuts instead), white backgrounds

Quick Component Prompts

NAVBAR ONLY: "Create a fixed navbar with height 80px, dark green hacker theme (#020a02 bg, #00ff41 accent, Orbitron font). Left: spinning hexagon SVG logo. Center: nav links uppercase letter-spacing:2px. Right: outline button with fill-on-hover. Bottom border has animated scan line moving left-to-right every 4 seconds. Glassmorphism background with backdrop-filter:blur(20px)."

HERO SECTION ONLY: "Create a fullscreen hero section with: (1) animated canvas background - 200 twinkling stars (30% green-tinted) and 8 meteors moving diagonally, (2) hexagon SVG grid overlay at 4% opacity, (3) radial vignette edges, (4) center green radial glow pulse. Content: status badge with pulsing dot, giant 2-line title (white line / green glitch line using Orbitron 900 font clamp 60-160px), tagline in Share Tech Mono with // prefix, two CTA buttons with diagonal clip-path cuts, 4-column stats bar. Color: #020a02 bg, #00ff41 green."

CARD GRID ONLY: "Create a 3-column card grid with hacker theme. Each card: #071407 background, 1px rgba(0,255,65,.12) border, 2px top border becomes #00ff41 on hover. Corner cuts with ::before ::after pseudo-elements. Hover: translateY(-6px), border brightens, scan sweep animation (gradient moves left to right). Card has: index number (Share Tech Mono), icon box, Orbitron title, Share Tech Mono category label, Rajdhani description, tag pills (border 1px green, background rgba green 5%), footer with platform badge and outline button."

FULL PAGE QUICK: "Build a complete dark hacker-themed website page. Use ONLY these three fonts: Orbitron (headings/buttons), Rajdhani (body), Share Tech Mono (labels/badges). Main colors: #020a02 background, #00ff41 green accent, #e8ffe8 title text, #6bcc6b body text, #2d6b2d dim labels. Add CRT scanline effect (body::after fixed repeating-linear-gradient), green text glow (text-shadow with rgba(0,255,65) values), subtle hex grid on banners, glitch animation on main title, scroll-triggered fade-up reveal animations. All borders use rgba(0,255,65,.12-.35). No white backgrounds. No rounded corners — use clip-path or sharp edges. Orbitron text always uppercase with letter-spacing:2px."

// SECTION_09

Implementation Checklist

Review this checklist before building a new page. If every item is not complete, the theme will not feel finished.

Fonts & Colors

3 fonts are imported: Orbitron, Rajdhani, Share Tech Mono
CSS variables defined: --g, --bg, --card, --t1, --t2, --t3, --border, --border2
body font-family: 'Rajdhani' is set correctly
background: var(--bg) (#020a02) is applied to the body
color: var(--t1) is applied to the body

Background Effects

Scanline overlay: body::after, position:fixed, z-index:9999, pointer-events:none
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

Animations

Glitch animation is present on the green main title text
Nav scan line is present on navbar::after
Status dot pulse is present in at least one LIVE indicator
Scroll reveal is implemented with `.reveal` + IntersectionObserver
Card hover scan sweep is present

Typography

Section tags use the // format in Share Tech Mono with the var(--g) color
H2 accent line (70px gradient line) appears on every section header
Buttons uppercase letter-spacing:2px, Orbitron font
Navbar links uppercase letter-spacing:2px

Components

Navbar height 80px, fixed, glassmorphism
Cards corner cuts (::before ::after)
Button clip-path diagonal corners
Green scrollbar ::-webkit-scrollbar-thumb
Custom scrollbar 4px wide, var(--g3) color
Section dividers gradient line between sections

Once all of this is implemented, the website will carry the same hacker vibe as Xnet Hub. This design system can be applied to any type of content.

// SECTION_10

Design System Document Viewer

The full Hacker Theme Design System Word document (.docx) is rendered below. Use the button below to download it.

⬇ DOWNLOAD DOCX // Hacker_Theme_Design_System.docx

▋
LOADING DOCUMENT...

Hacker Theme Guide

Design Philosophy

Core Concept

Visual Layer Stack

Color System

Complete Color Palette

Color Usage Rules

CSS Variables Setup

Typography System

Font Stack — 3 Fonts Only

Font Size Scale

Typography Rules

Background Layers

Scanline Overlay (Most Important Effect)

Hexagon Grid Pattern

Space Canvas Animation

Green Glow Effects

Animation Library

Glitch Effect — For Titles

Blink / Pulse Effects

Navbar Scan Line

Scroll Reveal Animation

UI Components

Navbar Design

Hero Section Structure

Card Component

Button Styles

Layout Rules

Spacing System

Border & Divider System

AI Prompt Commands

Master System Prompt — Full Guide

Quick Component Prompts

Implementation Checklist

Fonts & Colors

Background Effects

Animations

Typography

Components

Design System Document Viewer