6
CSS layers
SYS:BOOT · THEME_ACTIVE · STATUS_OK
Tom's
Web Dev Testbed
Technical landing page starter · dark neon interface · modular front-end scaffold
A reusable static site starter for icfn.net, built around a black-first surface, neon green action color, cool secondary glow, animated line mesh background, cursor aura, and restrained thin-line UI treatment.
3
Motion systems
100%
Static hosting ready
system
Visual language and behavior
The site uses a dark technical presentation with fine border work, micro-grid texture, bright CTA treatment, subtle glass panels, and compact mono labels that make the whole surface feel like a polished console rather than a generic template.
site --status
runtime: static + css + js
root@icfn:~$ launch --profile=neon-grid
✓ animated background mesh
✓ pointer aura enabled
✓ reveal observer armed
✓ tokenized color palette loaded
root@icfn:~$ _
modules
Packaged front-end modules
Each section is structured so it can be lifted into future sites with minimal rework.
01 / background
Pointer-reactive line mesh
A low-density animated canvas of particles and connection lines that lives behind the content and shifts away from the cursor.
02 / interaction
Cursor aura layer
A radial lighting effect driven by CSS variables and updated from JavaScript to give the page a live, illuminated surface feel.
03 / motion
Reveal transitions
Sections fade and rise into view with controlled timing rather than flashy or aggressive animation.
04 / layout
Hero and stat surfaces
The hero layout, pill badges, shell blocks, and stat cards are designed to be copied across landing pages and product microsites.
05 / theme
Tokenized color system
All main colors, borders, glows, radii, and motion timings are centralized for later rebranding.
06 / delivery
Shared-hosting ready
No build step is required. Upload the directory as-is, then edit the HTML, token files, and assets to continue evolving the site.
tokens
Theme tokens and visual defaults
These values are exposed in CSS and duplicated in JSON so they can be reused in later projects and automation.
palette
Primary values
--tb-bg: #03070b;
--tb-bg-2: #071117;
--tb-bg-3: #0a1b1a;
--tb-accent: #00f281;
--tb-accent-2: #00d971;
--tb-cyan: #52c3eb;
--tb-text: #d7e1e7;
--tb-text-soft: #8ea2aa;
--tb-text-dim: #62727a;
components
Usage guidance
Use the green accent on buttons, numbers, and selected state. Keep large surfaces dark.
Use cyan lightly for secondary spill and occasional line or data accents.
structure
Standardized file layout
The package is arranged for long-term reuse and clean handoff.
tree
Directory map
/
├─ index.html
├─ 404.html
├─ favicon.svg
├─ robots.txt
├─ sitemap.xml
├─ site.webmanifest
├─ assets/
│ ├─ css/
│ ├─ js/
│ ├─ img/
│ └─ data/
└─ docs/
handoff
Next edits
- Replace the hero title and brand text
- Swap favicon and open-graph metadata
- Adjust tokens in
00-tokens.css - Extend sections in
index.html - Drop images into
assets/img