Dell 1996 Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

17tokens

6type steps

1radius steps

2pxspacing base

Dell 1996, in one page

Dell's December 1996 home page is a perfectly preserved fossil of catalog-era enterprise web design — the moment when a Fortune-100 brand decided the web was *important enough* to invest in, but two years before CSS would be widely adopted and three years before "design system" was a phrase anyone used. Every visual choice on the page is a downstream consequence of that constraint: layout via HTML tables, type via the browser's built-in font stack (Arial Black / Helvetica / Times Roman), color via 8-bit-safe flat fills, and decoration via hand-cut GIF "stickers" (the NEW! burst, the round PC Magazine Readers' Choice seal, the beveled "BUY a DELL" yellow tab). The page is bordered — literally bordered, in a 1-cell-wide black HTML table — and inside that frame, every product line gets a "ribbon card": a white title bar with a sharp black underline, a tinted body block in one of eight catalog colors (sage, salmon, peach, lime, sky, steel, periwinkle, olive), and a beveled product photograph notched into the right edge of the card.

The brand voice carries through in two anchors: a vivid Dell-red CTA panel on the left of the homepage (cream-yellow Times Roman copy on a {colors.primary} fill, set inside the black frame) and a screaming red phone number — 1-800-213-DELL — pinned to the top-right of every page, because in 1996 the website was a brochure that ended with a phone call. The footer is a row of four hand-drawn icon-labels (FIND / HOME / ONLINE STORE / SERVICE & SUPPORT) linked by a thin green horizontal rule, and a single classic-Mosaic-blue underlined "Copyright" link sitting above the legal small print in Times Roman.

Key Characteristics:

Literal page frame: every page sits inside a {colors.frame-ink} (black) outer border ~8 px thick — the design treats the browser window as a printed picture frame
Flat color-block "ribbon cards" tint each product family with a dedicated catalog color ({colors.tint-sage} Latitude, {colors.tint-salmon} OptiPlex GX, {colors.tint-periwinkle} PowerEdge, {colors.tint-sky} Dellware, etc.) — no gradients, no shadows, no opacity
Chunky display typography in {typography.display} (Arial Black 36 / weight 900) for section title blocks; {typography.heading-2} (Helvetica Bold 16) for product row titles; {typography.body} Times Roman 14 for everything else
Hand-cut GIF "stickers" overlay the layout: yellow "BUY a DELL" tab in the top right, angled "NEW!" bursts on new product rows, round red PC Magazine Readers' Choice seals
{colors.primary} (Dell red) reserved for two things only: the homepage CTA panel and the top-right phone number — never decorative
Footer icon-nav with classic-blue ({colors.link} #0000ee) anchor underlines — the unmistakable Netscape 3.x link colour

Do's and don'ts

Do

Keep the literal {components.page-frame} black border on every page — this is the brand's single most identifiable container chrome.
Reserve {colors.primary} (Dell red) for the {components.cta-block-red} panel and the {components.phone-callout} only. Every other use dilutes the urgency signal.
Use the eight ribbon-card tint colors ({colors.tint-olive} / sage / salmon / peach / lime / sky / steel / periwinkle) as a *family* — pick one per product line and stay with it across the line's marketing surfaces.
Set every display headline in {typography.display} (Arial Black 36 / weight 900). The brand's typographic register depends on extreme weight against flat color.
Keep body copy in {typography.body} Times Roman 14 — substituting a modern sans loses the catalog feel entirely.
Render every CTA / button at {rounded.none} (0 px). Modern soft-radius buttons betray the era.
Use hand-painted bevels / hard-edge GIF shadows on stickers and product photos. Never substitute a soft CSS shadow.

Don't

Don't introduce a chromatic accent outside the eight catalog tints + Dell red + Dell yellow + classic link blue. The palette is closed by design.
Don't soften any corner. {rounded.none} is the universal modifier; only award seals get {rounded.full}.
Don't replace Times Roman body with Arial / Helvetica / Inter / a webfont — the serif body is the era's signature.
Don't add soft drop-shadows or atmospheric gradients. The brand has hard borders and flat fills; everything else reads as anachronism.
Don't crop or "tuck" product photos with border-radius or clip-path. The notch into the ribbon-card right edge is the framing — the photo itself stays a hard rectangle.
Don't pair two {components.cta-block-red} panels on the same page. The red fill is meant to be the singular attention pole.
Don't strip the {components.phone-callout} from the top banner. In 1996 the website existed to drive phone-call orders; the phone number IS the navigation.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Dell 1996 design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #e91d2a
- on-primary: #ffffff
- canvas: #ffffff
- surface: #ffffff
- ink: #000000
- frame-ink: #000000
- yellow-sticker: #fcc20f
- purple-stripe: #6a26a4
- link: #0000ee
- tint-olive: #8e8a25

Type:
- families: Arial Black, Helvetica, Times New Roman
- scale: 11, 12, 14, 16, 24, 36
- weights: 400, 700, 900

Shape:
- radius: 0
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 2, 4, 6, 8, 10, 12, 16, 20, 24, 32

Rules:
- Keep the literal `{components.page-frame}` black border on every page — this is the brand's single most identifiable container chrome.
- Reserve `{colors.primary}` (Dell red) for the `{components.cta-block-red}` panel and the `{components.phone-callout}` only. Every other use dilutes the urgency…
- Use the eight ribbon-card tint colors (`{colors.tint-olive}` / sage / salmon / peach / lime / sky / steel / periwinkle) as a *family* — pick one per product lin…
- Set every display headline in `{typography.display}` (Arial Black 36 / weight 900). The brand's typographic register depends on extreme weight against flat colo…
- Keep body copy in `{typography.body}` Times Roman 14 — substituting a modern sans loses the catalog feel entirely.
- Render every CTA / button at `{rounded.none}` (0 px). Modern soft-radius buttons betray the era.

Avoid:
- Don't introduce a chromatic accent outside the eight catalog tints + Dell red + Dell yellow + classic link blue. The palette is closed by design.
- Don't soften any corner. `{rounded.none}` is the universal modifier; only award seals get `{rounded.full}`.
- Don't replace Times Roman body with Arial / Helvetica / Inter / a webfont — the serif body is the era's signature.
- Don't add soft drop-shadows or atmospheric gradients. The brand has hard borders and flat fills; everything else reads as anachronism.
- Don't crop or "tuck" product photos with `border-radius` or `clip-path`. The notch into the ribbon-card right edge is the framing — the photo itself stays a har…
- Don't pair two `{components.cta-block-red}` panels on the same page. The red fill is meant to be the singular attention pole.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Dell Red ({colors.primary} — #e91d2a): The brand's signature red. Reserved for the homepage CTA panel ("At Dell.com, we'll help you find the right system…"), the top-right phone number, and the PC Magazine Readers' Choice seal ring. Never used as a card body fill.
Dell Yellow ({colors.yellow-sticker} — #fcc20f): Sticker yellow — the "BUY a DELL" tab in the top banner, and the angled "NEW!" bursts overlapping new product rows.
Dell Purple ({colors.purple-stripe} — #6a26a4): The accent stripe behind the lowercase ".com" / "DELL" wordmark text — appears inside the "BUY a DELL" sticker chrome only.

Surface

Frame Ink ({colors.frame-ink} — #000000): Pure black. The page frame, the top banner background, button fills, and all 1 px ribbon-card hairlines.
Canvas ({colors.canvas} — #ffffff): True white inside the frame. The page surface, the ribbon-card title-bar fill, and the icon-label nav backdrop.

Text

Ink ({colors.ink} — #000000): Body text, headings, link copy before visit. Pure black; no warm-near-black softening in 1996.
Link ({colors.link} — #0000ee): Classic Mosaic / Netscape 3.x default link blue. Underlined inline anchors ("Copyright", "(Terms of Use)", inline "from Dell's award-winning service and support teams").

Ribbon-Card Tint Family

Eight catalog colors, one per product line — these are the page's chromatic personality:

Olive ({colors.tint-olive} — #8e8a25): "DIMENSION DESKTOPS" eyebrow block
Sage ({colors.tint-sage} — #b3bd95): Latitude Notebooks ribbon body
Salmon ({colors.tint-salmon} — #d77a7a): "OPTIPLEX DESKTOP SYSTEMS" eyebrow + GX Series body
Peach ({colors.tint-peach} — #e6915d): Dimension card body + OptiPlex Gs body
Lime ({colors.tint-lime} — #c0d4a7): OptiPlex G Series body
Sky ({colors.tint-sky} — #9ab6c8): Dellware ribbon body
Steel ({colors.tint-steel} — #a5b8c0): Dimension XPS Pro ribbon body
Periwinkle ({colors.tint-periwinkle} — #8c9ae0): PowerEdge ribbon body

The tints are saturated but not vivid — they sit just below true neutral chroma, the signature of GIF-era web-safe-palette quantization.

Type scaleRead the full spec

Font Family

Three system-stack families, no webfonts (webfonts didn't exist yet):

Arial Black (fallback: Helvetica, system-ui sans) — display headings only. The chunky stenciled section eyebrows ("DIMENSION DESKTOPS", "OPTIPLEX DESKTOP SYSTEMS") are Arial Black at weight 900, set in all-caps with normal tracking.
Helvetica (fallback: Arial, system-ui sans) — product-row titles, button labels, the top banner's "BUILD YOUR OWN COMPUTER. ONLINE." headline. Always bold (700), always all-caps.
Times New Roman (fallback: Times, serif) — body copy. Every paragraph, every caption, every inline anchor sits in default-rendered Times Roman. The serifs date the design instantly — body text on the modern web is almost never serif.

Hierarchy

Token	Size	Weight	Line Height	Use
`{typography.display}`	36px	900	1.0	Section eyebrow titles ("DIMENSION DESKTOPS", "OPTIPLEX DESKTOP SYSTEMS")
`{typography.heading-1}`	24px	900	1.05	Sub-page hero headlines
`{typography.heading-2}`	16px	700	1.2	Top banner copy, product-line H1 ("Reliable PC's for High-Performance Computing.")
`{typography.heading-3}`	14px	700	1.2	Ribbon-card title bar ("OPTIPLEX GX PRO", "DIMENSION XPS")
`{typography.body}`	14px	400	1.4	Default paragraph copy, ribbon-card body, CTA-panel copy
`{typography.body-sm}`	12px	400	1.4	"This site is best viewed with browser versions 3.0 and higher."
`{typography.caption}`	11px	400	1.35	Footer copyright text
`{typography.button}`	12px	700	1.0	Button labels, "NEW!" sticker, BUY-a-DELL sticker
`{typography.ui-label}`	12px	700	1.0	Icon-label nav uppercase labels ("FIND", "HOME", "ONLINE STORE", "SERVICE & SUPPORT")

Principles

Sans for UI, serif for body — the inverse of the modern convention, and a dead giveaway of mid-90s typography.
Display weights are extreme (900 / Black) and never softer. The "Dimension" / "OptiPlex" eyebrow blocks lean on the heaviest weight the font ships.
No letter-spacing tracking adjustments — pixel-fonts in 1996 didn't reward it. Everything is set at the browser's default kern.
Line-height is tight on display (1.0) and conventional on body (1.4) — a holdover from print-magazine catalog layout.

Note on Font Substitutes

All three families are operating-system defaults on every consumer OS shipped in 1996 (Windows 95: Arial / Times New Roman; Mac OS 7.5+: Helvetica / Times). The brand had no fallback strategy because no fallback was needed — the fonts were always present. Modern reproductions can stay on this exact stack (Arial Black / Helvetica / Times New Roman) for authenticity.

Components and layoutRead the full spec

No hover states documented. Per the global no-hover policy, every component below documents Default state only.

Frame & Banner

page-frame — the literal black border around the entire viewport.

Background {colors.frame-ink}, padding {spacing.sm} 8 px on every side, no radius.
The page sits *inside* this border. Treat it as a non-negotiable container chrome; collapsing it on mobile is acceptable (to ~4 px), but removing it entirely loses the brand.

top-banner — pure-black strip running across the top with white "BUILD YOUR OWN COMPUTER. ONLINE." headline + sub-tagline, the yellow "BUY a DELL" sticker pinned at right, and the red "1-800-213-DELL" phone number.

Background {colors.frame-ink}, text {colors.canvas}, type {typography.heading-2}, padding 12 px vertical / 16 px horizontal, no radius.

Section Eyebrow Blocks

section-eyebrow-olive — large tinted color block holding the chunky stenciled section title ("DIMENSION DESKTOPS"). Used at the top of the Dimension product page.

Background {colors.tint-olive}, text {colors.ink}, type {typography.display} (Arial Black 36 / 900), padding 24 × 16, no radius.

section-eyebrow-salmon — same chrome with the OptiPlex line's salmon-pink fill ("OPTIPLEX DESKTOP SYSTEMS").

Background {colors.tint-salmon}, otherwise identical to the olive variant.

Ribbon Cards

The brand's signature component. Each product-row "card" is a stack of three pieces:

ribbon-card-title — white horizontal title bar with the product variant name in Helvetica Bold all-caps (e.g. "OPTIPLEX GX PRO", "DIMENSION XPS", "POWEREDGE SERVERS"). 1 px bottom border in {colors.frame-ink}.

Background {colors.canvas}, text {colors.ink}, type {typography.heading-3}, padding 6 × 12, no radius.

ribbon-card-body-<tint> — color-block body in one of eight tints, holding the short marketing pitch in {typography.body} (Times Roman 14). Padding 12 × 16. The product photograph notches into the right edge with a transparent GIF cutout.
Photo notch — the GIF sits in the rightmost ~25 % of the row, hanging slightly above and below the body bar like a card pinned to a corkboard.

Each tint variant is its own component entry. Pick the one that matches the product family:

ribbon-card-body-sage — {colors.tint-sage} fill, used for Latitude Notebooks rows
ribbon-card-body-salmon — {colors.tint-salmon} fill, used for OptiPlex GX Series rows
ribbon-card-body-peach — {colors.tint-peach} fill, used for Dimension rows and OptiPlex Gs
ribbon-card-body-lime — {colors.tint-lime} fill, used for OptiPlex G Series rows
ribbon-card-body-sky — {colors.tint-sky} fill, used for Dellware rows
ribbon-card-body-steel — {colors.tint-steel} fill, used for Dimension XPS Pro rows
ribbon-card-body-periwinkle — {colors.tint-periwinkle} fill, used for PowerEdge Server rows

All seven share identical chrome: 1 px solid {colors.frame-ink} border, {spacing.md} × {spacing.lg} (12 × 16) padding, {rounded.none} (sharp corners), {typography.body} Times Roman 14 inside. Only the fill color changes per product family.

Call-to-Action

cta-block-red — the homepage's vivid Dell-red panel ("At Dell.com, we'll help you find the right system, configure it, price it, and order it…").

Background {colors.primary}, text {colors.on-primary} (white), 1 px solid frame-ink border, type {typography.body} (Times Roman 14), padding 16 px, no radius.
One per page maximum. The brand's most aggressive attention-grab — never use it for anything except a top-tier sales message.

phone-callout — top-right phone number ("1-800-213-DELL") rendered as red on the black banner.

Background {colors.frame-ink}, text {colors.primary}, type {typography.heading-2} Helvetica Bold 16, padding 4 × 8, no radius. Pinned to the right of the top banner on every page.

Stickers (GIF-style overlays)

buy-a-dell-sticker — yellow rectangular sticker with "BUY a DELL" in Helvetica Bold, the "a" set in a small purple stripe, the "DELL" wordmark in black. Pinned to the top-right of every page.

Background {colors.yellow-sticker}, text {colors.ink}, 1 px black border, type {typography.button}, padding 4 × 8, no radius.

new-burst-sticker — angled yellow burst with "NEW!" in Helvetica Bold black, overlapping the right side of new product ribbon-cards. Slight rotation (~15°) gives it the pinned-on-with-tape feel.

Background {colors.yellow-sticker}, text {colors.ink}, type {typography.button}, padding 4 × 8, no radius (rotation applied separately).

cert-seal — round red award seal: center reads "PC MAGAZINE", ringed by "SERVICE · RELIABILITY · READERS' CHOICE", with an inner white field and red bordered ring. Sits on the right rail of product pages.

Background {colors.primary}, text {colors.canvas}, type {typography.button}, rounded {rounded.full}, 64 px size.

Navigation

icon-label-nav — bottom-of-page navigation row: four hand-drawn icons (eyeglasses-FIND / house-HOME / yellow-sticker-ONLINE STORE / wrench-SERVICE & SUPPORT) connected by a thin green horizontal rule, each with an uppercase Helvetica label beneath.

Background {colors.canvas}, text {colors.ink}, type {typography.ui-label}, padding 8 px around each icon-label pair, no radius.
The connecting green rule is part of the GIF imagery, not a CSS border.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-dell-1996 {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #0000ee;
  --link-hover-color: #0000bb;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #e11623;
  --button-text-color: #ffffff;
  --button-hover-bg: #b3111c;
  --button-border: none;
  --button-border-radius: 0px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-serif);
  --card-border-radius: 0px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

parco 79.2%
kalita 77.7%
penonline 76.5%
kurkkufields 76.2%
onibuscoffee 75.9%

Where this came from

Source document: volt/design-md/dell-1996/DESIGN.md · 33.5 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.