Retro Web
复古互联网
Aliases:老网页早期互联网个人主页风格Web 1.0old-school webretro website
What is it
A visual language borrowed from early personal websites and desktop browsers: grey beveled borders, serif text, blue underlined links, directory sidebars and visitor counters. It recalls the intimacy of a handmade website without sacrificing modern keyboard access, responsive layout or readability.
Design spec
Typography
Serif body copy, system-font menus and readable blue underlined links.
Color
Grey chrome, white content and dark-blue title bars and links.
Border
Square corners and 2px beveled borders without blurred shadows.
Shadow
Use light and dark border edges for relief, without blurred shadows.
Spacing
Compact spacing with adequate targets and a wrapping directory.
Motion
Immediate changes without blinking or automatic scrolling.
States
Bold current-page text, a clear focus ring and a live region for form feedback.
Style in action
The same page, ready to useDirectory and Back / Forward / Home navigate Home / About / Projects / Links / Guestbook; the local address follows navigation. Go opens a native dialog for home/about/projects/links/guestbook (with an optional goodoldnet/ prefix), adding valid navigation to internal history; unknown or external addresses show not-found feedback without leaving the site. Menus, Search, Favorites and window controls have reversible local behavior. Validate blank guestbook input and display accepted messages; disclose reload clears them with no service or browser storage.
Full-page preview · interact directly
What to look for
- 01Use GoodOldNet’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Enter projects and goodoldnet/guestbook through Go and inspect Back/Forward history; try unknown/external addresses and confirm not-found feedback without external navigation.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ When to use
- Personal sites, fan pages, internet-history exhibits and nostalgic creative projects.
- Content that celebrates human curation, slow discovery and personal expression.
✕ When not to use
- Dense work applications and critical payment or identity flows.
- Do not bring back blinking text, pop-up ads, rigid widths or tiny touch targets.
Variants
Personal homepage
个人主页
A handmade site with a directory sidebar, short writing and curated links.
Vintage browser window
旧浏览器窗口
Title bars, menus and beveled borders evoke a desktop window.
Implementation
border-styletext-decorationfont-family:focus-visibleflex-wrapUse inset/outset borders or layered shadows for grey panels. Keep readable type and underlined links. A visual study may preserve its composition, while the interactive area must wrap and support keyboards. Store demo messages in component state only and disclose that they are not persisted.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Build a complete GoodOldNet page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets. Reuse GoodOldNet’s #c4c4c4 grey chrome, #164479→#387ebd blue title bar, inset/outset bevels, Times New Roman copy and Arial menus. Keep the default 21% / 54% / 25% directory/copy/picture columns and blue underlined internal entries; reading content remains white with dark-blue text. Reflow through the existing wrapping toolbar/menu and single-column rules, never by shrinking a fixed vintage browser. Keep windows, address and directory in DOM with semantic focus, current-page and status feedback. Full-page operations: Directory and Back / Forward / Home navigate Home / About / Projects / Links / Guestbook; the local address follows navigation. Go opens a native dialog for home/about/projects/links/guestbook (with an optional goodoldnet/ prefix), adding valid navigation to internal history; unknown or external addresses show not-found feedback without leaving the site. Menus, Search, Favorites and window controls have reversible local behavior. Validate blank guestbook input and display accepted messages; disclose reload clears them with no service or browser storage. Share one renderer between static covers, the detail experience and /style-scenes/retro-web/ (English /en/style-scenes/retro-web/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
Hard pixel edges, a limited palette and bitmap faces as a console-nostalgia interface look. Aliasing is correct, scaling must be integer, dithering does the gradients. Deliberately against anti-aliasing.
StylesSimilar
A visual language that borrows real-world materials and physical forms for digital controls: leather stitching, wood grain, brushed metal, glass gloss. Buttons look pressable, switches look like levers — highlights, shadows and bevels make "what it looks like" teach "how it works".
StylesSimilarA visual language reviving turn-of-the-millennium digital optimism: liquid chrome, iMac translucent candy plastics, bubble type, sparkle stars, and pink-purple-blue gradients on silver highlights. It mixes naive futurism with clumsy low-poly 3D — sweet, shiny, gloriously unrestrained.
StylesSimilarA row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.
ComponentsUsed withNot to be confused with
Pixel art is defined by bitmap edges and limited palettes; Retro Web is defined by page structure, hyperlinks and browser-era conventions, and can include photos and ordinary type.