Hacker Theme Design System — Complete Documentation

// SECTION_01

Design Philosophy

Core Concept

এই ডিজাইন সিস্টেমটি Dark Green Cyberpunk / Hacker Terminal aesthetic এর উপর নির্মিত। মূল ধারণা হলো একটি পুরানো CRT monitor বা hacker terminal এর মতো অনুভূতি তৈরি করা — যেখানে সবকিছু dark, glow করছে, এবং digital।

মূল তিনটি ভাইব: Matrix Terminal, Cyber Space, এবং Hacker Dashboard।

এই থিমের মূল আত্মা হলো: Green on Black — ঠিক যেমন সিনেমায় হ্যাকাররা কাজ করে। সবকিছুতে green glow, scanline texture, এবং monospace font।

Visual Layer Stack

পেজের প্রতিটি এলিমেন্ট একাধিক layer এ বসে। নিচ থেকে উপরে:

z:0Base Background#020a02 — প্রায় কালো, সামান্য সবুজ আভা

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

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

z:3Radial GlowGreen radial gradient, center থেকে ছড়িয়ে পড়ে

z:4Content LayerCards, text, buttons — সব কন্টেন্ট এই লেয়ারে

z:9999Scanline OverlayFixed, পুরো পেজে CRT scanline effect — সবার উপরে

// 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

শুধুমাত্র Green এর বিভিন্ন shade ব্যবহার করুন। Orange, Blue, Purple শুধুমাত্র বিভিন্ন app/item কে আলাদা করতে accent হিসেবে ব্যবহার করা যাবে — 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

মাত্র ৩টি Google Font ব্যবহার করা হয়। প্রতিটি একটি নির্দিষ্ট কাজের জন্য।

ORBITRON BOLD

Orbitron Regular Weight 600

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

ব্যবহার: লোগো, H1, H2, H3 headings, navbar links, buttons, stats numbers, card titles, all-caps labels।
কখন নয়: Body text, long paragraphs, 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

ব্যবহার: Body element default font, paragraphs, descriptions, card text, footer text।
কখন নয়: Headings, labels, tech elements।

// share_tech_mono = terminal_font;

LABEL · TAG · METADATA · CODE · TIMESTAMP

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

ব্যবহার: Section tags (// tag), metadata, badges, timestamps, small labels, code snippets, status indicators, all monospace elements।
ব্যবহারের টিপ: Letter-spacing: 2-4px সবসময় দিন। এটি 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: সবসময় // section_name বা // page.name / section ফরম্যাটে, Share Tech Mono তে, var(--g) কালারে।
Heading এর পরে line: H2 এর নিচে সবসময় একটি accent line — width:70px; height:2px; background: linear-gradient(90deg, var(--g), transparent);
Hero title: দুই লাইন — প্রথম লাইন white (--t1), দ্বিতীয় লাইন green (--g) with glow।
Subtitle/tagline: Share Tech Mono, letter-spacing: 6-8px, color: var(--t3), // text format।
uppercase everywhere: সব button, label, badge, nav link — সবসময় uppercase।
line-height: Body text: 1.85-1.9 | Headings: 0.9-1.1 | Labels: 1.0

// SECTION_04

Background Layers

Scanline Overlay (সবচেয়ে গুরুত্বপূর্ণ)

এটি পুরো ওয়েবসাইটে CRT monitor এর মতো horizontal line effect তৈরি করে। position:fixed এবং z-index:9999 — সবকিছুর উপরে।

        /* ─── SCANLINE — সবার উপরে, 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;  /* click block করবে না */
  z-index: 9999;
  opacity: 0.35;  /* 0.3-0.4 রাখুন — বেশি হলে পড়া কঠিন */
}
      

Hexagon Grid Pattern

Section background এ subtle hexagon grid। SVG inline ব্যবহার করা হয়।

        /* ─── HEX GRID — সাধারণত hero বা banner এ ─── */
.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");
  /* stroke opacity 0.03-0.05 রাখুন — বেশি হলে distracting */
}
      

Space Canvas Animation

Hero section এ fullscreen canvas এ animated stars, meteors, এবং green nebula।

        /* ─── SPACE CANVAS — 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 — Title তে ─── */
