Ugly-Web / Geocities Revival

---
name: geocities-ugly-web
description: Apply the Ugly-Web / Geocities Revival visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Ugly-Web / Geocities Revival, mentions geocities style, web 1.0, 90s personal homepage, or describes tiled repeating backgrounds, lime green and magenta on navy, beveled 90s table borders — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Ugly-Web / Geocities Revival Design System

Late-90s amateur web maximalism, lovingly reconstructed: tiled star backgrounds, lime and magenta system colors, beveled table borders, under-construction GIFs, hit counters, guestbook links, marquee text, and center-aligned everything — the personal homepage as folk art.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Ugly-Web / Geocities Revival.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (geocities style, web 1.0, 90s personal homepage, ugly web, cameron's world style), or describes its traits: tiled repeating backgrounds; lime green and magenta on navy; beveled 90s table borders; animated GIF decorations; center-aligned single column; marquee and blink revival; hit counters and guestbooks.

## Design tokens

### Color palette

- Navy blue tiled-background base: `#000080` (--color-bg)
- Windows-gray table and panel fill: `#c0c0c0` (--color-surface)
- Yellow body text on navy, classic homepage combo: `#ffff00` (--color-text)
- Silver secondary text: `#c0c0c0` (--color-text-muted)
- Lime green — links, headings, blink text: `#00ff00` (--color-accent)
- Magenta for visited links and hot accents: `#ff00ff` (--color-accent-magenta)
- Cyan for dividers and table headers: `#00ffff` (--color-accent-cyan)
- Black text on gray table surfaces: `#000000` (--color-surface-text)
- Top/left bevel edge on 3D borders: `#ffffff` (--color-bevel-light)
- Bottom/right bevel edge on 3D borders: `#404040` (--color-bevel-dark)

### Typography

- Display / headings: Fredoka (fallback: Comic Sans MS, Chalkboard SE, cursive) (ideal: Comic Sans MS, premium — use Fredoka as the free substitute)
- Body: Libre Baskerville (fallback: Times New Roman, Times, serif) (ideal: Times New Roman, premium — use Libre Baskerville as the free substitute)
- Mono / data: Courier Prime (fallback: Courier New, monospace)
- Type scale: 1.2 ratio, base 16px — computed steps: 16px / 19px / 23px / 28px / 33px / 40px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.2, letter-spacing 0
- Body: line-height 1.4, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 0, 4, 8, 12, 16, 24, 32 — Cramped and default-ish — table cellpadding energy; sections separated by divider GIFs rather than whitespace.
- Border radius: none 0px — The 90s had no border-radius. Rounding of any kind is anachronistic.
- Border treatment: 3px outset #c0c0c0 — Beveled table borders via outset/inset styles; content tables get ridge borders in loud colors (#00ff00, #ff00ff).

### Shadows

- emboss: `inset 1px 1px 0 #ffffff, inset -1px -1px 0 #404040` — Beveled buttons and table cells
- emboss-pressed: `inset -1px -1px 0 #ffffff, inset 1px 1px 0 #404040` — Pressed state — bevel inverts
- hard-text: `2px 2px 0 #000000` — Drop shadow on flaming WordArt-style headlines

### Layout

- Max content width: 800px
- Single center-aligned column, 800px like a 1998 monitor
- Tiled background image (stars, clouds, or texture) behind everything
- Animated GIF dividers between every section
- Footer stack: hit counter, webring links, 'best viewed in Netscape' badge, guestbook link

### Effects

- Tiled repeating-background patterns
- Animated GIFs: under-construction, spinning email icon, dancing baby energy
- Marquee-style scrolling announcement text (CSS animation)
- Slow blink effect on NEW! badges (CSS, 1Hz max)
- Rainbow gradient text on the main headline
- Cursor sparkle trail, optional and toggleable

### Motion

- Easing: linear; durations 0ms / 500ms / 1000ms
- GIF-loop energy: repeating linear animations, no easing anywhere
- Marquee text scrolls continuously but pauses on hover and under prefers-reduced-motion
- Blink effects at 1Hz maximum, never fast strobing
- Hover states are instant color swaps, like 90s link styling

## CSS variables (drop-in)

```css
:root {
  --color-bg: #000080;
  --color-surface: #c0c0c0;
  --color-text: #ffff00;
  --color-text-muted: #c0c0c0;
  --color-accent: #00ff00;
  --color-accent-magenta: #ff00ff;
  --color-accent-cyan: #00ffff;
  --color-surface-text: #000000;
  --color-bevel-light: #ffffff;
  --color-bevel-dark: #404040;
  --radius-none: 0px;
  --shadow-emboss: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #404040;
  --shadow-emboss-pressed: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #404040;
  --shadow-hard-text: 2px 2px 0 #000000;
  --border-default: 3px outset #c0c0c0;
  --font-display: Fredoka, "Comic Sans MS", "Chalkboard SE", cursive;
  --font-body: "Libre Baskerville", "Times New Roman", Times, serif;
  --font-mono: "Courier Prime", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.4;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: linear;
  --duration-fast: 0ms;
  --duration-base: 500ms;
  --duration-slow: 1000ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Libre+Baskerville:wght@400;700&family=Courier+Prime:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A centered table of beveled gray buttons ('Home | About Me | My Pets | Links | Guestbook'), each with emboss shadow and instant magenta hover
- **Hero:** Centered rainbow-gradient headline with hard-text shadow, welcome marquee below, under-construction GIF, and a 'You are visitor #004217' counter
- **Card:** Gray surface table with 3px outset bevel border, black text, cyan header row cell, 8px cellpadding feel
- **Button (primary):** Beveled gray push button with black Fredoka label; bevel inverts on press, magenta text flash on hover
- **Button (secondary):** Ridge-bordered lime-outline block with lime text on navy; underlined like a fat link
- **Form fields:** White fill, 2px inset bevel border, black Courier text — a perfect 1997 <input>; focus does nothing fancy, just a lime outline

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A center-aligned page on a tiled starfield: rainbow-divider GIFs between sections, an UNDER CONSTRUCTION banner, a flaming-text headline, a visitor hit counter, and a beveled 'Sign my guestbook!' button. Spend boldness here; keep everything else quiet.

## Do

- Center-align the whole page and cap it at 800px
- Stack the ritual furniture: counter, badges, guestbook, webring, divider GIFs
- Use the browser-default color vocabulary: lime links, magenta visited, yellow-on-navy text
- Invert bevels on press — the emboss/deboss pair is the era's whole interaction model

## Don't

- No border-radius, no soft shadows, no gradients smoother than rainbow text
- Don't design a grid system — misaligned tables are authentic
- Never use fast blink or strobe effects, even ironically
- Don't sneak in modern minimalist sections; commit to the clutter

## Accessibility notes

- Blink and marquee effects are genuine photosensitivity and vestibular risks — cap blinking at 1Hz, pause marquees on hover, and disable both entirely under prefers-reduced-motion
- Lime, yellow, and cyan on navy all pass 4.5:1, but magenta (#ff00ff) on navy is about 3.5:1 — restrict it to large text and decorations; silver text-muted is for non-essential text only
- Tiled busy backgrounds must sit behind a solid-filled content area for any long-form text
- Animated GIFs should carry aria-hidden and never convey essential information

## Reference sites

- Cameron's World: https://www.cameronsworld.net
- GifCities (Internet Archive): https://gifcities.org
- Neocities: https://neocities.org
- GeoCities history: https://en.wikipedia.org/wiki/GeoCities

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip geocities-ugly-web.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/geocities-ugly-web.json

Settings → Capabilities → Skills → Upload skill → geocities-ugly-web.zip