My Computer :: C:\WEB\INDEX.HTM

Announcements: Welcome to Webmaster 95. This page is under construction. Sign the guestbook. Best viewed at 800 by 600. Now with 100% more bevels.

Netscape — http://www.webmaster95.geocities.com/~design/

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.

NEW! HOT! Best viewed in Netscape 3.0

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.

color_tokens.pal

> 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.

type_scale.fnt
H1 / 92px Webmaster
H2 / 46px Section Header
H3 / 22px Bold subsection heading
Body / 16px The quick brown fox jumps over the lazy dog while the modem screeches at 56k.
Mono / meta LAST UPDATED: 11/04/1997 · 14.4kb · 0 COOKIES
Fun accent Thanx 4 visiting my homepage!!! =)

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.

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.

colors.scr
#0000FF

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.

hitcounter.cgi

★ You are visitor number ★

VISITORS SINCE JANUARY 1995

0
Color Tokens
0
Border Radius
0
Authenticity

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.

CORE

Bevel everything

Wrap controls and panels in .bevel-out / .bevel-in. Non-negotiable.

STYLE

Add the loud bits

Marquee, rainbow text, hit counter, pulsing badges. Embrace the cheese.

FUN

Honor reduced motion

Freeze the marquee, stop the rainbow, kill the pulse. Keep the bevels.

A11Y

08 · License

SHAREWARE TIERS

Three beveled cards, each a tiny Windows window. The popular one wears a pulsing ribbon.

FREEWARE

$0/forever

  • All color tokens
  • Bevel utility classes
  • Marquee + rainbow text
  • Community guestbook
Download
MOST POPULAR!
REGISTERED

$29/once

  • Everything in Freeware
  • Windowed card kit
  • Hit counter + stat band
  • Construction stripe CTA
  • Priority modem support
Register Now
WEBMASTER PRO

$99/once

  • Everything in Registered
  • Custom title-bar themes
  • Animated GIF pack (12)
  • Webring + banner exchange
Go Pro

09 · Guestbook

SIGN MY GUESTBOOK

Alternating rows, monospace timestamps — and a working form. New entries land right on top.

guestbook.dat — 3 entries
SkaterBoi_98

kewl site!! how did u do the bevels?? ★★★★★

WebRingQueen

added u to my links page. sign mine back? =)

dial_up_dan

took 4 minutes to load on my 28.8k but worth it!!

new_entry.frm

⚠ UNDER CONSTRUCTION ⚠

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.