.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 — Button/card তে ─── */
.green-glow-box {
  box-shadow:
    0 0 20px rgba(0,255,65,.4),
    0 0 60px rgba(0,255,65,.15);
}

/* ─── RADIAL BG GLOW — Section এ ─── */
.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

সব animation দেখতে হলে এই boxes এ চোখ রাখুন — সবগুলো live চলছে:

GLITCH EFFECT HUB

CURSOR BLINK █

GLOW PULSE XNET

HEX SPIN

SCAN LINE

TYPE EFFECT

// loading...

Glitch Effect — Title এ

        /* ─── GLITCH — Hero title এর ::before ::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 — Hero glow orb তে ─── */
@keyframes glowPulse {
  0%,100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* ─── TEXT BLINK (cursor মতো) ─── */
@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 — siblings এর জন্য */
.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); // একবার দেখালেই হবে
    }
  });
}, { 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;  /* বড় height — 80px */
  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); /* top এ সামান্য মোটা */
  transition: all .4s cubic-bezier(.23,1,.32,1);
}
.card:hover {
  border-color: rgba(0,255,65,.4);
  border-top-color: #00ff41;    /* hover এ top border পুরো 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 — সামান্য উজ্জ্বল */
}

/* 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%);
  /* ↑ এই clip-path দিয়ে কোণে কাটা তৈরি হয় */
  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	বড় breathing room
Section max-width	1300px + margin: 0 auto	Centered content
Card padding	24-40px	Content type অনুযায়ী
Grid gap	16-20px	Cards এর মধ্যে
Section header MB	60-70px	Header থেকে content
Navbar height	80px	Body padding-top: 80px
Body side padding	3-4%	Percentage — fluid
Page banner	120px top, 60-70px bottom	Navbar clear করতে

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

যেকোনো AI কে (Claude, ChatGPT, Gemini) এই থিমে ওয়েবসাইট বানাতে বলতে নিচের প্রম্পটগুলো ব্যবহার করুন।

Master System Prompt — সম্পূর্ণ গাইড

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

নতুন পেজ বানানোর আগে এই চেকলিস্ট দেখুন। সব ✓ না হলে থিম সম্পূর্ণ হবে না।

Fonts & Colors

3 fonts import করা হয়েছে: Orbitron, Rajdhani, Share Tech Mono
CSS variables defined: --g, --bg, --card, --t1, --t2, --t3, --border, --border2
body font-family: 'Rajdhani' set করা হয়েছে
background: var(--bg) (#020a02) body তে আছে
color: var(--t1) body তে আছে

Background Effects

Scanline overlay: body::after, position:fixed, z-index:9999, pointer-events:none
Hex grid pattern banner/hero এ আছে
Radial green glow hero center এ আছে
Vignette overlay hero edges এ আছে

Animations

Glitch animation main title green text এ আছে
Nav scan line navbar::after এ আছে
Status dot pulse কোথাও LIVE indicator আছে
Scroll reveal .reveal + IntersectionObserver implement করা হয়েছে
Card hover scan sweep আছে

Typography

Section tags // format এ, Share Tech Mono, var(--g) কালার
H2 accent line (70px gradient line) প্রতিটি 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

এই সব implement হলে ওয়েবসাইটটি Xnet Hub এর মতো একই হ্যাকার ভাইব পাবে। যেকোনো কন্টেন্টে এই ডিজাইন সিস্টেম apply করা যাবে।

// SECTION_10

Design System Document Viewer

Hacker Theme Design System-এর সম্পূর্ণ Word Document (.docx) নিচে রেন্ডার করা হয়েছে। ডাউনলোড করতে নিচের বাটন ব্যবহার করুন।

⬇ 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 (সবচেয়ে গুরুত্বপূর্ণ)

Hexagon Grid Pattern

Space Canvas Animation

Green Glow Effects

Animation Library

Glitch Effect — Title এ

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 — সম্পূর্ণ গাইড

Quick Component Prompts

Implementation Checklist

Fonts & Colors

Background Effects

Animations

Typography

Components

Design System Document Viewer