# 39 Personal Web 1999

**Philosophy and fit.** Express a person’s interests through a small, hand maintained web of pages. Suitable for personal sites, fan communities, hobby collections, and informal project journals.

**Visual grammar.** Use a compact masthead, a visible link directory, short update entries, tiny original badges, and an intentionally modest content width. Default-like serif copy and blue underlined links coexist with simple coloured table-like panels built using modern layout CSS. A repeating background pattern can surround a solid, readable content surface.

**Specimen and flow.** _Moth Observatory_ is a fictional enthusiast’s website. Follow a homepage journal link, read an entry, then navigate to adjacent entries. Supporting pages are a curated links directory and a guestbook with clearly local-only sample submissions. A site map keeps every destination discoverable.

**Mobile and motion.** Collapse the link rail above the content, wrap badges, and keep text comfortably readable. Any small animated decoration has a pause control or a static alternative.

**Identity and effort.** Preserve personal miscellany, direct linking, and homemade composition; avoid copying obsolete browser failures or inserting fake broken links. **Effort: low.**

## Implemented sample

Moth Observatory is an expansive, bounded design reference. All organisations, events, prices, statistics and research claims are fictional fixtures. The page includes a complete primary composition and two local supporting routes that show its interaction and content hierarchy.

## Defining features

- Personal miscellany
- Modest hand-maintained page width
- Underlined links and visible site map

## Adaptable choices

Brand, subject, accent and equivalent licensed typefaces can change. Preserve composition and navigation. Do not turn the hierarchy into a uniform collection of cards.

## Tokens and typography

Heading: Libre Baskerville. Reading: DM Sans. Local WOFF2 fonts with system fallbacks. Page #dfe2cf; surface #fffceb; text #262b43; accent #3e4e8a. Eight-pixel base spacing; reading measure 65ch; width 1240px. See tokens.css for role values and Demo.vue for composition. Palette and type match the working specimen.

## States

- Entry: /preview/39-personal-web-1999/start
- A journal entry: /preview/39-personal-web-1999/journal
- Local guestbook: /preview/39-personal-web-1999/guestbook

## Neighbours and adaptation

- [40 Desktop 1995](../40-desktop-1995/DESIGN.md) uses desktop tools with bevelled windows and an explicit task strip and named application launchers and window controls. This reference keeps compact personal homepage with a visible link directory, updates, and original badges and direct links, adjacent journal entries, and a local guestbook.
- [42 Teletext Bulletin](../42-teletext-bulletin/DESIGN.md) uses numbered broadcast bulletin with colour bands and compact text rows and page numbers supplemented by ordinary visible links. This reference keeps compact personal homepage with a visible link directory, updates, and original badges and direct links, adjacent journal entries, and a local guestbook.

## Assets

See [asset record](../../../docs/ASSETS.md). All vector diagrams and sample writing are original to this repository. Photos are illustrative, not evidence of the fictional brands. Font faces: Libre Baskerville, DM Sans.

## Verification

Reviewed working sample. Browser checks cover entry-page reflow at 320, 390, 768, and 1440 pixels, keyboard entry, direct routes, and automated accessibility; both supporting routes are checked at 390 pixels. Capture metadata is stored in public/previews/39/capture.json and names the source content hash. Accessibility scans are supplementary; no formal WCAG certification or field-performance claim is made.