Style guide: Draco Share

Napster and LimeWire, if they were still around in 2026. One stylesheet for every part of the site: maxdraco.com, the blog and its posts, cds.maxdraco.com and hack.maxdraco.com. It is published at maxdraco.com/css/draco.css, and the subdomains load that same file, so a change here changes everywhere.

Where it comes from

Every source value below was read from the archived pages on the Wayback Machine, not remembered.

Snapshot	What it gave us
napster.com, Feb 2000	Khaki `#cccc99` and teal `#99cccc` blocks on grays; Arial throughout; gold `#ffcc00` for the active link.
napster.com, Feb 2001	Slate page `#525d76`, a white content window with a rounded corner, a boxed left nav whose current item is a black bar, bold italic headings with a rule under them, maroon `#660a0a` links, gray pill buttons.
limewire.com, Feb 2001	Gray `#e7e7e7` panels, small Arial, dark-gray links.
limewire.com, Jan 2005	Verdana at 10 to 11px, `#666666` text, lime `#69bd3e`, the green slogan band `#009900`, `#ebebeb` panels, blue-gray table heads `#abb7c1` / `#ccd6df`, and red `#cc0000` callouts.

The 2026 rules

Keep the furniture, fix the ergonomics. Title bar, slogan band, nav rail, window, file lists and status bar stay. Type sizes, contrast and spacing are 2026.
Readable first. Body text is 16px Arial. Verdana is for UI chrome only (nav, tables, meta, status bar), never below 12px.
Contrast passes WCAG AA. The 2005 greens are too light for text on white, so text uses darker greens; the original lime stays for fills, badges and progress bars.
Dark mode follows the system, with the slate going near-black and the window going charcoal.
Phones get a tab strip: the nav rail turns horizontal under 760px wide.
Nothing third-party loads before consent. System fonts only, no icon fonts, no web fonts.
No emoji, no stock art. The only images are real photos.

Colour

Light values shown; each token has a dark-mode value in the stylesheet.

Slate
--slate #525d76
Page. Napster 2001.

Window
--window #ffffff
Content panel.

Panel
--panel #ebebeb
Rail, status bar. LimeWire 2005.

Head
--head #ccd6df
Table headers. LimeWire 2005.

Rule
--rule #abb7c1
Borders. LimeWire 2005.

Lime
--lime #69bd3e
Fills and badges only. LimeWire 2005.

Band
--band #0b7a12
Slogan band. Darkened from #009900 so white text passes AA.

Link
--link #660a0a
Napster 2001 maroon.

Alert
--alert #cc0000
Errors and warnings. LimeWire 2005.

Focus
--focus #ffcc00
Keyboard focus ring. Napster 2000's active link.

Type

maxdraco Wordmark: Arial Black, heavy italic, lowercase, "draco" in lime.

Bold italic headings Arial 700 italic with a 2px rule under it (Napster).

Body copy is Arial 16px with 1.55 line height, set in the white window.

UI chrome is Verdana 12 to 13px: nav, tables, meta lines and the status bar (LimeWire).

hack.maxdraco.com Host names and dates use the system monospace.

Layout

Top to bottom: title bar (photo in a black ring, wordmark, one-line tagline) on slate, the green slogan band, then the shell: a nav rail on the left and the window on the right, then the status bar. The window has square top-left and rounded other corners, like Napster's panel. Maximum width 68rem.

Components

Nav rail

Boxed, gray, Verdana. The current page is a black bar with white bold text. External sections show their host on the right. On phones it becomes a horizontal tab strip and the hosts drop.

File list

Every list of things (projects, posts, CDs) is a LimeWire search-results table: blue-gray header, zebra rows, lime-tint hover, bold name with a gray description under it, monospace dates.

Name	Type	Date
Example tripCity, ST	Furry travel	2026-01-01
Example note	Older note	2025-05-26

Buttons and badges

Gray pill Go: lime pill Open Soon

Gray pills are the default (Napster's Subscribe button). Lime pills are for the one main action on a page. Badges mark status in file lists.

Progress bar

The segmented download bar. Only for real progress, never decoration.

Callouts

Information callout: lime edge on the panel gray.

Alert callout: red edge. Used on the 404 page.

Dialog

Pop-ups look like a 2000s client window: a slate title bar, a black 1px frame and a hard offset shadow. The cookie banner is the live example.

Status bar

The footer is the client's status bar: a lime "Online" dot, a line about what's shared, then the copyright, this guide and Cookie settings on the right.

Voice

Short and plain. The band lists what the site covers; no slogans.
No made-up numbers. The old clients showed live host counts; this site shows a number only if it comes from a live source.
Persona rules hold: nothing here links to the legal-name or furryrubber.com sites.

Using it on a new page or subdomain

Link the shared stylesheet and copy the shell markup from cds.maxdraco.com: header (title bar + band), .ds-shell with .ds-rail and main.ds-window, and footer.ds-status. Keep the cookie-consent block as it is.

<link rel="stylesheet" href="https://maxdraco.com/css/draco.css">