Theme Guide — Xnet Hub Design System

// SECTION_01

Design Philosophy

Core Concept & Vibe

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

তিনটি ভাইব একসাথে কাজ করে: 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 — <canvas> element

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

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

z: 10+Content LayerCards, text, buttons — সব UI এলিমেন্ট

z: 9999Scanline OverlayFixed CRT scanlines — সবার উপরে, 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 করুন ─── */
: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 করুন	কখনো নয়
#00ff41	Active links, buttons, hover borders, glow shadows	Body background (অনেক উজ্জ্বল)
#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 (invisible হবে)

// SECTION_03

Typography System

Font Stack — মাত্র ৩টি Font

<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

ব্যবহার: লোগো, H1/H2/H3, navbar, buttons, stats, card titles, all-caps labels
কখন নয়: Body paragraphs, descriptions

FONT 02 — RAJDHANI

Comfortable body text for reading paragraphs.

Bold emphasis in body content.

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

FONT 03 — SHARE TECH MONO

// terminal_font = monospace_labels;

SECTION · TAG · BADGE · CODE · TIMESTAMP

ব্যবহার: Section tags (// tag), badges, timestamps, labels, code, status indicators
টিপ: letter-spacing: 2-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 সবখানে: 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

CRT monitor এর মতো horizontal lines। সবচেয়ে গুরুত্বপূর্ণ effect — এটি ছাড়া hacker feel আসে না।

body::after {
  content: '';
  position: fixed;   /* scroll করলেও সরে না */
  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 রাখুন */
}

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");
  /* stroke opacity 0.03–0.05 রাখুন */
}

Effect 3 — Glow Effects

/* Text Glow — title তে */
.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 — button/card তে */
.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

সব animation live দেখুন:

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 (● 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: 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: scrollY>60 হলে .scrolled class — bg dark, border bright
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	বড় breathing room
Section max-width	1300px	margin: 0 auto
Body side padding	3–4%	Fluid responsive
Card padding	24–40px	Content type অনুযায়ী
Grid gap (cards)	16–20px	Cards এর মধ্যে
Section header mb	60–70px	Header থেকে content
Navbar height	80px	body padding-top: 80px দিন
Page banner	120px top / 60–70px bottom	Navbar clear করতে

// SECTION_08

AI Prompt Commands

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

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

নতুন পেজ deploy এর আগে সব ✓ নিশ্চিত করুন।

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' + 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 banner/hero এ আছে
Radial green glow hero center এ আছে
Vignette overlay hero edges এ আছে
Space canvas animation hero এ আছে

Animations

Glitch animation main title green text এ (6s cycle)
Nav scan line navbar::after এ (4s loop)
Status dot pulse ONLINE indicator এ আছে
Scroll reveal .reveal + IntersectionObserver implemented
Card hover scan sweep আছে

Typography & Components

Section tags // format, Share Tech Mono, var(--g), letter-spacing:4px
H2 accent line প্রতিটি section header এ (70px gradient)
Buttons uppercase letter-spacing:2px, Orbitron font
Navbar height 80px, fixed, glassmorphism
Card corner cuts (::before + ::after)
Section dividers (gradient line) আছে

সব ✓ সম্পন্ন হলে ওয়েবসাইটটি সম্পূর্ণ Dark Green Hacker/Cyberpunk ভাইব পাবে। এই ডিজাইন সিস্টেম যেকোনো কন্টেন্টে apply করা যাবে।

📄 DOCX Documentation

সম্পূর্ণ ডকুমেন্টেশন Word format এ — offline reference, sharing ও printing এর জন্য।

⬇ Download DOCX

// SECTION_10

Xnet Hub Design Documentation

Xnet Hub ওয়েবসাইটের সম্পূর্ণ Design System — কালার, ফন্ট, অ্যানিমেশন, কম্পোনেন্ট সবকিছু এক জায়গায়।

⬇ 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 — মাত্র ৩টি Font

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