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
See the full page, then try the interactive sceneExplore the directory, then add a guestbook message. Messages exist only in this preview, are never sent to a service, and disappear on reload.
Full-page preview
A small corner of the early internet.
Interesting pages, favourite links and stories worth a slower look.
YOU ARE VISITOR 0 0 1 2 8 4
A simpler internet.
A brighter tomorrow.
Interactive scene
Loading demo…
What to look for
- 01Use Tab and Enter to navigate; the current page has bold text and an explicit state.
- 02Try an empty message and a valid one, then observe validation and feedback.
- 03At narrow widths the directory wraps and the content stays readable.
✓ 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.
Inspect existing routing and styles, then create a Retro Web personal homepage. Include working directory navigation, content and a local-only guestbook simulation. Use grey beveled chrome, a navy title bar, serif copy and blue underlined links; never replace the DOM with a screenshot. Add no backend, credentials or external requests. Support keyboard navigation and messages, clear empty-submit feedback and narrow layouts without page overflow. Verify both languages, focus, navigation and state after reload. Report passed and unverified checks accurately. 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.
StylesSimilarA 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.