---
schema_version: 1
id: "retro-web"
name: "Retro Web"
summary: "A hand-kept personal portal and subject-filed archive, with visible directories, underlined links and compact beveled information panels."
family: "nostalgic"
tags: ["archival", "grid", "playful"]
best_for: ["personal", "publishing"]
avoid_for: []
density: "dense"
image_dependency: "low"
motion_level: "subtle"
complexity: "low"
signature: {"composition": "Centered compact personal portal with narrow directory and practical boxed sections; B separates archive introduction, entry column and subject shelf.", "typography": "Bookish personal-site heading and readable system sans-serif copy with small dated labels.", "navigation": "Always-visible site directory, underlined links and literal archive categories.", "content_rhythm": "Welcome, current interests and dated additions versus filed expandable entries and subject notes.", "imagery": "Original static CSS night sky and moon; content works without bitmap assets.", "color_and_material": "Blue-gray outer field, warm page panels, dark blue links and shallow beveled outlines.", "interaction": "Real archive category/search/reset states and native entry disclosures.", "motion": "Static decoration, no marquee, blinking badge or fake animated counter."}
status: "ready"
prompt_path: prompts/retro-web/prompt.en.md
---

# Retro Web

## Intent

Retro Web recalls the web as a collection of personal places maintained by someone with a small directory and a reason to write. It suits a personal portal, a modest archive or an independent publication with a visible author. The fictional Mara keeps six short observations and making notes. The visitor should understand where they are, follow ordinary links and find a remembered entry without learning a full application. Nostalgia comes from information structure and edges as much as color.

## Signature

Keep four traits: a constrained central page with a visible directory; ordinary underlined links; distinct boxed information regions; and honest dated entries grouped by subject. A small decorative badge or moon can establish personality, but cannot replace content. The archive is a real directory of writing, with working categories and search. Panels can have a shallow bevel without copying an operating-system logo or turning the entire site into a fake desktop.

## Typography

Use Georgia for display and Arial for body copy, both with explicit system fallback stacks. The display voice must remain distinct from captions, navigation and sustained reading. Keep paragraphs near sixty characters per line, let long headings wrap, and preserve useful caption sizes. The reference includes ĄČĘĖĮŠŲŪŽ and lowercase glyphs so the actual installed font can be inspected. There are no remote font requests or bundled font binaries. A new licensed font requires a recorded asset before use.

## Color and surfaces

Semantic tokens define the page, supporting surface, readable foreground, secondary labels, action accent, boundary and focus outline. Reference CSS consumes generated tokens.css; artwork may retain its separately authored material palette. Preserve the contrast relationships when replacing colors rather than copying an arbitrary accent. Do not use muted type for essential instructions if it becomes difficult to read. A successful token ratio is only one part of checking the rendered interface and every actual text background.

## Layout A

The site title and literal navigation sit above a two-column portal. A narrow sidebar contains the directory and a small night-sky observation. The broad content column carries a welcome, current interests and a dated additions list. About notes finish the page. Three current-interest paragraphs have their own subjects rather than becoming identical commercial feature cards. Every archive link has a real destination, and the number of kept entries corresponds to the actual available writing.

## Layout B

A compact archive introduction stands beside the main entry directory. Search and subject buttons precede six dated native disclosures; a small category shelf explains how the archive is arranged. The closing record links back to the home interests. This layout prioritizes retrieval and opening complete small entries, while the portal prioritizes an authored welcome and an overview of recent activity. It uses the same link and panel language without repeating the portal’s content sequence.

## Imagery

The moon, sparse star field and badge are original CSS decoration. They make a small personal corner without pretending to be astronomical data or a live status display. An empty asset inventory records the absence of redistributed media. The archive relies on language and dates. A real adaptation may add personal photographs with clear rights and useful alternatives, but should avoid filling every panel with unrelated nostalgic clips or borrowed animated badges.

## Navigation and interaction

The directory remains visible at every width. Category buttons keep a real pressed state; search combines a literal case-insensitive query with the selected category. The announced result count, empty message and reset button describe the actual visible entries. Hidden entries leave the focus order. Each entry uses native details to expose its complete short note. Links remain underlined, and keyboard focus is clearly offset. No guestbook, visitor counter or contact form implies an unavailable service.

## Motion

Content is present immediately. Short state transitions are allowed when they explain an operable control; essential copy never waits for a reveal. The reduced-motion media query removes nonessential animation, transitions and smooth scrolling. If an adaptation introduces movement, keep a useful static composition, avoid autoplay distractions and give visitors control over any sustained activity. A decorative motion effect must not turn the page into a different design direction or hide its navigation.

## Responsive behavior

At 1440 keep the portal narrow enough to read as a personal place, with directory beside content. The archive has a large entry field and a smaller category shelf. At 768 the columns compress while retaining readable padding. Below 700 sidebar and archive introduction enter normal reading order before content. At 360 all panels fit the screen, dated additions wrap into short rows, and filter buttons wrap rather than sliding sideways. Do not preserve nostalgia through a fixed-width page that requires panning.

## Accessibility

Use one main landmark, one descriptive h1, ordered headings, visible keyboard focus and a skip link. Links navigate and buttons change state; native disclosures expose real information. Provide informative alternatives for meaningful images, while purely ornamental geometry stays out of the reading order. Check actual loading, contrast, focus, control coverage and horizontal overflow at 360, 768 and 1440 pixels. The accompanying task evidence records what was executed; these bounded checks are not a full WCAG certification or a guarantee for adapted content.

## Adaptation

Replace the fictional persona, interests and six entries with truthful author material. Keep the directory simple and make every heading describe a destination that exists. Add categories only when there are entries to file. Use the same portal-to-archive relationship in a publishing system without making it a simulated desktop application. If the project needs a strongly futuristic product campaign, the ready Y2K Chrome direction is a different choice rather than an excuse to add chrome to this quiet personal structure.

## Avoid

1. Do not add blinking text, marquees or motion that competes with reading. 2. Do not imitate browser errors, executable desktops or fake live visitor counts. 3. Do not enforce a tiny fixed-width layout or replace the ordinary directory with hidden navigation.

## Closest styles

Y2K Chrome is the nearest ready nostalgic neighbor. Retro Web uses a boxed personal portal with a welcome, current interests, a side directory and a six-entry subject/search archive. Y2K Chrome uses large futuristic campaign type, polished reflective objects, orbit imagery and release/collection records. Home/author/archive navigation and dated small entries differ from edition/track/object routes and poster-to-collection rhythm. Terminal Utility is another text-dense comparison: its dark command/log panels and operational chronology differ from bookish headings, ordinary blue underlined links and personal subject filing. P13 compares actual desktop/mobile A/B layouts rather than treating nostalgia as one interchangeable decoration.