> DESIGN SYSTEM_v2.0_

RETRO COMPONENT LIBRARY | Y2K AESTHETIC | PURE HTML/CSS/JS

> QUICK START_

1.
Copy stylesheet
Link to styles/main.css in your HTML
2.
Use components
Copy HTML snippets from components folder
3.
Customize
Override CSS variables to match your brand

> COMPONENTS_

> BUTTON_

Retro styled buttons with multiple variants: default, glow, outline, magenta, yellow, green, and terminal styles.

VIEW COMPONENT >

> CARD_

Content containers with retro styling, hover effects, and variants: default, glow, glass, magenta, terminal.

VIEW COMPONENT >

> INPUT_

Form inputs with retro styling, focus states, and variants: default, glow, terminal, with icons support.

VIEW COMPONENT >

> BADGE_

Status indicators and labels: colors, status dots, labels, and tags with retro pixel styling.

VIEW COMPONENT >

> NAVBAR_

Navigation bars with retro styling: default, transparent, terminal, fixed position, with search support.

VIEW COMPONENT >

> MARQUEE_

Scrolling text banners: default, neon glow, terminal, with multiple color variants and animations.

VIEW COMPONENT >

> LAYOUTS_

> RETRO LAYOUT_

Full page layout with retro styling, scanlines effect, sidebar, header with marquee, and footer.

VIEW LAYOUT >

> TERMINAL LAYOUT_

Matrix/Terminal style layout with green text on black, command input, and system stats.

VIEW LAYOUT >

> DASHBOARD LAYOUT_

Modern responsive dashboard with cards, sidebar navigation, stats grid, and activity feed.

VIEW LAYOUT >

> COLOR PALETTE_

CYAN #00ffff
MAGENTA #ff00ff
YELLOW #ffff00
LIME #00ff00
PINK #ff69b4
ORANGE #ff8c00

> BUTTON DEMO_