diff --git a/README.md b/README.md
index c693c9e..e7203fc 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@
 <div align="center">
 
 [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)
-![DESIGN.md Count](https://img.shields.io/badge/DESIGN.md%20count-73-10b981?style=classic)
+![DESIGN.md Count](https://img.shields.io/badge/DESIGN.md%20count-72-10b981?style=classic)
 [![Last Update](https://img.shields.io/github/last-commit/VoltAgent/awesome-design-md?label=Last%20update&style=classic)](https://github.com/VoltAgent/awesome-design-md)
 [![Discord](https://img.shields.io/discord/1361559153780195478.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://s.voltagent.dev/discord)
 
@@ -179,10 +179,16 @@ Tools, platforms, and services for designing and shipping web apps with AI.
 - [**Renault**](https://getdesign.md/renault/design-md) - French automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons
 - [**Tesla**](https://getdesign.md/tesla/design-md) - Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans
 
+### Retro Web · DESIGN.md Nostalgia
+
+A Saturday series — DESIGN.md files extracted from the web of the 1990s. Drop one in and tell your AI agent to build a period-accurate vintage UI.
+
+- [**Dell (1996)**](https://getdesign.md/dell-1996/design-md) - Catalog-era enterprise web. Literal black page frame, flat color-block "ribbon cards", chunky Helvetica-Black titles over Times Roman body, and hand-cut GIF stickers (NEW! bursts, award seals, beveled product photos).
+
 
 ## What's Inside Each DESIGN.md
 
-Every file follows the [Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/format/) with extended sections:
+Every file follows the [Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/specification/) with extended sections:
 
 | # | Section | What it captures |
 |---|---------|-----------------|
diff --git a/design-md/dell-1996/DESIGN.md b/design-md/dell-1996/DESIGN.md
new file mode 100644
index 0000000..09285a8
--- /dev/null
+++ b/design-md/dell-1996/DESIGN.md
@@ -0,0 +1,632 @@
+---
+version: alpha
+name: Dell 1996 Inspired
+description: 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" tinted in sage, salmon, periwinkle, sky, peach and lime, chunky Helvetica-Black display titles, Times Roman body copy, and an entire visual vocabulary of pre-Photoshop hand-cut GIF stickers (NEW! bursts, award seals, beveled product photos).
+
+colors:
+  primary: "#e91d2a"
+  on-primary: "#ffffff"
+  canvas: "#ffffff"
+  surface: "#ffffff"
+  ink: "#000000"
+  frame-ink: "#000000"
+  yellow-sticker: "#fcc20f"
+  purple-stripe: "#6a26a4"
+  link: "#0000ee"
+
+  # Ribbon-card tint family (one per product line)
+  tint-olive: "#8e8a25"
+  tint-sage: "#b3bd95"
+  tint-salmon: "#d77a7a"
+  tint-peach: "#e6915d"
+  tint-lime: "#c0d4a7"
+  tint-sky: "#9ab6c8"
+  tint-steel: "#a5b8c0"
+  tint-periwinkle: "#8c9ae0"
+
+typography:
+  display:
+    fontFamily: Arial Black
+    fontSize: 36px
+    fontWeight: 900
+    lineHeight: 1.0
+    letterSpacing: 0
+  heading-1:
+    fontFamily: Arial Black
+    fontSize: 24px
+    fontWeight: 900
+    lineHeight: 1.05
+    letterSpacing: 0
+  heading-2:
+    fontFamily: Helvetica
+    fontSize: 16px
+    fontWeight: 700
+    lineHeight: 1.2
+    letterSpacing: 0
+  heading-3:
+    fontFamily: Helvetica
+    fontSize: 14px
+    fontWeight: 700
+    lineHeight: 1.2
+    letterSpacing: 0
+  body:
+    fontFamily: Times New Roman
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 0
+  body-sm:
+    fontFamily: Times New Roman
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 0
+  caption:
+    fontFamily: Times New Roman
+    fontSize: 11px
+    fontWeight: 400
+    lineHeight: 1.35
+    letterSpacing: 0
+  button:
+    fontFamily: Helvetica
+    fontSize: 12px
+    fontWeight: 700
+    lineHeight: 1.0
+    letterSpacing: 0
+  link:
+    fontFamily: Times New Roman
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.4
+    letterSpacing: 0
+  ui-label:
+    fontFamily: Helvetica
+    fontSize: 12px
+    fontWeight: 700
+    lineHeight: 1.0
+    letterSpacing: 0
+
+rounded:
+  none: 0px
+  full: 9999px
+
+spacing:
+  xxs: 2px
+  xs: 4px
+  s: 6px
+  sm: 8px
+  m: 10px
+  md: 12px
+  lg: 16px
+  xl: 20px
+  xxl: 24px
+  section-sm: 32px
+  section: 40px
+  section-lg: 48px
+
+components:
+  # ─── Brand-native components ───
+  page-frame:
+    backgroundColor: "{colors.frame-ink}"
+    textColor: "{colors.canvas}"
+    rounded: "{rounded.none}"
+    padding: 8px
+
+  top-banner:
+    backgroundColor: "{colors.frame-ink}"
+    textColor: "{colors.canvas}"
+    typography: "{typography.heading-2}"
+    rounded: "{rounded.none}"
+    padding: 12px 16px
+
+  section-eyebrow-olive:
+    backgroundColor: "{colors.tint-olive}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display}"
+    rounded: "{rounded.none}"
+    padding: 24px 16px
+
+  section-eyebrow-salmon:
+    backgroundColor: "{colors.tint-salmon}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display}"
+    rounded: "{rounded.none}"
+    padding: 24px 16px
+
+  ribbon-card-title:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.heading-3}"
+    rounded: "{rounded.none}"
+    padding: 6px 12px
+
+  ribbon-card-body-sage:
+    backgroundColor: "{colors.tint-sage}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 12px 16px
+
+  ribbon-card-body-salmon:
+    backgroundColor: "{colors.tint-salmon}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 12px 16px
+
+  ribbon-card-body-peach:
+    backgroundColor: "{colors.tint-peach}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 12px 16px
+
+  ribbon-card-body-lime:
+    backgroundColor: "{colors.tint-lime}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 12px 16px
+
+  ribbon-card-body-sky:
+    backgroundColor: "{colors.tint-sky}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 12px 16px
+
+  ribbon-card-body-steel:
+    backgroundColor: "{colors.tint-steel}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 12px 16px
+
+  ribbon-card-body-periwinkle:
+    backgroundColor: "{colors.tint-periwinkle}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 12px 16px
+
+  cta-block-red:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 16px
+
+  phone-callout:
+    backgroundColor: "{colors.frame-ink}"
+    textColor: "{colors.primary}"
+    typography: "{typography.heading-2}"
+    rounded: "{rounded.none}"
+    padding: 4px 8px
+
+  buy-a-dell-sticker:
+    backgroundColor: "{colors.yellow-sticker}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.none}"
+    padding: 4px 8px
+
+  new-burst-sticker:
+    backgroundColor: "{colors.yellow-sticker}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.none}"
+    padding: 4px 8px
+
+  cert-seal:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.canvas}"
+    typography: "{typography.button}"
+    rounded: "{rounded.full}"
+    size: 64px
+
+  icon-label-nav:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.ui-label}"
+    rounded: "{rounded.none}"
+    padding: 8px
+
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 4px 6px
+
+  button-primary:
+    backgroundColor: "{colors.frame-ink}"
+    textColor: "{colors.on-primary}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.none}"
+    padding: 6px 16px
+
+  button-secondary:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.button}"
+    rounded: "{rounded.none}"
+    padding: 6px 16px
+
+  button-text-link:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.link}"
+    typography: "{typography.link}"
+    rounded: "{rounded.none}"
+
+  footer-band:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    typography: "{typography.body-sm}"
+    padding: 16px
+
+  # ─── Examples (illustrative, kit-mirror) — injected by derive-examples-block.mjs ───
+
+  # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───
+  ex-pricing-tier:
+    description: "Default Pricing tier card. Re-uses feature-card chrome with the base white surface."
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.frame-ink}"
+    rounded: "{rounded.none}"
+    padding: "{spacing.lg}"
+  ex-pricing-tier-featured:
+    description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)."
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.none}"
+    padding: "{spacing.lg}"
+  ex-product-selector:
+    description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.none}"
+    padding: "{spacing.lg}"
+  ex-cart-drawer:
+    description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.none}"
+    padding: "{spacing.lg}"
+    item-divider: "{colors.frame-ink}"
+  ex-app-shell-row:
+    description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator."
+    backgroundColor: "{colors.canvas}"
+    activeIndicator: "{colors.primary}"
+    rounded: "{rounded.none}"
+    padding: "{spacing.sm} {spacing.md}"
+  ex-data-table-cell:
+    description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm."
+    headerBackground: "{colors.surface}"
+    headerTypography: "{typography.caption}"
+    bodyTypography: "{typography.body-sm}"
+    cellPadding: "{spacing.s} {spacing.md}"
+    rowBorder: "{colors.frame-ink}"
+  ex-auth-form-card:
+    description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.none}"
+    padding: "{spacing.lg}"
+  ex-modal-card:
+    description: "Modal dialog surface — same chrome as feature-card with elevated shadow."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.none}"
+    padding: "{spacing.lg}"
+  ex-empty-state-card:
+    description: "Empty-state illustration frame."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.none}"
+    padding: "{spacing.xl}"
+    captionTypography: "{typography.body}"
+  ex-toast:
+    description: "Toast notification surface — feature-card shape + medium shadow."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.none}"
+    padding: "{spacing.md} {spacing.lg}"
+    typography: "{typography.body-sm}"
+
+---
+
+
+## Overview
+
+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
+
+## Colors
+
+### 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.
+
+## Typography
+
+### 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.
+
+## Layout
+
+### Spacing System
+
+- **Base unit**: 4 px (with 2 / 6 / 10 intermediates). 1996 page layout was driven by HTML table cell padding (`cellpadding="4"` / `cellspacing="0"`) rather than a designed scale.
+- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.s}` 6px · `{spacing.sm}` 8px · `{spacing.m}` 10px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 20px · `{spacing.xxl}` 24px · `{spacing.section-sm}` 32px · `{spacing.section}` 40px · `{spacing.section-lg}` 48px.
+- **Card interior padding**: `{spacing.md}` 12 px vertical / `{spacing.lg}` 16 px horizontal on ribbon-card bodies.
+- **Section vertical rhythm**: `{spacing.section}` 40 px between product-ribbon stacks; `{spacing.section-sm}` 32 px between the eyebrow color block and its first ribbon-card.
+
+### Grid & Container
+- Fixed-width table layout pinned around 760 px wide — the de facto 1996 standard targeting 800×600 monitors with a small scrollbar gutter.
+- Two-column outer structure: left rail (~28 %) carries the homepage icon-link grid + CTA red panel; right column (~72 %) carries the product ribbon stack.
+- No grid system in the modern sense — every section is its own `<table>` declaration with hard-coded column widths.
+
+### Whitespace Philosophy
+Tight by modern standards. Catalog density wins over editorial breath — every pixel inside the black frame is doing work (illustration, color block, headline, body). The compensating decompression happens *inside* each ribbon card: white title bar + tinted body block + product photo notch creates internal breathing room without enlarging the overall page.
+
+### Responsive Strategy
+
+#### Breakpoints
+| Name | Width | Key Changes |
+|---|---|---|
+| Period default | 800 × 600 | Fixed 760 px layout, designed for the era's standard monitor |
+| Modern desktop | 1280+ px | Layout sits centered with generous side gutters — emulates "magazine spread in the middle of the screen" |
+| Tablet | 768 px | Black frame compresses to 4 px; ribbon-cards stack at full width inside |
+| Mobile | < 480 px | Black frame to 2 px; two-column structure collapses to single column; left rail icon grid stacks above the right-column product stack |
+
+#### Touch Targets
+1996 had no notion of touch — the original designs assume mouse-only. Modern reproductions need to widen the icon-label nav targets to 44 × 44 px minimum at mobile (the 1996 icons sat at ~24 × 24 with 8 px label below, well under modern guidelines).
+
+#### Collapsing Strategy
+- At ≤ 768 px, the homepage's left-rail icon-link grid (Online Store / Service / Why Dell? / Government / Worldwide / Order Status / Company Info / U.S. Careers) collapses from a 2 × 4 grid to a single-column stack
+- Ribbon-card right-edge product photo notch becomes a top-aligned full-width image at mobile
+- The top banner's tagline ("BUILD YOUR OWN COMPUTER. ONLINE.") shrinks one type tier; the phone number wraps below the BUY-a-DELL sticker
+- Footer icon-label nav stays 4-up at all widths — the icons are small enough to survive
+
+#### Image Behavior
+Product photos are bitmap GIFs with hand-applied bevel shadows — they were authored at fixed pixel widths (typically 80–120 px wide). The right-edge notch effect was achieved by table-cell negative spacing. Modern reproductions should keep the bevel shadow effect (it's signature) but use SVG drop-shadow or CSS `filter: drop-shadow(2px 2px 0 #000)` to recreate it crisply at high-DPI.
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 — Flush | No shadow, no border | Body text, copyright row, footer band background |
+| 1 — Hairline | `1px solid {colors.frame-ink}` | Ribbon-card outer edge, table-cell dividers |
+| 2 — Frame | `8px solid {colors.frame-ink}` | The page-frame border around the entire viewport |
+| 3 — Bevel | Hard-edge 1 px highlight + 1 px shadow on GIF stickers and product photos | "BUY a DELL" yellow sticker, NEW! bursts, award seals, product photographs |
+
+There are **no soft shadows** in the 1996 design — every depth cue is either a hard 1 px border or a hand-painted bevel inside a GIF. Modern reproductions that need to feel period-accurate must resist the urge to add Material-style elevation or atmospheric drop shadows.
+
+### Decorative Depth
+Bevels and frames carry the entire depth vocabulary:
+- The **page frame** is the strongest depth cue — it tells the viewer "this is a contained document, not a continuous canvas."
+- **Bevels on stickers** (BUY a DELL, NEW!, PC Magazine Readers' Choice) push them forward off the page surface as if pinned on with thumbtacks.
+- **Product photographs** carry their own hand-painted bevel + drop-shadow, baked into the GIF itself.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.none}` | 0px | Universal default — buttons, cards, inputs, banners, page frame, ribbon-card bodies, eyebrow blocks |
+| `{rounded.full}` | 9999px | Circular award seals (PC Magazine Readers' Choice), the round "h" sticker on the HOME icon |
+
+The 1996 design has effectively **two** radius modes: square (everything) and round (decorative seal stickers). No 4 / 8 / 12 px subtle radius tier — that vocabulary belongs to the post-Bootstrap web.
+
+### Photography Geometry
+Product photos are rectangular GIFs with their own internal beveled "monitor" framing — they sit at native pixel dimensions, never scaled. Aspect ratios cluster around 4:3 (the era's standard CRT shape). Avatars don't exist on this site — staff photography was reserved for "About Dell" pages not captured in these snapshots.
+
+## Components
+
+> **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:
+1. **`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.
+2. **`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.
+3. **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.
+
+### Inputs & Buttons
+
+**`text-input`** — bordered HTML input. White fill, 1 px solid black border, Times Roman 14 inside.
+- Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid frame-ink, type `{typography.body}`, padding 4 × 6, no radius.
+- Used on the Search and "Configure & Buy" forms (not visible in these three captures but consistent with the era's HTML 3.2 form widgets).
+
+**`button-primary`** — black filled button with white Helvetica Bold uppercase label.
+- Background `{colors.frame-ink}`, text `{colors.on-primary}`, 1 px solid frame-ink, type `{typography.button}`, padding 6 × 16, no radius.
+
+**`button-secondary`** — white filled outlined button. Same chrome with inverted colours.
+- Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid frame-ink, type `{typography.button}`, padding 6 × 16, no radius.
+
+**`button-text-link`** — bare underlined anchor in classic-Mosaic blue.
+- Text `{colors.link}` #0000ee, type `{typography.link}` Times Roman 14, underline on default. No padding, no radius.
+
+### Footer
+
+**`footer-band`** — the bottom of every page: icon-label nav row, classic-blue Copyright link, "(Terms of Use)" parenthetical, browser-compatibility small print, and the Microsoft BackOffice / Internet Explorer logo banners.
+- Background `{colors.canvas}`, text `{colors.ink}`, 1 px top border in frame-ink, type `{typography.body-sm}`, padding 16 px.
+
+### Examples (illustrative)
+
+> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.
+
+**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with the base white surface.
+- Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`
+
+**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).
+- Properties: `backgroundColor`, `textColor`, `rounded`, `padding`
+
+**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).
+- Properties: `backgroundColor`, `rounded`, `padding`
+
+**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).
+- Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`
+
+**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.
+- Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`
+
+**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.
+- Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`
+
+**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.
+- Properties: `backgroundColor`, `rounded`, `padding`
+
+**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.
+- Properties: `backgroundColor`, `rounded`, `padding`
+
+**`ex-empty-state-card`** — Empty-state illustration frame.
+- Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`
+
+**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.
+- Properties: `backgroundColor`, `rounded`, `padding`, `typography`
+
+
+## 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.
diff --git a/design-md/dell-1996/README.md b/design-md/dell-1996/README.md
new file mode 100644
index 0000000..4b0c594
--- /dev/null
+++ b/design-md/dell-1996/README.md
@@ -0,0 +1,5 @@
+# Dell (1996) Inspired Design System Analysis
+
+Design system details have been moved to: https://getdesign.md/dell-1996/design-md
+
+You can also view previews, dark mode examples, and download options on getdesign.md.
diff --git a/design-md/hp/DESIGN.md b/design-md/hp/DESIGN.md
new file mode 100644
index 0000000..fa01675
--- /dev/null
+++ b/design-md/hp/DESIGN.md
@@ -0,0 +1,670 @@
+---
+version: alpha
+name: HP-design-analysis
+description: An inspired interpretation of HP's design language — a white-paper enterprise-consumer system anchored by HP Electric Blue (`#024ad8`) as the lone signal CTA, near-black ink (`#1a1a1a`) for headlines, geometric Forma-DJR sans throughout, and angular blue-chevron decorations that nod to the HP wordmark's slashes. Cards round at 8–16px, photos sit in soft 16px frames, and dark navy slabs anchor the customer-story and "how can we help" closing bands.
+
+colors:
+  primary: "#024ad8"
+  primary-bright: "#296ef9"
+  primary-deep: "#0e3191"
+  primary-soft: "#c9e0fc"
+  on-primary: "#ffffff"
+  ink: "#1a1a1a"
+  ink-deep: "#000000"
+  ink-soft: "#292929"
+  on-ink: "#ffffff"
+  canvas: "#ffffff"
+  paper: "#ffffff"
+  cloud: "#f7f7f7"
+  fog: "#e8e8e8"
+  steel: "#c2c2c2"
+  graphite: "#636363"
+  charcoal: "#3d3d3d"
+  hairline: "#e8e8e8"
+  hairline-strong: "#c2c2c2"
+  link: "#024ad8"
+  link-pressed: "#0e3191"
+  bloom-coral: "#ff5050"
+  bloom-rose: "#f9d4d2"
+  bloom-deep: "#b3262b"
+  bloom-wine: "#5a1313"
+  storm-mist: "#8ebdce"
+  storm-sea: "#7fadbe"
+  storm-deep: "#356373"
+  error: "#b3262b"
+
+typography:
+  display-xxl:
+    fontFamily: Forma DJR Micro
+    fontSize: 72px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: 0
+  display-xl:
+    fontFamily: Forma DJR Micro
+    fontSize: 56px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: 0
+  display-lg:
+    fontFamily: Forma DJR Micro
+    fontSize: 44px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: 0
+  display-md:
+    fontFamily: Forma DJR Micro
+    fontSize: 32px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: 0
+  display-sm:
+    fontFamily: Forma DJR Micro
+    fontSize: 24px
+    fontWeight: 500
+    lineHeight: 1.17
+    letterSpacing: 0
+  display-xs:
+    fontFamily: Forma DJR Micro
+    fontSize: 20px
+    fontWeight: 500
+    lineHeight: 1.0
+    letterSpacing: 0
+  body-lg:
+    fontFamily: Forma DJR Micro
+    fontSize: 18px
+    fontWeight: 400
+    lineHeight: 1.33
+    letterSpacing: 0
+  body-md:
+    fontFamily: Forma DJR Micro
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 1.38
+    letterSpacing: 0
+  body-emphasis:
+    fontFamily: Forma DJR Micro
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.38
+    letterSpacing: 0
+  caption-md:
+    fontFamily: Forma DJR Micro
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: 0
+  caption-sm:
+    fontFamily: Forma DJR Micro
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 1.33
+    letterSpacing: 0
+  caption-bold:
+    fontFamily: Forma DJR Micro
+    fontSize: 14px
+    fontWeight: 700
+    lineHeight: 1.3
+    letterSpacing: 0
+  link-md:
+    fontFamily: Forma DJR Micro
+    fontSize: 16px
+    fontWeight: 500
+    lineHeight: 1.38
+    letterSpacing: 0
+  button-md:
+    fontFamily: Forma DJR Micro
+    fontSize: 14px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0.7px
+    textTransform: uppercase
+  button-sm:
+    fontFamily: Forma DJR Micro
+    fontSize: 12.6px
+    fontWeight: 700
+    lineHeight: 1.0
+    letterSpacing: 0.126px
+  price-md:
+    fontFamily: Forma DJR Micro
+    fontSize: 24px
+    fontWeight: 500
+    lineHeight: 1.17
+    letterSpacing: 0
+
+rounded:
+  none: 0px
+  xs: 2px
+  sm: 3px
+  md: 4px
+  lg: 8px
+  xl: 16px
+  pill: 9999px
+  full: 9999px
+
+spacing:
+  xxs: 4px
+  xs: 8px
+  sm: 12px
+  md: 16px
+  lg: 20px
+  xl: 24px
+  xxl: 32px
+  section: 80px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 24px
+    height: 44px
+  button-primary-pressed:
+    backgroundColor: "{colors.primary-deep}"
+    textColor: "{colors.on-primary}"
+  button-primary-disabled:
+    backgroundColor: "{colors.steel}"
+    textColor: "{colors.on-primary}"
+  button-ink:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 24px
+    height: 44px
+  button-outline:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 24px
+    height: 44px
+  button-outline-ink:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 24px
+    height: 44px
+  button-text-link:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.primary}"
+    typography: "{typography.link-md}"
+    padding: 4px 0
+  badge-pill-ink:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 6px 12px
+  badge-pill-outline:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 6px 12px
+  badge-sale-coral:
+    backgroundColor: "{colors.bloom-coral}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.caption-bold}"
+    rounded: "{rounded.sm}"
+    padding: 4px 8px
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 16px
+    height: 44px
+  text-input-focused:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+  text-input-search:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 16px
+    height: 40px
+  card-product:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+    padding: 24px
+  card-product-feature:
+    backgroundColor: "{colors.cloud}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  card-pricing-tier:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+    padding: 24px
+  card-pricing-tier-featured:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+    padding: 24px
+  card-customer-story:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+    padding: 16px
+  card-article-tile:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+    padding: 16px
+  card-category-icon:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-emphasis}"
+    rounded: "{rounded.lg}"
+    padding: 16px
+  promo-strip-dark:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xl}"
+    padding: 48px
+  hero-promo-card:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.xl}"
+    padding: 32px
+  utility-strip:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.caption-md}"
+    height: 36px
+    padding: 0 24px
+  nav-bar-top:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    height: 64px
+    padding: 0 32px
+  nav-link:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    padding: 8px 16px
+  category-tab:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-emphasis}"
+    rounded: "{rounded.pill}"
+    padding: 8px 20px
+  category-tab-active:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.pill}"
+  faq-row:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-emphasis}"
+    rounded: "{rounded.lg}"
+    padding: 20px 24px
+  chevron-decoration:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.none}"
+  help-band-dark:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-md}"
+    padding: 64px 32px
+  footer-dark:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-md}"
+    padding: 64px 32px
+---
+
+## Overview
+
+HP reads like a long-running consumer-electronics catalog crossed with an enterprise-software product page. The whole system sits on **pure white** (`{colors.canvas}` — `#ffffff`) with thin gray panels (`{colors.cloud}` / `{colors.fog}`) for alternating section bands. There is one chromatic action color — **HP Electric Blue** (`{colors.primary}` — `#024ad8`) — and one ink color (`{colors.ink}` — `#1a1a1a`); together they do ninety percent of the work. Type is a single family across every surface: **Forma DJR Micro**, HP's bespoke geometric grotesque, set at weight 500 for headlines and 400 for body — clean, neutral, slightly mechanical.
+
+The signature gesture is **angular blue chevrons** — sharp 0-radius slashes derived from the HP wordmark's pair of parallel slashes — that anchor the homepage hero, the laptop-page hero, and the printer pricing page. They appear on the left and right edges of the primary banner card, layered behind product photography. Outside those decorative slashes, every other surface is rectilinear with **soft 8–16px corners** on cards and a 4px corner on buttons.
+
+The system breaks into three voice modes: a **white commercial body** for product browsing (cards, category icons, pricing tiers); a **dark navy slab** (`{colors.ink}` near-black) for testimonial bands, the closing "How can we help?" footer-prelude, and the page footer; and a **light fog band** (`{colors.cloud}` / `{colors.fog}`) for utility sections like comparison strips and FAQ accordions. The blue accent appears only on filled CTAs, link text, the chevron decorations, and the active price-stamp on a featured tier — never as a section background.
+
+**Key Characteristics:**
+- Pure white canvas (`{colors.canvas}`) with deep ink (`{colors.ink}`) running every body surface; light fog bands (`{colors.cloud}`, `{colors.fog}`) alternate for section rhythm
+- HP Electric Blue (`{colors.primary}`) is the lone CTA fill and link color; it appears at most twice per viewport
+- Bespoke Forma DJR Micro across every surface — display, body, button, caption — at weights 400 / 500 / 600 / 700
+- Cards round at `{rounded.xl}` (16px) for product/pricing tiles; buttons sit at `{rounded.md}` (4px) with capitalize labels
+- Geometric blue chevrons (`{colors.primary}` rectangles cut at 45°) frame hero photography and reinforce the wordmark
+- Dark-navy slabs (`{colors.ink}`) close every page rhythm — testimonial bands, "how can we help?" prelude, and the footer
+- Section rhythm: utility-strip → top nav → white body → cloud-band → ink slab → cloud-band → ink footer
+
+## Colors
+
+> **No Interaction sub-section.** Hover colors are silently filtered. Allowed sub-sections: Brand & Accent, Surface, Text, Semantic.
+
+### Brand & Accent
+- **HP Electric Blue** (`{colors.primary}` — `#024ad8`): the system's lone signal — primary CTA fill, link color, chevron-decoration fill, active sub-nav indicator. Reserved.
+- **Bright Blue** (`{colors.primary-bright}` — `#296ef9`): a slightly lighter variant used inside dark slabs (testimonial-card buttons, dark-band CTA links) where the deeper blue would muddy.
+- **Deep Navy** (`{colors.primary-deep}` — `#0e3191`): pressed state for the primary CTA and the visited-link color.
+- **Soft Blue** (`{colors.primary-soft}` — `#c9e0fc`): pale-blue surface used inside customer-story cards and selection chips.
+
+### Surface
+- **Canvas** (`{colors.canvas}` — `#ffffff`): the universal page background. White, full opacity.
+- **Paper** (`{colors.paper}` — `#ffffff`): card surfaces — same white as canvas, with hairline borders or shadows providing the lift.
+- **Cloud** (`{colors.cloud}` — `#f7f7f7`): the lightest gray section band, used for alternating-row backgrounds and product-feature card groups.
+- **Fog** (`{colors.fog}` — `#e8e8e8`): a slightly darker gray surface band, used for FAQ outer panels and the "Trending laptops" header strip.
+- **Steel** (`{colors.steel}` — `#c2c2c2`): hairline border used on outlined elements with stronger emphasis (focus states, active filter).
+- **Bloom Coral / Bloom Rose** (`{colors.bloom-coral}` / `{colors.bloom-rose}` — `#ff5050`, `#f9d4d2`): the "Get 25% off" sale-tag chip + soft pink lifestyle accent on the sale hero.
+- **Storm Mist / Sea / Deep** (`{colors.storm-mist}`, `{colors.storm-sea}`, `{colors.storm-deep}` — `#8ebdce`, `#7fadbe`, `#356373`): the teal-storm tones reserved for the printer-plan illustration backdrop and supporting infographic accents.
+
+### Text
+- **Ink** (`{colors.ink}` — `#1a1a1a`): the universal text color on white surfaces — headlines, body, button labels, navigation.
+- **Ink Deep** (`{colors.ink-deep}` — `#000000`): pure black used for the wordmark and 1px hairline strokes around badge outlines.
+- **Ink Soft** (`{colors.ink-soft}` — `#292929`): an alternate near-black used inside dark-navy slabs as a subtle textural shift.
+- **On Ink** (`{colors.on-ink}` — `#ffffff`): pure white used for headline and body text on every dark-navy slab.
+- **Charcoal** (`{colors.charcoal}` — `#3d3d3d`): muted body color on white surfaces — secondary descriptions, fine-print disclaimers.
+- **Graphite** (`{colors.graphite}` — `#636363`): smaller-print color, used for legal lines and timestamp metadata.
+
+### Semantic
+- **Bloom Deep** (`{colors.bloom-deep}` — `#b3262b`) + **Bloom Wine** (`{colors.bloom-wine}` — `#5a1313`): error and discount-emphasis colors. The deep brick reads as "sale" or "destructive" depending on placement.
+- **Storm Deep** (`{colors.storm-deep}` — `#356373`): used as a neutral status accent (e.g., printer-plan tier "Versatile" tier color).
+
+## Typography
+
+### Font Family
+
+The voice is **single-family**: Forma DJR Micro (HP's bespoke geometric grotesque, fallback Arial) across every surface — display, body, button, caption. Forma DJR Micro is a wide, slightly rounded grotesque designed at small optical sizes to stay legible at UI-chrome scale. HP runs it at weight 400 for body, 500 for display headlines, 600/700 for emphasis and button labels.
+
+The 16/14/12-px caption tier carries the catalog metadata — model numbers, spec rows, fine print — at weight 400 with a 1.4–1.5 line-height. Button labels lift to weight 600/700 with positive 0.5–1.1px letter-spacing and uppercase transform — the only place the system tracks letters.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.display-xxl}` | 72px | 500 | 1.0 | 0 | Hero headline (homepage, laptop hub) |
+| `{typography.display-xl}` | 56px | 500 | 1.0 | 0 | Section headlines on landing pages |
+| `{typography.display-lg}` | 44px | 500 | 1.0 | 0 | Sub-section headlines on shop pages |
+| `{typography.display-md}` | 32px | 500 | 1.0 | 0 | Promo strip headlines, FAQ section headers |
+| `{typography.display-sm}` | 24px | 500 | 1.17 | 0 | Card titles, pricing-tier names |
+| `{typography.display-xs}` | 20px | 500 | 1.0 | 0 | Inline list headers, accordion labels |
+| `{typography.body-lg}` | 18px | 400 | 1.33 | 0 | Lead paragraphs |
+| `{typography.body-md}` | 16px | 400 | 1.38 | 0 | Default body |
+| `{typography.body-emphasis}` | 16px | 500 | 1.38 | 0 | Bolded run-in copy |
+| `{typography.caption-md}` | 14px | 400 | 1.5 | 0 | Specs, metadata, captions |
+| `{typography.caption-bold}` | 14px | 700 | 1.3 | 0 | Sale tags, in-card highlights |
+| `{typography.caption-sm}` | 12px | 400 | 1.33 | 0 | Footnotes, legal lines |
+| `{typography.link-md}` | 16px | 500 | 1.38 | 0 | Inline link emphasis |
+| `{typography.button-md}` | 14px | 600 | 1.4 | 0.7px | Primary/secondary button labels (uppercase) |
+| `{typography.button-sm}` | 12.6px | 700 | 1.0 | 0.126px | Compact button labels in tight cells |
+| `{typography.price-md}` | 24px | 500 | 1.17 | 0 | Tier and product price stamps |
+
+### Principles
+
+The typographic decision worth flagging: HP runs **weight 500 for every display size**, including the largest 72px hero headline. Most editorial systems jump to 600/700 at hero scale; HP doesn't. The result feels open and approachable rather than commanding — appropriate for a brand that sells across consumer, SMB, and enterprise audiences in the same catalog.
+
+Forma DJR Micro's rounded-grotesque shapes do most of the warmth. There's no italic in the system except inside legal disclaimers; emphasis is carried by weight (500 → body-emphasis, 700 → caption-bold) instead.
+
+### Note on Font Substitutes
+
+Forma DJR Micro is proprietary (Commercial Type / Mark Caneso). Closest open-source substitutes:
+- **Inter** at weights 400 / 500 / 600 / 700 — slightly narrower than Forma DJR Micro; bump font-size by ~3% to compensate
+- **Manrope** at weights 400 / 500 / 600 / 700 — closer in proportion, gentler curves; use directly with no metric adjustment
+- **Roboto** at weights 400 / 500 / 700 — flatter character; use as last-resort fallback
+
+When swapping, set body line-height to 1.4 and display line-height to 1.0 explicitly — the Forma DJR Micro line-height numbers are tight, and most substitutes default looser.
+
+## Layout
+
+### Spacing System
+
+- **Base unit**: 8px. Smaller half-step at 4px. The scale is gentle — most card padding lands at 16px or 24px; section gap at 80px.
+- **Tokens (front matter)**: `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.section}` 80px
+- **Section padding**: `{spacing.section}` (80px) vertical between major bands on desktop; collapses to ~48px on mobile.
+- **Card internal padding**: `{spacing.xl}` (24px) for product cards; `{spacing.xxl}` (32px) for promo strips and feature cards; `{spacing.md}` (16px) for compact article tiles.
+- **Gutter**: `{spacing.xl}` (24px) between grid columns at desktop; `{spacing.md}` (16px) on tablet/mobile.
+
+The 80px section gap is the universal rhythm constant — it appears between every major homepage band, between the hero and the comparison table on the printer-plan page, and between feature rows on the laptop-shop page.
+
+### Grid & Container
+
+- **Desktop max-width**: 1366px content container with full-bleed-on-canvas section backgrounds.
+- **Hero**: a single full-width photo card (homepage and laptop-hub hero) with the headline overlay positioned upper-left or upper-right.
+- **Product family grid**: 4 columns at >1200px, 3 at 1024–1199px, 2 at 768–1023px, 1 below 768px.
+- **Pricing tiers**: 4 columns at >1024px, 2x2 grid at 768–1023px, single-column accordion below 768px.
+- **Footer**: 5-column link grid at >1024px, collapsing to 2-column then accordion on mobile.
+
+### Whitespace Philosophy
+
+Whitespace is **commercial-clean** — generous around hero photography, tight around catalog spec rows. Product cards leave breathing room above and below the photo (≥32px) so the laptop or printer reads as a hero shot rather than a thumbnail. The fine-print disclaimer regions (legal, footnote rows) tighten line-height to 1.3 and shrink type to 11–12px so the bulk of fine print stays compact.
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 — Flat | No border, no shadow. | Section bands (white, cloud, fog), full-bleed photo heroes |
+| 1 — Hairline | 1px solid `{colors.hairline}` (`#e8e8e8`) border, no shadow. | Outlined buttons, comparison-table cells, FAQ accordion outers |
+| 2 — Soft Lift | `0 2px 8px rgba(26, 26, 26, 0.08)`. | Product cards, pricing-tier columns, customer-story tiles |
+| 3 — Floating Modal | `0 8px 24px rgba(26, 26, 26, 0.12)`. | Add-to-cart drawer, mobile-nav sheet, image zoom modal |
+
+The system is mostly flat — depth is communicated by **color contrast** (cloud-band vs. white card on the same band) rather than shadow elevation. The Soft Lift level is the workhorse for the catalog — every product tile and pricing column gets it; nothing else does. Modal-floating is rare and reserved for transient overlays.
+
+### Decorative Depth
+
+The system's most distinctive depth gesture is the **HP blue chevron pair** — two angular `{colors.primary}` slashes (no radius, no shadow) that sit on the left and right of the homepage hero card and the laptop-shop hero. They're not decorative noise; they're a literal echo of the HP wordmark's two parallel slashes, scaled up to architectural size. Treat them as a brand artifact, not a generic geometric flourish.
+
+Photography on the homepage and laptop-shop pages frames product imagery inside `{rounded.xl}` (16px) containers with a soft 1px hairline. Lifestyle photography (testimonials, "How HP works for X") sits full-bleed inside dark-navy slabs without rounding.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.none}` | 0px | Hero chevron decorations, full-bleed photo heroes, marquee strips |
+| `{rounded.xs}` | 2px | Secondary chip backgrounds, sale-tag pills |
+| `{rounded.sm}` | 3px | Default secondary CTA radius (small touch zones) |
+| `{rounded.md}` | 4px | Primary buttons, secondary buttons, text inputs |
+| `{rounded.lg}` | 8px | Badge pills, category-icon cards, FAQ row containers |
+| `{rounded.xl}` | 16px | Product cards, pricing tiers, customer-story tiles, photo frames |
+| `{rounded.pill}` | 9999px | Category sub-nav tabs, search-pill input, filter chips |
+
+The system maintains a clear two-tier philosophy: **buttons stay sharp** (4px, almost rectilinear) while **cards and photo frames stay soft** (16px). This split is the visual signature — sharp interactive elements against softer container surfaces.
+
+### Photography Geometry
+
+Hero photography sits in `{rounded.xl}` (16px) frames with no border. Product family thumbnails inside the laptop-grid are 1:1 (square) on a `{colors.canvas}` background, padded so the laptop is shown at ~70% of the frame. Customer-story photography uses 16:9 inside the same `{rounded.xl}` frame. There are no full-bleed circular avatars; testimonial avatars are 4px-rounded squares.
+
+## Components
+
+> **No hover states documented.** Every component spec below documents only Default and Active/Pressed states. Variants live as separate front-matter entries.
+
+### Buttons
+
+**`button-primary`** — the lone HP Electric Blue CTA
+- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button-md}` (uppercase, 0.7px tracking), padding `{spacing.sm} {spacing.xl}` (12 × 24), height 44px, rounded `{rounded.md}`
+- Pressed state `button-primary-pressed` — background `{colors.primary-deep}`, same text
+- Disabled state `button-primary-disabled` — background `{colors.steel}`, white text
+- Used for: "Buy now", "Shop now", "Get a printer", primary form submit
+
+**`button-ink`** — black filled CTA
+- Background `{colors.ink}`, text `{colors.on-primary}`, padding `{spacing.sm} {spacing.xl}`, height 44px, rounded `{rounded.md}`, type `{typography.button-md}`
+- Used for: "Buy now" on dark photo overlays, secondary primary actions where the blue would clash with imagery
+
+**`button-outline`** — blue-text outlined CTA
+- Background `{colors.canvas}`, text `{colors.primary}`, 1px `{colors.primary}` border, padding `{spacing.sm} {spacing.xl}`, height 44px, rounded `{rounded.md}`
+- Used for: "Compare", "Customize", "Learn more" — secondary actions on white surfaces
+
+**`button-outline-ink`** — black-text outlined CTA
+- Background `{colors.canvas}`, text `{colors.ink}`, 1px `{colors.ink}` border, padding `{spacing.sm} {spacing.xl}`, height 44px, rounded `{rounded.md}`
+- Used for: "View" buttons inside product family card grids — neutral against the blue primary
+
+**`button-text-link`** — inline blue link with underline
+- Background `{colors.canvas}`, text `{colors.primary}`, type `{typography.link-md}`, padding `{spacing.xxs} 0`
+- Used for: "See details", "Read more" inside cards and disclaimer rows
+
+### Cards & Containers
+
+**`card-product`** — the workhorse product tile
+- Background `{colors.canvas}`, rounded `{rounded.xl}` (16px), padding `{spacing.xl}` (24px), Soft Lift shadow
+- Layout: hero photo (1:1 ratio) on top, title in `{typography.display-xs}`, spec rows in `{typography.caption-md}`, price in `{typography.price-md}`, CTA pinned to bottom
+- Used for: laptop catalog cards, desktop catalog cards
+
+**`card-product-feature`** — full-row feature card with photo + copy
+- Background `{colors.cloud}`, rounded `{rounded.xl}`, padding `{spacing.xxl}` (32px)
+- Layout: photo on the left (50% width), copy on the right with section eyebrow + title + body + CTA pair
+- Used for: "Trending laptops" feature rows, "Shop these must haves"
+
+**`card-pricing-tier`** + **`card-pricing-tier-featured`**
+- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, Soft Lift shadow
+- Tier name in `{typography.display-sm}`, monthly price in `{typography.display-md}` with `{typography.caption-md}` cadence, page count caption, full feature list, primary CTA
+- Featured tier carries `{colors.primary}` text accent on the price-stamp + a `{colors.primary}` thin top border instead of a colored card background — never inverted to dark
+
+**`card-customer-story`** — the three-up testimonial tile
+- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.md}` (16px), Soft Lift shadow
+- 16:9 photo at top in `{rounded.xl}` frame, quote excerpt in `{typography.body-md}`, attribution row at the bottom
+- Used in the "See what our customers say" homepage section
+
+**`card-article-tile`** — the four-up "Latest from HP" tile
+- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.md}`, Soft Lift shadow
+- 16:9 thumbnail at top, date eyebrow in `{typography.caption-sm}`, title in `{typography.body-emphasis}`, "Read more" link
+
+**`card-category-icon`** — the small icon-and-label card in the homepage "Our Products" row
+- Background `{colors.canvas}`, rounded `{rounded.lg}` (8px), padding `{spacing.md}`
+- 48px icon at top, label in `{typography.body-emphasis}` below
+- Used for: Laptops, Desktops, Printers, Computer Tools, Accessories, Enterprise Solutions
+
+**`hero-promo-card`** — the homepage hero card with chevron decorations
+- Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl}` (32px)
+- Photography occupies left half; copy block (eyebrow + headline + price stamp + CTA pair) occupies right half
+- Flanked by `chevron-decoration` blue slashes outside the card's bounding box on left and right edges
+
+**`promo-strip-dark`** — the inline dark navy promo block
+- Background `{colors.ink}`, text `{colors.on-ink}`, rounded `{rounded.xl}`, padding `{spacing.xxl} 48px`
+- Used for: "When did work start getting in the way of work?" mid-page promo, the SMB testimonial slab
+
+### Inputs & Forms
+
+**`text-input`** + **`text-input-focused`**
+- Background `{colors.canvas}`, text `{colors.ink}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px
+- 1px `{colors.steel}` border in default; gains 1px `{colors.ink}` border on focus (no halo)
+
+**`text-input-search`** — pill search in the top nav
+- Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 40px, 1px `{colors.steel}` border, magnifying-glass icon at right
+
+**`badge-pill-ink`** — filled tag pill
+- Background `{colors.ink}`, text `{colors.on-primary}`, rounded `{rounded.lg}`, padding 6px 12px, type `{typography.body-md}`
+- Used inline next to product titles to mark "New" or featured indicators
+
+**`badge-pill-outline`** — outlined tag pill
+- Background `{colors.canvas}`, text `{colors.ink}`, 1px `{colors.ink}` border, rounded `{rounded.lg}`, padding 6px 12px
+
+**`badge-sale-coral`** — the sale price-stamp
+- Background `{colors.bloom-coral}`, text `{colors.on-primary}`, rounded `{rounded.sm}`, padding `{spacing.xxs} {spacing.xs}`, type `{typography.caption-bold}`
+- Used for: "Save $200", "25% off" overlay tags on hero promo cards
+
+### Navigation
+
+**`utility-strip`** — the top-of-page utility bar
+- Background `{colors.ink}`, text `{colors.on-primary}`, height 36px, padding 0 {spacing.xl}, type `{typography.caption-md}`
+- Holds: country/locale picker, "For Business / For Home" toggle, "Sign in" link, cart link
+
+**`nav-bar-top`** — desktop top nav (sits below utility strip)
+- Background `{colors.canvas}`, height 64px, padding 0 32px
+- Layout: HP wordmark logo flush left → middle category list (Laptops / Desktops / Printers / Accessories / Solutions / Support) → right slot with Search field, Sign-in link, Cart icon
+- 1px `{colors.hairline}` bottom border separates nav from page
+
+**`nav-link`**
+- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.xs} {spacing.md}`
+- Active page draws a 2px `{colors.primary}` underline below the text baseline
+
+**Top Nav (Mobile)**
+- Same height, hamburger icon replaces the middle category list, Search and Cart stay visible
+- Drawer expands as a full-canvas sheet with `{typography.body-lg}` link list and a sticky Sign-in CTA at bottom
+
+**`category-tab`** + **`category-tab-active`** — the pill sub-nav
+- Default: background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-emphasis}`, rounded `{rounded.pill}`, padding `{spacing.xs} {spacing.lg}`
+- Active: background `{colors.ink}`, text `{colors.on-primary}`, same rounding
+- Used on the laptop-shop page for "All / Trending / On Sale" filtering, and on the homepage "How can we help?" closing band
+
+### Signature Components
+
+**`chevron-decoration`** — the geometric blue slash motif
+- Background `{colors.primary}`, rounded `{rounded.none}`, no shadow
+- Renders as a sharp parallelogram cut at ~60° angle, sized to the height of the hero card it flanks
+- Reserved for hero bands and full-page banners — never decorative noise inside cards
+
+**`faq-row`** — the accordion row on the printer-plan FAQ
+- Background `{colors.canvas}`, rounded `{rounded.lg}`, padding `{spacing.lg} {spacing.xl}`, type `{typography.body-emphasis}`
+- 1px `{colors.hairline}` divider between rows; chevron-down icon on the right collapsed, chevron-up when expanded
+- Body answer renders inside the same row container in `{typography.body-md}` after expansion
+
+**`help-band-dark`** — the closing "How can we help?" prelude band
+- Background `{colors.ink}`, text `{colors.on-primary}`, padding 64px {spacing.xl}
+- Layout: large lifestyle photograph as the band background (low-opacity) with chip-style category tabs centered: Browse Topics / Live Chat / Contact / Diagnose / Order Status
+
+**`footer-dark`**
+- Background `{colors.ink}`, text `{colors.on-primary}`, type `{typography.body-md}`, padding 64px {spacing.xl}
+- 5-column link grid (Company / Shop / Support / Resources / Connect) with `{typography.body-emphasis}` headers and `{typography.caption-md}` link rows
+- Bottom strip carries social icons, language picker, and legal lines in `{typography.caption-sm}` muted to `{colors.steel}`
+
+## Do's and Don'ts
+
+### Do
+- Reserve `{colors.primary}` for the primary CTA, link color, and `chevron-decoration` motif — at most twice per viewport
+- Set every headline in Forma DJR Micro at weight 500 with line-height 1.0 — resist the urge to bump weight at hero scale
+- Use `{rounded.xl}` (16px) for cards and photo frames; `{rounded.md}` (4px) for buttons and inputs — keep the two-tier split sharp
+- Pair white `{colors.canvas}` body bands with `{colors.cloud}` (`#f7f7f7`) alternating bands; let the gray do the breathing
+- Close every page rhythm with a dark-navy `{colors.ink}` slab — the "How can we help?" prelude + footer
+- Set button labels in uppercase with `{typography.button-md}` (0.7px tracking) — the only place the system tracks letters
+- Use Soft Lift shadow exclusively for product cards and pricing tiers — leave section bands flat
+- Frame product photography inside `{rounded.xl}` containers; never use full-bleed circular masks
+
+### Don't
+- Don't introduce secondary saturated colors outside `{colors.primary}` family + the `bloom-coral` sale-tag and `storm` printer-plan accents
+- Don't apply heavy material shadows — depth is via color contrast (cloud vs. white) and Soft Lift only
+- Don't round buttons above `{rounded.md}` (4px); a soft 8px+ button reads as a different brand
+- Don't run Forma DJR Micro below 12px — small caption at 11px is the floor
+- Don't use the chevron decoration as inline noise; it is a hero-only architectural element tied to the wordmark
+- Don't drop ink text opacity to create hierarchy — switch surface or shift to `{colors.charcoal}` / `{colors.graphite}` instead
+- Don't replace the HP wordmark with a generic sans lockup; the wordmark is a custom mark with its own ratio
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 480px | Single-column stack; hamburger nav; section padding drops to ~48px; hero serif scales to ~36px |
+| Mobile-Large | 480–767px | Same column count; hero scales to ~44px; pricing tiers stack vertically |
+| Tablet | 768–1023px | 2-column product grid; pricing 2x2; nav still full text labels |
+| Desktop | 1024–1279px | 3-column product grid; 4-column pricing; full nav |
+| Desktop-Large | ≥ 1280px | 4-column product grid; 1366px content max-width with full-bleed bands |
+
+### Touch Targets
+
+Every interactive element clears 44×44px on mobile. `button-primary` at 44px height + 24px horizontal padding meets WCAG-AAA touch target. `category-tab` at 8px 20px padding bumps to 12px 24px on touch screens. Nav-link tap areas extend invisibly beyond the text run to the full 44px row height. Sticky cart/sign-in icons in the top nav use 44×44 invisible hit boxes around their visible 24×24 glyph.
+
+### Collapsing Strategy
+
+- **Utility strip**: stays visible on every breakpoint; dropdowns collapse into a single "Account" icon below 768px
+- **Top nav**: middle category list collapses into a hamburger drawer below 1024px; the right-side Search + Sign-in + Cart stay visible
+- **Hero**: stays single-column at every breakpoint; chevron decorations shrink to ~60% size on tablet and disappear entirely on mobile
+- **Product family grid**: 4 → 3 → 2 → 1 column as breakpoints shrink; cards keep `{rounded.xl}` corners at every size
+- **Pricing comparison table**: 4-column grid on desktop collapses to 2x2 on tablet, then stacks into individual accordion-style cards on mobile
+- **Footer**: 5-column link grid → 2-column tablet → single-column accordion on mobile; HP wordmark stays flush left
+
+### Image Behavior
+
+Hero photography uses `{rounded.xl}` containers at every breakpoint. The chevron decorations vanish on mobile; the underlying photo card centers in the viewport. Lifestyle photography in the testimonial and "how-can-we-help" bands maintains 16:9 ratio with horizontal cropping rather than letterboxing on mobile. There are no art-direction crop swaps between desktop and mobile — the same image is used at every size.
+
+## Iteration Guide
+
+1. Focus on ONE component at a time; resist refactoring an entire section in one pass
+2. Reference component names and tokens directly (`{colors.primary}`, `{typography.display-xxl}`, `{rounded.xl}`, `card-product`) — do not paraphrase to hex/px in prose
+3. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically
+4. Add new variants as separate component entries (`-pressed`, `-disabled`, `-focused`); never bury state inside prose
+5. Default body to `{typography.body-md}`; reach for `{typography.body-emphasis}` for run-in bolds; keep display sizes for true heading roles
+6. Keep `{colors.primary}` scarce — at most two flame elements per viewport (one CTA + one chevron decoration). Three flame items in one viewport is over-saturation
+7. When introducing a new section band, choose from `{colors.canvas}` / `{colors.cloud}` / `{colors.fog}` / `{colors.ink}` — six pre-defined surface modes is the entire surface vocabulary
diff --git a/design-md/hp/README.md b/design-md/hp/README.md
new file mode 100644
index 0000000..b4269e2
--- /dev/null
+++ b/design-md/hp/README.md
@@ -0,0 +1,5 @@
+# HP Inspired Design System Analysis
+
+Design system details have been moved to: https://getdesign.md/hp/design-md
+
+You can also view previews, dark mode examples, and download options on getdesign.md.