Edwin Arbus

Overview

Edwin Arbus is a maximalist personal homepage that celebrates 1990s web aesthetics through deliberate retro-futurism. The design embraces the 'Geocities Revival' movement—a nostalgic, unapologetic return to garish neon accents (primary magenta #d5008f, secondary gold #ffd700, tertiary lime #93ff28), pixelated imagery, and serif typography that rejects modern minimalism. The brand serves as a digital time capsule, evoking the chaotic joy of early web culture where 'under construction' was a permanent state and visual excess was a feature, not a bug.

The tone is irreverent, playful, and self-aware. Edwin's voice is conversational and humorous—the site declares him 'extremely handsome' and his dog Cody 'a very good dog' with absolute conviction. Typography is deliberately retro (Georgia, Times New Roman, Impact), animations are nostalgic (blinking text, spinning GIFs, marquees), and interactive elements reward curiosity. Example sentence in Edwin's voice: 'CODY IS A VERY GOOD DOG—he has been petted 22,365 times by visitors to this page.'

Colors

The color palette is intentionally garish and nostalgic, rejecting contemporary restraint. Primary (#d5008f, vivid magenta) is deployed on call-to-action buttons, theme names, and accent text—it's the signature brand color that appears on 'SHUFFLE MY THEME!!!' and the Cody panel header. Secondary (#ffd700, gold) and Tertiary (#93ff28, neon lime) provide supporting accents for highlights, badges, and interactive states. The surface stack anchors the design in deep purple-black (surface #170436, surface-dim #0b0220) to evoke the 'Midnight Velvet' theme shown in the screenshot, with on-surface text in warm cream (#f3e3b3) for legibility over the dark background. Panel backgrounds use semi-transparent white (rgba(255, 255, 255, 0.9)) to float content over the textured background. Error states

Typography

The type system is deliberately retro-serif, rejecting sans-serif modernism. Display text (54px Impact, 700 weight, 1px letter-spacing) is used for the main 'Edwin Arbus' title with a gradient fill (linear-gradient from blue to purple to magenta) and text-stroke for the WordArt effect. Headlines use Georgia (32px, 700 weight) for section titles like 'YOUR CHOICES' and 'MY DOG CODY'. Body text is Times New Roman (15–16px, 400 weight, 1.6 line-height) for paragraphs and descriptions, maintaining readability over busy backgrounds. Labels and buttons use Georgia bold (12–14px, 700 weight) with 0.5–1px letter-spacing for emphasis. The system applies text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45) to panel headers and title text to ensure legibility over gradient and textured backgrounds. Blinking an

Layout

The page uses a fixed two-column table layout (table.layout with table-layout: fixed) reflecting 1990s web design practices. The sidebar (col-side, 196px width) contains navigation, Cody's panel, and the poll, while the main content area (col-main) flows vertically. Container max-width is 820px, centered on the page with padding: 0 14px. Spacing follows a semantic scale: lg (24px) separates major sections, md (16px) divides panels, sm (8px) provides breathing room within components. The marquee at the top uses overflow: hidden and white-space: nowrap with a CSS animation (animation: marquee 22s linear infinite) to scroll text infinitely. Panels are stacked vertically with margin: 0 0 14px between them. The layout respects the 'forever under construction' philosophy—content is deliberately

Elevation & Depth

Depth is conveyed through layered shadows and 3D button effects rather than subtle gradients. The primary elevation technique is the 3D inset/outset border effect on buttons: border: 3px outset #ffffff creates a raised appearance, while border-style: inset on :active flattens the button to simulate a press. Box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45) adds a hard-edged drop shadow beneath buttons and panels, creating a tactile, skeuomorphic effect. Panels use box-shadow: none by default but apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) when elevated. The panel header (--head-bg: #4169e1) sits a

Shapes

The shape philosophy is 'Retro-Technical Sharpness'—all corners are either square (0px radius) or minimally rounded (4px max). Buttons use rounded: DEFAULT (4px) for a subtle softness that echoes Windows 95 UI without modern smoothness. Input fields and panels use the same 4px radius. The only exception is badges, which use rounded: full (9999px) for pill-shaped emphasis. This constraint reflects the pixelated aesthetic: sharp corners align with the crisp, grid-based imagery (image-rendering: pixelated applied to all .pix elements). Dividers use background-image with pixelated GIFs (divider_ra

Components

Action Elements Buttons are the primary interactive component. The big-button (used for 'SHUFFLE MY THEME!!!') applies padding: 7px 16px, font: bold 15px Georgia, border: 3px outset #ffffff, and box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45). On hover, filter: brightness(1.12) saturate(1.3) brightens the button face. On active, border-style: inset and transform: translate(2px, 2px) simulate a press. Mini-buttons (used in polls and Cody panel) use padding: 3px 10px, font: bold 12px, and border: 2px outset #ffffff with the same active inset effect. All buttons use background: var(--btn-face) (#c0c0c0 in the default theme) and color: var(--btn-fg) (#000000), allowing theme variations to override.

Containers & Surfaces Panels are the primary container component. Each panel has background:

Do's and Don'ts

**Do**

• Do use the primary magenta (#d5008f) on all call-to-action buttons and interactive elements to maintain brand recognition across theme variations.
• Do apply text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45) to all text overlaid on textured or gradient backgrounds to ensure legibility.
• Do use Georgia or Times New Roman serif fonts for all body and headline text—never substitute with sans-serif, as it breaks the retro aesthetic.
• Do apply image-rendering: pixelated to all .pix elements (GIFs, PNGs) to maintain crisp, non-interpolated appearance at any scale.
• Do use hard-edged box-shadows (3px 3px 0 rgba(0, 0, 0, 0.45)) on buttons and panels rather than soft blur shadows to preserve the skeuomorphic 1990s UI effect.
• Do apply filter: brightness(1.12) saturate(1.3) on button hover states to brighten and enliven the button face without changing the base color.

**Don't**

• Don't use sans-serif fonts (Helvetica, Arial, Verdana) for body text—the brand identity depends on serif typography to evoke 1990s web nostalgia.
• Don't apply border-radius > 8px to any component; sharp corners and minimal rounding are essential to the retro-technical aesthetic.
• Don't use soft shadows (box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1))—the design requires hard-edged, pixelated shadows that align with the skeuomorphic style.
• Don't override the primary color (#d5008f) on buttons; theme variations should only change surface and accent colors, never the core brand magenta.
• Don't apply opacity or transparency to text; use solid colors with text-shadow for contrast instead, as transparency feels too modern for the retro aesthetic.
• Don't use CSS gradients with smooth transitions; if gradients are needed, use discrete color stops or pixelated background images to maintain the 1990s look.