Hub
SYS.ADMIN // DESIGN_SAMPLE [ BACK TO HUB ]

>> SYSTEM BREACH DETECTED <<

WARNING: Unauthorized access detected. Firewall bypassed. Data integrity compromised.

System
Over_ride

Cyberpunk aesthetics. Rough glitch animations, neon color contrasts, and terminal-based structure create a corrupted, dystopian data interface.

█ DECRYPTION_STATUS

SECTOR_A [FIREWALL]
DECRYPTING... 87%
SECTOR_B [MAINFRAME]
DECRYPTING... 42%
SECTOR_C [CORE_DUMP]
█ BREACH COMPLETE █

◆ DESIGN_SPECS // DATA_TABLE

Parameter Value Status
Typography Syncopate 700 / Share Tech Mono INTACT
Color_Mode NE0N_OVERDR!VE C0RRUPT3D
Border Radius 0px (HARD EDGES ONLY) INTACT
Animation ███ ERR_KEYFRAME ███ UNSTABLE
Grid System 30px cyan overlay mesh INTACT
Encryption CLASSIFIED_DATA BR34CH3D
DATA_NODE_01.exe

◆ PANEL ARCHITECTURE

Sharp rectangular UI panels with corner accent borders. HUD-style targeting brackets frame each data block. No rounded corners permitted in this sector.

TERM_NODE_02.exe

◆ TERMINAL AESTHETIC

Monospace fonts and bright neon text replicate the mood of a hacked terminal. Data streams in cyan. Errors flicker in magenta. Warnings pulse in yellow.

▲ ALERT: Memory dump in progress. Do not terminate process. All design tokens exfiltrated successfully.

> PROMPT_GENERATOR.EXE 

Design a landing page in Cyberpunk Glitch style — raw terminal aesthetic with neon color rebellion.

COLOR TOKENS:
--bg: #09090b
--neon-y: #fde047 (yellow, primary accent)
--neon-c: #22d3ee (cyan, secondary accent)
--neon-p: #d946ef (magenta, tertiary accent)
--text: #e2e8f0
--grid-line: rgba(34, 211, 238, 0.05)
--panel-magenta-bg: rgba(217, 70, 239, 0.05)
--panel-cyan-bg: rgba(34, 211, 238, 0.05)
No other colors.

TYPOGRAPHY:
Heading: Syncopate 700, uppercase, wide letterform
Body: Share Tech Mono 400 (monospace throughout)
Scale: 0.8rem / 0.95rem / 1.2rem / clamp(3rem, 6vw, 5rem)
Button text: Syncopate 700, 0.8rem, uppercase
No line-height override — use monospace defaults.

UI:
- Body background-image: two linear-gradients forming a 30px x 30px cyan grid (rgba 0.05 opacity)
- Header: border-bottom 1px solid var(--neon-c), padding-bottom 20px
- Header link: color var(--neon-c), uppercase; hover fills background var(--neon-c), text var(--bg)
- Panels: 1px solid border (magenta or cyan), padding 20px, 0px border-radius
- Panel corner accent: ::before pseudo-element, absolute top-left, 20px x 20px, 3px border-top + border-left matching panel border color
- Buttons: 2px solid var(--neon-y), transparent bg, color var(--neon-y), Syncopate font
- Button hover: background var(--neon-y), color var(--bg), box-shadow 0 0 20px rgba(253,224,71,0.5)

LAYOUT:
Container: width min(1000px, 90vw), margin 0 auto, padding 40px 0
Panel grid: display grid, grid-template-columns 1fr 1fr, gap 30px, margin 40px 0
Prompt section: border-left 4px solid var(--neon-c), background rgba(34,211,238,0.1), padding 20px, margin-top 50px
Lead paragraph: font-size 1.2rem, max-width 600px, margin 30px 0

MOTION:
Title glitch: text-shadow 2px 2px 0px var(--neon-p), -2px -2px 0px var(--neon-c)
@keyframes shake — 0%/95%/100% translate(0,0); 96% translate(3px,1px); 97% translate(-3px,-1px); 98% translate(3px,3px); 99% translate(-3px,-2px)
Duration: 5s infinite
No smooth easing — sharp discrete steps for glitch feel.

RESPONSIVE:
- Mobile: grid-template-columns 1fr (panels stack), title clamp scales down naturally
- Desktop: max-width 1000px, 2-column panel grid preserved

FORBIDDEN:
- Soft gradients or pastel color tones
- Rounded corners (border-radius must be 0)
- Serif or elegant typography
- Smooth ease-in-out transitions on glitch elements
- White or light page backgrounds

OUTPUT:
1) Full color token list with 3 neon values, grid-line spec, and panel backgrounds
2) Hero / 2-column Data Panels / CTA / Prompt section structure
3) Single-file HTML/CSS with shake keyframes and grid-line background