Dot-com Corporate Y2K

---
name: dotcom-corporate-y2k
description: Apply the Dot-com Corporate Y2K visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Dot-com Corporate Y2K, mentions web 1.0 corporate, dotcom boom site, 1999 corporate web, or describes gradient blue header bars, beveled and glossy nav pills, swoosh logo and orbiting-globe motifs — 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
---

# Dot-com Corporate Y2K Design System

The late-90s/early-2000s corporate website, faithfully reconstructed: gradient blue header bars, beveled navigation pills, swoosh logos, tiny Verdana body text, table-style layouts with visible seams, and an earnest orange 'Contact Us' button. IPO-era optimism in 216 web-safe colors.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Dot-com Corporate Y2K.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (web 1.0 corporate, dotcom boom site, 1999 corporate web, corporate y2k web, swoosh logo era), or describes its traits: gradient blue header bars; beveled and glossy nav pills; swoosh logo and orbiting-globe motifs; small Verdana/Arial system type; boxed table-like layouts with visible borders; default-blue links and visited-purple.

## Design tokens

### Color palette

- Plain white page background: `#ffffff` (--color-bg)
- Sidebar and content-box fill, faint corporate gray-blue: `#f0f2f5` (--color-surface)
- Body text, the era's default dark gray: `#333333` (--color-text)
- Fine print, breadcrumbs, and copyright lines: `#666666` (--color-text-muted)
- Corporate navy — headers, headings, primary actions: `#003399` (--color-accent)
- Top stop of the header gradient: `#6699cc` (--color-header-light)
- Unvisited hyperlink blue, underlined: `#0000ee` (--color-link)
- Visited-link purple: `#551a8b` (--color-link-visited)
- The energetic secondary accent for CTAs and bullet icons: `#ff6600` (--color-swoosh-orange)
- Beveled pill and button base gray: `#cccccc` (--color-bevel-silver)
- Visible box and table rules: `#999999` (--color-table-border)

### Typography

- Display / headings: Archivo (fallback: Arial, Helvetica, sans-serif) (ideal: Arial, premium — use Archivo as the free substitute)
- Body: Inter (fallback: Verdana, Geneva, Tahoma, sans-serif) (ideal: Verdana, premium — use Inter as the free substitute)
- Type scale: 1.2 ratio, base 14px — computed steps: 14px / 17px / 20px / 24px / 29px / 35px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.3, letter-spacing 0
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 2, 4, 8, 10, 15, 20, 30, 40 — Tight and cellular — content packed into bordered boxes with 10-15px cellpadding; whitespace was expensive in 1999.
- Border radius: none 0px, pill 10px — Square boxes everywhere except nav pills and buttons, which get a chunky 10px capsule round.
- Border treatment: 1px solid #999999 — Visible box rules on everything, like table borders; beveled elements fake 3D with light top-left and dark bottom-right edges.

### Shadows

- bevel-out: `inset 1px 1px 0 #ffffff, inset -1px -1px 0 #8c8c8c` — Raised bevel on pills, buttons, and toolbar chrome
- bevel-in: `inset -1px -1px 0 #ffffff, inset 1px 1px 0 #8c8c8c` — Pressed state and inset wells
- header-gloss: `inset 0 12px 12px -8px rgba(255, 255, 255, 0.5)` — Glassy shine across the top of gradient header bars

### Layout

- Max content width: 960px
- Classic holy-grail table layout: full-width header, left nav column, content cell, right promo column
- 760-960px centered page on plain white, everything boxed with visible rules
- Breadcrumb trail under the header (Home > Products > Widgets)
- Footer of tiny centered links separated by pipe characters

### Effects

- Vertical two-stop gradients on headers and buttons (#6699cc to #003399)
- Beveled 3D edges on interactive chrome
- Orange arrow bullets and 'NEW!' starburst badges
- Optional subtle diagonal-swoosh watermark in the hero

### Motion

- Easing: linear; durations 0ms / 100ms / 200ms
- Essentially no animation — states swap instantly like image rollovers
- Hover swaps pill gradient and underlines links; nothing slides or fades
- A single animated GIF-style spinner is the only permitted motion flourish

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f0f2f5;
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-accent: #003399;
  --color-header-light: #6699cc;
  --color-link: #0000ee;
  --color-link-visited: #551a8b;
  --color-swoosh-orange: #ff6600;
  --color-bevel-silver: #cccccc;
  --color-table-border: #999999;
  --radius-none: 0px;
  --radius-pill: 10px;
  --shadow-bevel-out: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #8c8c8c;
  --shadow-bevel-in: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #8c8c8c;
  --shadow-header-gloss: inset 0 12px 12px -8px rgba(255, 255, 255, 0.5);
  --border-default: 1px solid #999999;
  --font-display: Archivo, Arial, Helvetica, sans-serif;
  --font-body: Inter, Verdana, Geneva, Tahoma, sans-serif;
  --text-base: 14px;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: linear;
  --duration-fast: 0ms;
  --duration-base: 100ms;
  --duration-slow: 200ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Archivo:wght@700&family=Inter:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Row of beveled silver pills under the gradient header; active pill is navy-filled with white 11px bold Verdana-style label, others swap gradient on rollover.
- **Hero:** Boxed banner with clip-art-style photo left, bold Arial-style headline in navy, 2-3 lines of small text, and an orange beveled 'Learn More' button.
- **Card:** Bordered content box with a navy title bar (white bold text), gray body cell with tight padding, and a 'More >>' link in default blue at bottom right.
- **Button (primary):** Orange #ff6600 gradient capsule with bevel-out edge, white bold label, instant pressed bevel-in state.
- **Button (secondary):** Silver #cccccc beveled capsule with navy label; hover swaps to the blue header gradient with white text.
- **Form fields:** Sunken white input with bevel-in border, 14px system-style text; labels bold and right-aligned in a two-column table layout.

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 #003399-to-#6699cc gradient header bar with an italic swoosh logo, over a row of beveled silver nav pills whose labels are 11px bold Verdana. Spend boldness here; keep everything else quiet.

## Do

- Box everything with visible 1px rules; visible structure is the aesthetic
- Use the navy-to-light-blue gradient exactly once as the header signature
- Keep body type small, dense, and Verdana-flavored
- Deploy orange only for actions and 'NEW!' badges so it stays loud

## Don't

- Don't add modern polish — soft shadows, big radii, or smooth easing break the period
- Don't confuse it with GeoCities amateurism: this is the professional, IPO-ready web, aligned and navy
- Don't use flat minimal buttons; everything interactive must look raised
- Don't exceed ~960px width or the era illusion collapses

## Accessibility notes

- Navy accent, body gray, and muted gray all pass 4.5:1 on white; era-authentic 11px label sizes are below modern minimums, so treat 14px as the real floor and reserve 11px styling for decorative chrome.
- swoosh-orange (#ff6600) fails contrast on white for text — use it for button fills with white bold labels at 14px+ or as icon color, and note the label itself sits at large-text weight.
- Underline links (era-authentic and accessible); never rely on the blue/purple hue alone.

## Reference sites

- Dot-com bubble — Wikipedia: https://en.wikipedia.org/wiki/Dot-com_bubble
- Verdana — Wikipedia: https://en.wikipedia.org/wiki/Verdana
- Web Design Museum (1990s-2000s archives): https://www.webdesignmuseum.org/
- Trebuchet MS — Wikipedia: https://en.wikipedia.org/wiki/Trebuchet_MS

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

Install this skill

unzip dotcom-corporate-y2k.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/dotcom-corporate-y2k.json

Settings → Capabilities → Skills → Upload skill → dotcom-corporate-y2k.zip