ACME Laboratories

Overview

ACME Laboratories is a nostalgic celebration of early-web freeware culture, embodying the playful spirit of 1990s internet aesthetics. The design system embraces "Retro-Web Maximalism"—a deliberate rejection of contemporary minimalism in favor of bold, saturated colors, generous use of decorative elements (animated GIFs, anvil and atom logos), and a warm, inviting sage-green (#99cc99) foundation that evokes the comfort of dial-up era interfaces. The brand serves developers, hobbyists, and nostalgia enthusiasts seeking practical tools wrapped in whimsical, unapologetic retro charm. The emotional response is one of playful authenticity: users feel welcomed into a community that values function over fashion, humor over polish, and longevity over trends.

The voice is conversational, self-aware, and gently irreverent. ACME speaks in short, declarative sentences peppered with parenthetical asides and bold emphasis on the absurd ("Purveyors of fine freeware since 1972. On the net since 1991."). The vocabulary is technical but never gatekeeping—terms like "thttpd," "pbmplus," and "GeoRSS" sit comfortably alongside playful descriptors ("tiny/turbo/throttling"). Example sentence in brand voice: "The ACME Mapper lets you see exactly where you are, which is useful if you've gotten lost in the Bay Area."

Colors

The color palette is anchored by a warm, muted sage-green surface (#99cc99, rgb(153, 204, 153)) that dominates the page background and creates a calming, retro-terminal aesthetic. This is paired with a bold, electric primary blue (#0000ff) used exclusively for hyperlinks and interactive elements—a deliberate nod to early-web link styling. The primary blue is never softened or desaturated; it remains pure and clickable, signaling interactivity with unmistakable clarity. Secondary grays (#666666, #505050) provide neutral text and structural elements, while a warm tertiary tan (#cccc99) is reserved for decorative dividers (the thick horizontal rules) and accents. The error state uses a vivid red (#ff0000) for warnings or critical information. Disabled states employ a light gray (#e9ecef) with

Typography

The type system uses Arial and system sans-serif fonts exclusively, honoring the web-safe typography constraints of the era while maintaining readability across all devices. Display text (48px, 700 weight) anchors page headers with commanding presence; headline-lg (32px, 700 weight) introduces major sections; body-md (14px, 400 weight) carries the bulk of content at a comfortable 20px line-height. All typography is left-aligned and uses minimal letter-spacing (0em to 0.05em), creating a dense, information-rich layout that prioritizes content over whitespace. Links are always underlined (text-decoration: underline) to maximize discoverability—a deliberate rejection of modern "subtle" link styling. Bold emphasis (<b> tags) is used liberally throughout lists and headers to create visual hiera

Layout

The layout follows a classic HTML table-based structure (a nod to pre-CSS web design) with a fixed 1024px container max-width, though content flows fluidly on smaller screens via responsive image scaling (max-width: 95% on devices ≤400px). The page rhythm is established through nested unordered lists, with consistent 12px (md spacing) indentation per nesting level, creating a clear visual hierarchy without relying on cards or modern container patterns. The header uses a 3-column table layout: left column for the anvil logo, center for the ACME title and tagline, right for the atom logo—a symmetrical, balanced composition that anchors the page. Horizontal rules (hr.thick) with 10px height and 2px borders in tertiary tan (#cccc99) separate major content sections, providing breathing room whi

Elevation & Depth

Depth is conveyed through subtle but deliberate shadow and border treatments that evoke the "beveled button" aesthetic of early-2000s UI design. Standard elevation (md) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to dropdown panels and interactive surfaces to lift them slightly off the sage-green background. The highest elevation (lg) employs a hard shadow—box-shadow: 3px 3px 2px black—used sparingly on framed images to create a stark, almost comic-book effect that reinforces the playful brand personality. Dropdown panels (z-index: 999999) float above all other content with a 1px s

Shapes

The shape philosophy is "Minimal Geometry"—sharp corners are the default, with subtle rounding applied only where interaction demands it. All border-radius values are small and precise: 4px (DEFAULT) for dropdown panels and interactive containers, 2px (sm) for minor UI elements, and 0px (no rounding) for the page body and major structural elements. This creates a visual language that feels both retro (sharp, grid-aligned) and slightly refined (not aggressively angular). The 4px radius on dropdown panels (border-radius: 4px) provides just enough softness to distinguish them from the background

Components

Interactive Links All hyperlinks use the primary blue (#0000ff) with text-decoration: underline applied by default—no hover state required to signal interactivity. On hover, links shift to primary-fixed-dim (#0000cc), a darker blue that maintains the same hue while increasing visual weight. This treatment is applied consistently across all link types (primary, secondary, tertiary) to create a predictable, discoverable interaction model. Links are never styled with background colors or borders; they remain pure text with underline, honoring the web's foundational link convention.

Dropdown & Select Components Custom dropdown panels use a white background (#ffffff, surface-variant) with a 1px solid border in light gray (#d0d0d0, outline-variant) and a 4px border-radius. The panel is

Do's and Don'ts

**Do**

• Do use the electric primary blue (#0000ff) exclusively for links and interactive elements—it is the only accent color and must remain pure and unmuted.
• Do apply text-decoration: underline to all links by default; never rely on color alone to signal interactivity.
• Do maintain the sage-green background (#99cc99) as the dominant surface color; it is the brand's signature and must not be replaced with white or gray.
• Do use Arial or system sans-serif fonts at 14px–16px body size with 1.5–1.6 line-height for comfortable reading on the warm background.
• Do apply the hard shadow (box-shadow: 3px 3px 2px black) sparingly on framed images and decorative elements to reinforce the playful, retro aesthetic.
• Do use 4px border-radius on interactive containers (dropdowns, panels) and 0px on structural elements to maintain the minimal-geometry philosophy.

**Don't**

• Don't soften or desaturate the primary blue (#0000ff); it must remain pure and clickable, never muted to #0066cc or similar.
• Don't replace the sage-green background with white, light gray, or any neutral color—the warm green is non-negotiable and defines the brand.
• Don't use gradients, blur effects, or glassmorphism; the design language is flat-but-structured, achieved through layering and shadow, not transparency.
• Don't apply hover transitions or animations to interactive elements; state changes must be instantaneous to maintain the snappy, early-web feel.
• Don't use rounded corners (border-radius > 4px) on major structural elements; keep corners sharp except where interaction demands minimal softness.
• Don't add drop shadows to text or use text-shadow for decorative purposes; shadows are reserved for elevation and framed images only.