DESIGN.SYS · v1.997
THE RETRO
WEB DESIGN
SYSTEM
Beveled buttons. Garish colors. Animated everything. Welcome to 1997.
WEBMASTER 95 is living documentation for a Retro / 90s Nostalgia design system — every token, pattern and component rendered the way it would’ve looked on a Windows 95 machine. It is deliberately anti-modern: zero border-radius, no soft shadows, and not one drop of minimalism.
01 · The DNA
DESIGN TOKENS
Pulled straight from the Windows 95 system palette and early-web hex values. Every color sits at maximum saturation. Click a chip to copy its hex.
> 16 system tokens loaded · 0 gradients except title bars · radius = 0px
02 · Type
THE TYPE SPECIMEN
Heavy display faces and crunchy system fonts only — no thin weights existed in this era. Headings shout in uppercase; metadata clatters in monospace.
03 · Components
THE COMPONENT KIT
Buttons, inputs, tabs, badges, meters — every control wears the 3D bevel. Press one: it sinks in and shifts a pixel down-and-right, just like it should.
> outset bevel → inset on :active + translate(1px,1px)
A: No. Never. Zero radius is the first commandment.
Download progress
Downloading webmaster95.zip — 0%
04 · Features
WHAT’S INSIDE
Bright icon boxes with 2px-stroke glyphs and beveled frames — the building blocks of the system, one feature per tile.
3D Bevels
The signature 4-value border-color plus inset shadows. Outset pops, inset sinks.
Garish Palette
Pure-saturation system colors. No subtle grays allowed past #808080.
Table Layouts
Modern grid that looks like a spreadsheet: cell borders, alternating rows.
Marquees
Continuous scrolling announcement bars. Pause on hover for the readers.
Pulse Badges
NEW! and HOT! tags that throb at 1.5s. Pure under-construction energy.
A11y Built-in
Dotted focus rings, 7.5:1 contrast, and full reduced-motion fallbacks.
05 · Excess
THE COLOR ORGAN
Pure decorative 90s excess: a grid of beveled colored squares. Click one to recolor the preview. Because we can.
Selected color
The preview swatch updates instantly — no fade, no easing, just a hard 50ms snap. Try the keyboard: Tab to a square and press Enter.
06 · Stats
VISITOR COUNTER
The crown jewel of any 1997 homepage. Black background, glowing green monospace digits, sunk into a beveled frame. It counts up on load.
★ You are visitor number ★
VISITORS SINCE JANUARY 1995
07 · Method
SHIP IT IN 4 STEPS
An alternating-row checklist — the classic database look.
Centralize the tokens
Drop the palette, bevels and type stacks into :root. One source of truth.
Bevel everything
Wrap controls and panels in .bevel-out / .bevel-in. Non-negotiable.
Add the loud bits
Marquee, rainbow text, hit counter, pulsing badges. Embrace the cheese.
Honor reduced motion
Freeze the marquee, stop the rainbow, kill the pulse. Keep the bevels.
08 · License
SHAREWARE TIERS
Three beveled cards, each a tiny Windows window. The popular one wears a pulsing ribbon.
$0/forever
- All color tokens
- Bevel utility classes
- Marquee + rainbow text
- Community guestbook
$29/once
- Everything in Freeware
- Windowed card kit
- Hit counter + stat band
- Construction stripe CTA
- Priority modem support
$99/once
- Everything in Registered
- Custom title-bar themes
- Animated GIF pack (12)
- Webring + banner exchange
09 · Guestbook
SIGN MY GUESTBOOK
Alternating rows, monospace timestamps — and a working form. New entries land right on top.
kewl site!! how did u do the bevels?? ★★★★★
added u to my links page. sign mine back? =)
took 4 minutes to load on my 28.8k but worth it!!
JOIN THE WEBRING
Drop your email in the box and we’ll mail you a beveled banner for your homepage. No spam, just pure 1997 energy.