An inspired interpretation of Dell.com's 1996 design language — a catalog-era enterprise web design built around a literal black page frame, vivid flat color-block ribbon cards, chunky Arial Black display titles, Times Roman body copy, and an entire visual vocabulary of pre-Photoshop hand-cut GIF stickers.
A closed catalog palette: pure black for the frame, classic Mosaic blue for links, Dell red for the singular CTA, Dell yellow for stickers, and eight catalog tints that personalize each product line.
System fonts only — Arial Black for display, Helvetica Bold for UI, Times New Roman for body. No webfonts existed in 1996; the browser's bundled stack carried the entire identity.
Each product page opens with a chunky color-block eyebrow holding the line name in Arial Black 36 / weight 900. Four representative tint variants:
The brand's signature component. Each product row stacks a white title bar above a tinted body block, with a beveled product photo notched into the right edge of the card.
Hand-cut GIF "stickers" and the brand's red CTA panel — the only places saturated color earns its weight on the page.
Yellow fill, 2 px black border, Helvetica + Arial Black mix, purple wedge accent. Pinned to the top-right of every page.
Angled (~8°) yellow burst with hard 2 px black border + 2 px black drop shadow. Overlaps new product ribbon-cards.
Round red seal with double-stroke white inner border. Sits on the right rail of product pages.
Two-tier filled/outlined buttons in Helvetica Bold uppercase, plus the classic Mosaic-blue text link.
button-primary — black fill, white Helvetica Bold 12, 1 px border, 10/20 padding, 0 radius.
button-secondary — white fill, black text + border, same Helvetica Bold 12 chrome.
button-text-link — bare anchor, Times Roman 14, classic #0000ee underline.
HTML 3.2-era widgets: 1 px black border, white fill, Times Roman 14 inside. Helvetica Bold uppercase labels above.
A 4 px base scale derived from table-cell padding conventions. Coarse by modern standards; appropriate for the era's 800×600 monitors.
Two radii only: none (universal default) and full (round award seal stickers). The 4 / 8 / 12 px subtle-radius tier doesn't exist in 1996.
Borders, frames, and beveled GIFs — no soft shadows exist in the design. The page-frame border is the strongest depth cue on the page.
The 1996 design assumed an 800×600 monitor and a mouse. Modern reproductions widen the icon-nav targets and collapse the two-column layout below tablet width; the literal page frame compresses but never disappears.
| Name | Width | Key Changes |
|---|---|---|
| Period default | 800 × 600 | Fixed 760 px layout, designed for 1996 CRTs |
| Modern desktop | 1280+ px | Layout centred inside generous gutters — magazine-spread feel |
| Tablet | 768 px | Black frame compresses to 4 px; ribbons stack full-width |
| Mobile | < 480 px | Frame to 4 px; left-rail icon grid stacks above product stack |
1996 was mouse-only; original icons sit at 24 × 24 px. Modern reproductions must widen icon-nav targets to 44 × 44 px minimum.
Four hand-drawn icons linked by a thin green horizontal rule, each with a Helvetica Bold uppercase label below.
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.
A build-to-order configurator — one beveled product photo beside labelled spec rows. Each row is a small set of selectable options carrying a price delta; selections sum into the running system total above the order CTA.
Right-anchored drawer over a 50% ink scrim. Each line is a thumb + name/variant/qty stack + price + Remove text-link. Subtotal sits above a full-width primary Checkout, with a Continue link below.
An order-tracking console: a left account rail beside a status panel that pairs a horizontal build-progress stepper with the configured-system line items and order total — not a metrics dashboard.
Mono uppercase column headers, alternating canvas rows, status pills wired to semantic color tokens, hairline row dividers, and a footer pager.
Centered cards on canvas, full-width primary CTA, mono uppercase field labels, hairline-divided SSO fallback.
Centered card over a 50% ink scrim. Hairline divider above the action row, secondary text-button on the left, primary on the right.
Outlined icon tile, decimal index, declarative heading, one-sentence body, and a single primary CTA.
Connect a source or upload a CSV to start ingesting records into this workspace.